Files
logseq/src/main/frontend/extensions/pdf/pdf.css
Charlie 6751e28c30 feat(pdf): add toggle option for the feature of auto opening the highlight context menu from new text selection (#10390)
* enhance(pdf): add auto open context menu option for new highlight selection
* refactor(pdf): improve code readability
* chore(pdf): i18n
2023-10-24 22:20:22 +08:00

1048 lines
19 KiB
CSS

:root {
--ph-highlight-color-blue: var(--color-blue-300);
--ph-highlight-color-green: var(--color-green-300);
--ph-highlight-color-red: var(--color-red-300);
--ph-highlight-color-purple: var(--color-purple-300);
--ph-highlight-color-yellow: var(--color-yellow-300);
--ph-link-color: #106ba3;
--ph-highlight-scroll-into-color: rgba(255, 75, 93, 0.67);
--ph-view-container-width: 42vw;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.extensions__pdf {
&-container {
display: flex;
*[data-color=yellow] {
background-color: var(--ph-highlight-color-yellow);
border-color: var(--ph-highlight-color-yellow);
}
*[data-color=blue] {
background-color: var(--ph-highlight-color-blue);
border-color: var(--ph-highlight-color-blue);
}
*[data-color=green] {
background-color: var(--ph-highlight-color-green);
border-color: var(--ph-highlight-color-green);
}
*[data-color=red] {
background-color: var(--ph-highlight-color-red);
border-color: var(--ph-highlight-color-red);
}
*[data-color=purple] {
background-color: var(--ph-highlight-color-purple);
border-color: var(--ph-highlight-color-purple);
}
}
&-loader {
position: relative;
}
&-header {
display: flex;
justify-content: flex-end;
position: absolute;
top: 0;
right: 10px; /* Allows clicking on the scrollbar */
width: calc(100% - 10px);
padding: 8px 20px;
z-index: 5;
-webkit-app-region: drag;
}
&-toolbar {
-webkit-app-region: no-drag;
> .inner {
display: flex;
align-items: center;
justify-content: flex-end;
> .r {
a.button {
user-select: none;
display: flex;
align-items: center;
margin-left: 8px;
margin-right: 8px;
padding: 4px 2px;
color: var(--ls-icon-color);
background-color: transparent;
transition: none;
word-break: normal;
&.is-active {
opacity: 1;
border-bottom: 2px solid #969494;
border-radius: 0;
}
&:active {
opacity: .6;
}
}
}
.pager {
white-space: nowrap;
> .nu {
padding-right: 4px;
input {
user-select: inherit;
width: 35px;
text-align: right;
padding-right: 4px;
padding-left: 2px;
height: 18px;
border: none;
background: transparent;
font-size: 15px;
&.is-long {
font-size: 12px;
}
}
}
> .ct {
.button {
margin: 0;
&:last-child {
padding-right: 3px;
}
}
}
}
}
}
&-outline {
position: absolute;
right: 15px;
> section {
white-space: pre-wrap;
max-height: 80vh;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 12px;
overflow: auto;
color: #565656;
> .extensions__pdf-outline-item > .inner > a {
font-weight: bold;
}
}
&-item {
&.has-children {
> .inner > a > i.arrow {
opacity: 1;
}
}
&.is-expand {
> .inner > a > i.arrow svg {
transform: rotate(90deg) translateX(2px);
}
}
> .inner {
> a {
color: #565656;
font-size: 11px;
text-decoration: none;
font-weight: normal;
display: flex;
align-items: center;
padding: 6px 5px;
user-select: none;
border-radius: 4px;
cursor: default;
margin-right: 10px;
transition: none;
> i {
opacity: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
svg {
color: #565656;
transform: scale(.8);
transition: .3s transform;
}
}
&:hover {
color: var(--ph-link-color);
}
&:active, &:focus {
background-color: var(--ph-link-color);
color: white;
> i {
svg {
color: #e3e3e3;
}
}
}
}
}
> .children {
padding-left: 12px;
}
}
&-tabs {
@apply flex justify-center py-2.5 space-x-1;
border-bottom: 1px solid #d9d9d9;
> .inner {
display: flex;
border: 1px solid #d5d5d5;
border-radius: 4px;
}
button {
font-size: 12px;
padding: 5px 6px;
line-height: 1;
border: none;
min-width: 90px;
border-radius: 3px;
color: black;
&:hover {
border: none;
opacity: .8;
color: black;
border-radius: 3px;
}
&:active {
opacity: 1;
background-color: #c5c5c5;
}
&.active {
background-color: #c5c5c5;
}
}
}
&-panels {
max-height: 80vh;
overflow-y: auto;
padding: 5px 0 5px 10px;
}
&-wrap.hls-popup-overlay {
right: -6px;
left: unset;
bottom: unset;
height: auto;
width: auto;
}
}
&-settings {
&-inner.hls-popup-box {
position: absolute;
right: 375px;
width: 235px;
padding: 15px 10px;
}
&-item {
display: flex;
color: rgb(115, 115, 115);
&.theme-picker {
justify-content: center;
align-items: center;
> button {
border-radius: 50%;
background-color: white;
width: 30px;
height: 30px;
overflow: hidden;
margin: 0 8px;
border: 1px solid #c7c7c7;
font-size: 0;
&:hover {
opacity: .8;
border-color: #a3a3a3;
}
&.warm {
background-color: #f9efdb;
}
&.dark {
background-color: #0a4251;
svg {
color: white;
}
}
}
}
&.toggle-input {
align-items: center;
justify-content: space-between;
font-size: 11px;
padding: 0 9px;
padding-top: 12px;
margin-top: 13px;
opacity: 0.8;
border-top: 1px solid #ccc;
&.is-between {
padding-top: 0;
border-top: none;
}
}
}
}
&-finder {
&-wrap.hls-popup-overlay {
right: -6px;
left: unset;
bottom: unset;
height: auto;
width: auto;
}
&.hls-popup-box {
min-width: 360px;
width: auto;
> .input-inner {
@apply p-2 relative;
.input-wrap {
@apply mr-1.5 border border-gray-300;
border-radius: 4px;
&:active, &:focus-within {
border-color: transparent;
}
}
input {
@apply flex-1 bg-gray-200;
padding: 1px 5px;
border-radius: 4px;
color: black;
outline: none;
border: 2px solid transparent;
&:focus {
border: 2px solid rgba(16, 107, 163, 0.75);
}
}
.ui__button {
margin-top: unset;
border-radius: 4px;
color: black;
padding: 4px;
.ti {
font-weight: bold;
color: #989898;
}
&.active .ti, &:hover .ti {
color: #1f1f1f !important;
}
&.icon-enter {
@apply absolute opacity-80;
right: -1px;
top: 2px;
}
}
> .ui__button {
margin-left: 8px;
}
}
> .result-inner {
@apply text-gray-800;
}
}
}
&-viewer {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
> .viewer-container {
}
> .pdfViewer {
&.disabled-text-selection {
user-select: none;
pointer-events: none;
}
}
}
&-resizer {
position: absolute;
width: 3px;
height: 88vh;
background-color: rgba(0, 0, 0, 0);
overflow: hidden;
z-index: 4;
top: 10vh;
cursor: col-resize;
right: 0;;
}
&-hls-text-region {
opacity: 1;
z-index: 2;
}
&-hls-area-region {
cursor: pointer;
position: absolute;
opacity: .8;
z-index: 2;
background-color: #FCD713FF;
mix-blend-mode: multiply;
touch-action: none;
border-style: dashed;
}
&-viewer.is-area-dashed {
.extensions__pdf {
&-hls-area-region {
background-color: transparent;
border-width: 3px;
opacity: 1 !important;
}
}
}
&-hls-ctx-menu {
position: absolute;
z-index: 9;
color: #343434;
border-radius: 4px;
font-size: 13px;
padding: 8px 10px;
background-color: #e3e7e8;
box-shadow: 0 2px 4px 0 rgba(134, 134, 134, 0.59);
list-style: none;
margin: 0;
&::after {
content: "";
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: solid 1px #b2b2b2;
transform: scale(0.5);
transform-origin: center center;
pointer-events: none;
border-radius: 10px;
}
> li {
margin: 0;
padding: 5px 8px;
display: flex;
align-items: center;
user-select: none;
cursor: default;
&.item:hover {
background-color: #cecece;
border-radius: 4px;
}
&.item-colors {
display: flex;
justify-content: space-between;
margin: 0 -5px;
> a {
width: 14px;
height: 14px;
border-radius: 20px;
background-color: #b2b2b2;
overflow: hidden;
opacity: 1;
margin: 0 5px;
font-size: 0;
border: 1px inset rgba(0, 0, 0, .2);
cursor: default;
&:hover {
opacity: .8;
transform: scale(1.1);
}
&[data-color=yellow] {
background-color: var(--color-yellow-500);
}
&[data-color=blue] {
background-color: var(--color-blue-500);
}
&[data-color=green] {
background-color: var(--color-green-500);
}
&[data-color=red] {
background-color: var(--color-red-500);
}
&[data-color=purple] {
background-color: var(--color-purple-500);
}
}
}
}
}
&-area-selection {
.shadow-rect {
position: absolute;
background: rgba(252, 232, 151, 1);
mix-blend-mode: multiply;
}
}
&-highlights-list-item {
@apply active:opacity-100 mr-2;
user-select: none;
font-size: 12px;
padding-top: 8px;
padding-bottom: 2px;
padding-left: 6px;
border-radius: 4px;
margin-bottom: 3px;
&:first-child {
margin-top: 5px;
}
> h6 {
@apply flex items-center justify-between pr-2 relative;
font-size: 10px;
line-height: 1em;
color: #696969;
-webkit-font-smoothing: antialiased;
small {
width: 8px;
height: 8px;
border-radius: 100%;
margin-right: 6px;
border-color: #cccccc !important;
}
button {
@apply absolute right-0 top-[-6px] hover:opacity-80 active:opacity-100 hidden;
padding-right: 8px;
padding-top: 4px;
.ti {
font-size: 14px;
}
}
}
> p {
color: #646464;
padding-top: 6px;
padding-bottom: 2px;
margin: 0;
&.text-wrap {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.24em;
}
&.area-wrap {
display: flex;
align-items: center;
padding-right: 6px;
}
&:hover {
color: var(--ph-link-color);
}
}
&.active {
background-color: var(--ph-link-color);
> h6, > p {
color: white;
button {
@apply inline;
}
}
}
&:hover:not(.active) {
opacity: .9;
}
}
}
.hls-text-region-item {
cursor: pointer;
position: absolute;
z-index: 2;
transition: background 0.3s;
background-color: rgba(252, 219, 97, 0.7);
&[data-color=yellow] {
background-color: var(--ph-highlight-color-yellow);
opacity: .5;
}
&[data-color=blue] {
background-color: var(--ph-highlight-color-blue);
}
&[data-color=green] {
background-color: var(--ph-highlight-color-green);
}
&[data-color=red] {
background-color: var(--ph-highlight-color-red);
}
&[data-color=purple] {
background-color: var(--ph-highlight-color-purple);
}
}
.hls-popup {
&-overlay {
position: absolute;
top: 40px;
right: 0;
left: 0;
width: 100%;
height: 92vh;
background-color: rgba(0, 0, 0, 0);
display: none;
&.visible {
display: block;
}
}
&-box {
z-index: 3;
border-radius: 4px;
width: 320px;
overflow-y: auto;
background-color: #e3e7e8;
outline: none;
box-shadow: 0 2px 4px 0 rgba(134, 134, 134, 0.59);
&::after {
content: "";
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: solid 1px #b2b2b2;
transform: scale(0.5);
transform-origin: center center;
pointer-events: none;
border-radius: 10px;
}
}
}
.extensions__pdf-container {
background-color: transparent;
.extensions__pdf-toolbar .buttons {
background-color: var(--ls-primary-background-color);
}
&[data-theme=light] {
background-color: #FFFFFF;
}
&[data-theme=dark] {
background-color: #042f3c;
.pdfViewer {
background: transparent;
.page {
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
.textLayer {
background-color: #023d4cf7;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.extensions__pdf-toolbar {
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 10%, rgb(15 31 37) 100%)
}
.extensions__pdf-hls-area-region {
mix-blend-mode: revert;
opacity: .4;
}
}
&[data-theme=warm] {
background-color: #f6efdf;
.textLayer {
background-color: #f8eeda;
}
.extensions__pdf-toolbar {
.buttons {
background-color: #f6efdf;
}
}
}
}
.asset-ref {
&.is-pdf {
&:before {
content: "[[📚";
opacity: .7;
margin-right: 4px;
}
&:after {
content: "]]";
opacity: .7;
}
}
}
.block-ref {
&-wrap {
&[data-type=annotation] {
}
&[data-hl-type=area] {
display: block;
.block-ref {
display: block;
border: none;
}
.prefix-link > .hl-area {
cursor: alias;
}
}
}
}
.block-content {
&[data-type=annotation] {
.prefix-link {
display: inline-flex;
align-items: center;
padding-right: 4px;
cursor: alias;
color: var(--ls-link-ref-text-color);
&:before {
content: "📌 ";
}
}
[data-hl-type=area] {
.prefix-link {
padding-top: 5px;
display: block;
}
.hl-page {
display: inline-flex;
justify-content: space-between;
width: 85%;
> label {
flex: 1;
cursor: text;
}
}
}
.hl-area {
@apply relative;
display: inline-block;
cursor: text;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
margin-top: 4px;
.actions {
@apply absolute right-1 top-1 flex opacity-0 transition-opacity;
}
&:hover {
.actions {
@apply opacity-100;
}
}
img {
margin: 0;
box-shadow: none;
max-width: 100%;
max-height: 420px;
cursor: alias;
}
}
}
}
.ls-hl-colored .block-content {
&[data-hl-color=green] {
.prefix-link {
&:before {
content: "🟢 ";
}
}
}
&[data-hl-color=purple] {
.prefix-link {
&:before {
content: "🟣 ";
}
}
}
&[data-hl-color=blue] {
.prefix-link {
&:before {
content: "🔵 ";
}
}
}
&[data-hl-color=yellow] {
.prefix-link {
&:before {
content: "🟡 ";
}
}
}
&[data-hl-color=red] {
.prefix-link {
&:before {
content: "🔴 ";
}
}
}
}
body[data-page] {
.extensions__pdf-loader {
width: 100%;
}
.extensions__pdf-container {
position: fixed;
left: 0;
top: 0;
width: var(--ph-view-container-width);
height: 100vh;
overflow-y: hidden;
z-index: 10;
}
.extensions__pdf {
&-viewer {
left: 0;
width: 100%;
}
&-viewer-cnt {
display: flex;
}
&-highlights {
height: 30vh;
overflow: auto;
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(231, 231, 231, 0.9);
padding: 20px;
z-index: 6;
max-width: 400px;
pre {
white-space: pre-wrap;
font-size: 12px;
}
}
}
}
body.is-pdf-active {
#app-container {
padding-left: calc(var(--ph-view-container-width) + 15px);
}
#left-sidebar {
border: none !important;
display: none;
}
#head > .l {
padding-left: 0;
}
#main-container.is-left-sidebar-open {
padding-left: unset;
}
#left-menu {
display: none;
}
}
html.is-system-window {
.extensions__pdf-container {
width: 100vw;
height: 100vh;
}
.extensions__pdf-loader {
@apply w-full;
}
}
/* overrides for pdf_viewer.css from PDF.JS web viewer */
.textLayer {
z-index: 2;
opacity: .8;
mix-blend-mode: multiply;
}
.annotationLayer {
.highlightAnnotation, .underlineAnnotation {
display: none;
}
}
.textLayer ::selection {
background: rgb(185, 231, 255);
mix-blend-mode: multiply;
color: unset;
}
.textLayer .highlight {
background-color: rgb(206 255 162);
border: 1px solid transparent;
border-radius: 0;
padding: 0 2px;
&.selected {
background-color: rgb(206 255 162);
border: 2px dashed #ff3434;
}
}
.hl-flash {
animation-name: hl-flash;
animation-duration: 0.3s;
animation-timing-function: ease;
animation-iteration-count: 2;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes hl-flash {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pdfViewer .page.loadingIcon::after {
background: none;
}