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:
Jonas Jenwald 2023-01-18 10:42:22 +01:00
parent 42b1cff7b0
commit 67b1d15384

View File

@ -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 {