nordChrome.css (23888B) - View raw
/* imports the user facing variables */ /* USER FACING VARIABLES -------------------------------------------------------------------------------------- */ /* this file does NOT have to be updated between versions */ /* NOTE: restart Firefox to apply any changes */ :root { /* custom accent color to be used across Firefox*/ /* use hexcode or color name */ --custom-accent-color: #ebcb8b; /* color of the tab dividers / separators */ /* set variable = none, to disable dividers */ --custom-tab-divider-color: #4c566a; /* sets the height of the tabs toolbar */ /* legacy height (<= v1.6.2) = 33px */ /* functionality broken as of FF 108 - WIP */ /* --tab-bar-height: 35px; */ /* set the size of sync profile pic */ /* 1.0 = 100% scale */ --sync-avatar-scale: 1.0; /* custom paddings/margins for the menu itmes */ /* for reference: */ --custom-menuitem-padding-vertical: 6px; --custom-menuitem-padding-horizontal: 8px; --custom-menuitem-margin: 4px; } /* CUSTOM ACCENT COLORS -------------------------------------------------------------------------------------- */ :root { --lwt-toolbarbutton-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important; --toolbarbutton-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important; --button-primary-bgcolor: var(--custom-accent-color, #0a84ff) !important; --button-primary-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --button-primary-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; --buttons-primary-button-bgcolor: var(--custom-accent-color, #0a84ff) !important; --buttons-primary-button-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --buttons-primary-button-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; --button-background-color-primary: var(--custom-accent-color, #0a84ff) !important; --button-background-color-primary-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --button-background-color-primary-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; --brand-color-accent: var(--custom-accent-color, #0a84ff) !important; --brand-color-accent-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --brand-color-accent-active: var(--custom-accent-color, #0a84ff) !important; --color-accent-primary: var(--custom-accent-color, #0a84ff) !important; --color-accent-primary-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --color-accent-primary-pressed: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; --tab-attention-icon-color: var(--custom-accent-color, #0a84ff) !important; --checkbox-checked-bgcolor: var(--custom-accent-color, #0a84ff) !important; --checkbox-checked-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --checkbox-checked-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; --lwt-brighttext-url-color: var(--custom-accent-color, #0a84ff) !important; --lwt-popup-brighttext-url-color: var(--custom-accent-color, #0a84ff) !important; --focus-outline-color: var(--custom-accent-color, #0a84ff) !important; --toolbar-field-focus-border-color: var(--custom-accent-color, #0a84ff) !important; --link-color: var(--custom-accent-color, #0a84ff) !important; /*Star Highlight & Download Finished*/ --lwt-toolbarbutton-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important; --lwt-toolbar-field-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important; } .urlbarView-url, .popup-notification-learnmore-link.text-link { color: var(--custom-accent-color, #0a84ff) !important; } /* colors various popup windows (e.g. edit bookmarks, close window menus) */ @-moz-document regexp("^(about:|chrome:|moz-extension:).*") { html:not([role="dialog"]), html:not([role="dialog"]) *, html:not([role="dialog"]) body.activity-stream, window:not([chromehidden]), window:not([chromehidden])>dialog { --in-content-primary-button-background: var(--custom-accent-color, #0a84ff) !important; --in-content-primary-button-background-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important; --in-content-primary-button-background-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; } } /* color report broken side link */ #report-broken-site-popup-send-more-info-link { color: var(--custom-accent-color, #0a84ff) !important; } /* color the update/info dot in app menu */ :root { --panel-banner-item-info-icon-bgcolor: var(--custom-accent-color, #0a84ff) !important; --panel-banner-item-update-supported-bgcolor: var(--custom-accent-color, #0a84ff) !important; } /* color the left strip in notification banners (purple-yellow gradient -> accent color) */ .infobar::before { background-image: linear-gradient(var(--custom-accent-color, #0a84ff), var(--custom-accent-color, #0a84ff)) !important; } /* color the password autofill highlight color on click */ .autocomplete-richlistitem { &[selected] { background-color: color-mix(in srgb, white 15%, var(--custom-accent-color, #0a84ff)) !important; } } /* color the "manage themes" link on the customize page */ #customization-lwtheme-link.text-link { color: var(--custom-accent-color, #0a84ff) !important; } /* replace the mozilla purple to yellow gradient in appmenu */ /* (enabled by default for default, light, and dark themes) */ :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode], /* based on https://github.com/black7375/Firefox-UI-Fix/issues/288 */ :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], /* Light Theme */ :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] /* Dark Theme */ { --panel-separator-zap-gradient: linear-gradient(var(--custom-accent-color, #0a84ff), var(--custom-accent-color, #0a84ff)) !important; } /* can be manually overridden by pref */ @media (-moz-bool-pref: "browser.appmenugradient.overwrite") { :root { --panel-separator-zap-gradient: linear-gradient(var(--custom-accent-color, #0a84ff), var(--custom-accent-color, #0a84ff)) !important; } } /* TITLE BAR ----------------------------------------------------------------------------------------------- */ /* override mozilla min/max/close buttons with default ones (only relevant on linux) */ @media (-moz-gtk-csd-available) { @media (-moz-bool-pref: "browser.windowcontrolbuttons.overwrite") { .titlebar-button:-moz-lwtheme { appearance: auto !important; } .titlebar-min:-moz-lwtheme, .titlebar-max:-moz-lwtheme, .titlebar-restore:-moz-lwtheme, .titlebar-close:-moz-lwtheme { list-style-image: none !important; } .titlebar-button:-moz-lwtheme:hover, .titlebar-button:-moz-lwtheme:hover:active { background-color: unset !important; color: unset !important; } } } /* remove window corner rounding in gtk */ :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox:-moz-lwtheme, :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) ::backdrop { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } /* TAB BAR ------------------------------------------------------------------------------------------------- */ /* sets the height of the tab toolbar otherwise will change height when tabs overflow [FIXED] */ /* tab height when playing audio issue fixed in FF 96.0.2+ */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=1714276 */ /* height change when tab overflow fixed in FF 97 beta+ */ /* #TabsToolbar {height: var(--tab-bar-height, 35px) !important;} */ /* :root{ */ /* default value for tab-min-height = 36px */ /* --tab-min-height: var(--tab-bar-height, 35px) !important; */ /* } */ /* .toolbar-items {height: var(--tab-bar-height, 35px) !important;} */ /* .tabbrowser-tab {height: var(--tab-bar-height, 35px) !important;} */ #tabbrowser-tabs { min-height: 0 !important; } /* Reduce left spacer on tab bar */ @supports (not (-moz-osx-font-smoothing: auto)) { @media not (-moz-bool-pref:"browser.lefttabspacer.enable") { .titlebar-spacer[type="pre-tabs"] { display: none !important; } } } /* Tab - Connect to window */ .tab-background { border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .tab-content { margin-top: 0 !important; margin-bottom: 0 !important; } .tab-stack { margin-top: 0 !important; margin-bottom: 0 !important; } /* adds the little colored strip on top of the selected tab */ .tab-background:is([selected], [multiselected]) { box-shadow: inset 0 2px var(--custom-accent-color, #0a84ff) !important; border: 0 !important; outline: none !important; background-repeat: no-repeat !important; } /* special handling for mozilla containers */ tab[class*="identity-color"] { background-image: linear-gradient(var(--identity-tab-color, white), var(--identity-tab-color, white)); background-size: 75% var(--container-stripe-height, 1px); background-position: bottom center; background-repeat: no-repeat; border: 0 !important; outline: none !important; } /* override the built in container colors */ tab[class*="identity-color"][selected="true"]>.tab-stack>.tab-background>.tab-context-line { height: 0 !important; } /* replace with our own container border */ tab[class*="identity-color"][selected="true"]>.tab-stack>.tab-background:is([selected], [multiselected]) { background-image: linear-gradient(var(--identity-tab-color, white), var(--identity-tab-color, white)); background-size: 75% var(--container-stripe-height, 1px); background-position: bottom center; background-repeat: no-repeat; border: 0 !important; outline: none !important; } @media (-moz-bool-pref:"browser.tabcontextline.match_container_color") { tab[class*="identity-color"][selected="true"]>.tab-stack>.tab-background:is([selected], [multiselected]) { box-shadow: inset 0 2px var(--identity-tab-color, white) !important; } } /* realign the selected tab so it doesnt droop down by 2px */ .tabbrowser-tab[selected="true"] { z-index: 0 !important; } /* neighbouring tabs should "pinch" together */ .tabbrowser-tab { padding-inline: 0 !important; } /* Unselected Tab - Divide line */ .tab-stack::before, .tabbrowser-tab:last-of-type .tab-stack::after { content: ""; } .tab-stack::before, .tab-stack::after { display: block; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 0px; height: 100%; border-right: 1px solid var(--custom-tab-divider-color, #535354); } .tab-stack::after { right: 0; } /* removes double tab line next to view button, fixes some padding */ :root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem)+#tabbrowser-tabs { border-inline-start: None !important; padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 0px) !important; margin-inline-start: 0 !important; } /* squares the mute button on hover */ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { border-radius: 0 !important; } /* new sidebar tabs */ moz-button, :host { --button-border-radius: 0 !important; } /* NAV BAR ---------------------------------------------------------------------------------------------------- */ :root { /* reduce padding between menu items */ --arrowpanel-menuitem-padding: var(--custom-menuitem-padding-vertical, 6px) var(--custom-menuitem-padding-horizontal, 8px) !important; --arrowpanel-menuitem-margin: 0 var(--custom-menuitem-margin, 4px) !important; --panel-subview-body-padding: var(--custom-menuitem-margin, 4px) 0 !important; /* square the off most of the UI (selection buttons on hover, context menus, hamburger menus, etc) */ --toolbarbutton-border-radius: 0 !important; --arrowpanel-menuitem-border-radius: 0 !important; --arrowpanel-border-radius: 0 !important; --tab-border-radius: 0 !important; --subviewbutton-border-radius: 0 !important; } /* squares the profile picture on toolbar if logged into sync AND not disabled by pref */ @media not (-moz-bool-pref:"browser.syncavatar.round") { #fxa-avatar-image { border-radius: 0 !important; } } /* scales the profile picture, since it is quite small */ #fxa-avatar-image { transform: scale(var(--sync-avatar-scale)) !important; } /* option to hide extensions button */ @media (-moz-bool-pref:"browser.unifiedextensions.hide") { #unified-extensions-button { display: none } } /* option to hide the extentions notification dot */ @media (-moz-bool-pref:"browser.extensionsdot.hide") { #unified-extensions-button[attention]>.toolbarbutton-icon { background-image: None !important; } } /* SUB MENUS --------------------------------------------------------------------------------------------- */ /* more padding code for sub menus */ .panel-header { padding: var(--custom-menuitem-margin, 4px) !important; padding-bottom: 0 !important; } .subviewbutton-back { margin: 0 0 !important; } /* removes the rounded corners from popup menus (main hamburger menu, bookmarks, etc) */ .menupopup-arrowscrollbox, .panel-arrowcontainer, .panel-arrowbox, .panel-arrowscrollbox, menupopup { border-radius: 0 !important; } #report-broken-site-popup-url, #report-broken-site-popup-description { border-radius: 0 !important; } /* removes rounded corner from selection boxes and autocomplete popups */ menupopup menuitem, menupopup menu, menupopup, panel, menulist { border-radius: 0 !important; --panel-border-radius: 0 !important; } /* square input fields in the edit bookmarks menu */ #editBMPanel_namePicker { border-radius: 0 !important; } #editBMPanel_folderMenuList { border-radius: 0 !important; } #editBMPanel_tagsField { border-radius: 0 !important; } #editBMPanel_tagsSelector { border-radius: 0 !important; } #editBMPanel_locationField { border-radius: 0 !important; } #editBMPanel_keywordField { border-radius: 0 !important; } /* square off aspects of the download menu (i.e. selection boxes, open in folder button) */ .download-state, .downloadButton { border-radius: 0 !important; } .downloadProgress { border-radius: 0 !important; overflow: hidden !important; } .downloadProgress[paused] { border-radius: 0 !important; } .downloadProgress:not([value="0"])::-moz-progress-bar { border-radius: 0 !important; } .downloadProgress::-moz-progress-bar { border-radius: 0 !important; } .downloadProgress[paused]::-moz-progress-bar { border-radius: 0 !important; } /* square off the toggle switch for "enhanced tracking protection" */ .protections-popup-tp-switch, .protections-popup-tp-switch::before { border-radius: 0 !important; } .toggle-button, .toggle-button::before { border-radius: 0 !important; } /* square the permissions popup (e.g. autoplay blocked) */ #permission-popup-menulist { border-radius: 0 !important; } /* square permission popups for webRTC (screen sharing and voice) */ #webRTC-selectMicrophone-menulist { border-radius: 0 !important; } #webRTC-selectWindow-menulist { border-radius: 0 !important; } #webRTC-previewVideo { border-radius: 0 !important; } /* square the fullscreen and zoom reset */ #appMenu-zoomReset-button2>.toolbarbutton-text, #appMenu-fullscreen-button2>.toolbarbutton-icon { border-radius: 0 !important; } /* square the selection in the "List All Tabs" menu */ .all-tabs-item { border-radius: 0 !important; margin-inline: var(--custom-menuitem-margin, 4px) !important; } /* MISC ITEMS ------------------------------------------------------------------------------------------- */ /* square "close tabs and quit" window and buttons (and prob other dialog boxes) */ .dialogBox { border-radius: 0 !important; } button { border-radius: 0 !important; } /* square checkboxes */ .checkbox-check { border-radius: 0 !important; } #checkbox { border-radius: 0 !important; } /* square dropdown selection and autocompete boxes */ select { border-radius: 0 !important; } :is(panel, menupopup)::part(content) { border-radius: 0 !important; } /* square selections, checkboxes, and nav buttons on the print page */ .toggle-group-label { border-radius: 0 !important; } .photon-number { border-radius: 0 !important; } #headers-footers-enabled { border-radius: 0 !important; } #backgrounds-enabled { border-radius: 0 !important; } .toolbarButton:not(:hover) { background-color: #2b2a33 !important; } #custom-range { border-radius: 0 !important; } /* autosave password notification input fields */ #password-notification-username { border-radius: 0 !important; } #password-notification-password { border-radius: 0 !important; } /* searchbox and buttons in find bar (ctrl+F) */ .findbar-textbox { border-radius: 0 !important; } toolbarbutton { border-radius: 0 !important; } /* certain new folder and login field popup dialogs */ #loginTextbox { border-radius: 0 !important; } #password1Textbox { border-radius: 0 !important; } /* density options in "Customize Toolbar" */ #customization-uidensity-menuitem-compact { border-radius: 0 !important; } #customization-uidensity-menuitem-normal { border-radius: 0 !important; } #customization-uidensity-menuitem-touch { border-radius: 0 !important; } /* square popup when entering full screen video */ #fullscreen-warning { border-radius: 0 !important; } /* square dismissable "show me how" notification messages */ notification-message { border-radius: 0 !important; } .animated { border-radius: 0 !important; } .infobar { border-radius: 0 !important; } .infobar::before { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; } /* clear history popup and warnings */ #sanitizeDurationChoice { border-radius: 0 !important; } #sanitizeEverythingWarningBox { border-radius: 0 !important; } /* url preview on hover */ #statuspanel-label { border-radius: 0 !important; } /* sidebar and its panels*/ #sidebar, .screen, .select-item, .button-background, .inline-image, .selectedTab, .moz-card, moz-fieldset, #inputs, .search-container { border-radius: 0 !important; } /* input fields dont like to change, so do it this way instead */ :root { --border-radius-small: 0 !important; --border-radius-medium: 0 !important; --border-radius-large: 0 !important; } /* THUNDERBIRD SPECIFIC ------------------------------------------------------------------------------ */ /* custom color for tab line */ :root { --tabline-color: var(--custom-accent-color, #0a84ff) !important; } /* the loading/compacting progress bar on bottom right */ .progressmeter-statusbar { border-radius: 0 !important; } .progressmeter-statusbar:not([value="0"])::-moz-progress-bar { border-radius: 0 !important; } /* Remove back, forward, and refresh buttons */ #back-button, #forward-button, #reload-button { display: none !important; } #sidebar-button { display: none !important; } #firefox-view-button { display: none !important; } #new-tab-button { display: none !important; } #alltabs-button { display: none !important; } #identity-permission-box { display: none !important; } #picture-in-picture-button { display: none !important; } #star-button-box { display: none !important; } #pageAction-urlbar-_testpilot-containers { display: none !important; } #navigator-toolbox>#PersonalToolbar { display: none !important; } #tabbrowser-tabbox { outline: none !important; box-shadow: none !important; } #reader-mode-button { display: none !important; } #translations-button { display: none !important; } /* Remove Context Menu Entries */ #context-back, #context-take-screenshot, #context-forward, #context-reload, #context-stop, #context-bookmarkpage, #context-savepage, #context-pocket, #screenshots_mozilla_org_create-screenshot, #context-inspect, #context-sep-selectall, #context-selectall, #context-copy, #context-viewsource, #context-viewinfo, #context-print-selection, #context-viewpartialsource-selection, #context-inspect-a11y, #context-openlinkintab, #context-openlink, #context-openlinkprivate, #context-bookmarklink, #context-savelink, #context-savelinktopocket, #context-sendimage, #context-searchselect-private { display: none !important; } #statuspanel[type="overLink"] { opacity: 0 !important; } #statuspanel { opacity: 0 !important; } #statuspanel { display: none !important } #statuspanel-label { display: none !important; } #unified-extensions-button:hover #unified-extensions-view, #unified-extensions-view:hover { visibility: visible !important; opacity: 1 !important; } /* Hide URL suggestions and other elements */ #urlbar-results, #urlbar-go-button, #page-action-buttons, #reader-mode-button-container { display: none !important; } /* Hide "This time search with" suggestion */ #urlbar-one-offs-header-label { display: none !important; } /* Hide search engine symbols */ #urlbar-engine-one-off-item, #urlbar-one-off-search-buttons { display: none !important; } /* Disable one-off search */ #urlbar[oneoffsearchfieldshidden] { pointer-events: none !important; } /* Hide sidebar */ #sidebar-box { visibility: collapse !important; } /* Hide bottom status/ui bar */ #status-bar { visibility: collapse !important; } scrollbar { -moz-appearance: none !important; display: none !important; width: 0px !important; background-color: transparent !important; } scrollcorner { -moz-appearance: none !important; display: none !important; } *[id*="sep"], *[class*="sep"] { display: none !important; } /* Remove tab close button */ .tab-close-button { display: none !important; } /* Remove new tab button */ #tabs-newtab-button { display: none !important; } .titlebar-buttonbox-container { display: none !important; } #stop-button { display: none !important; } #customizableui-special-spring1, #customizableui-special-spring2 { display: none !important; } #vertical-spacer { display: none !important; } .search-one-offs { display: none !important; height: 0 !important; overflow: hidden !important; } /* #sidebar-main { visibility: collapse !important; } */ /* remove annoying top border on top of urlbar*/ #nav-bar { box-shadow: none !important; border-top: none !important; } .tools-and-extensions.actions-list { display: none !important; } #sidebar-tools-and-extensions-splitter { display: none !important; } #urlbar-searchmode-switcher { display: none !important; } #urlbar-input::placeholder { color: transparent !important; }