organizer.css (8020B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 :root { 6 --organizer-color: -moz-DialogText; 7 --organizer-deemphasized-color: GrayText; 8 9 --organizer-toolbar-background: -moz-Dialog; 10 --organizer-pane-background: -moz-Dialog; 11 --organizer-content-background: -moz-Dialog; 12 13 --organizer-hover-background: SelectedItem; 14 --organizer-hover-color: SelectedItemText; 15 --organizer-selected-background: -moz-cellhighlight; 16 --organizer-selected-color: -moz-cellhighlighttext; 17 --organizer-focus-selected-background: SelectedItem; 18 --organizer-focus-selected-color: SelectedItemText; 19 --organizer-outline-color: SelectedItem; 20 21 --organizer-separator-color: ThreeDDarkShadow; 22 --organizer-border-color: ThreeDShadow; 23 24 --organizer-pane-field-border-color: ThreeDShadow; 25 26 --input-border-color: var(--organizer-pane-field-border-color); 27 --input-bgcolor: var(--organizer-content-background); 28 --input-color: var(--organizer-color); 29 } 30 31 @media not (prefers-contrast) { 32 :root { 33 --organizer-color: rgb(21, 20, 26); 34 --organizer-deemphasized-color: rgb(91, 91, 102); 35 36 --organizer-toolbar-background: rgb(249, 249, 251); 37 --organizer-pane-background: rgb(240, 240, 244); 38 --organizer-content-background: white; 39 40 --organizer-hover-background: rgba(207, 207, 216, 0.66); 41 --organizer-hover-color: var(--organizer-color); 42 --organizer-selected-background: rgb(207, 207, 216); 43 --organizer-selected-color: var(--organizer-color); 44 --organizer-focus-selected-background: rgb(0, 97, 224); 45 --organizer-focus-selected-color: rgb(251, 251, 254); 46 --organizer-outline-color: rgb(0, 97, 224); 47 48 --organizer-separator-color: var(--organizer-pane-field-border-color); 49 --organizer-border-color: ThreeDLightShadow; 50 51 --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); 52 } 53 54 @media (prefers-color-scheme: dark) { 55 :root { 56 --organizer-color: rgb(251, 251, 254); 57 --organizer-deemphasized-color: rgb(191, 191, 201); 58 59 --organizer-toolbar-background: rgb(43, 42, 51); 60 --organizer-pane-background: rgb(35, 34, 43); 61 --organizer-content-background: rgb(28, 27, 34); 62 63 --organizer-hover-background: rgb(82, 82, 94); 64 --organizer-selected-background: rgb(91, 91, 102); 65 --organizer-focus-selected-background: color-mix(in srgb, rgb(0, 221, 255) 80%, currentColor); 66 --organizer-focus-selected-color: rgb(43, 42, 51); 67 --organizer-outline-color: rgb(0, 221, 255); 68 69 scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); 70 } 71 } 72 } 73 74 /* Toolbar and menus */ 75 76 #placesToolbar { 77 background-color: var(--organizer-toolbar-background); 78 color: var(--organizer-color); 79 border-bottom: 1px solid var(--organizer-border-color); 80 padding-inline: 4px 0; 81 82 > toolbarbutton { 83 appearance: none; 84 padding: 5px; 85 border-radius: var(--border-radius-small); 86 87 &[disabled] { 88 opacity: var(--toolbarbutton-disabled-opacity); 89 } 90 91 &:not([disabled]):hover { 92 background-color: var(--organizer-hover-background); 93 color: var(--organizer-hover-color); 94 95 &:active { 96 background-color: var(--organizer-selected-background); 97 } 98 } 99 } 100 } 101 102 #placesMenu { 103 margin-inline-start: 6px; 104 105 > menu { 106 appearance: none; 107 color: var(--organizer-color); 108 border-radius: var(--border-radius-small); 109 padding-block: 5px; 110 padding-inline-start: 5px; 111 margin-inline-end: 2px; 112 min-height: var(--button-min-height); 113 114 &:hover { 115 background-color: var(--organizer-hover-background); 116 color: var(--organizer-hover-color); 117 } 118 119 &:hover:active, 120 &[open] { 121 background-color: var(--organizer-selected-background); 122 color: var(--organizer-selected-color); 123 } 124 } 125 } 126 127 /* Sidebar and splitter */ 128 129 #placesList { 130 background-color: var(--organizer-pane-background); 131 width: 200px; 132 min-width: 100px; 133 max-width: 400px; 134 } 135 136 #placesView > splitter { 137 border: 0; 138 border-inline-end: 1px solid var(--organizer-border-color); 139 min-width: 0; 140 width: 3px; 141 background-color: transparent; 142 margin-inline-start: -3px; 143 position: relative; 144 } 145 146 /* Downloads pane */ 147 148 #downloadsListBox { 149 color: var(--organizer-color); 150 background-color: var(--organizer-content-background); 151 } 152 153 #clearDownloadsButton:focus-visible { 154 outline: 2px solid var(--organizer-outline-color); 155 } 156 157 /* Tree */ 158 159 #contentView treecol { 160 /* Use box-shadow to draw a bottom border instead of border-bottom 161 * because otherwise the items on contentView won't be perfectly 162 * aligned with the items on the sidebar. */ 163 box-shadow: inset 0 -1px var(--organizer-border-color); 164 } 165 166 tree { 167 background-color: var(--organizer-content-background); 168 color: var(--organizer-color); 169 } 170 171 treechildren::-moz-tree-row { 172 background-color: transparent; 173 } 174 175 treechildren::-moz-tree-row(hover) { 176 background-color: var(--organizer-hover-background); 177 } 178 179 treechildren::-moz-tree-row(selected) { 180 background-color: var(--organizer-selected-background); 181 color: var(--organizer-selected-color); 182 border: 1px solid transparent; 183 } 184 185 treechildren::-moz-tree-row(selected, focus) { 186 background-color: var(--organizer-focus-selected-background); 187 color: var(--organizer-focus-selected-color); 188 } 189 190 treechildren::-moz-tree-image(hover), 191 treechildren::-moz-tree-twisty(hover), 192 treechildren::-moz-tree-cell-text(hover) { 193 color: var(--organizer-hover-color); 194 } 195 196 treechildren::-moz-tree-image(selected), 197 treechildren::-moz-tree-twisty(selected), 198 treechildren::-moz-tree-cell-text(selected) { 199 color: var(--organizer-selected-color); 200 } 201 202 treechildren::-moz-tree-image(selected, focus), 203 treechildren::-moz-tree-twisty(selected, focus), 204 treechildren::-moz-tree-cell-text(selected, focus) { 205 color: var(--organizer-focus-selected-color); 206 } 207 208 treechildren::-moz-tree-separator { 209 height: 1px; 210 border-color: var(--organizer-separator-color); 211 } 212 213 treechildren::-moz-tree-separator(hover) { 214 border-color: var(--organizer-hover-color); 215 } 216 217 treechildren::-moz-tree-separator(selected) { 218 border-color: var(--organizer-selected-color); 219 } 220 221 treechildren::-moz-tree-separator(selected, focus) { 222 border-color: var(--organizer-focus-selected-color); 223 } 224 225 /* Info box */ 226 #detailsPane { 227 background-color: var(--organizer-pane-background); 228 color: var(--organizer-color); 229 border-top: 1px solid var(--organizer-border-color); 230 } 231 232 .expander-up, 233 .expander-down { 234 appearance: none; 235 padding: 5px; 236 border: 1px solid var(--organizer-pane-field-border-color); 237 border-radius: var(--border-radius-small); 238 color: var(--organizer-color); 239 background-color: var(--organizer-content-background); 240 list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); 241 -moz-context-properties: fill; 242 fill: currentColor; 243 244 &:hover { 245 background-color: var(--organizer-hover-background); 246 color: var(--organizer-hover-color); 247 } 248 249 &:hover:active { 250 background-color: var(--organizer-selected-background); 251 color: var(--organizer-selected-color); 252 } 253 254 &:focus-visible { 255 outline: 2px solid var(--organizer-outline-color); 256 outline-offset: -1px; 257 } 258 259 > .button-box { 260 padding: 0; 261 } 262 } 263 264 .expander-up { 265 list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); 266 } 267 268 input:focus-visible { 269 outline-color: var(--organizer-outline-color); 270 } 271 272 .caption-label { 273 color: var(--organizer-deemphasized-color); 274 } 275 276 #editBMPanel_tagsSelector { 277 color: var(--organizer-color); 278 background-color: var(--organizer-content-background); 279 border-color: var(--organizer-border-color); 280 281 > richlistitem { 282 border: 1px solid transparent; 283 284 &:hover { 285 background-color: var(--organizer-hover-background); 286 color: var(--organizer-hover-color); 287 } 288 289 &[selected] { 290 background-color: var(--organizer-selected-background); 291 color: var(--organizer-selected-color); 292 } 293 } 294 }