:root { --in-content-page-background: light-dark(#fff, #191919) !important; --newtab-background-color: light-dark(#fff, #191919) !important; --in-content-box-border-color: light-dark(#d7d7db, #535353) !important; --newtab-background-color-secondary: transparent !important; --in-content-focus-outline-color: light-dark(#7db0f7, #2c749f) !important; --focus-outline-color: light-dark(#7db0f7, #2c749f) !important; --button-background-color-primary: light-dark(#007aff, #1280fd) !important; --button-background-color-primary-hover: light-dark(#0075dd, #006bdc) !important; --button-background-color-primary-active: light-dark(#005ebb, #0055bc) !important; --in-content-primary-button-background: light-dark(#007aff, #1280fd) !important; --in-content-primary-button-background-hover: light-dark(#0075dd, #006bdc) !important; --in-content-primary-button-background-active: light-dark(#005ebb, #0055bc) !important; --in-content-primary-button-text-color: #fff !important; --checkbox-checked-bgcolor: light-dark(#007aff, #1280fd) !important; --checkbox-checked-hover-bgcolor: light-dark(#0075dd, #006bdc) !important; --checkbox-checked-active-bgcolor: light-dark(#005ebb, #0055bc) !important; --link-color: light-dark(#007aff, #1280fd) !important; --link-color-hover: light-dark(#0075dd, #006bdc) !important; --link-color-active: light-dark(#005ebb, #0055bc) !important; --link-color-visited: light-dark(#007aff, #1280fd) !important; --brand-color-accent: light-dark(#007aff, #1280fd) !important; --brand-color-accent-hover: light-dark(#0075dd, #006bdc) !important; --brand-color-accent-active: light-dark(#005ebb, #0055bc) !important; --newtab-primary-action-background: light-dark(#007aff, #1280fd) !important; --color-accent-primary: light-dark(#007aff, #1280fd) !important; --color-accent-primary-active: light-dark(#005ebb, #0055bc) !important; --button-text-color-primary: #fff !important; --bg4: light-dark(rgba(255, 255, 255, .75), rgba(15, 15, 12, .75)); --bs1: 0 5px 15px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .15); --bs2: 0 5px 15px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .5); @media (-moz-platform: windows) { --bs1: 0 45px 65px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .17); --bs2: 0 45px 65px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .15); } } @media (prefers-color-scheme: dark) { @media (-moz-platform: windows) {:not(:-moz-window-inactive) {::-moz-selection { background-color: #416189 }}} :root { --in-content-box-background: #282828 !important; --in-content-table-background: #252525 !important; --newtab-primary-element-text-color: #fff !important; --color-gray-80: #282828 !important; --color-gray-90: #191919 !important; } :root[dialogroot] { --background-color-canvas: #191919 !important; } .home-section .section .sponsored-checkbox:checked:hover { background-color: #436ee3 !important; } @-moz-document url-prefix(about:) { body { background-color: #191919 !important; } * { --toolbar-button-foreground-active: #1280fd !important; --primary-color: #1280fd !important; --selected-background: rgba(18, 128, 253, .2) !important; --popup-background: #313131 !important; --popup-button-background-hover: #383838 !important; --popup-button-background-active: #2b2b2b !important; --toolbar-button-background-hover: #383838 !important; --toolbar-button-background-active: #2b2b2b !important; --fxview-background-color: #191919 !important; --in-content-page-background: #191919 !important; --background-color-canvas: #191919 !important; } .toggle-button { --toggle-background-color-pressed: #1280fd !important; --toggle-background-color-pressed-hover: #1280fd !important; --toggle-background-color-pressed-active: #417bde !important; --toggle-dot-background-color-on-pressed: #fff !important; } #migrationWizardDialog { background: #191919 !important; } } } @-moz-document url-prefix(about:), regexp("chrome://(?!browser\.xhtml).*") { input[type="search"] { background-color: light-dark(#eeeeef, #282828) !important; border-color: transparent !important; outline-style: solid !important; outline-color: transparent !important; outline-width: 18px !important; &:is(:focus-visible, [focused]) { outline-color: var(--focus-outline-color) !important; outline-width: 3px !important; outline-offset: -1px !important; transition: all .3s cubic-bezier(.8, 0, 0, .8) !important; } } #searchInput[focused] { outline-color: var(--focus-outline-color) !important; outline-width: 3px !important; outline-offset: -1px !important; transition: all .3s cubic-bezier(.8, 0, 0, .8) !important; } search-addons > search-textbox[focused] { outline-color: var(--focus-outline-color) !important; outline-width: 3px !important; outline-offset: -1px !important; transition: all .3s cubic-bezier(.8, 0, 0, .8) !important; } search-textbox { background: light-dark(#eeeeef, #282828) !important; border-color: transparent !important; outline-style: solid !important; outline-color: transparent !important; outline-width: 18px !important; } input[type="checkbox"]:not(.reveal-password-checkbox) { appearance: none !important; background-color: transparent !important; border-radius: 2px !important; border: 2px solid rgba(165, 165, 165, .8) !important; &:checked { appearance: checkbox !important; } } input[type="radio"]:not(.wallpaper-input, [name="theme"], [name="avatar"]) { appearance: none !important; background-color: transparent !important; border-radius: 50% !important; border: 2px solid rgba(165, 165, 165, .8) !important; &:checked { background-color: light-dark(#007aff, #1280fd) !important; background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg") !important; background-size: 8px; background-repeat: no-repeat; background-position: center; -moz-context-properties: fill; fill: #fff; border: none !important; &:hover { background-color: light-dark(#0075dd, #006bdc) !important; } &:hover:active { background-color: light-dark(#005ebb, #0055bc) !important; } } } .checkbox-check { appearance: none !important; background-color: transparent !important; border-radius: 2px !important; border: 2px solid rgba(165, 165, 165, .8) !important; &[checked] { appearance: checkbox !important; } } .radio-check { appearance: none !important; background-color: transparent !important; border-radius: 50% !important; border: 2px solid rgba(165, 165, 165, .8) !important; &[selected] { background-color: light-dark(#007aff, #1280fd) !important; background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg") !important; background-size: 8px; background-repeat: no-repeat; background-position: center; -moz-context-properties: fill; fill: #fff; border: none !important; &:hover { background-color: light-dark(#0075dd, #006bdc) !important; } &:hover:active { background-color: light-dark(#005ebb, #0055bc) !important; } } } } @-moz-document url-prefix("about:firefoxview") { * {--fxview-border: transparent !important;} .card-container { background: light-dark(#eeeeef, #282828) !important; box-shadow: none !important; } } @-moz-document url-prefix("about:addons") { ::after { content: none !important; } } @-moz-document url-prefix("about:preferences") { .navigation::after { content: none !important; } } @-moz-document url("about:privatebrowsing") { :root { --in-content-page-background: transparent !important; } body { --newtab-search-icon: url("chrome://global/skin/icons/search-glass.svg") !important; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; background-image: repeating-linear-gradient(-45deg, #2d2d2d 0 250px, #202020 0 500px) !important; } .container { margin-top: -40px !important; } .search-handoff-button { background-color: rgba(15, 15, 15, .7) !important; border-radius: 12px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; backdrop-filter: blur(30px) !important; outline: none !important; border: none !important; fill: rgba(255, 255, 255, .7) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: #36363a !important; backdrop-filter: blur(0px) !important; } } } .search-handoff-button.disabled { opacity: 1 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; fill: rgba(255, 255, 255, .6) !important; } .fake-textbox { color: #fff !important; } .search-handoff-button.disabled .fake-textbox { color: #999 !important; } .logo { background: url("chrome://browser/skin/privateBrowsing.svg") no-repeat center center !important; background-size: 76px !important; height: 76px !important; width: 76px !important; -moz-context-properties: fill; fill: #b9b9b9; } .wordmark { fill: #b9b9b9 !important; } .info, .promo-visible { display: none; } @media (-moz-platform: windows) { .search-handoff-button { background-color: #2c2c2c !important; } } } @-moz-document url("about:newtab"), url("about:home") { body { --newtab-search-icon: url("chrome://global/skin/icons/search-glass.svg") !important; background-image: var(--newtab-wallpaper, ""), repeating-linear-gradient(-45deg, var(--newtab-wallpaper-color, "") 0 250px, #fff 0 500px) !important; @media (prefers-color-scheme: dark) { background-image: var(--newtab-wallpaper, ""), repeating-linear-gradient(-45deg, var(--newtab-wallpaper-color, "") 0 250px, #191919 0 500px) !important; } } *[style*="18c7861f-0c9d-48d4-a98c-fb8999e331bd.avif"] { background-image: url("resource://builtin-themes/alpenglow/background-noodles-left.svg") !important; @media (prefers-color-scheme: dark) { background-image: url("resource://builtin-themes/alpenglow/background-noodles-left-dark.svg") !important; } } @keyframes panel-grow { 0% { transform: scale(.92); } 100% { transform: scale(1); } } .context-menu { border-radius: 6px !important; padding: 6px !important; box-shadow: 0 5px 15px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .15) !important; @media (-moz-platform: windows) { box-shadow: 0 15px 25px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .17) !important; } } .context-menu > ul { padding: 0 !important; } .context-menu > ul > li > a, .context-menu > ul > li > button { border-radius: 4px !important; padding: 6px 12px !important; } .context-menu > ul > li.separator { border-bottom: 1px solid light-dark(rgba(50, 50, 50, .1), rgba(225, 225, 225, .1)) !important; } .topsite-form .form-wrapper input[type=text] { border: none !important; background: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important; outline-style: solid !important; outline-color: transparent !important; outline-width: 18px !important; } .topsite-form .form-wrapper input[type=text]:focus { outline-color: var(--focus-outline-color) !important; outline-width: 3px !important; outline-offset: -1px !important; transition: all .3s cubic-bezier(.8, 0, 0, .8) !important; } .divider, .edit-topsites-wrapper .actions { border-top: 1px solid light-dark(rgba(50, 50, 50, .1), rgba(225, 225, 225, .1)) !important; } .selector, .actions button { border: 1px solid light-dark(rgba(50, 50, 50, .1), rgba(225, 225, 225, .1)) !important; } .icon.icon-settings, .wordmark { opacity: .8 !important; } .icon.icon-settings { background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } .icon.icon-settings:hover { background-color: light-dark(rgba(255, 255, 255, .8), rgba(15, 15, 15, .7)) !important; backdrop-filter: blur(30px) !important; opacity: 1 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(#fff, #36363a) !important; backdrop-filter: blur(0px) !important; } } } .outer-wrapper.only-search { display: flex !important; } .search-inner-wrapper { background-color: light-dark(rgba(255, 255, 255, .8), rgba(15, 15, 15, .7)) !important; border-radius: 12px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; transition: background .5s !important; z-index: 1; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(#fff, #36363a) !important; } } } .search-inner-wrapper:active { background-color: light-dark(rgba(255, 255, 255, .6), rgba(15, 15, 15, .8)) !important; transition: background .5s !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(rgba(255, 255, 255, .9), rgba(54, 54, 58, .9)) !important; } } } .search-handoff-button { border: none !important; box-shadow: none !important; border-radius: 12px !important; background-color: transparent !important; } .search-wrapper input { border: none !important; box-shadow: none !important; outline: none !important; background-color: transparent !important; } .contentSearchSuggestionTable { border-radius: 6px !important; } .contentSearchSuggestionTable .contentSearchHeader, .contentSearchSuggestionTable .contentSearchSettingsButton { border-color: transparent !important; } .contentSearchSuggestionTable .contentSearchOneOffsTable { border-top: none !important; background-color: transparent !important; } .contentSearchSuggestionTable .contentSearchSuggestionRow.selected { background: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important; } .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active { background: light-dark(rgba(70, 70, 70, .15), rgba(170, 170, 170, .3)) !important; } .contentSearchSuggestionTable .contentSearchOneOffItem { border: none !important; border-radius: 6px !important; margin: 5px !important; width: 32px !important; } .search-button { border-radius: 0 12px 12px 0 !important; background-color: transparent !important; transition: background .5s !important; } .search-button:hover { background-color: light-dark(rgba(70, 70, 70, .15), rgba(170, 170, 170, .2)) !important; transition: background .5s !important; } .search-button:focus { border: none !important; box-shadow: none !important; background-color: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .1)) !important; transition: background .5s !important; } .icon-wrapper { width: 32px !important; height: 32px !important; } .customize-menu { border-radius: 8px !important; } .tile, .context-menu-button.icon { background-color: rgba(255, 255, 255, .8) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: #fff !important; } } } .context-menu-button.icon:active { background-color: rgba(255, 255, 255, .6) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: rgba(255, 255, 255, .9) !important; } } } .context-menu-button { fill: #000 !important; } .lightWallpaper .top-site-outer .title { color: #000 !important; } .darkWallpaper .top-site-outer .title { color: #fff !important; } @media not (prefers-color-scheme: dark) { .darkWallpaper .top-site-outer .context-menu { color-scheme: light !important; } :has(body[style*="18c7861f-0c9d-48d4-a98c-fb8999e331bd.avif"]) { .personalize-button:not(:hover, :active), .top-site-outer .context-menu-button, .top-site-outer:not(:hover, :active, .active), .logo-and-wordmark .wordmark, .icon.icon-pin-small { color-scheme: light !important; } .top-site-outer .title { color: #000 !important; } } } @media (prefers-color-scheme: dark) { .lightWallpaper .top-site-outer .context-menu { color-scheme: dark !important; } .lightWallpaper .tile:active { background-color: rgba(15, 15, 15, .8) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: #36363a !important; } } } .tile, .context-menu-button.icon { background-color: rgba(15, 15, 15, .7) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: #36363a !important; } } } .context-menu-button.icon:active { background-color: rgba(15, 15, 15, .8) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: rgba(54, 54, 58, .9) !important; } } } .context-menu-button { fill: #fff !important; } .context-menu { border: 1px solid rgba(235, 245, 255, .15) !important; box-shadow: 0 5px 15px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .5) !important; } } @media (prefers-color-scheme: light) { .darkWallpaper .tile:active { background-color: rgba(255, 255, 255, .6) !important; } } .tile { border-radius: 16px !important; width: 72px !important; height: 72px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; border: none !important; transition: background .5s !important; } .tile:active { background-color: light-dark(rgba(255, 255, 255, .6), rgba(15, 15, 15, .8)) !important; transition: background .5s !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(rgba(255, 255, 255, .9), rgba(54, 54, 58, .9)) !important; } } } .top-site-outer, .top-site-button, .top-site-icon:not(.search-topsite) { background-color: transparent !important; } .top-site-outer .context-menu-button { inset-inline-end: -9px !important; } .top-site-outer .top-site-inner > a { padding: unset !important; } .edit-topsites-wrapper .top-site-inner > .top-site-button { background: none !important; box-shadow: none !important; } .edit-topsites-wrapper .top-site-inner > .top-site-button > .tile { border: none !important; border-radius: 18px !important; box-shadow: none !important; width: 96px !important; height: 96px !important; background-color: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(#fff, #36363a) !important; } } } .edit-topsites-wrapper .icon-wrapper { width: 64px !important; height: 64px !important; } .edit-topsites-wrapper * { text-decoration: none !important; } .context-menu-button.icon { border-radius: 50px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; } [data-l10n-id="newtab-custom-recent-toggle"], .contentSearchSuggestionTable .contentSearchHeader, .wallpaper-attribution, .logo-and-wordmark, .icon.icon-pin-small, .card-outer, .section-title-container, .customize-menu .close-button-wrapper { display: none !important; } .top-site-outer:hover .icon.icon-pin-small { display: inline-block !important; } .wallpaper-input:checked { outline-color: transparent !important; } .wallpaper-list .wallpaper-input:checked { outline-color: #1280fd !important; } .wallpaper-input:checked, .wallpaper-input.selected { box-shadow: none !important; } .modal-overlay, .modalOverlayOuter { background: none !important; } .modal { border-radius: 6px !important; border: none !important; animation-name: panel-grow; animation-duration: 250ms; background-color: var(--bg4) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(#fff, #36363a) !important; } } } .modal, .tile, .context-menu-button.icon, .search-inner-wrapper { backdrop-filter: blur(30px) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { backdrop-filter: blur(0px) !important; } } } .modal, .contentSearchSuggestionTable { box-shadow: var(--bs1) !important; } .customize-menu { background-color: var(--bg4) !important; backdrop-filter: blur(30px) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; margin: 11px 11px 0 0 !important; height: 98% !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(#fff, #36363a) !important; backdrop-filter: blur(0px) !important; } } } .top-site-outer .context-menu, .card-outer .context-menu, .contentSearchSuggestionTable, .weather .context-menu, .location-input-wrapper, .weatherInfoLink, .weatherButtonContextMenuWrapper, .weatherNotAvailable, .personalize-button { backdrop-filter: blur(30px) !important; background-color: var(--bg4) !important; @media (-moz-platform: linux) { @media not -moz-pref("gwfox.bms") { background-color: light-dark(#fff, #36363a) !important; backdrop-filter: blur(0px) !important; } } } .wallpaper-list.category { background-color: light-dark(rgba(255, 255, 255, .95), rgba(55, 55, 55, .95)) !important; margin: 0 !important; width: 100% !important; height: 100% !important; inset-inline-start: 0 !important; padding: 10px !important; } .weatherCard, .personalize-button { box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important; border-radius: var(--border-radius-medium) !important; } .weatherSponsorText { display: none; } .weatherInfoLink:active, .weatherButtonContextMenuWrapper:active { background-color: light-dark(rgba(255, 255, 255, .6), rgba(15, 15, 15, .8)) !important; } .location-input-wrapper input { border: none !important; background-color: light-dark(rgba(70, 70, 70, .1), rgba(170, 170, 170, .2)) !important; } @media -moz-pref("widget.macos.native-context-menus") { .tile, .context-menu-button.icon, .search-inner-wrapper, .location-input-wrapper, .weatherInfoLink, .weatherButtonContextMenuWrapper, .weather .context-menu, .modal, .customize-menu, .top-site-outer .context-menu, .card-outer .context-menu, .contentSearchSuggestionTable { background-color: light-dark(rgba(255, 255, 255, .55), rgba(25, 25, 25, .65)) !important; } @media (prefers-color-scheme: light) { .tile, .context-menu-button.icon { background-color: rgba(255, 255, 255, .55) !important; } } @media (prefers-color-scheme: dark) { .tile, .context-menu-button.icon { background-color: rgba(25, 25, 25, .65) !important; } } } @media (prefers-color-scheme: dark) { .modal, .contentSearchSuggestionTable { box-shadow: var(--bs2) !important; border: 1px solid rgba(235, 245, 255, .15) !important; } .customize-menu { outline: 1px solid rgba(235, 235, 235, .2) !important; outline-offset: -1px !important; } @media (-moz-platform: windows) { .modal, .context-menu, .contentSearchSuggestionTable { border: none !important; } .context-menu { box-shadow: 0 15px 25px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .15) !important; } .customize-menu { outline: none !important; } } } }