- commit
- 75fb096d96fe3f1dbb4b0df40e9ca7b21cc98274
- parent
- 1bd9c96b17e7d879ccabaa6e3acd02ec90052292
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2025-05-02 08:48
CSS: use custom properties for colors for easier customization
Diffstat
| M | select.css | 34 | ++++++++++++++++++++++------------ |
1 files changed, 22 insertions, 12 deletions
diff --git a/select.css b/select.css
@@ -1,4 +1,14 @@ 1 1 .select { -1 2 --bg: Field; -1 3 --text: FieldText; -1 4 --focus-bg: Highlight; -1 5 --focus-text: HighlightText; -1 6 --hover-bg: rgba(128,128,128,.3); -1 7 --border: ThreeDShadow; -1 8 --selected-bg: Highlight; -1 9 --selected-text: HighlightText; -1 10 --disabled-text: GrayText; -1 11 2 12 position: relative; 3 13 } 4 14 @@ -13,13 +23,13 @@ 13 23 list-style: none; 14 24 margin: 0; 15 25 padding: 0;16 -1 background: Field;17 -1 color: FieldText;-1 26 background: var(--bg); -1 27 color: var(--text); 18 28 font-family: sans-serif; 19 29 font-size: small; 20 30 font: -moz-field;21 -1 border: 1px solid Field;22 -1 outline: 1px solid ThreeDShadow;-1 31 border: 1px solid var(--bg); -1 32 outline: 1px solid var(--border); 23 33 border-block-start: 0; 24 34 inset-inline: 0; 25 35 overflow-y: auto; @@ -45,16 +55,16 @@ 45 55 } 46 56 .select__dropdown [role="option"].select--selected, 47 57 .select__dropdown [role="option"]:hover {48 -1 background: rgba(128,128,128,.3);-1 58 background: var(--hover-bg); 49 59 color: inherit; 50 60 } 51 61 .select__dropdown [role="option"].select--has-focus {52 -1 background: Highlight;53 -1 color: HighlightText;-1 62 background: var(--selected-bg); -1 63 color: var(--selected-text); 54 64 } 55 65 .select__dropdown [role="option"][aria-disabled="true"] { 56 66 background: transparent;57 -1 color: GrayText;-1 67 color: var(--disabled-text); 58 68 } 59 69 .select__dropdown ul { 60 70 margin: 0; @@ -87,9 +97,9 @@ 87 97 } 88 98 .select__value { 89 99 padding-inline: 0.2em;90 -1 background: rgba(128,128,128,.3);91 -1 color: FieldText;92 -1 border: 1px solid ThreeDShadow;-1 100 background: var(--hover-bg); -1 101 color: var(--text); -1 102 border: 1px solid var(--border); 93 103 border-radius: 0.3em; 94 104 } 95 105 @@ -101,7 +111,7 @@ 101 111 } 102 112 103 113 @media (prefers-color-scheme: dark) {104 -1 .select__dropdown {-1 114 .select { 105 115 color-scheme: dark; 106 116 } 107 117 }