Use CSS variables for the textLayer highlight
colors (PR 15921 follow-up)
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:
parent
42b1cff7b0
commit
67b1d15384
@ -13,6 +13,18 @@
|
||||
* 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 {
|
||||
position: absolute;
|
||||
text-align: initial;
|
||||
@ -48,7 +60,7 @@
|
||||
.textLayer .highlight {
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: rgba(180, 0, 170, 1);
|
||||
background-color: var(--highlight-bg-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -69,16 +81,7 @@
|
||||
}
|
||||
|
||||
.textLayer .highlight.selected {
|
||||
background-color: rgba(0, 100, 0, 1);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.textLayer .highlight {
|
||||
background-color: Highlight;
|
||||
}
|
||||
.textLayer .highlight.selected {
|
||||
background-color: ButtonText;
|
||||
}
|
||||
background-color: var(--highlight-selected-bg-color);
|
||||
}
|
||||
|
||||
.textLayer ::selection {
|
||||
|
Loading…
x
Reference in New Issue
Block a user