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

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

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 */