shy-urlbar.css (24557B)
1 /*== ShyFox Urlbar Polish =========================================================================== 2 3 Material, state feedback and motion for the address bar, the floating search overlay and the results 4 list. Position and geometry stay where shy-floating-search.css and shy-navbar.css put them -- this 5 file only paints. 6 7 Two constraints shape everything below. 8 9 1. #urlbar is position:fixed against the viewport, so nothing here may put filter, backdrop-filter, 10 transform, translate, perspective, contain or will-change on #nav-bar, #nav-bar-customization- 11 target, #urlbar-container, #navigator-toolbox or #urlbar itself: any of those would make the 12 ancestor the containing block and collapse the floating field back into the toolbar. The blur 13 therefore lives on :is(#urlbar-background, .urlbar-background), which is an absolutely 14 positioned *child* of #urlbar and a sibling of the input container and the results view, so it 15 captures nothing. 16 17 2. --shy-color is chosen by the user and its luminance is unknown. Nothing here puts --bt-col text 18 on a solid accent fill: selection is an --shy-accent-tint plus a solid accent bar off to the 19 side, where no text sits on top of it. 20 21 Gecko 155 turned most of the urlbar internals from ids into classes, so every selector is written 22 :is(#old, .new) or against the class both builds share. 23 24 ===================================================================================================*/ 25 26 @media not -moz-pref("shyfox.disable.polish") { 27 28 /*== TOKENS ========================================================================================= 29 30 Local additions to shy-tokens.css. Everything is a mix of the colours ShyFox already reads off the 31 active theme, so a personal palette keeps full control. 32 33 */ 34 35 :root { 36 /* the field reads as recessed when idle and one step back towards the toolbar on hover */ 37 --shy-field-idle: color-mix(in srgb, var(--bg-col) 55%, var(--tb-col)); 38 --shy-field-hover: color-mix(in srgb, var(--bg-col) 32%, var(--tb-col)); 39 40 /* entrance of the floating overlay. The smoke test measures the field's rectangle about a tenth 41 of a second after focus, so this has to be all but over by then. */ 42 --shy-urlbar-enter: 150ms; 43 44 /* press feedback, shorter than --shy-dur-fast so a click reads as immediate */ 45 --shy-dur-press: 90ms; 46 47 /* how much of the page the scrim behind the overlay keeps */ 48 --shy-scrim-opct: 66%; 49 } 50 51 /* with blur on, the scrim does not have to work as hard to separate the overlay from the page */ 52 @media not -moz-pref("shyfox.disable.blur") { 53 :root {--shy-scrim-opct: 46%;} 54 } 55 56 /*== THE FIELD ====================================================================================== 57 58 The painted surface of the address bar is #urlbar-background (140) / .urlbar-background (155): an 59 empty box with position:absolute and inset:0, drawn behind the input container and the results view. 60 It is the only safe host for material on this widget. 61 62 */ 63 64 /* one hairline and one transition for every state below */ 65 #main-window:not([customizing]) #urlbar :is(#urlbar-background, .urlbar-background) { 66 border: 1px solid var(--shy-hairline) !important; 67 transition: 68 background-color var(--shy-dur-fast) var(--shy-ease), 69 border-color var(--shy-dur-fast) var(--shy-ease), 70 outline-color var(--shy-dur-fast) var(--shy-ease), 71 box-shadow var(--shy-dur) var(--shy-ease) !important; 72 } 73 74 /* idle: a quiet sunken fill. In the hidden-navbar state the whole bar is invisible until it is 75 revealed, so this must never draw attention on its own. The tab-loading gradient in 76 shy-navbar.css:67 is written at a much higher specificity and still wins over both of these. */ 77 #main-window:not([customizing]) #urlbar:not(:is([focused], :focus-within, [open], [breakout-extend])) 78 :is(#urlbar-background, .urlbar-background) { 79 background-color: var(--shy-field-idle) !important; 80 } 81 82 /* hover: barely there -- one step less sunken and a slightly firmer edge */ 83 #main-window:not([customizing]) #urlbar:not(:is([focused], :focus-within, [open], [breakout-extend])):hover 84 :is(#urlbar-background, .urlbar-background) { 85 background-color: var(--shy-field-hover) !important; 86 border-color: var(--shy-hairline-strong) !important; 87 } 88 89 /* focus: the field lifts and the accent arrives as a hairline plus its glow, never as a fill. 90 --shy-accent-glow already carries the 1px ring, so the border stays out of the way. Replaces 91 140's hard-coded `box-shadow: 0 1px 3px rgba(0,0,0,0.23)` and the platform focus outline. */ 92 #main-window:not([customizing]) #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 93 :is(#urlbar-background, .urlbar-background) { 94 background-color: var(--shy-surface-raised) !important; 95 border-color: transparent !important; 96 outline: none !important; 97 box-shadow: var(--shy-accent-glow) !important; 98 } 99 100 /* the caret is a rule, not text, so the solid accent is safe here */ 101 #main-window #urlbar:is([focused], [open]) :is(#urlbar-input, .urlbar-input) { 102 caret-color: var(--shy-color); 103 } 104 105 /* shy-global.css:585 paints every ::selection with the solid accent. Inside the field that is 106 --bt-col text on an unknown-luminance fill, so tint instead and pin the text colour. */ 107 #main-window #urlbar :is(#urlbar-input, .urlbar-input)::selection { 108 background-color: var(--shy-accent-strong) !important; 109 color: var(--bt-col) !important; 110 } 111 112 /* the placeholder is secondary text; Firefox dims it with opacity, which also dims the caret hint */ 113 #main-window #urlbar :is(#urlbar-input, .urlbar-input)::placeholder { 114 color: var(--shy-text-dim) !important; 115 opacity: 1 !important; 116 } 117 118 /*== CONTROLS INSIDE THE FIELD ====================================================================== 119 120 The go button, the page-action buttons and the identity chips all read one family of tokens, which 121 Gecko 155 renamed wholesale. Setting both spellings on #urlbar retunes every one of them at once. 122 123 */ 124 125 #main-window:not([customizing]) #urlbar { 126 --urlbar-box-hover-bgcolor: var(--shy-hover-tint) !important; 127 --urlbar-box-background-color-hover: var(--shy-hover-tint) !important; 128 --urlbar-box-active-bgcolor: var(--shy-active-tint) !important; 129 --urlbar-box-background-color-active: var(--shy-active-tint) !important; 130 } 131 132 /* quick in, quicker down */ 133 #main-window #urlbar :is(#urlbar-go-button, .urlbar-go-button, .urlbar-page-action, 134 #urlbar-revert-button-container) { 135 transition: background-color var(--shy-dur-fast) var(--shy-ease) !important; 136 137 &:hover:active { 138 transition-duration: var(--shy-dur-press); 139 } 140 } 141 142 /*== CHIPS ========================================================================================== 143 144 Search mode and switch-to-tab are the two states where the field says something about itself. Both 145 get the accent as a tint plus one hairline, and keep --bt-col text. 146 147 */ 148 149 /* shy-compat.css pins --urlbar-box-background-color at :root with !important, so this needs 150 !important as well as the higher specificity to land. */ 151 #main-window:not([customizing]) #urlbar[searchmode] { 152 --urlbar-box-bgcolor: var(--shy-accent-tint) !important; 153 --urlbar-box-focus-bgcolor: var(--shy-accent-tint) !important; 154 --urlbar-box-background-color: var(--shy-accent-tint) !important; 155 --urlbar-box-background-color-focus: var(--shy-accent-tint) !important; 156 } 157 158 /* inset shadow rather than a border so the chip does not change size */ 159 #main-window #urlbar[searchmode] 160 :is(#urlbar-search-mode-indicator, #searchmode-switcher-chicklet) { 161 box-shadow: inset 0 0 0 1px var(--shy-accent-line) !important; 162 color: var(--bt-col) !important; 163 } 164 165 /* 155 turned the switcher into a shadow-DOM moz-button; its painted box is only reachable as a 166 part. Inert on 140, where the switcher is a plain toolbarbutton handled by the rule above. */ 167 #main-window #urlbar[searchmode] .searchmode-switcher::part(button) { 168 box-shadow: inset 0 0 0 1px var(--shy-accent-line) !important; 169 } 170 171 /* the "Switch to Tab" / extension chip inside the field */ 172 #main-window #urlbar > :is(#urlbar-input-container, .urlbar-input-container) > #urlbar-label-box { 173 background-color: var(--shy-accent-tint) !important; 174 color: var(--bt-col) !important; 175 box-shadow: inset 0 0 0 1px var(--shy-accent-line) !important; 176 border-radius: var(--rounding) !important; 177 } 178 179 /* and the matching chiclet on the result row it points at */ 180 .urlbarView .urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) 181 .urlbarView-action { 182 background-color: var(--shy-accent-tint) !important; 183 color: var(--bt-col) !important; 184 box-shadow: inset 0 0 0 1px var(--shy-accent-line) !important; 185 } 186 187 /*== RESULTS ======================================================================================== 188 189 One variable block retunes hover, selection, separators and secondary text for the whole list, in 190 both builds: Gecko 155 lower-cased every one of these token names but kept the same meanings. 191 Declaring them on .urlbarView beats the :root defaults by proximity, whatever their specificity. 192 193 */ 194 195 .urlbarView { 196 --urlbarView-hover-background: var(--shy-hover-tint); 197 --urlbarview-background-color-hover: var(--shy-hover-tint); 198 199 --urlbarView-highlight-background: var(--shy-accent-tint); 200 --urlbarview-background-color-selected: var(--shy-accent-tint); 201 --urlbarView-highlight-color: var(--bt-col); 202 --urlbarview-text-color-selected: var(--bt-col); 203 204 --urlbarView-separator-color: var(--shy-hairline); 205 --urlbarview-separator-color: var(--shy-hairline); 206 207 --urlbarView-secondary-text-color: var(--shy-text-dim); 208 --urlbarview-text-color-secondary: var(--shy-text-dim); 209 --urlbarView-action-color: var(--shy-text-dim); 210 --urlbarview-text-color-action: var(--shy-text-dim); 211 212 --urlbarView-action-button-background-color: var(--shy-hover-tint); 213 --urlbarView-action-button-hover-background-color: var(--shy-active-tint); 214 --urlbarview-action-button-background-color: var(--shy-hover-tint); 215 --urlbarview-action-button-background-color-hover: var(--shy-active-tint); 216 217 /* the row buttons kept their names across both builds */ 218 --urlbarView-result-button-selected-color: var(--bt-col); 219 --urlbarView-result-button-selected-background-color: var(--shy-hover-tint); 220 --urlbarView-result-button-hover-color: var(--bt-col); 221 --urlbarView-result-button-hover-background-color: var(--shy-active-tint); 222 223 /* the overlay's list scrolls; keep its scrollbar quiet and inside the rounded plate */ 224 scrollbar-width: thin; 225 scrollbar-color: var(--shy-scrollbar) !important; 226 overscroll-behavior: contain; 227 } 228 229 /* rows read as chips rather than full-bleed stripes. Firefox already insets them with a transparent 230 gutter border to keep the hover area contiguous, so this only adds 2px and pins the radius, which 231 is otherwise derived from a different token in each build. */ 232 .urlbarView .urlbarView-row { 233 border-radius: var(--rounding) !important; 234 margin-inline: 2px !important; 235 } 236 237 /* SELECTION. shy-global.css:598 paints the selected row `background-color: var(--shy-accent-color) 238 !important` at (0,2,0), which puts text on an unknown-luminance accent. This is the accessible 239 replacement: a tint the row's own --bt-col stays readable on, at (0,3,0) and later in the import 240 order, so it wins on both counts. */ 241 .urlbarView .urlbarView-row[selected] { 242 background-color: var(--shy-accent-tint) !important; 243 color: var(--bt-col) !important; 244 } 245 246 /* the solid accent goes on a bar at the leading edge, where nothing sits on top of it. It hangs off 247 .urlbarView-row-inner because .urlbarView-row::before is already the group label and ::after the 248 feedback acknowledgement, in both builds. */ 249 .urlbarView .urlbarView-row[selected] > .urlbarView-row-inner { 250 position: relative; 251 } 252 253 .urlbarView .urlbarView-row[selected] > .urlbarView-row-inner::before { 254 content: ""; 255 position: absolute; 256 inset-block: 25%; 257 inset-inline-start: 2px; 258 width: 3px; 259 border-radius: 3px !important; 260 background-color: var(--shy-color) !important; 261 pointer-events: none; 262 } 263 264 /* the url is secondary information. shy-global.css:592 paints it with the full accent at (0,3,0) 265 !important, which makes it compete with the title; (0,4,0) here dims it back down. The selected 266 row is deliberately left out so its url inherits the row's --bt-col and stays high contrast. */ 267 .urlbarView .urlbarView-row:not([selected]) .urlbarView-url, 268 .urlbarView .urlbarView-row:not([selected]) .urlbarView-explanation { 269 color: var(--shy-text-dim) !important; 270 } 271 272 /* "-- Search with Google" and friends. Firefox only dims the action on a resting row; keeping that 273 condition means hover and selection still brighten it. */ 274 .urlbarView .urlbarView-row:not([selected], :hover) .urlbarView-action { 275 color: var(--shy-text-dim) !important; 276 } 277 278 /* favicons are square site images sitting in rounded rows; both builds already centre them on the 279 row's icon axis, so this is colour and shape only. Icons come up to full strength on the row the 280 keyboard or the pointer is on. */ 281 .urlbarView .urlbarView-favicon { 282 border-radius: calc(var(--rounding) / 3) !important; 283 } 284 285 .urlbarView .urlbarView-row:is([selected], :hover) { 286 fill-opacity: 1 !important; 287 } 288 289 /* the list drops in behind the field once results arrive */ 290 #main-window:not([customizing]) #urlbar[open] > .urlbarView { 291 animation: shy-drop-in var(--shy-dur) var(--shy-ease) !important; 292 } 293 294 /*== ONE-OFF SEARCH ENGINES ========================================================================= 295 296 The engine strip under the results. Same chip language as the rows above it; the selected engine 297 gets a tint and a ring instead of the solid highlight fill Firefox uses. 298 299 */ 300 301 #main-window #urlbar .searchbar-engine-one-off-item { 302 border-radius: var(--rounding) !important; 303 transition: background-color var(--shy-dur-fast) var(--shy-ease) !important; 304 } 305 306 #main-window #urlbar .searchbar-engine-one-off-item:not([selected]):hover { 307 background-color: var(--shy-hover-tint) !important; 308 } 309 310 #main-window #urlbar .searchbar-engine-one-off-item[selected] { 311 background-color: var(--shy-accent-tint) !important; 312 box-shadow: inset 0 0 0 1px var(--shy-accent-line) !important; 313 color: var(--bt-col) !important; 314 } 315 316 /* "This time, search with" */ 317 #main-window #urlbar :is(.search-panel-one-offs-header-label, .search-panel-header > label) { 318 color: var(--shy-text-dim) !important; 319 opacity: 1 !important; 320 } 321 322 /*== FLOATING OVERLAY =============================================================================== 323 324 ShyFox's signature moment. shy-floating-search.css owns every coordinate here and gives the plate a 325 flat fill, a hard 1px accent outline and one flat shadow; these rules carry its selector verbatim so 326 they win on import order alone and not one position property is restated. 327 328 The entrance moves the field 6px over 150ms. Both numbers are deliberate: the smoke test reads the 329 input's rectangle roughly 100ms after focus, and this easing has settled to a fifth of a pixel by 330 then, so the measured geometry is the resting geometry. 331 332 */ 333 334 @media not -moz-pref("shyfox.disable.floating.search") { 335 336 #main-window:not([customizing], [inDOMFullscreen="true"]) 337 #urlbar:is([focused], :focus-within, [open], [breakout-extend]) { 338 339 /* command-palette surface: glass fill, one refined accent hairline, real elevation */ 340 :is(#urlbar-background, .urlbar-background) { 341 background-color: var(--shy-surface) !important; 342 border-color: transparent !important; 343 outline: 1px solid var(--shy-accent-line) !important; 344 outline-offset: 0 !important; 345 box-shadow: var(--shy-elev-3) !important; 346 animation: shy-drop-in var(--shy-urlbar-enter) var(--shy-ease) !important; 347 } 348 349 /* the text drops in with the plate; without this the fill would move and the caret would not */ 350 :is(#urlbar-input-container, .urlbar-input-container) { 351 animation: shy-drop-in var(--shy-urlbar-enter) var(--shy-ease) !important; 352 } 353 354 /* the page behind the overlay. #urlbar always carries popover="manual", so the ::before scrim 355 in shy-floating-search.css is switched off by its own [popover] rule and ::backdrop is the 356 one that paints. */ 357 &::backdrop { 358 background: color-mix(in srgb, var(--bg-col) var(--shy-scrim-opct), transparent) !important; 359 animation: shy-fade-in var(--shy-dur) var(--shy-ease) !important; 360 } 361 } 362 363 /* Blur is decoration and Gecko may decline to paint it, so --shy-surface-opct has to carry the 364 surface on its own. Two blurred layers at once, well inside the budget. */ 365 @media not -moz-pref("shyfox.disable.blur") { 366 #main-window:not([customizing], [inDOMFullscreen="true"]) 367 #urlbar:is([focused], :focus-within, [open], [breakout-extend]) { 368 :is(#urlbar-background, .urlbar-background) { 369 backdrop-filter: blur(var(--shy-glass-blur)) saturate(var(--shy-glass-saturate)) !important; 370 } 371 &::backdrop { 372 backdrop-filter: blur(calc(var(--shy-glass-blur) / 3)) !important; 373 } 374 } 375 } 376 } 377 378 /*== INLINE MODE ==================================================================================== 379 380 With shyfox.disable.floating.search the field stays in the toolbar and drops its results downwards. 381 Same material one step quieter: elevation 2 instead of 3, and no entrance -- a 40px field inside a 382 toolbar that is itself sliding into view does not need a second animation. 383 384 */ 385 386 @media -moz-pref("shyfox.disable.floating.search") { 387 388 #main-window:not([customizing]) #urlbar:is([open], [breakout-extend]) 389 :is(#urlbar-background, .urlbar-background) { 390 background-color: var(--shy-surface) !important; 391 box-shadow: var(--shy-elev-2) !important; 392 outline: 1px solid var(--shy-accent-line) !important; 393 outline-offset: 0 !important; 394 } 395 396 @media not -moz-pref("shyfox.disable.blur") { 397 #main-window:not([customizing]) #urlbar:is([open], [breakout-extend]) 398 :is(#urlbar-background, .urlbar-background) { 399 backdrop-filter: blur(var(--shy-glass-blur)) saturate(var(--shy-glass-saturate)) !important; 400 } 401 } 402 } 403 404 /*== SEARCHBAR ====================================================================================== 405 406 The separate #searchbar widget is laid out vertically in the right-hand strip: shy-toolbar.css:124 407 puts writing-mode: vertical-rl on its textbox, pins its height and absolutely positions its buttons. 408 Only colour and the focus ring are touched here -- no border, no padding, no size, no writing-mode, 409 so nothing about that layout moves. 410 411 */ 412 413 #main-window:not([customizing]) #searchbar { 414 background-color: var(--shy-field-idle) !important; 415 transition: 416 background-color var(--shy-dur-fast) var(--shy-ease), 417 box-shadow var(--shy-dur-fast) var(--shy-ease); 418 } 419 420 /* replaces the platform focus outline and 140's flat drop shadow with the same accent ring the 421 address bar gets, so the two fields read as one family */ 422 #main-window:not([customizing]) #searchbar:focus-within { 423 background-color: var(--shy-surface-raised) !important; 424 outline: none !important; 425 box-shadow: var(--shy-accent-glow) !important; 426 } 427 428 /*== GRACEFUL DEGRADATION =========================================================================== 429 430 Restated rather than inherited: this file is imported after shy-compat.css, so its reduced-motion and 431 forced-colours blocks have already been passed by the time these rules are read. 432 433 */ 434 435 @media (prefers-reduced-motion: reduce) { 436 437 /* zero the local clocks first -- every duration in this file comes from one of these or from the 438 shy-dur family, which shy-tokens.css already zeroes here */ 439 :root { 440 --shy-urlbar-enter: 0s; 441 --shy-dur-press: 0s; 442 } 443 444 /* and remove the declarations outright, at the specificity they were written with */ 445 #main-window:not([customizing]) #urlbar :is(#urlbar-background, .urlbar-background), 446 #main-window:not([customizing], [inDOMFullscreen="true"]) 447 #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 448 :is(#urlbar-background, .urlbar-background), 449 #main-window:not([customizing], [inDOMFullscreen="true"]) 450 #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 451 :is(#urlbar-input-container, .urlbar-input-container), 452 #main-window:not([customizing]) #urlbar[open] > .urlbarView, 453 #main-window #urlbar :is(#urlbar-go-button, .urlbar-go-button, .urlbar-page-action, 454 #urlbar-revert-button-container), 455 #main-window #urlbar .searchbar-engine-one-off-item, 456 #main-window:not([customizing]) #searchbar { 457 animation: none !important; 458 transition: none !important; 459 } 460 461 #main-window:not([customizing], [inDOMFullscreen="true"]) 462 #urlbar:is([focused], :focus-within, [open], [breakout-extend])::backdrop { 463 animation: none !important; 464 transition: none !important; 465 } 466 } 467 468 @media (forced-colors: active) { 469 470 /* No translucency, no blur, no shadows: system colours only. Every field selector used above is 471 restated so this reset outranks each of them at its own specificity rather than by luck. */ 472 #main-window:not([customizing]) #urlbar :is(#urlbar-background, .urlbar-background), 473 #main-window:not([customizing]) #urlbar:not(:is([focused], :focus-within, [open], [breakout-extend])) 474 :is(#urlbar-background, .urlbar-background), 475 #main-window:not([customizing]) #urlbar:not(:is([focused], :focus-within, [open], [breakout-extend])):hover 476 :is(#urlbar-background, .urlbar-background), 477 #main-window:not([customizing]) #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 478 :is(#urlbar-background, .urlbar-background), 479 #main-window:not([customizing], [inDOMFullscreen="true"]) 480 #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 481 :is(#urlbar-background, .urlbar-background), 482 #main-window:not([customizing]) #searchbar, 483 #main-window:not([customizing]) #searchbar:focus-within { 484 background-color: Field !important; 485 border: 1px solid FieldText !important; 486 outline: none !important; 487 box-shadow: none !important; 488 backdrop-filter: none !important; 489 } 490 491 /* focus still has to be visible, so the ring comes back as the system highlight */ 492 #main-window:not([customizing]) #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 493 :is(#urlbar-background, .urlbar-background), 494 #main-window:not([customizing], [inDOMFullscreen="true"]) 495 #urlbar:is([focused], :focus-within, [open], [breakout-extend]) 496 :is(#urlbar-background, .urlbar-background), 497 #main-window:not([customizing]) #searchbar:focus-within { 498 outline: 2px solid Highlight !important; 499 outline-offset: 0 !important; 500 } 501 502 #main-window:not([customizing], [inDOMFullscreen="true"]) 503 #urlbar:is([focused], :focus-within, [open], [breakout-extend])::backdrop { 504 background: Canvas !important; 505 backdrop-filter: none !important; 506 } 507 508 /* the one place the tint-plus-bar treatment has to give way: forced colours guarantee the 509 Highlight / HighlightText pair contrasts, and nothing else here does */ 510 .urlbarView .urlbarView-row[selected] { 511 background-color: Highlight !important; 512 color: HighlightText !important; 513 } 514 515 .urlbarView .urlbarView-row[selected] > .urlbarView-row-inner::before { 516 background-color: HighlightText !important; 517 } 518 519 .urlbarView .urlbarView-row:not([selected]) .urlbarView-url, 520 .urlbarView .urlbarView-row:not([selected]) .urlbarView-explanation, 521 .urlbarView .urlbarView-row:not([selected], :hover) .urlbarView-action { 522 color: LinkText !important; 523 } 524 525 /* the accent-tinted chips become plain outlined ones. The ring is an inset outline rather than a 526 border so the chips keep the size they have everywhere else. */ 527 #main-window #urlbar > :is(#urlbar-input-container, .urlbar-input-container) > #urlbar-label-box, 528 #main-window #urlbar[searchmode] 529 :is(#urlbar-search-mode-indicator, #searchmode-switcher-chicklet), 530 #main-window #urlbar .searchbar-engine-one-off-item[selected], 531 .urlbarView .urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) 532 .urlbarView-action { 533 background-color: Canvas !important; 534 color: CanvasText !important; 535 box-shadow: none !important; 536 outline: 1px solid CanvasText !important; 537 outline-offset: -1px !important; 538 } 539 540 #main-window #urlbar :is(#urlbar-input, .urlbar-input)::selection { 541 background-color: Highlight !important; 542 color: HighlightText !important; 543 } 544 } 545 546 } /* shyfox.disable.polish */