shy-interactive.css (28224B)
1 /*== ShyFox Interactive ============================================================================= 2 3 Every button, control and focus state in the browser chrome. ShyFox itself only moves panels around; 4 this is the file that decides how the things inside them answer back. 5 6 One system, four states, built from shy-tokens.css and nothing else: 7 8 rest no fill at all -- a quiet panel has to stay quiet 9 hover --shy-hover-tint, --shy-dur-fast 10 pressed --shy-active-tint, plus a 90ms scale-down of the icon 11 open --shy-accent-tint and an accent icon; never chrome text on a solid accent fill 12 13 Keyboard focus is one accent outline everywhere. It is drawn with `outline`, which occupies no space, 14 so no ring can shift a control or push a panel wider. shy-navbar.css and shy-toolbar.css reveal a 15 hidden panel from `:has(... :focus-visible)`, so nothing here may suppress a focus ring. 16 17 Switch the whole polish layer off with `shyfox.disable.polish`, the backdrop blur alone with 18 `shyfox.disable.blur`. 19 20 ===================================================================================================*/ 21 22 @media not -moz-pref("shyfox.disable.polish") { 23 24 /* 25 26 --- LOCAL TOKENS ----------------------------------------------------------------------------------- 27 28 The few values shy-tokens.css does not already carry. Everything else in this file comes from there. 29 30 */ 31 32 :root { 33 /* press feedback. Applied with `transform`, not `scale`, so it multiplies with any resting 34 `scale` ShyFox has already put on an icon (shy-toolbar.css gives #unified-extensions-button 35 0.88) instead of replacing it. */ 36 --shy-press-scale: 0.94; 37 --shy-press-dur: 90ms; 38 39 /* one focus ring for the whole chrome. The offset is deliberately small: the right-hand strip is 40 only --toolbar-button-wdt wide, and a wider ring would spill past the panel edge. */ 41 --shy-ring-width: 2px; 42 --shy-ring-offset: 2px; 43 --shy-focus-outline: var(--shy-ring-width) solid var(--shy-accent-line); 44 45 /* Close is the only destructive control in the chrome, so it is the only one that gets a solid 46 plate with the toolbar colour lifted back out of it -- every other button stays a translucent 47 tint. The accent is reserved for highlights and a literal red would not be a theme colour, so 48 the emphasis comes from weight rather than hue. Override this pair to make close red. */ 49 --shy-close-tint: color-mix(in srgb, var(--bt-col) 78%, transparent); 50 --shy-close-fg: var(--tb-col); 51 } 52 53 /* Firefox paints toolbar button feedback on the icon/text/badge box rather than on the button, and 54 reads the fill from these variables. Re-pointing them gives every toolbar button, bookmark item 55 and panel button the same rest and hover in one place. Both spellings are set: Gecko 155 renamed 56 the --toolbarbutton-* family and added the --button-*-menu-* alias tier over --button-*-ghost-*. */ 57 :root { 58 --toolbarbutton-hover-background: var(--shy-hover-tint) !important; /* 140 */ 59 --toolbarbutton-active-background: var(--shy-active-tint) !important; /* 140 */ 60 --toolbarbutton-background-color-hover: var(--shy-hover-tint) !important; /* 155 */ 61 --toolbarbutton-background-color-active: var(--shy-active-tint) !important; /* 155 */ 62 63 --button-background-color-ghost-hover: var(--shy-hover-tint) !important; /* both */ 64 --button-background-color-ghost-active: var(--shy-active-tint) !important; 65 --button-background-color-menu-hover: var(--shy-hover-tint) !important; /* 155 only */ 66 --button-background-color-menu-active: var(--shy-active-tint) !important; 67 68 /* every hairline the chrome draws for itself */ 69 --toolbarseparator-color: var(--shy-hairline-strong) !important; 70 --panel-separator-color: var(--shy-hairline) !important; 71 } 72 73 /* 74 75 --- TOOLBAR BUTTONS -------------------------------------------------------------------------------- 76 77 Navigation bar, right-hand vertical strip, bookmarks toolbar and everything inside a panel. 78 79 */ 80 81 /* one timing for the whole system: colour on the fast curve, the press on its own 90ms curve */ 82 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item), 83 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 84 :is(.toolbarbutton-1, .subviewbutton) { 85 transition: 86 background-color var(--shy-dur-fast) var(--shy-ease), 87 color var(--shy-dur-fast) var(--shy-ease) !important; 88 89 & > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 90 transition: 91 background-color var(--shy-dur-fast) var(--shy-ease), 92 outline-color var(--shy-dur-fast) var(--shy-ease), 93 transform var(--shy-press-dur) var(--shy-ease-in-out) !important; 94 } 95 } 96 97 /* pressed: the icon sinks a little and springs straight back. `transform` composes with the 98 individual `scale` property instead of overwriting it, which is what keeps the already-shrunk 99 extensions button the right size while it is held down. */ 100 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item):not([disabled]):hover:active 101 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 102 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 103 :is(.toolbarbutton-1, .subviewbutton):not([disabled]):hover:active 104 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 105 transform: scale(var(--shy-press-scale)) !important; 106 } 107 108 /* open or checked: an accent tint under the icon and the icon itself in the accent. The fill stays 109 a 20% tint on purpose -- the accent is the user's and its luminance is unknown, so no chrome text 110 or glyph is ever placed on a solid accent plate. */ 111 #navigator-toolbox .toolbarbutton-1:is([open], [checked]):not([disabled]), 112 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 113 :is(.toolbarbutton-1, .subviewbutton):is([open], [checked]):not([disabled]) { 114 color: var(--shy-color) !important; 115 116 & > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 117 background-color: var(--shy-accent-tint) !important; 118 } 119 } 120 121 /* a disabled button never lights up, whatever the pointer does */ 122 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item)[disabled] 123 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 124 background-color: transparent !important; 125 transform: none !important; 126 } 127 128 /* 129 130 --- KEYBOARD FOCUS --------------------------------------------------------------------------------- 131 132 Two hidden panels are revealed by `:has(... :focus-visible)`, so a ring here is load-bearing and not 133 decoration. Every ring is an `outline`: it takes no layout space, so it can never change the address 134 field's rect or widen the right-hand strip. 135 136 */ 137 138 /* toolbar and panel buttons wear the ring on the painted box, which is where Firefox puts it too */ 139 #navigator-toolbox .toolbarbutton-1:focus-visible 140 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 141 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 142 :is(.toolbarbutton-1, .subviewbutton):focus-visible 143 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 144 outline: var(--shy-focus-outline) !important; 145 outline-offset: var(--shy-ring-offset) !important; 146 } 147 148 /* Everything else that can take focus wears it on itself. No #main-window anchor here on purpose: 149 modal dialogs load their own chrome document, and their buttons need the same ring. */ 150 :is( 151 button, 152 checkbox, 153 radio, 154 menulist, 155 richlistitem, 156 toolbarbutton.bookmark-item, 157 .close-icon, 158 search-textbox, 159 textarea, 160 select, 161 input:not(#urlbar-input, .urlbar-input) 162 ):focus-visible { 163 outline: var(--shy-focus-outline) !important; 164 outline-offset: var(--shy-ring-offset) !important; 165 } 166 167 /* the window-control container is `overflow: clip`, so its ring has to sit inside the box */ 168 #main-window .titlebar-button:focus-visible { 169 outline: var(--shy-focus-outline) !important; 170 outline-offset: calc(-1 * var(--shy-ring-width)) !important; 171 } 172 173 /* 174 175 --- BOOKMARKS -------------------------------------------------------------------------------------- 176 177 Items on the places toolbar paint on the button itself; items in a bookmarks menu are menuitems and 178 answer to [_moz-menuactive] rather than :hover. Both end up in the same three states. 179 180 */ 181 182 /* places toolbar: hover and press arrive through the shared variables, open takes the accent */ 183 #main-window toolbarbutton.bookmark-item:not(.subviewbutton):is([open], [open="true"]) { 184 background-color: var(--shy-accent-tint) !important; 185 box-shadow: inset 2px 0 0 var(--shy-color) !important; 186 } 187 188 /* bookmarks menus and the bookmarks-menu popup. shy-global.css hands these popups a 189 --panel-item-hover-bgcolor that no longer exists in Gecko 140 or 155, so the hover fill resolves 190 to nothing; this restores it for bookmark rows out of the token scale. */ 191 #main-window menupopup :is(menu, menuitem).bookmark-item[_moz-menuactive]:not([disabled], 192 [disabled="true"]) { 193 background-color: var(--shy-hover-tint) !important; 194 color: var(--bt-col) !important; 195 } 196 197 #main-window menupopup :is(menu, menuitem).bookmark-item:is([open], [open="true"]) { 198 background-color: var(--shy-accent-tint) !important; 199 color: var(--bt-col) !important; 200 } 201 202 /* the folder chevron and the overflow arrow are buttons, not bookmarks; keep them on the same 203 press feedback as the rest of the toolbar */ 204 #main-window :is(#PlacesChevron, #OtherBookmarks):not([disabled]):hover:active 205 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 206 transform: scale(var(--shy-press-scale)) !important; 207 } 208 209 /* 210 211 --- WINDOW CONTROLS -------------------------------------------------------------------------------- 212 213 shy-controls.css draws its own round GTK buttons unless `shyfox.force.native.controls` is on, in 214 which case each button is an `appearance: -moz-window-button-*` native widget. Only the drawn branch 215 is restyled here; the native branch keeps its focus ring and nothing else. 216 217 */ 218 219 @media (-moz-gtk-csd-available) { 220 @media not -moz-pref("shyfox.force.native.controls") { 221 222 /* the icon plate is what shy-controls.css paints, so the states go there */ 223 #main-window .titlebar-button .toolbarbutton-icon { 224 transition: 225 background-color var(--shy-dur-fast) var(--shy-ease), 226 transform var(--shy-press-dur) var(--shy-ease-in-out) !important; 227 } 228 229 /* minimise, maximise and restore join the ordinary button system */ 230 #main-window .titlebar-button:is(.titlebar-min, .titlebar-max, .titlebar-restore):hover 231 .toolbarbutton-icon { 232 background-color: var(--shy-hover-tint) !important; 233 } 234 235 #main-window .titlebar-button:is(.titlebar-min, .titlebar-max, .titlebar-restore):hover:active 236 .toolbarbutton-icon { 237 background-color: var(--shy-active-tint) !important; 238 transform: scale(var(--shy-press-scale)) !important; 239 } 240 241 /* close is the exception: a solid plate with the toolbar colour lifted back out of the glyph, 242 which reads as destructive without guessing at a red the palette never defined */ 243 #main-window .titlebar-button.titlebar-close:hover .toolbarbutton-icon { 244 background-color: var(--shy-close-tint) !important; 245 fill: var(--shy-close-fg) !important; 246 color: var(--shy-close-fg) !important; 247 } 248 249 #main-window .titlebar-button.titlebar-close:hover:active .toolbarbutton-icon { 250 background-color: var(--bt-col) !important; 251 transform: scale(var(--shy-press-scale)) !important; 252 } 253 } 254 } 255 256 /* 257 258 --- BADGES, ATTENTION AND DOWNLOADS ---------------------------------------------------------------- 259 260 Everything that asks for attention uses the same accent. Dots and rings, which carry no text, are 261 solid accent; anything with a number in it is an accent tint plus an accent hairline, because the 262 digits have to stay readable against an accent of unknown luminance. 263 264 */ 265 266 /* every attention dot in the chrome, under both the 140 and the 155 variable names */ 267 :root { 268 --attention-dot-color: var(--shy-color) !important; /* 140 */ 269 --tab-attention-dot-color: var(--shy-color) !important; /* 155 */ 270 --button-attention-dot-color: var(--shy-color) !important; /* 155 toolkit */ 271 --uei-button-attention-dot-color: var(--shy-color) !important; /* both */ 272 --panel-banner-item-update-supported-bgcolor: var(--shy-color) !important; 273 } 274 275 /* The counted badge -- extension counts and the like. Gecko 140 hard-codes #d90000 with white text 276 and 155 embosses it; both become a flat accent chip whose digits stay on the theme's own text 277 colour, because an accent of unknown luminance cannot be trusted behind text. The two badges that 278 are really icons, not counts, are left alone: they carry no text and are recoloured below. */ 279 #main-window .toolbarbutton-badge:not( 280 .feature-callout, 281 #PanelUI-menu-button[badge-status] .toolbarbutton-badge, 282 #downloads-button[attention] .toolbarbutton-badge 283 ) { 284 background-color: var(--shy-accent-tint) !important; 285 color: var(--bt-col) !important; 286 box-shadow: inset 0 0 0 1px var(--shy-accent-line) !important; 287 border-radius: calc(var(--rounding) / 2) !important; 288 text-shadow: none !important; 289 } 290 291 /* the "new"/callout badge carries no text, so it can be a solid accent dot */ 292 #main-window .toolbarbutton-badge.feature-callout { 293 background: var(--shy-color) !important; 294 border-radius: 50% !important; 295 box-shadow: none !important; 296 } 297 298 /* downloads: the arrow and its progress ring are already driven by 299 --toolbarbutton-icon-fill-attention, which shy-global.css points at the accent. The success and 300 info states follow; warning and severe keep their own colours, because those two are the only 301 places in the chrome where the colour is the message. */ 302 #main-window #downloads-button[attention="info"] 303 > .toolbarbutton-badge-stack > .toolbarbutton-badge { 304 fill: var(--shy-color) !important; 305 } 306 307 #main-window #downloads-button[attention="success"] { 308 color: var(--shy-color) !important; 309 } 310 311 /* The track the progress arc runs on is a full-strength ring: `1px solid currentColor` in 140, the 312 icon fill in the 155 SVG. Both compete with the accent arc drawn over them, so both drop to the 313 hairline scale and the arc is the only thing that reads. */ 314 #main-window #downloads-button 315 > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { 316 border-color: var(--shy-hairline-strong) !important; /* 140 */ 317 fill: var(--shy-hairline-strong) !important; /* 155 */ 318 } 319 320 /* 321 322 --- SEPARATORS AND SPRINGS ------------------------------------------------------------------------- 323 324 */ 325 326 /* The right-hand strip styles a spring as a divider. Selector for selector the same as 327 shy-toolbar.css so its !important is beaten on order alone; only the colour changes. The 1px 328 geometry and the opacity that hides the divider with the panel are both left where they are. */ 329 #main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]) 330 #TabsToolbar-customization-target toolbarspring { 331 background-color: var(--shy-hairline-strong) !important; 332 } 333 334 /* A separator draws itself from currentColor through its own ::before, so the colour has to land on 335 the element. The variables above already cover the versions that read them; this catches the rest. */ 336 #main-window toolbar toolbarseparator, 337 #main-window panel toolbarseparator { 338 color: var(--shy-hairline-strong) !important; 339 } 340 341 /* 342 343 --- FORM CONTROLS ---------------------------------------------------------------------------------- 344 345 Checkboxes, radios, menulists and the text fields that turn up in chrome panels and dialogs. 346 The address field is excluded everywhere: shy-floating-search.css already gives it its own outline. 347 348 */ 349 350 /* Gecko's non-native widget theme reads accent-color and derives the check glyph's colour from the 351 accent's own luminance, so this is the one place an accent fill is safe behind a mark. */ 352 :is(checkbox, radio, progress, 353 input:is([type="checkbox"], [type="radio"], [type="range"])) { 354 accent-color: var(--shy-color) !important; 355 } 356 357 /* Text fields: a quiet hairline at rest, an accent hairline when focused. Only border-color is 358 touched, never border-width, so nothing moves when the field takes focus. 359 This deliberately overrides shy-global.css's --input-border-color: var(--shy-color), which put an 360 accent edge on every field in the chrome whether it was focused or not. */ 361 :is(input, textarea, search-textbox, .textbox-input):not( 362 #urlbar-input, .urlbar-input, [type="checkbox"], [type="radio"], [type="range"], [type="color"]) { 363 border-color: var(--shy-hairline-strong) !important; 364 border-radius: var(--rounding) !important; 365 transition: border-color var(--shy-dur-fast) var(--shy-ease) !important; 366 367 &:focus, &:focus-within, &:focus-visible { 368 border-color: var(--shy-accent-line) !important; 369 } 370 } 371 372 /* dropdowns get the same hairline, and mark themselves open with the accent */ 373 menulist { 374 border-color: var(--shy-hairline-strong) !important; 375 transition: border-color var(--shy-dur-fast) var(--shy-ease) !important; 376 377 &[open] {border-color: var(--shy-accent-line) !important;} 378 } 379 380 /* 381 382 --- TOOLTIPS --------------------------------------------------------------------------------------- 383 384 */ 385 386 /* A tooltip is an OS-level popup sized to fit-content, so an outer shadow would fall outside its 387 own window and never paint. The elevation therefore comes from the material: the popup fill, one 388 hairline and a short fade. */ 389 tooltip { 390 appearance: none !important; 391 -moz-default-appearance: none !important; 392 393 background-color: var(--shy-surface-popup) !important; 394 color: var(--bt-col) !important; 395 border-color: var(--shy-hairline-strong) !important; 396 border-radius: var(--rounding) !important; 397 398 animation: shy-fade-in var(--shy-dur-fast) var(--shy-ease) !important; 399 } 400 401 @media not -moz-pref("shyfox.disable.blur") { 402 /* safe here: a tooltip has no position:fixed descendants and is not an ancestor of #urlbar */ 403 tooltip { 404 backdrop-filter: blur(var(--shy-glass-blur)) saturate(var(--shy-glass-saturate)) !important; 405 } 406 } 407 408 /* 409 410 --- NATIVE FALLBACK TAB STRIP ---------------------------------------------------------------------- 411 412 shy-sidebar.css shows #tabbrowser-tabs as a horizontal bar across the top when Sidebery is closed. 413 Its height (--shy-native-tabs-height), position and display are load-bearing and are not touched 414 here: only the tabs inside it are given a look. 415 416 */ 417 418 @media not -moz-pref("sidebar.verticalTabs") { 419 #main-window:not([chromehidden]:not([chromehidden=""]), [popup-window]):not([customizing], [inDOMFullscreen="true"]) 420 #tabbrowser-tabs:not([orient="vertical"]) { 421 422 /* the label follows the theme, not the toolbar colour Firefox would pick */ 423 --tab-selected-textcolor: var(--bt-col) !important; 424 425 /* rest is nothing at all; the strip's own fill shows through */ 426 .tabbrowser-tab > .tab-stack > .tab-background { 427 background-color: transparent !important; 428 background-image: none !important; 429 box-shadow: none !important; 430 transition: 431 background-color var(--shy-dur-fast) var(--shy-ease), 432 box-shadow var(--shy-dur-fast) var(--shy-ease) !important; 433 } 434 435 .tabbrowser-tab:hover:not([selected], [visuallyselected], [multiselected]) 436 > .tab-stack > .tab-background { 437 background-color: var(--shy-hover-tint) !important; 438 } 439 440 /* the selected tab is a raised plate with a solid accent bar along its bottom edge. The bar is 441 a background-image rather than a border so it costs no layout, and the label sits on the 442 plate, never on the accent. */ 443 .tabbrowser-tab:is([selected], [visuallyselected]) > .tab-stack > .tab-background { 444 background-color: var(--shy-selected-tint) !important; 445 background-image: linear-gradient(to top, var(--shy-color) 0 2px, transparent 2px) !important; 446 box-shadow: var(--shy-elev-1) !important; 447 } 448 449 .tabbrowser-tab[multiselected]:not([selected]) > .tab-stack > .tab-background { 450 background-color: var(--shy-accent-tint) !important; 451 } 452 453 /* keyboard focus in the tab list gets the same ring as everything else */ 454 &[tablist-has-focus] .tabbrowser-tab.tablist-keyboard-focus > .tab-stack > .tab-background { 455 outline: var(--shy-focus-outline) !important; 456 outline-offset: calc(-1 * var(--shy-ring-width)) !important; 457 } 458 459 /* the close button fades in with the tab. Opacity, not display, so the tab keeps its width and 460 the strip's geometry is untouched; pointer-events follow so an invisible button is never 461 clickable by accident. */ 462 .tabbrowser-tab .tab-close-button { 463 opacity: 0 !important; 464 pointer-events: none !important; 465 transition: opacity var(--shy-dur-fast) var(--shy-ease), 466 background-color var(--shy-dur-fast) var(--shy-ease) !important; 467 } 468 469 .tabbrowser-tab:is(:hover, [selected], [visuallyselected]) .tab-close-button { 470 opacity: 1 !important; 471 pointer-events: auto !important; 472 } 473 474 .tab-close-button:hover {background-color: var(--shy-hover-tint) !important;} 475 .tab-close-button:hover:active {background-color: var(--shy-active-tint) !important;} 476 477 /* a busy tab is the only looping indicator in the strip; give its throbber the accent */ 478 .tabbrowser-tab[busy] .tab-throbber {color: var(--shy-color) !important;} 479 480 /* a tidy new-tab button: a quiet plus that comes up to full strength under the pointer */ 481 #tabs-newtab-button { 482 color: var(--shy-text-dim) !important; 483 transition: color var(--shy-dur-fast) var(--shy-ease), 484 background-color var(--shy-dur-fast) var(--shy-ease) !important; 485 486 &:hover {color: var(--bt-col) !important;} 487 } 488 489 /* The strip's own degradation is nested rather than restated at the bottom of the file: these 490 selectors carry the whole guard above them, and only a rule with the same guard can undo 491 them. */ 492 @media (prefers-reduced-motion: reduce) { 493 .tabbrowser-tab > .tab-stack > .tab-background, 494 .tabbrowser-tab .tab-close-button, 495 #tabs-newtab-button { 496 transition: none !important; 497 animation: none !important; 498 } 499 } 500 501 @media (forced-colors: active) { 502 .tabbrowser-tab > .tab-stack > .tab-background { 503 box-shadow: none !important; 504 background-image: none !important; 505 } 506 507 .tabbrowser-tab:is([selected], [visuallyselected]) > .tab-stack > .tab-background { 508 background-color: Highlight !important; 509 color: HighlightText !important; 510 } 511 512 .tabbrowser-tab:hover:not([selected], [visuallyselected], [multiselected]) 513 > .tab-stack > .tab-background { 514 background-color: Canvas !important; 515 outline: 1px solid Highlight !important; 516 outline-offset: calc(-1 * var(--shy-ring-width)) !important; 517 } 518 519 /* a control that only announced itself with a tint has to stay visible without one */ 520 .tabbrowser-tab .tab-close-button { 521 opacity: 1 !important; 522 pointer-events: auto !important; 523 } 524 } 525 } 526 } 527 528 /* 529 530 --- GRACEFUL DEGRADATION --------------------------------------------------------------------------- 531 532 This file is imported after shy-compat.css, so it has to restate both contracts rather than inherit 533 them. Everything below only undoes what this file added. 534 535 */ 536 537 @media (prefers-reduced-motion: reduce) { 538 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item), 539 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item) 540 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 541 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 542 :is(.toolbarbutton-1, .subviewbutton), 543 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 544 :is(.toolbarbutton-1, .subviewbutton) 545 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 546 #main-window .titlebar-button .toolbarbutton-icon, 547 /* the :not() is here only to match the specificity of the rule it undoes */ 548 :is(input, textarea, search-textbox, .textbox-input, menulist):not(#urlbar-input, .urlbar-input), 549 tooltip { 550 transition: none !important; 551 animation: none !important; 552 } 553 554 /* The press response is motion too: keep the colour change, drop the movement. Every selector 555 below repeats the qualifiers of the rule it undoes, so the specificities match exactly and 556 source order decides. */ 557 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item):not([disabled]):hover:active 558 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 559 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 560 :is(.toolbarbutton-1, .subviewbutton):not([disabled]):hover:active 561 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 562 #main-window .titlebar-button:is(.titlebar-min, .titlebar-max, .titlebar-restore, 563 .titlebar-close):hover:active .toolbarbutton-icon, 564 #main-window :is(#PlacesChevron, #OtherBookmarks):not([disabled]):hover:active 565 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 566 transform: none !important; 567 } 568 } 569 570 @media (forced-colors: active) { 571 :root { 572 --shy-focus-outline: var(--shy-ring-width) solid Highlight; 573 --shy-close-tint: Highlight; 574 --shy-close-fg: HighlightText; 575 576 /* a hairline that is only a tint disappears here, so hand the separators a real colour back */ 577 --toolbarseparator-color: CanvasText !important; 578 --panel-separator-color: CanvasText !important; 579 } 580 581 #main-window:is([titlepreface*=""], [titlepreface*=""]):not([customizing]) 582 #TabsToolbar-customization-target toolbarspring, 583 #main-window toolbar toolbarseparator, 584 #main-window panel toolbarseparator { 585 background-color: CanvasText !important; 586 color: CanvasText !important; 587 } 588 589 /* no translucency, no blur, no shadows */ 590 tooltip { 591 backdrop-filter: none !important; 592 box-shadow: none !important; 593 background-color: Canvas !important; 594 color: CanvasText !important; 595 border-color: CanvasText !important; 596 animation: none !important; 597 } 598 599 /* the tints collapse to system colours, so the glyph on top of them has to move with them */ 600 #navigator-toolbox :is(.toolbarbutton-1, toolbarbutton.bookmark-item):not([disabled]):hover 601 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 602 #navigator-toolbox .toolbarbutton-1:is([open], [checked]):not([disabled]) 603 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack), 604 :is(panelview, .panel-subview-body, #widget-overflow, #customizationui-widget-panel) 605 :is(.toolbarbutton-1, .subviewbutton):not([disabled]):hover 606 > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { 607 background-color: Highlight !important; 608 color: HighlightText !important; 609 } 610 611 #navigator-toolbox .toolbarbutton-1:is([open], [checked]):not([disabled]) { 612 color: HighlightText !important; 613 } 614 615 #main-window .toolbarbutton-badge:not( 616 .feature-callout, 617 #PanelUI-menu-button[badge-status] .toolbarbutton-badge, 618 #downloads-button[attention] .toolbarbutton-badge 619 ) { 620 background-color: Canvas !important; 621 color: CanvasText !important; 622 box-shadow: inset 0 0 0 1px CanvasText !important; 623 } 624 625 #main-window .toolbarbutton-badge.feature-callout {background: Highlight !important;} 626 627 #main-window toolbarbutton.bookmark-item:not(.subviewbutton):is([open], [open="true"]), 628 #main-window menupopup :is(menu, menuitem).bookmark-item[_moz-menuactive]:not([disabled], 629 [disabled="true"]) { 630 background-color: Highlight !important; 631 color: HighlightText !important; 632 box-shadow: none !important; 633 } 634 635 :is(input, textarea, search-textbox, .textbox-input, menulist):not(#urlbar-input, .urlbar-input) { 636 border-color: CanvasText !important; 637 } 638 639 /* the fallback tab strip drops its translucency in the nested block inside its own guard, where 640 the specificities line up */ 641 } 642 643 } /* shyfox.disable.polish */