userContent.css (19942B)
1 /* USER FACING VARIABLES -------------------------------------------------------------------------------------- */ 2 /* this file does NOT have to be updated between versions */ 3 4 /* NOTE: restart Firefox to apply any changes */ 5 6 :root { 7 8 9 /* custom accent color to be used across Firefox*/ 10 /* use hexcode or color name */ 11 --custom-accent-color: #ebcb8b; 12 13 /* background color */ 14 --uc-my-background-color: #353C4A !important; 15 --background-color-canvas: var(--uc-my-background-color) !important; 16 --background-color-box: var(--uc-my-background-color) !important; 17 18 /* text color */ 19 --in-content-page-color: #d8dee9 !important; 20 21 --table-row-background-color-alternate:#2e3440 !important; 22 23 24 /* color of the tab dividers / separators */ 25 /* set variable = none, to disable dividers */ 26 --custom-tab-divider-color: #535354; 27 28 29 /* sets the height of the tabs toolbar */ 30 /* legacy height (<= v1.6.2) = 33px */ 31 /* functionality broken as of FF 108 - WIP */ 32 /* --tab-bar-height: 35px; */ 33 34 35 /* set the size of sync profile pic */ 36 /* 1.0 = 100% scale */ 37 --sync-avatar-scale: 1.0; 38 39 /* custom paddings/margins for the menu itmes */ 40 /* for reference: */ 41 --custom-menuitem-padding-vertical: 6px; 42 --custom-menuitem-padding-horizontal: 8px; 43 --custom-menuitem-margin: 4px; 44 45 } 46 47 @-moz-document regexp("^(about:).*") { 48 body { 49 background-color: #353C4A !important; 50 } 51 } 52 53 /* CUSTOM ACCENT COLORS -------------------------------------------------------------------------------------- */ 54 55 @-moz-document regexp("^(about:|chrome:|moz-extension:).*") { 56 57 html:not([role="dialog"]), 58 html:not([role="dialog"]) *, 59 html:not([role="dialog"]) body.activity-stream, 60 window:not([chromehidden]), 61 window:not([chromehidden])>dialog { 62 --surface-1: #353C4A !important; 63 --surface-2: #2e3440 !important; 64 --accent-surface-1: #ebcb8b !important; 65 --dashboard-tab-active-ink: #ebcb8b !important; 66 --in-content-primary-button-background: var(--custom-accent-color, #0a84ff) !important; 67 --in-content-primary-button-background-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 68 --in-content-primary-button-background-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; 69 70 --in-content-item-selected: var(--custom-accent-color, #0a84ff) !important; 71 --in-content-border-highlight: var(--custom-accent-color, #0a84ff) !important; 72 --in-content-border-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 73 /* --in-content-border-focus: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; */ 74 --in-content-border-focus: var(--custom-accent-color, #0a84ff) !important; 75 --in-content-border-active: var(--custom-accent-color, #0a84ff) !important; 76 --in-content-border-active-shadow: var(--custom-accent-color, #0a84ff) !important; 77 --in-content-category-outline-focus: 1px solid transparent !important; 78 --in-content-accent-color: var(--custom-accent-color, #0a84ff) !important; 79 --in-content-table-header-background: var(--custom-accent-color, #0a84ff) !important; 80 --in-content-link-color: var(--custom-accent-color, #0a84ff) !important; 81 --in-content-link-color-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 82 --newtab-focus-outline: var(--in-content-border-active-shadow) !important; 83 --newtab-focus-border: var(--in-content-border-focus) !important; 84 --newtab-focus-border-selected: var(--custom-accent-color) !important; 85 --newtab-textbox-focus-color: var(--in-content-border-focus) !important; 86 --newtab-primary-action-background: var(--custom-accent-color) !important; 87 --color-accent-primary: var(--custom-accent-color) !important; 88 --color-accent-primary-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 89 --color-accent-primary-active: var(--custom-accent-color) !important; 90 --brand-color-accent: var(--custom-accent-color) !important; 91 --brand-color-accent-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 92 --brand-color-accent-active: var(--custom-accent-color) !important; 93 } 94 } 95 96 @-moz-document url("chrome://global/content/commonDialog.xhtml") { 97 #commonDialog[subdialog] checkbox { 98 --checkbox-checked-bgcolor: var(--custom-accent-color, #0a84ff) !important; 99 --checkbox-checked-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 100 --checkbox-checked-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; 101 } 102 } 103 104 .topsite-form .form-wrapper input[type="text"]:focus-visible { 105 outline: none !important; 106 border-color: var(--newtab-focus-border) !important; 107 } 108 109 .showPrivate .search-handoff-button.focused { 110 outline: 0; 111 border: 1px solid var(--newtab-focus-border) !important; 112 box-shadow: 0 0 0 2px var(--newtab-focus-outline) !important; 113 } 114 115 ::-moz-progress-bar { 116 background-color: var(--custom-accent-color, #0a84ff) !important; 117 } 118 119 login-filter { 120 --in-content-primary-button-background: var(--custom-accent-color, #0a84ff) !important; 121 --in-content-primary-button-background-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; 122 --in-content-primary-button-background-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; 123 } 124 125 126 /* NEW TAB PAGE ---------------------------------------------------------------------------------------------- */ 127 128 @-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing){ 129 130 /* square the search box corners */ 131 body .search-handoff-button { 132 border-radius: 0 !important; 133 } 134 135 /* square the settings button and checkboxes / buttons / selectors inside its menu */ 136 .personalize-buttonm, 137 .close-button, 138 .selector, 139 .sponsored-checkbox, 140 .wallpaper-input { 141 border-radius: 0 !important; 142 } 143 144 .weatherCard, 145 .weatherInfoLink, 146 .weatherButtonContextMenuWrapper { 147 border-radius: 0 !important; 148 border-start-start-radius: 0; 149 border-end-start-radius: 0; 150 border-start-end-radius: 0; 151 border-end-end-radius: 0; 152 } 153 154 /* square the toggle button for above */ 155 .slider { 156 border-radius: 0 !important; 157 } 158 159 .slider::before { 160 border-radius: 0 !important; 161 background: #fff !important; 162 } 163 164 .toggle-button { 165 --toggle-border-radius: 0 !important; 166 } 167 168 /* square all the 3 dot menus */ 169 .context-menu-button, 170 .context-menu { 171 border-radius: 0 !important; 172 } 173 174 /* square the shortcuts: icons, background, and selection box */ 175 /* square the "suggested by pocket" cards and images */ 176 .tile, 177 .top-site-icon, 178 .icon-wrapper, 179 .top-site-outer, 180 .ds-card, 181 .ds-card>.ds-card-topic, 182 .card-stp-button-hover-background, 183 img { 184 border-radius: 0 !important; 185 } 186 187 /* square all the recent activity cards and images */ 188 .card, 189 .card-outer, 190 .card-preview-image-outer, 191 .card-context, 192 .sections-list, 193 .section-empty-state, 194 .modal { 195 border-radius: 0 !important; 196 } 197 198 /* square the VPN button/infobox in private browsing */ 199 #private-browsing-vpn-link, 200 .info, 201 .promo { 202 border-radius: 0 !important; 203 } 204 205 /* add hover/click colors on new tab page [workaround] */ 206 .slider:hover { 207 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4) !important; 208 } 209 210 .slider:active { 211 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.6) !important; 212 } 213 214 .sponsored-checkbox:checked:hover { 215 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4) !important; 216 } 217 218 .sponsored-checkbox:checked:active { 219 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.6) !important; 220 } 221 222 .sponsored-checkbox:hover { 223 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4) !important; 224 } 225 226 .sponsored-checkbox:active { 227 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.6) !important; 228 } 229 230 .selector:hover { 231 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3) !important; 232 } 233 234 .selector:active { 235 box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5) !important; 236 } 237 } 238 239 240 /* SETTINGS PAGE ------------------------------------------------------------------------------------------- */ 241 242 @-moz-document url(about:preferences), url(about:preferences#general), url(about:preferences#home), 243 url(about:preferences#search), url(about:preferences#privacy), url(about:preferences#sync), 244 url(about:preferences#moreFromMozilla), url(about:addons){ 245 246 /* square checkboxes */ 247 .checkbox-check { 248 border-radius: 0 !important; 249 } 250 251 #automaticallySubmitCrashesBox { 252 border-radius: 0 !important; 253 } 254 255 /* square selection buttons */ 256 button { 257 border-radius: 0 !important; 258 } 259 260 richlistitem { 261 border-radius: 0 !important; 262 } 263 264 .sidebar-footer-link { 265 border-radius: 0 !important; 266 } 267 268 /* square toggle buttons */ 269 .toggle-button { 270 border-radius: 0 !important; 271 } 272 273 .toggle-button::before { 274 border-radius: 0 !important; 275 } 276 277 /* square search engines table on about:preferences#search page */ 278 #engineList { 279 border-radius: 0 !important; 280 } 281 282 /* Tracking Protection options on about:preferences#privacy page */ 283 .content-blocking-category { 284 border-radius: 0 !important; 285 } 286 287 .content-blocking-warning { 288 border-radius: 0 !important; 289 } 290 291 /* infoboxes (e.g. settings required by addon) */ 292 #browserContainersExtensionContent { 293 border-radius: 0 !important; 294 } 295 296 #firefoxSuggestInfoBox { 297 border-radius: 0 !important; 298 } 299 300 #updateSettingsContainer { 301 border-radius: 0 !important; 302 } 303 304 .info-box-container { 305 border-radius: 0 !important; 306 } 307 308 /* folder selection and table for Files and Applications */ 309 #downloadFolder { 310 border-radius: 0 !important; 311 } 312 313 #handlersView { 314 border-radius: 0 !important; 315 } 316 317 /* input, info boxes, and profile on sync page */ 318 #fxaSyncComputerName { 319 border-radius: 0 !important; 320 } 321 322 .sync-configured { 323 border-radius: 0 !important; 324 } 325 326 .fxaProfileImage { 327 border-radius: 0 !important; 328 } 329 330 /* more from mozilla page */ 331 .qr-code-box { 332 border-radius: 0 !important; 333 } 334 335 .qr-code-box-image { 336 border-radius: 0 !important; 337 } 338 339 340 /* enterprise policies infobox */ 341 #policies-container { 342 border-radius: 0 !important; 343 } 344 345 /* website appearance selections */ 346 .web-appearance-choice { 347 border-radius: 0 !important; 348 } 349 350 /* dropdown selectors in tables */ 351 menupopup { 352 --panel-border-radius: 0 !important; 353 } 354 } 355 356 357 @-moz-document url(about:preferences), url(about:preferences#general), url(about:preferences#home), 358 url(about:preferences#search), url(about:preferences#privacy), url(about:preferences#sync){ 359 360 /* match toggle buttons to normal button look (only about:preferences) */ 361 input[type="checkbox"].toggle-button::before { 362 height: 10px !important; 363 width: 10px !important; 364 margin-top: 4px !important; 365 margin-left: 2px !important; 366 } 367 } 368 369 370 /* square popup windows and buttons */ 371 @-moz-document regexp("^(about:|chrome:|moz-extension:).*") { 372 richlistbox { 373 border-radius: 0 !important; 374 } 375 376 button { 377 border-radius: 0 !important; 378 } 379 380 .dialogBox { 381 border-radius: 0 !important; 382 } 383 384 menulist { 385 border-radius: 0 !important; 386 } 387 388 checkbox { 389 border-radius: 0 !important; 390 } 391 392 .checkbox-check { 393 border-radius: 0 !important; 394 } 395 396 listheader { 397 border-radius: 0 !important; 398 } 399 400 search-textbox { 401 border-radius: 0 !important; 402 } 403 404 #url { 405 border-radius: 0 !important; 406 } 407 408 tree { 409 border-radius: 0 !important; 410 } 411 412 /* network settings popup */ 413 #networkProxyNone { 414 border-radius: 0 !important; 415 } 416 417 #networkProxyAutoconfigURL { 418 border-radius: 0 !important; 419 } 420 421 #networkProxySOCKS_Port { 422 border-radius: 0 !important; 423 } 424 425 #networkProxySOCKS { 426 border-radius: 0 !important; 427 } 428 429 #networkProxySSL_Port { 430 border-radius: 0 !important; 431 } 432 433 #networkProxySSL { 434 border-radius: 0 !important; 435 } 436 437 #networkProxyHTTP_Port { 438 border-radius: 0 !important; 439 } 440 441 #networkProxyHTTP { 442 border-radius: 0 !important; 443 } 444 445 /* saved addresses popup */ 446 #given-name { 447 border-radius: 0 !important; 448 } 449 450 #family-name { 451 border-radius: 0 !important; 452 } 453 454 #street-address { 455 border-radius: 0 !important; 456 } 457 458 #address-level2 { 459 border-radius: 0 !important; 460 } 461 462 #address-level1 { 463 border-radius: 0 !important; 464 } 465 466 #postal-code { 467 border-radius: 0 !important; 468 } 469 470 #organization { 471 border-radius: 0 !important; 472 } 473 474 #country { 475 border-radius: 0 !important; 476 } 477 478 #tel { 479 border-radius: 0 !important; 480 } 481 482 #email { 483 border-radius: 0 !important; 484 } 485 486 /* saved credit cards popup */ 487 #cc-number { 488 border-radius: 0 !important; 489 } 490 491 #cc-exp-month { 492 border-radius: 0 !important; 493 } 494 495 #cc-exp-year { 496 border-radius: 0 !important; 497 } 498 499 #cc-name { 500 border-radius: 0 !important; 501 } 502 503 #cc-type { 504 border-radius: 0 !important; 505 } 506 507 /* primary password dialog */ 508 #message { 509 border-radius: 0 !important; 510 } 511 512 #pw1 { 513 border-radius: 0 !important; 514 } 515 516 #pw2 { 517 border-radius: 0 !important; 518 } 519 520 #pwmeter { 521 appearance: none !important; 522 height: 0.35em !important; 523 border: none !important; 524 vertical-align: 0 !important; 525 margin: 0.5em 0 !important; 526 } 527 528 /* custom color selection */ 529 #foregroundtextmenu { 530 border-radius: 0 !important; 531 } 532 533 #backgroundmenu { 534 border-radius: 0 !important; 535 } 536 537 #unvisitedlinkmenu { 538 border-radius: 0 !important; 539 } 540 541 #visitedlinkmenu { 542 border-radius: 0 !important; 543 } 544 545 /* clear history warning popup */ 546 #sanitizeEverythingWarningBox { 547 border-radius: 0 !important; 548 } 549 550 } 551 552 553 /* ADDONS PAGE --------------------------------------------------------------------------------------------- */ 554 555 @-moz-document url(about:addons){ 556 557 /* square search box */ 558 search-textbox { 559 border-radius: 0 !important; 560 } 561 562 /* square the context menus (3 dots and settings gear) */ 563 panel-list { 564 border-radius: 0 !important; 565 } 566 567 /* square the info boxes / banners */ 568 .discopane-notice { 569 border-radius: 0 !important; 570 } 571 572 .container { 573 border-radius: 0 !important; 574 } 575 576 /* square the addons and theme cards */ 577 .card-heading-image { 578 border-radius: 0 !important; 579 } 580 581 .card { 582 border-radius: 0 !important; 583 } 584 585 /* square selection buttons */ 586 button { 587 border-radius: 0 !important; 588 } 589 590 richlistitem { 591 border-radius: 0 !important; 592 } 593 594 menulist { 595 border-radius: 0 !important; 596 } 597 598 .sidebar-footer-link { 599 border-radius: 0 !important; 600 } 601 602 /* square toggle buttons */ 603 .toggle-button, 604 .toggle-button::before { 605 border-radius: 0 !important; 606 } 607 608 /* available addons update badge */ 609 .category[badge-count]::after { 610 border-radius: 0 !important; 611 } 612 613 /* extensions shortcuts */ 614 .shortcut-input { 615 border-radius: 0 !important; 616 } 617 } 618 619 620 /* ABOUT CONFIG PAGE ---------------------------------------------------------------------------------------- */ 621 622 @-moz-document url(about:config){ 623 624 /* square everything except radio buttons */ 625 #about-config-search { 626 border-radius: 0 !important; 627 } 628 629 #about-config-show-only-modified { 630 border-radius: 0 !important; 631 } 632 633 #showWarningNextTime { 634 border-radius: 0 !important; 635 } 636 637 button { 638 border-radius: 0 !important; 639 } 640 } 641 642 643 /* DOWNLOADS ------------------------------------------------------------------------------------------------ */ 644 645 @-moz-document url(about:downloads){ 646 647 /* square buttons and boxes*/ 648 .button-box { 649 border-radius: 0 !important; 650 } 651 652 richlistbox { 653 border-radius: 0 !important; 654 } 655 656 .downloadProgress { 657 border-radius: 0 !important; 658 } 659 660 .downloadProgress[paused] { 661 border-radius: 0 !important; 662 } 663 664 .downloadProgress:not([value="0"])::-moz-progress-bar { 665 border-radius: 0 !important; 666 } 667 668 .downloadProgress::-moz-progress-bar { 669 border-radius: 0 !important; 670 } 671 672 .downloadProgress[paused]::-moz-progress-bar { 673 border-radius: 0 !important; 674 } 675 } 676 677 678 /* FIREFOX VIEW PAGE ----------------------------------------------------------------------------------------- */ 679 @-moz-document regexp("^(about:firefoxview).*") { 680 681 :root { 682 --button-border-radius: 0 !important; 683 } 684 685 .tabpickup-steps, 686 .twisty, 687 .closed-tab-li-main, 688 .card, 689 .zap-card::before { 690 border-radius: 0 !important; 691 } 692 693 .step-progress, 694 .step-progress:not([value="0"])::-moz-progress-bar { 695 border-radius: 0 !important; 696 } 697 698 #colorways-collection-expiry-date, 699 #colorways-collection-expiry-date>span { 700 border-radius: 0 !important; 701 } 702 703 * { 704 border-radius: 0 !important; 705 } 706 } 707 708 /* OTHER INTERNAL PAGES ------------------------------------------------------------------------------------- */ 709 710 @-moz-document url(about:buildconfig), url(about:compat), url(about:crashes), url(about:debugging), 711 url(about:debugging#/setup), url(about:debugging#/runtime/this-firefox), url(about:devtools), 712 url(about:networking), url(about:policies), url(about:profiles), 713 url(about:profiling), url(about:protections), url(about:serviceworkers), url(about:studies), 714 url(about:support), url(about:telemetry), url(about:unloads), url(about:url-classifier), 715 url(about:webrtc), url(about:welcome){ 716 * { 717 border-radius: 0 !important; 718 } 719 } 720 721 722 /* PASSWORDS AND LOGINS ------------------------------------------------------------------------------------- */ 723 724 @-moz-document regexp("^(about:logins).*") { 725 * { 726 border-radius: 0 !important; 727 } 728 } 729 730 /* SERVER NOT FOUND PAGE ------------------------------------------------------------------------------------- */ 731 732 @supports (-moz-appearance:none) { 733 .primary.try-again { 734 border-radius: 0 !important; 735 } 736 } 737 738 739 /* WARNING SECURITY RISK PAGE --------------------------------------------------------------------------------- */ 740 741 @supports (-moz-appearance:none) { 742 .primary.try-again { 743 border-radius: 0 !important; 744 } 745 746 #returnButton { 747 border-radius: 0 !important; 748 } 749 750 #advancedButton { 751 border-radius: 0 !important; 752 } 753 754 #exceptionDialogButton { 755 border-radius: 0 !important; 756 } 757 758 #advancedPanelReturnButton { 759 border-radius: 0 !important; 760 } 761 762 #automaticallyReportBlockingInFuture { 763 border-radius: 0 !important; 764 } 765 } 766 767 768 /* Restart Firefox page after update ------------------------------------------------------------------------- */ 769 770 @supports (-moz-appearance:none) { 771 #restart { 772 border-radius: 0 !important; 773 } 774 } 775 776 777 /* SCREENSHOT PAGE ------------------------------------------------------------------------------------------ */ 778 779 @supports (-moz-appearance:none) { 780 .cancel-shot { 781 border-radius: 0 !important; 782 } 783 784 .all-buttons-container { 785 border-radius: 0 !important; 786 } 787 788 .visible { 789 border-radius: 0 !important; 790 } 791 792 .full-page { 793 border-radius: 0 !important; 794 } 795 796 .highlight-button-cancel { 797 border-radius: 0 !important; 798 } 799 800 .highlight-button-copy { 801 border-radius: 0 !important; 802 } 803 804 .highlight-button-download { 805 border-radius: 0 !important; 806 } 807 808 .preview-buttons { 809 border-radius: 0 !important; 810 } 811 812 .preview-image-wrapper { 813 border-radius: 0 !important; 814 } 815 } 816 817 818 /* PICTURE IN PICTURE PAGE ----------------------------------------------------------------------------------- */ 819 820 @supports (-moz-appearance:none) { 821 .pip-small.clickable { 822 border-radius: 0 !important; 823 } 824 825 .pip-expanded { 826 border-radius: 0 !important; 827 } 828 829 .pip-explainer { 830 border-bottom-right-radius: 0 !important; 831 border-bottom-left-radius: 0 !important; 832 } 833 } 834 835 836 /* READER MODE ----------------------------------------------------------------------------------------------- */ 837 838 @supports (-moz-appearance:none) { 839 840 .reader-toolbar, 841 .dropdown-popup, 842 .radiorow>label, 843 .font-size-value, 844 .content-width-value, 845 .line-height-value, 846 .color-input-container, 847 .narrate-control, 848 .narrate-start-stop, 849 #font-type-selector, 850 #font-weight-selector { 851 border-radius: 0 !important; 852 border-start-start-radius: 0; 853 border-end-start-radius: 0; 854 } 855 } 856 857 /* REVIEW CHECKER */ 858 859 @supports (-moz-appearance:none) { 860 861 .onboardingContainer.shopping .screen[pos=split], 862 .onboardingContainer.shopping .screen[pos="split"] .section-main .main-content, 863 .shopping-card, 864 #letter-grade-wrapper, 865 #letter-grade-term, 866 #letter-grade-description, 867 #beta-marker { 868 border-radius: 0 !important; 869 } 870 }