shy-global.css (19286B)
1 /*== ShyFox Global Styles =========================================================================================================================== 2 3 All sorts of important tweaks that don't belong in any category 4 5 6 --- BROWSER CONTENT --------------------------------------------------------------------------------------------------------------------------------- 7 8 Area where website is displayed 9 10 */ 11 12 /* set background color */ 13 #appcontent .browserStack, #browser, .browserContainer {background: var(--bg-col)} 14 15 #browser #tabbrowser-tabbox { 16 /* shift website content relative to panels */ 17 margin-left: var(--left-margin) !important; 18 margin-right: var(--right-margin) !important; 19 margin-top: calc(var(--top-margin) + var(--shy-native-tabs-height, 0px)) !important; 20 margin-bottom: var(--bottom-margin) !important; 21 22 /* add smoothness to it */ 23 transition: var(--transition) !important; 24 } 25 26 /* completely remove the browser interface in fullscreen videos and popups like login with Google or in a floating Bitwarden window */ 27 /* Gecko before 157 marks a popup with a non-empty chromehidden, and an ordinary window with an 28 empty one. Gecko 157 drops chromehidden from both and marks popups with popup-window instead, 29 so the old `:not([chromehidden=""])` matched every window and hid the toolbox everywhere. 30 "Popup" is now either marker; "ordinary window" (every other sheet) is neither of them. */ 31 #main-window:is([chromehidden]:not([chromehidden=""]), [popup-window], [inDOMFullscreen="true"]){ 32 #navigator-toolbox {display: none !important;} 33 --margin: 0px !important; 34 } 35 36 /* some z-index */ 37 #navigator-toolbox {z-index: 2 !important;} 38 #browser {z-index: 1 !important;} 39 40 /* if it not fullscreen video or floating window */ 41 #main-window:not([inDOMFullscreen="true"]):not([chromehidden]:not([chromehidden=""]), [popup-window]){ 42 43 /* if navbar is not hidden in f11 fullscreen or not only navbar is visible in f11 or window is not maximized in clean mode */ 44 &:not( 45 :is( 46 :is([titlepreface*=""], [titlepreface*=""][titlepreface*=""])[inFullscreen="true"]), 47 [titlepreface*=""]:is([sizemode="maximized"], [inFullscreen="true"], [gtktiledwindow="true"]) 48 ){ 49 50 /* add rounded corners and outline to browser content */ 51 #tabbrowser-tabbox { 52 border-radius: var(--big-rounding) !important; 53 border: var(--outline); 54 outline: none !important; 55 } 56 57 #tabbrowser-tabpanels::after { 58 content: ""; 59 margin: -1px; 60 border: var(--outline); 61 position: absolute; 62 inset: 0; 63 border-radius: var(--big-rounding); 64 box-shadow: 0 0 0 100px var(--bg-col) !important; 65 clip-path: inset(0); 66 pointer-events: none; 67 } 68 } 69 70 /* if in f11 fullscreen sidebar active but navbar not */ 71 &:not([titlepreface*=""]):not([titlepreface*=""])[titlepreface*=""][inFullscreen="true"]{ 72 #appcontent browser {border-left: var(--outline);} 73 } 74 75 /* if in f11 fullscreen toolbar active but navbar not */ 76 &:not([titlepreface*=""]):not([titlepreface*=""])[titlepreface*=""][inFullscreen="true"]{ 77 #appcontent browser {border-right: var(--outline);} 78 } 79 80 /* if in f11 fullscreen nor toolbar or sidebar active but navbar is */ 81 &:not([titlepreface*=""])[titlepreface*=""][titlepreface*=""]:not([titlepreface*=""])[inFullscreen="true"]{ 82 #appcontent browser {border-top: var(--outline);} 83 } 84 } 85 86 /* private mode outline */ 87 #main-window[privatebrowsingmode="temporary"] 88 {--outline: 1px solid var(--private-col) !important;} 89 90 /* drag window using border */ 91 92 /* shared */ 93 #browser::before, 94 #browser::after, 95 #navigator-toolbox::before, 96 #navigator-toolbox::after 97 { 98 position: fixed; 99 pointer-events: none; 100 -moz-window-dragging: drag; 101 102 content: ""; 103 background-color: var(--debug-col-2); 104 } 105 106 /* top */ 107 #browser::after { 108 height: calc(var(--top-margin) + 2px); 109 top: -1px; 110 width: 100vw; 111 } 112 113 /* bottom */ 114 #browser::before { 115 height: calc(var(--bottom-margin) + 2px); 116 bottom: -1px; 117 width: 100vw; 118 } 119 120 /* left */ 121 #navigator-toolbox::before{ 122 width: calc(var(--bottom-margin) + 2px); 123 left: -1px; 124 height: 100vw; 125 } 126 127 /* right */ 128 #navigator-toolbox::after{ 129 width: calc(var(--right-margin) + 2px); 130 right: -1px; 131 height: 100vw; 132 } 133 134 /* statuspanel (that thing at the bottom of the screen that shows the address of the link you're hovering over) */ 135 #statuspanel #statuspanel-label { 136 padding-inline: 6px !important; 137 border-radius: var(--big-rounding) !important; 138 139 background-color: var(--tb-col) !important; 140 color: var(--bt-col) !important; 141 142 border: var(--outline) !important; 143 outline: var(--shadow) !important; 144 } 145 146 /* rounded things */ 147 richlistitem, 148 panel tree, 149 menulist, 150 button, 151 select, 152 input:not([type="checkbox"]), 153 #urlbar-background, 154 .urlbar-background, 155 #preview-image, 156 .ctrlTab-canvas, 157 .ctrlTab-canvas * 158 159 {border-radius: var(--rounding) !important} 160 161 .ctrlTab-preview .ctrlTab-preview-inner, 162 #ctrlTab-showAll, 163 richlistbox 164 {border-radius: var(--big-rounding) !important;} 165 166 /* disable pointer events in clean mode */ 167 #main-window[titlepreface*=""]{ 168 #nav-bar:not(:has(#urlbar:is(:focus-within, [focused], [open], [breakout-extend]))), 169 #sidebar, 170 #TabsToolbar, 171 #PersonalToolbar 172 {pointer-events: none !important;} 173 } 174 175 /* 176 177 --- DIALOG ------------------------------------------------------------------------------------------------------------------------------------------ 178 179 Styles for dialogs e.g. "confirm deleting extension" 180 181 */ 182 183 184 #commonDialogWindow, #commonDialogWindow .titleIcon{ 185 background-color: transparent !important; 186 color: var(--bt-col) !important; 187 } 188 189 .dialogBox { 190 border-radius: var(--big-rounding) !important; 191 border: var(--outline) !important; 192 background-color: var(--tb-col) !important; 193 } 194 195 .dialogTemplate{ 196 background-color: transparent !important; 197 :before{ 198 content: ""; 199 position: fixed; 200 z-index: -1; 201 202 width: 100vw; 203 height: 100vh; 204 205 left: 0px; 206 top: 0px; 207 208 background-color: color-mix(in srgb, var(--bg-col) 80%, transparent); 209 } 210 } 211 212 #window-modal-dialog {margin-top: var(--margin) !important;} /* shift top-aligned dialogs little bit lower */ 213 .sizeDetermined #infoBody {min-height: 20px !important;} /* add minimal height to alert text */ 214 #searchbar-anon-search-settings {margin-inline-end: 7px !important;} /* margin for settings button in searcbar popup */ 215 #PopupSearchAutoComplete {--panel-border-radius: var(--big-rounding) !important;} /* rounding for this popup */ 216 217 /* print dialog */ 218 print-preview::before, 219 print-preview .previewStack::before, 220 .printPreviewNavigation::before 221 {display: none !important;} 222 223 .printDialogBox::before {border-radius: var(--rounding) !important;} 224 225 .printDialogBox {margin-top: var(--margin) !important;} 226 227 /* 228 229 --- SCREENSHOTS ------------------------------------------------------------------------------------------------------------------------------------- 230 231 Ctrl + Shift + S 232 233 */ 234 235 #screenshotsPagePanel{ 236 position: fixed !important; 237 transition: var(--transition); 238 239 bottom: calc( 240 var(--bottom-margin) 241 + var(--screenshot-tool-hgt) 242 ); 243 244 left: 0; 245 246 z-index: -1 !important; 247 width: var(--sdbr-wdt) !important; 248 } 249 250 /* for smooth transition */ 251 #screenshotsPagePanel[hidden]{ 252 display: flex !important; 253 opacity: 0; 254 pointer-events: none !important; 255 bottom: 0px !important; 256 } 257 258 screenshots-buttons{ 259 background-color: transparent !important; 260 transition: var(--transition); 261 position: absolute !important; 262 display: flex !important; 263 height: var(--screenshot-tool-hgt) !important; 264 width: var(--sdbr-wdt) !important; 265 padding: calc(var(--margin) / 2) !important; 266 267 top: 0px !important; 268 inset-inline-end: 0px !important; 269 } 270 271 .screenshot-button{ 272 width: calc( 273 var(--sdbr-wdt) / 2 274 - var(--margin) * 1.5 275 )!important; 276 277 margin: calc(var(--margin) / 2) !important; 278 padding-top: 56px !important; 279 background-position-y: 10px !important; 280 } 281 282 /* when sidebar hidden */ 283 #main-window:is([titlepreface*=""], [titlepreface*=""]){ 284 #screenshotsPagePanel{ 285 bottom: calc( 286 var(--bottom-margin) 287 + var(--margin) 288 + var(--screenshot-tool-hgt) 289 ); 290 291 left: calc( 292 var(--left-margin) 293 + var(--margin) 294 ); 295 } 296 297 screenshots-buttons {background-color: var(--bg-col) !important;} 298 } 299 300 301 /* 302 303 --- CONTEXT MENU ------------------------------------------------------------------------------------------------------------------------------------ 304 305 Apply theme colors to context menus and menubar 306 307 */ 308 309 /* in page context menu */ 310 #contentAreaContextMenu[showservicesmenu="true"], 311 #contentAreaContextMenu[showservicesmenu="true"] menupopup 312 { 313 --panel-background: var(--bg-col)!important; 314 --panel-border-color: var(--tb-col) !important; 315 316 --toolbar-field-focus-background-color: var(--bt-col) !important; 317 --panel-color: var(--bt-col) !important; 318 319 menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) { 320 background-color: var(--panel-item-hover-bgcolor) !important; 321 color: var(--bt-col) !important; 322 } 323 } 324 325 /* toolbar menu */ 326 #toolbar-menubar menupopup, 327 #toolbar-context-menu, #toolbar-context-menu menupopup, 328 #unified-extensions-context-menu, #unified-extensions-context-menu menupopup, 329 #placesContext, #placesContext menupopup, 330 #downloadsContextMenu, #downloadsContextMenu menupopup, 331 #sidebarMenu-popup, #PopupSearchAutoComplete, 332 :is(#back-button, #forward-button) menupopup, 333 #permission-popup-menulist menupopup 334 { 335 --panel-background: var(--pp-col)!important; 336 --panel-border-color: var(--tb-col) !important; 337 338 --toolbar-field-focus-background-color: var(--bt-col) !important; 339 --panel-color: var(--bt-col) !important; 340 341 menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) { 342 background-color: var(--panel-item-hover-bgcolor) !important; 343 color: var(--bt-col) !important; 344 } 345 } 346 347 /* dropdown selectors */ 348 menupopup {--content-select-background-image: none !important;} 349 #ContentSelectDropdown .ContentSelectDropdown-item-0:not([_moz-menuactive="true"]) {background-color: transparent !important;;} 350 351 /* 352 353 --- CUSTOMIZING PAGE -------------------------------------------------------------------------------------------------------------------------------- 354 355 Right click > Customize toolbar 356 357 */ 358 359 #main-window[customizing]{ 360 #customization-palette-container {padding-top: 100px} 361 362 #customization-panelWrapper{ 363 margin-top: 60px; 364 margin-right: 50px; 365 } 366 367 .panel-arrowbox {opacity: 0 !important;} 368 .panel-arrowcontent{border-radius: var(--big-rounding) !important;} 369 toolbarspring {border-radius: var(--rounding) !important;} 370 371 #customization-footer{ 372 position: fixed !important; 373 374 bottom: 10px; 375 right: 70px; 376 left: 10px; 377 378 background-color: var(--bg-col) !important; 379 border-radius: var(--big-rounding) !important; 380 } 381 } 382 383 toolbarpaletteitem#wrapper-search-container[place="palette"] #searchbar {background-color: var(--bg-col) !important;} 384 385 :root[customizing] .customization-target:not(#widget-overflow-fixed-list) {min-width: 0px !important;} 386 387 /* red sidebar icon styles */ 388 #main-window{ 389 --shyfox-string-sidebar-button-tooltip: "This button is only shown when the sidebar is disabled and is colored red to attract attention"; 390 &[lang="ru"]{--shyfox-string-sidebar-button-tooltip: "Эта кнопка отображается только тогда, когда боковая панель отключена, и окрашена в красный цвет, чтобы привлечь внимание";} 391 } 392 393 #wrapper-sidebar-button[place="palette"] .toolbarbutton-icon { 394 padding: 2px !important; 395 width: 20px !important; 396 height: 20px !important; 397 border-radius: 6px !important; 398 } 399 400 #wrapper-sidebar-button[mousedown]{ 401 &::after{ 402 content: var(--shyfox-string-sidebar-button-tooltip) !important; 403 text-align: left !important; 404 position: absolute; 405 color: black !important; 406 background-color: white !important; 407 border-radius: var(--rounding); 408 padding: 5px; 409 width: 160px !important; 410 margin-left: 40px; 411 margin-top: 40px; 412 } 413 } 414 415 /* 416 417 --- NOTIFICATION BAR -------------------------------------------------------------------------------------------------------------------------------- 418 419 Sometimes Firefox shows notifications at the top of the window suggesting, for example, to restore tabs from a previous session 420 421 */ 422 423 #tab-notification-deck, .global-notificationbox{ 424 position: fixed !important; 425 transition: var(--transition) !important; 426 z-index: 0 !important; 427 vbox {background-color: transparent !important;} 428 background-color: transparent !important; 429 width: auto; 430 431 max-width: calc( 432 100vw 433 - var(--margin) 434 - var(--right-margin) 435 - var(--left-margin) 436 ); 437 438 top: calc( 439 var(--top-margin) 440 + var(--margin) / 2 441 ); 442 443 left: calc( 444 var(--left-margin) 445 + var(--margin) / 2 446 ); 447 448 notification-message{ 449 border-radius: var(--big-rounding) !important; 450 background-color: var(--tb-col) !important; 451 color: var(--bt-col) !important; 452 453 &::before {display: none !important;} 454 } 455 456 .footer-button {margin: 4px !important;} 457 } 458 459 /* notification close button color */ 460 button[type~="icon"][type~="ghost"][part="button"][size="small"] {fill: var(--bt-col) !important;} 461 462 /* icon color */ 463 :is(.icon, img)[src="chrome://global/skin/icons/info-filled.svg"] {fill: var(--shy-color) !important;} 464 465 /* 466 467 --- MENUBAR ---------------------------------------------------------------------------------------------------------------------------------------- 468 469 File Edit View History Bookmarks Tools Help 470 471 */ 472 473 @media not (-moz-platform: macos) { 474 475 #toolbar-menubar { 476 477 position: fixed; 478 overflow: clip; 479 visibility: visible !important; 480 z-index: 5; 481 482 width: fit-content; 483 max-height: 0px; 484 padding-bottom: 0 !important; 485 486 transition: var(--transition) !important; 487 488 top: var(--top-margin); 489 left: var(--left-margin); 490 491 border-radius: var(--rounding); 492 background-color: var(--tb-col) !important; 493 & > * {opacity: var(--dyn-opct);} 494 495 /* outline only when visible */ 496 &:not([inactive="true"]) { 497 border: var(--outline) !important; 498 outline: var(--shadow) !important; 499 } 500 } 501 502 #main-menubar > * {padding-top: 0px !important;} 503 } 504 505 /* 506 507 --- DEVTOOLS --------------------------------------------------------------------------------------------------------------------------------------- 508 509 */ 510 511 .browserSidebarContainer, .responsive-mode {background-color: var(--bg-col) !important;} 512 513 .devtools-side-splitter, .devtools-horizontal-splitter { 514 background-color: transparent !important; 515 margin-inline: 0px !important; 516 margin: 0px !important; 517 } 518 519 .devtools-side-splitter { min-width: calc(var(--margin) / 1.5) !important;} 520 .devtools-horizontal-splitter {min-height: calc(var(--margin) / 1.5) !important;} 521 522 .rdm-toolbar { 523 margin-top: var(--margin) !important; 524 width: 95% !important; 525 margin-left: 3% !important; 526 } 527 528 .rdm-toolbar, .user-agent {border-radius: var(--rounding) !important;} 529 530 .user-agent {border: 1px solid grey !important;} 531 532 /* 533 534 --- FIXES ------------------------------------------------------------------------------------------------------------------------------------------ 535 536 */ 537 538 /* fix some items dissapearing */ 539 #titlebar { 540 opacity: 1 !important; 541 z-index: 1 !important; 542 } 543 544 :root[tabsintitlebar] #titlebar:-moz-window-inactive { 545 opacity: 1 !important; 546 } 547 548 #navigator-toolbox:-moz-window-inactive { 549 background-color: initial !important; 550 color: initial !important; 551 } 552 553 /* remove annoying line at the top of the window */ 554 #navigator-toolbox { 555 margin-top: -1px !important; 556 position: relative; 557 z-index: 3; 558 } 559 560 /* weird margin fix */ 561 #tabbrowser-tabpanels { 562 & browser[type="content"] { 563 margin: 0 !important; 564 } 565 } 566 567 /* z-index fix */ 568 #tabbrowser-tabbox{z-index: 1 !important;} 569 570 /* 571 572 --- ACCENT COLOR ---------------------------------------------------------------------------------------------------------------------------------- 573 574 */ 575 576 .text-link, a {color: var(--shy-color) !important;} 577 578 .footer-button { 579 &:not([disabled]) { 580 &[default], &.primary { 581 background-color: var(--shy-accent-color) !important;; 582 &:hover { 583 background-color: color-mix(in srgb, var(--bt-col, black) 10%,var(--shy-accent-color)) !important; 584 } 585 } 586 } 587 } 588 589 ::selection {background: var(--shy-accent-color) !important;} 590 591 #tracking-protection-icon-box[active]{ 592 fill: var(--shy-color) !important; 593 list-style-image: url(chrome://browser/skin/tracking-protection.svg) !important; 594 } 595 596 .urlbarView-url { 597 .urlbarView-row:not([selected]) & { 598 color: var(--shy-color) !important; 599 } 600 } 601 602 .urlbarView-row[selected] {background-color: var(--shy-accent-color) !important;} 603 604 .urlbarView-favicon { 605 .urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { 606 color: var(--shy-color) !important; 607 } 608 } 609 610 .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner { 611 &:not([selected]) > .urlbarView-no-wrap { 612 & > .urlbarView-favicon { 613 color: var(--shy-color) !important; 614 } 615 } 616 } 617 618 .ctrlTab-preview:focus > .ctrlTab-preview-inner, #ctrlTab-showAll:focus {border-color: var(--shy-color) !important;} 619 620 :root, panel, dialog, window{ 621 --in-content-primary-button-background-active: var(--shy-color) !important; 622 --in-content-primary-button-background-hover: var(--shy-color) !important; 623 --lwt-toolbarbutton-icon-fill-attention: var(--shy-color) !important; 624 --in-content-primary-button-background: var(--shy-color) !important; 625 --toolbarbutton-icon-fill-attention: var(--shy-color) !important; 626 --fxview-primary-action-background: var(--shy-color) !important; 627 --toolbar-field-focus-border-color: var(--shy-color) !important; 628 --uei-button-attention-dot-color: var(--shy-color) !important; 629 --button-primary-active-bgcolor: var(--shy-color) !important; 630 --button-primary-hover-bgcolor: var(--shy-color) !important; 631 --uc-checkbox-checked-bgcolor: var(--shy-color) !important; 632 --color-accent-primary-active: var(--shy-color) !important; 633 --color-accent-primary-hover: var(--shy-color) !important; 634 --checkbox-checked-bgcolor: var(--shy-color) !important; 635 --in-content-accent-color: var(--shy-color) !important; 636 --button-primary-bgcolor: var(--shy-color) !important; 637 --in-content-link-color: var(--shy-color) !important; 638 --color-accent-primary: var(--shy-color) !important; 639 --focus-outline-color: var(--shy-color) !important; 640 --input-border-color: var(--shy-color) !important; 641 } 642 643 #historySwipeAnimationPreviousArrow,#historySwipeAnimationNextArrow { 644 --swipe-nav-icon-primary-color: color-mix(in srgb, var(--shy-color) 80%, #FFFFFF50) !important; 645 --swipe-nav-icon-accent-color: color-mix(in srgb, var(--shy-color) 20%, #00000050) !important; 646 }