shy-polish-content.css (25900B)
1 /*== ShyFox Polish (content) ======================================================================== 2 3 Visual polish for the documents userContent.css can reach: the Sidebery sidebar, about:home and 4 about:newtab, the about: / chrome: pages, and extension popups. This file is imported after 5 content/shy-sidebery.css, content/shy-new-tab.css, content/shy-about.css and 6 content/shy-global-content.css, so it extends them instead of repeating them. 7 8 Everything is scoped by @-moz-document. Nothing here may reach an ordinary web page. 9 10 Colours come from the five ShyFox variables -- --bg-col, --tb-col, --bt-col, --pp-col and 11 --shy-color -- exactly as in the chrome layer, and from shy-tokens.css, which userContent.css 12 imports. The accent, elevation and motion scales are taken from there unchanged. The only local 13 tokens are the neutral tints, which are the shy-tokens scales re-anchored per document (see the 14 token block below), plus one composite built from them. 15 16 The whole file sits behind `shyfox.disable.polish`; the one backdrop blur it adds sits behind 17 `shyfox.disable.blur` as well. 18 19 ===================================================================================================*/ 20 21 @media not -moz-pref("shyfox.disable.polish") { 22 23 /*== TOKENS ======================================================================================== 24 25 One shared block for every document this file touches. 26 27 These are the same percentages shy-tokens.css uses for --shy-hairline, --shy-hover-tint, 28 --shy-active-tint, --shy-selected-tint, --shy-text-dim and --shy-scrollbar. What differs is only 29 what they are mixed from: shy-tokens anchors them to --bt-col, the *chrome's* ink. That is right 30 inside the Sidebery sidebar, which ShyFox repaints, and wrong on an about: page, which keeps 31 Firefox's own in-content palette and can be light while the chrome is dark -- a --bt-col hairline 32 would vanish there. So the family is anchored to --shy-c-ink instead: `currentColor` by default, 33 --bt-col where ShyFox owns the surface. Each scope declares --shy-c-ink on :root and the whole 34 family follows it, because a custom property is substituted only after the cascade has picked a 35 winner for its input. 36 37 */ 38 39 @-moz-document url-prefix("about:"), url-prefix("chrome:"), url-prefix("moz-extension:") { 40 41 :root { 42 /* what the neutral tints are mixed from; overridden per scope below */ 43 --shy-c-ink: currentColor; 44 45 --shy-c-hairline: color-mix(in srgb, var(--shy-c-ink) 13%, transparent); 46 --shy-c-hairline-strong: color-mix(in srgb, var(--shy-c-ink) 22%, transparent); 47 48 /* the resting fill of a raised control: one step up from the sidebar surface */ 49 --shy-c-fill: color-mix(in srgb, var(--bt-col) 7%, transparent); 50 --shy-c-hover: color-mix(in srgb, var(--shy-c-ink) 10%, transparent); 51 --shy-c-pressed: color-mix(in srgb, var(--shy-c-ink) 16%, transparent); 52 --shy-c-selected: color-mix(in srgb, var(--shy-c-ink) 22%, transparent); 53 54 /* text that is deliberately quieter than the ink, for a list's resting rows */ 55 --shy-c-text-quiet: color-mix(in srgb, var(--shy-c-ink) 65%, transparent); 56 57 --shy-c-scroll-thumb: color-mix(in srgb, var(--shy-c-ink) 28%, transparent); 58 59 /* the one composite: the marker for "this row is the current one", a bar and not a fill. 60 box-shadow has no logical-property form, so the direction is flipped here rather than in 61 each of the rules that use it. */ 62 --shy-c-accent-bar: inset 3px 0 0 0 var(--shy-color); 63 &:dir(rtl) {--shy-c-accent-bar: inset -3px 0 0 0 var(--shy-color);} 64 } 65 } 66 67 /*== SIDEBERY ====================================================================================== 68 69 The sidebar is this user's tab bar, so it gets the most care. 70 71 Sidebery paints from two tiers: --s-* written as inline style on <body> from browser.theme, and a 72 derived tier on #root keyed by four independent data-*-color-scheme attributes. Overriding the --s-* 73 tier on #root is the lever that reaches both -- it feeds every derived variable *and* every direct 74 `var(--s-*, fallback)` read in Sidebery's sheet, in the dark and the light branch alike, whatever 75 the user's "Color scheme" setting is. userContent.css is a user sheet, so !important here outranks 76 Sidebery's author rules, its runtime <style id="custom_css">, and the inline --s-* on <body>. 77 78 */ 79 80 @-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html"){ /* wrap start */ 81 82 /* inside the sidebar ShyFox owns the surface, so the neutral tints follow the theme's ink */ 83 :root {--shy-c-ink: var(--bt-col);} 84 85 /* the loading sweep. shy-tokens.css lives in the chrome context; a content document needs its 86 own copy of the keyframes it animates. */ 87 @keyframes shy-c-sweep { 88 from {background-position: -120% 0;} 89 to {background-position: 220% 0;} 90 } 91 92 /* the theme-injection tier. --bg-col matches #sidebar-box in shy-sidebar.css exactly, so the 93 document reads as part of the panel; the glass is the chrome panel's job, not the page's. */ 94 #root.root { 95 --s-frame-bg: var(--bg-col) !important; 96 --s-frame-fg: var(--bt-col) !important; 97 --s-toolbar-bg: var(--tb-col) !important; 98 --s-toolbar-fg: var(--bt-col) !important; 99 --s-popup-bg: var(--pp-col) !important; 100 --s-popup-fg: var(--bt-col) !important; 101 --s-accent: var(--shy-color) !important; 102 103 --s-toolbar-border: var(--shy-c-hairline) !important; 104 --s-popup-border: var(--shy-c-hairline) !important; 105 --s-act-el-border: var(--shy-c-hairline) !important; 106 107 /* the active chip: the accent as a tint over the toolbar fill, never as the fill itself, so 108 --bt-col text keeps its contrast whatever luminance the user's accent has */ 109 --s-act-el-bg: color-mix(in srgb, var(--shy-color) 14%, var(--tb-col)) !important; 110 --s-act-el-fg: var(--bt-col) !important; 111 } 112 113 /* the derived tier. Sidebery hard-codes these per colour scheme, so they cannot be reached 114 through --s-*; they are the four-state system for every row and button in the sidebar. */ 115 #root.root { 116 --frame-el-overlay-hover-bg: var(--shy-c-hover) !important; 117 --frame-el-overlay-clicked-bg: var(--shy-c-pressed) !important; 118 --frame-el-overlay-selected-bg: var(--shy-accent-weak) !important; 119 --toolbar-el-overlay-hover-bg: var(--shy-c-hover) !important; 120 --toolbar-el-overlay-clicked-bg: var(--shy-c-pressed) !important; 121 --toolbar-el-overlay-active-bg: var(--shy-c-hover) !important; 122 --toolbar-el-overlay-selected-bg: var(--shy-accent-weak) !important; 123 --active-el-overlay-hover-bg: var(--shy-c-hover) !important; 124 --active-el-overlay-clicked-bg: var(--shy-c-pressed) !important; 125 126 /* rest: rows sit directly on the sidebar surface, with no card of their own */ 127 --frame-el-bg: transparent !important; 128 --frame-el-shadow: none !important; 129 --tabs-normal-bg: transparent !important; 130 131 /* the title ladder: resting rows quieter than the current one */ 132 --tabs-normal-fg: var(--shy-c-text-quiet) !important; 133 --tabs-activated-fg: var(--bt-col) !important; 134 135 /* active: accent bar down the leading edge plus one hairline. no accent fill. */ 136 --tabs-activated-shadow: var(--shy-c-accent-bar), 137 inset 0 0 0 1px var(--shy-c-hairline) !important; 138 --active-el-shadow: inset 0 0 0 1px var(--shy-c-hairline) !important; 139 140 /* an unloaded tab should read as parked, not as an equal of the loaded ones */ 141 --tabs-discarded-favicon-opacity: .38 !important; 142 --tabs-discarded-title-opacity: .45 !important; 143 144 /* popups and the search field, matched to the chrome material */ 145 --ctx-menu-shadow: 0 0 0 1px var(--shy-c-hairline), var(--shy-elev-2) !important; 146 --popup-shadow: 0 0 0 1px var(--shy-c-hairline), var(--shy-elev-2) !important; 147 --ctx-menu-separator: var(--shy-c-hairline) !important; 148 --search-shadow: inset 0 0 0 1px var(--shy-c-hairline) !important; 149 --search-border-radius: var(--big-rounding) !important; 150 151 /* the open panel's button carries an accent underline, its selected sibling an accent ring */ 152 --nav-btn-active-shadow: inset 0 -2px 0 0 var(--shy-color) !important; 153 154 /* bookmark folders that are open read as containers, not as pressed buttons */ 155 --bookmarks-expanded-folder-bg: var(--shy-c-fill) !important; 156 --bookmarks-expanded-folder-shadow: inset 0 0 0 1px var(--shy-c-hairline) !important; 157 --bookmarks-node-activated-fg: var(--bt-col) !important; 158 159 /* scrollbars, custom and native alike */ 160 --scroll-color: var(--shy-c-scroll-thumb) !important; 161 --frame-scrollbar-color: var(--shy-c-scroll-thumb) !important; 162 --toolbar-scrollbar-color: var(--shy-c-scroll-thumb) !important; 163 --popup-scrollbar-color: var(--shy-c-scroll-thumb) !important; 164 } 165 166 /* fade the state change instead of snapping it. .body carries the active colour, .body:before the 167 hover and multi-select overlay; neither had a background transition, so nothing collides. The 168 geometry transitions Sidebery owns are kept, on Sidebery's own duration token. */ 169 #root .Tab > .body { 170 transition: background-color var(--shy-dur-fast) var(--shy-ease), 171 box-shadow var(--shy-dur-fast) var(--shy-ease), 172 opacity var(--d-fast, 160ms), transform var(--d-fast, 160ms) !important; 173 } 174 175 #root .Tab > .body::before { 176 transition: background-color var(--shy-dur-fast) var(--shy-ease), 177 box-shadow var(--shy-dur-fast) var(--shy-ease) !important; 178 } 179 180 /* a tab group, folded or not, is a header: heavier title, and a hairline round the folded row so 181 it reads as the container of what it hides. active groups keep their accent bar. */ 182 #root .Tab[data-parent="true"] .title {font-weight: 600 !important;} 183 184 #root .Tab[data-parent="true"][data-folded="true"]:not([data-active="true"]) > .body { 185 box-shadow: inset 0 0 0 1px var(--shy-c-hairline) !important; 186 } 187 188 #root .BookmarkNode[data-type="folder"] > .body > .title {font-weight: 600 !important;} 189 190 /* close button: fades with the row, and outranks the row's own hover so it reads as a target */ 191 #root .Tab .close { 192 transition: opacity var(--shy-dur-fast) var(--shy-ease), 193 background-color var(--shy-dur-fast) var(--shy-ease) !important; 194 } 195 196 #root .Tab .close:hover {background-color: var(--shy-c-pressed) !important;} 197 #root .Tab .close:active {background-color: var(--shy-c-selected) !important;} 198 #root .Tab .close:hover > .close-icon {opacity: 1 !important;} 199 200 /* audio button: Sidebery dims it on hover, which reads as disabled. give it a real button state. */ 201 #root .Tab[data-pin="false"] .audio { 202 border-radius: calc(var(--tabs-border-radius) - 2px) !important; 203 transition: opacity var(--shy-dur-fast) var(--shy-ease), 204 background-color var(--shy-dur-fast) var(--shy-ease) !important; 205 } 206 207 #root .Tab[data-pin="false"]:is([data-audible="true"], [data-muted="true"], [data-paused="true"]) 208 .audio:hover { 209 opacity: 1 !important; 210 background-color: var(--shy-c-pressed) !important; 211 } 212 213 /* a loading tab: accent spinner, plus one slow accent sweep along the row. gated on Sidebery's own 214 animation setting so `Animations: none` still means none, and on the free background-image slot 215 of .body so it cannot collide with the tree-level marks on .body::after. */ 216 #root .Tab[data-loading="true"] .progress-spinner { 217 border-top-color: var(--shy-color) !important; 218 } 219 220 #root:not([data-animations="none"]) .Tab[data-loading="true"] > .body { 221 background-image: linear-gradient(90deg, 222 transparent 10%, var(--shy-accent-tint) 50%, transparent 90%) !important; 223 background-size: 220% 100% !important; 224 background-repeat: no-repeat !important; 225 animation: shy-c-sweep 1.2s linear infinite !important; 226 } 227 228 /* pinned tiles. shy-sidebery.css builds the grid; only the material changes here. */ 229 #root .Tab[data-pin="true"] > .body { 230 border-color: var(--shy-c-hairline) !important; 231 } 232 233 #root .Tab[data-pin="true"]:hover > .body { 234 transform: translateY(-2px) !important; 235 box-shadow: var(--shy-elev-1) !important; 236 } 237 238 /* a square tile wants a ring, not the left bar the list rows get */ 239 #root .Tab[data-pin="true"][data-active="true"] > .body { 240 border-color: var(--shy-color) !important; 241 box-shadow: 0 0 0 1px var(--shy-accent-strong) !important; 242 } 243 244 /* drag and drop: the insertion caret is already accent-coloured through --s-accent above; this 245 only lifts it off whatever it is crossing */ 246 #root .pointer::after { 247 box-shadow: 3px 0 0 1px var(--frame-bg), 248 0 0 6px var(--shy-accent-strong) !important; 249 } 250 251 /* the search field, matched to the floating address bar: hairline at rest, accent ring and a 252 soft accent glow when it has focus */ 253 #root .SearchBar[data-focused="true"]::before { 254 box-shadow: inset 0 0 0 1px var(--shy-color), 255 0 0 18px var(--shy-accent-tint) !important; 256 } 257 258 /* bottom-bar tool buttons need a resting surface now that --frame-el-bg is transparent */ 259 #root.Sidebar .tool-btn { 260 background-color: var(--shy-c-fill) !important; 261 box-shadow: none !important; 262 } 263 264 /* one focus ring for everything keyboard-reachable in the sidebar */ 265 #root :is(input, .nav-item, .tool-btn, .btn):focus-visible { 266 outline: 2px solid var(--shy-color) !important; 267 outline-offset: 1px !important; 268 } 269 270 /* the context menu is the one content surface with something worth blurring behind it -- the tab 271 list. it appears one at a time, so it stays well inside the blur budget. The fill below is the 272 finished, blur-off state; the blurred branch only makes it thinner. */ 273 #root .CtxMenu .box::before { 274 background-color: var(--pp-col) !important; 275 } 276 277 @media not -moz-pref("shyfox.disable.blur") { 278 #root .CtxMenu .box::before { 279 background-color: color-mix(in srgb, var(--pp-col) 82%, transparent) !important; 280 backdrop-filter: blur(var(--blur-radius)) saturate(1.3) !important; 281 } 282 } 283 284 /*-- graceful degradation, sidebar --------------------------------------------------------------*/ 285 286 @media (prefers-reduced-motion: reduce) { 287 #root .Tab > .body, 288 #root .Tab > .body::before, 289 #root .Tab .close, 290 #root .Tab[data-pin="false"] .audio {transition: none !important;} 291 292 #root .Tab[data-pin="true"]:hover > .body {transform: none !important;} 293 294 #root:not([data-animations="none"]) .Tab[data-loading="true"] > .body { 295 animation: none !important; 296 background-image: none !important; 297 } 298 } 299 300 @media (forced-colors: active) { 301 #root.root { 302 --s-frame-bg: Canvas !important; 303 --s-frame-fg: CanvasText !important; 304 --s-toolbar-bg: Canvas !important; 305 --s-toolbar-fg: CanvasText !important; 306 --s-popup-bg: Canvas !important; 307 --s-popup-fg: CanvasText !important; 308 --s-accent: Highlight !important; 309 310 --s-act-el-bg: Highlight !important; 311 --s-act-el-fg: HighlightText !important; 312 313 --tabs-normal-fg: CanvasText !important; 314 --tabs-activated-fg: HighlightText !important; 315 --tabs-activated-shadow: none !important; 316 --active-el-shadow: none !important; 317 318 /* the overlays paint *under* the row's label, so a solid Highlight fill here would put 319 Highlight behind CanvasText. Hover is marked with an outline instead; multi-select keeps 320 the Highlight ring Sidebery already draws from --frame-el-overlay-selected-border. */ 321 --frame-el-overlay-hover-bg: transparent !important; 322 --frame-el-overlay-clicked-bg: transparent !important; 323 --frame-el-overlay-selected-bg: transparent !important; 324 --toolbar-el-overlay-hover-bg: transparent !important; 325 --toolbar-el-overlay-clicked-bg: transparent !important; 326 --toolbar-el-overlay-active-bg: transparent !important; 327 --toolbar-el-overlay-selected-bg: transparent !important; 328 --active-el-overlay-hover-bg: transparent !important; 329 --active-el-overlay-clicked-bg: transparent !important; 330 --nav-btn-active-shadow: inset 0 -2px 0 0 Highlight !important; 331 332 --ctx-menu-shadow: 0 0 0 1px CanvasText !important; 333 --popup-shadow: 0 0 0 1px CanvasText !important; 334 --search-shadow: inset 0 0 0 1px CanvasText !important; 335 --bookmarks-expanded-folder-shadow: inset 0 0 0 1px CanvasText !important; 336 } 337 338 #root .Tab:hover > .body::before { 339 outline: 1px solid CanvasText !important; 340 outline-offset: -1px !important; 341 } 342 343 #root .Tab[data-pin="true"] > .body, 344 #root .Tab[data-pin="true"][data-active="true"] > .body, 345 #root.Sidebar .tool-btn { 346 background-color: Canvas !important; 347 border-color: CanvasText !important; 348 box-shadow: none !important; 349 } 350 351 #root .CtxMenu .box::before { 352 background-color: Canvas !important; 353 backdrop-filter: none !important; 354 } 355 356 #root:not([data-animations="none"]) .Tab[data-loading="true"] > .body { 357 animation: none !important; 358 background-image: none !important; 359 } 360 } 361 362 } /* wrap end */ 363 364 /*== NEW TAB / HOME ================================================================================ 365 366 shy-new-tab.css owns the wallpaper, the central box and the glass search field. This adds state: 367 focus, hover and the contrast of text that sits over a photograph. 368 369 */ 370 371 @-moz-document url("about:home"), url("about:newtab") { 372 373 /* one focus ring for everything on the page, in the accent */ 374 .activity-stream :is(a, button, select, input, summary, [role="button"]):focus-visible { 375 outline: 2px solid var(--shy-color) !important; 376 outline-offset: 2px !important; 377 } 378 379 /* top sites lift on hover. 2px, inside the 5px padding shy-new-tab.css gives the outer box, so 380 nothing shifts around it. */ 381 .top-site-outer .top-site-button { 382 transition: translate var(--shy-dur-fast) var(--shy-ease), 383 box-shadow var(--shy-dur-fast) var(--shy-ease) !important; 384 } 385 386 .top-site-outer:is(:hover, :focus-within) .top-site-button { 387 translate: 0 -2px !important; 388 box-shadow: var(--shy-elev-2) !important; 389 } 390 391 /* tile titles sit on the wallpaper, so their chip has to carry the contrast on its own; the 392 40%-alpha --tr-col does not, over a bright photograph. With a chip that opaque the label is 393 no longer reading against the wallpaper, so it takes the colour that pairs with the chip 394 rather than --newtab-contextual-text-primary-color, which is picked for the wallpaper. */ 395 .top-site-outer .title { 396 background-color: color-mix(in srgb, var(--newtab-background-color) 74%, transparent) !important; 397 color: var(--newtab-text-primary-color) !important; 398 } 399 400 /* story cards get the same material as the chrome panels: one hairline, a soft shadow, and the 401 page's own background as a translucent fill. Deliberately no backdrop blur -- the grid can hold 402 twenty of these at once, which is far outside the blur budget. */ 403 .ds-card-grid:not(.ds-card-grid-hide-background) .ds-card:not(.placeholder) { 404 background-color: color-mix(in srgb, var(--newtab-background-color) 62%, transparent) !important; 405 border-radius: var(--big-rounding) !important; 406 box-shadow: 0 0 0 1px var(--shy-c-hairline), var(--shy-elev-1) !important; 407 transition: translate var(--shy-dur-fast) var(--shy-ease), 408 box-shadow var(--shy-dur-fast) var(--shy-ease) !important; 409 } 410 411 .ds-card-grid:not(.ds-card-grid-hide-background) .ds-card:not(.placeholder):hover { 412 translate: 0 -2px !important; 413 box-shadow: 0 0 0 1px var(--shy-c-hairline-strong), var(--shy-elev-2) !important; 414 } 415 416 /* Gecko 155 replaced the .search-handoff-button element with <content-search-handoff-ui> and 417 drives it from custom properties, so the two rules for the old class in shy-new-tab.css no 418 longer match anything. Same look, current hooks. */ 419 .search-wrapper content-search-handoff-ui { 420 --content-search-handoff-ui-background-color: var(--tr-col) !important; 421 --content-search-handoff-ui-caret-color: var(--shy-color) !important; 422 --content-search-handoff-ui-fakefocus-border-color: var(--shy-color) !important; 423 --content-search-handoff-ui-fakefocus-box-shadow-inner: var(--shy-accent-tint) !important; 424 } 425 426 /*-- graceful degradation, new tab ---------------------------------------------------------------*/ 427 428 @media (prefers-reduced-motion: reduce) { 429 .top-site-outer .top-site-button, 430 .ds-card-grid:not(.ds-card-grid-hide-background) .ds-card:not(.placeholder) 431 {transition: none !important;} 432 433 .top-site-outer:is(:hover, :focus-within) .top-site-button, 434 .ds-card-grid:not(.ds-card-grid-hide-background) .ds-card:not(.placeholder):hover 435 {translate: none !important;} 436 } 437 438 @media (forced-colors: active) { 439 .top-site-outer:is(:hover, :focus-within) .top-site-button {box-shadow: none !important;} 440 441 .top-site-outer .title {background-color: Canvas !important; color: CanvasText !important;} 442 443 .ds-card-grid:not(.ds-card-grid-hide-background) .ds-card:not(.placeholder), 444 .ds-card-grid:not(.ds-card-grid-hide-background) .ds-card:not(.placeholder):hover { 445 background-color: Canvas !important; 446 box-shadow: none !important; 447 outline: 1px solid CanvasText !important; 448 outline-offset: -1px !important; 449 } 450 } 451 } 452 453 /*== about: AND chrome: PAGES ====================================================================== 454 455 shy-about.css maps the accent and rounds the corners. This adds the states: hover and focus, one 456 consistent hairline, and scrollbars that belong to the theme. 457 458 These pages keep Firefox's own in-content palette, so the neutral tints stay on `currentColor` 459 (see the token block) and only the accent comes from --shy-color. 460 461 */ 462 463 @-moz-document url-prefix("about:"), url-prefix("chrome:") { 464 465 :root { 466 /* one hairline everywhere a separator or a card edge is drawn. Gecko 140 and 155 renamed these 467 between them, so both spellings are set. */ 468 --border-color: var(--shy-c-hairline-strong) !important; 469 --border-color-deemphasized: var(--shy-c-hairline) !important; 470 --border-color-card: var(--shy-c-hairline) !important; /* 140 */ 471 --card-border-color: var(--shy-c-hairline) !important; /* 155 */ 472 --panel-separator-color: var(--shy-c-hairline) !important; 473 474 /* cards already transition their shadow; this only replaces the scale */ 475 --box-shadow-card: var(--shy-elev-1) !important; /* 140 */ 476 --box-shadow-card-hover: var(--shy-elev-2) !important; 477 --card-box-shadow: var(--shy-elev-1) !important; /* 155 */ 478 --card-box-shadow-hover: var(--shy-elev-2) !important; 479 480 scrollbar-color: var(--shy-c-scroll-thumb) transparent !important; 481 } 482 483 /* the preferences / add-ons category list: quiet hover, accent bar on the current one. The bar 484 replaces a fill so the accent never sits behind the label. */ 485 #categories > .category { 486 transition: background-color var(--shy-dur-fast) var(--shy-ease), 487 box-shadow var(--shy-dur-fast) var(--shy-ease) !important; 488 } 489 490 #categories > .category:hover {background-color: var(--shy-c-hover) !important;} 491 492 #categories > .category:is([selected], .selected) { 493 background-color: var(--shy-accent-weak) !important; 494 box-shadow: var(--shy-c-accent-bar) !important; 495 } 496 497 /* list rows: containers, applications, languages, sites */ 498 richlistbox > richlistitem:not([selected]):hover { 499 background-color: var(--shy-c-hover) !important; 500 } 501 502 /* links and the sidebar footer had no ring of their own */ 503 :is(a, summary, .sidebar-footer-link):focus-visible { 504 outline: 2px solid var(--shy-color) !important; 505 outline-offset: 2px !important; 506 } 507 508 /*-- graceful degradation, about: ----------------------------------------------------------------*/ 509 510 @media (prefers-reduced-motion: reduce) { 511 #categories > .category {transition: none !important;} 512 } 513 514 @media (forced-colors: active) { 515 :root { 516 --box-shadow-card: none !important; 517 --box-shadow-card-hover: none !important; 518 --card-box-shadow: none !important; 519 --card-box-shadow-hover: none !important; 520 --border-color: CanvasText !important; 521 --border-color-deemphasized: CanvasText !important; 522 --border-color-card: CanvasText !important; 523 --card-border-color: CanvasText !important; 524 scrollbar-color: auto !important; 525 } 526 527 #categories > .category:hover, 528 richlistbox > richlistitem:not([selected]):hover { 529 background-color: Highlight !important; 530 color: HighlightText !important; 531 } 532 533 #categories > .category:is([selected], .selected) { 534 background-color: Highlight !important; 535 color: HighlightText !important; 536 box-shadow: none !important; 537 } 538 } 539 } 540 541 /*== EXTENSION POPUPS ============================================================================== 542 543 shy-global-content.css rounds the body of a moz-extension document. The drop shadow of a popup 544 belongs to the chrome panel behind it, which the page cannot reach; what the page can add is the 545 hairline that makes its own rounded edge read against that panel, plus the elevation that shows in 546 the corners the rounding cuts away. 547 548 A WebExtension popup is capped at 800x600, so that bound keeps this off full-page extension 549 documents; the :has() keeps it off the Sidebery sidebar, which paints its own surface above. 550 551 */ 552 553 @-moz-document url-prefix("moz-extension:") { 554 @media (max-width: 800px) and (max-height: 600px) { 555 body:not(:has(#root.Sidebar)) { 556 box-shadow: inset 0 0 0 1px var(--shy-c-hairline), var(--shy-elev-2) !important; 557 } 558 559 @media (forced-colors: active) { 560 body:not(:has(#root.Sidebar)) { 561 box-shadow: inset 0 0 0 1px CanvasText !important; 562 } 563 } 564 } 565 } 566 567 } /* shyfox.disable.polish */