ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 09:20:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make the caret visible in the text layer in caret browsing mode

Browse source 
In order to do that we must change the text layer opacity to 1 but
it has several implications:
 - the selection color must have an alpha component,
 - the background color of the span used for highlighted words
   must have an alpha component either, but now the opacity is 1
   we can use some backdrop-filters in HCM making the highlighted
   words more visible.
 - fix a regression caused by #17196: the css variable --hcm-highlight-filter
   has to live under the #viewer element because in HCM it's overwritten
   by js at this level, hence links annotations for example didn't
   have the right colors when hovered.
This commit is contained in:
Calixte Denizet 2024-01-18 18:36:03 +01:00
parent 1cdbcfef82
commit 83c78dbfa8
7 changed files with 96 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

25
web/text_layer_builder.css
View file

@ -18,12 +18,13 @@
text-align: initial;
inset: 0;
overflow: hidden;
opacity: 0.25;
opacity: 1;
line-height: 1;
text-size-adjust: none;
forced-color-adjust: none;
transform-origin: 0 0;
z-index: 2;
caret-color: CanvasText;
&.drawing {
touch-action: none;
@ -47,17 +48,25 @@
/*#endif*/
.highlight {
--highlight-bg-color: rgb(180 0 170);
--highlight-selected-bg-color: rgb(0 100 0);
--highlight-bg-color: rgb(180 0 170 / 0.25);
--highlight-selected-bg-color: rgb(0 100 0 / 0.25);
--highlight-backdrop-filter: none;
--highlight-selected-backdrop-filter: none;
--mix-blend-mode: exclusion;
@media screen and (forced-colors: active) {
--highlight-bg-color: Highlight;
--highlight-selected-bg-color: ButtonText;
--highlight-bg-color: transparent;
--highlight-selected-bg-color: transparent;
--highlight-backdrop-filter: var(--hcm-highlight-filter);
--highlight-selected-backdrop-filter: var(
--hcm-highlight-selected-filter
);
}
margin: -1px;
padding: 1px;
background-color: var(--highlight-bg-color);
backdrop-filter: var(--highlight-backdrop-filter);
border-radius: 4px;
&.appended {
@ -78,14 +87,16 @@
&.selected {
background-color: var(--highlight-selected-bg-color);
backdrop-filter: var(--highlight-selected-backdrop-filter);
}
}
::selection {
/*#if !MOZCENTRAL*/
background: blue;
background: rgba(0 0 255 / 0.25);
/*#endif*/
background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
background: color-mix(in srgb, AccentColor, transparent 75%);
}
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */