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