Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS variables for the textLayer highlight colors (PR 15921 follow-up)

Browse Source 
Rather than adding `@media (forced-colors: active) { ... }`-blocks throughout the CSS code, we should utilize CSS variables instead as in our other CSS files.
This commit is contained in:
Jonas Jenwald 2023-01-18 10:42:22 +01:00
parent 42b1cff7b0
commit 67b1d15384
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/text_layer_builder.css
View File

@ -13,6 +13,18 @@
* limitations under the License. * limitations under the License.
*/ */
:root {
--highlight-bg-color: rgba(180, 0, 170, 1);
--highlight-selected-bg-color: rgba(0, 100, 0, 1);
}
@media (forced-colors: active) {
:root {
--highlight-bg-color: Highlight;
--highlight-selected-bg-color: ButtonText;
}
}
.textLayer { .textLayer {
position: absolute; position: absolute;
text-align: initial; text-align: initial;
@ -48,7 +60,7 @@
.textLayer .highlight { .textLayer .highlight {
margin: -1px; margin: -1px;
padding: 1px; padding: 1px;
background-color: rgba(180, 0, 170, 1); background-color: var(--highlight-bg-color);
border-radius: 4px; border-radius: 4px;
} }
@ -69,16 +81,7 @@
} }
.textLayer .highlight.selected { .textLayer .highlight.selected {
background-color: rgba(0, 100, 0, 1); background-color: var(--highlight-selected-bg-color);
}
@media (forced-colors: active) {
.textLayer .highlight {
background-color: Highlight;
}
.textLayer .highlight.selected {
background-color: ButtonText;
}
} }
.textLayer ::selection { .textLayer ::selection {