@charset "UTF-8"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; /** Default Theme - Contrast **************************************************/ @supports -moz-bool-pref("userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } /*= Darkmode - Color lighter =================================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } /** Compatibility Fixes *******************************************************/ /*= Theme - Compatibility ====================================================*/ @supports -moz-bool-pref("userChrome.compatibility.theme") { /*= Hotfix #98 ===============================================================*/ /* Hidden Tab Panel Padding */ #allTabsMenu-hiddenTabsView .all-tabs-item { margin-inline: 8px; border-radius: 4px; } /*= Remote Tabs Panel's Bottom Padding =======================================*/ #PanelUI-remotetabs #PanelUI-remotetabs-main { margin-bottom: 6px; } /*= Identity Popup Icon Crop =================================================*/ .identity-popup-security-connection.identity-button { padding-block: 1px !important; } /*= Zoom in button's plus icon horizontal rate ===============================*/ #customization-palette-container #zoom-in-button > .toolbarbutton-icon, #customization-panel-container #zoom-in-button > .toolbarbutton-icon, #widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon { padding-inline-start: 0px !important; } /*= Subview button, Menu's right padding #597 ================================*/ .subviewbutton.toolbaritem-combined-buttons:not([shortcut]), .subviewbutton.subviewbutton-nav:not([shortcut]), menu.subviewbutton { padding-inline-end: 0 !important; } /*= Icon Fill Color ==========================================================*/ :root:-moz-lwtheme { /* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light */ --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215)); } /*= First visible tab margin at maximized #332 ===============================*/ :root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar { margin-left: -1px; } /*= Disabled menu background color ===========================================*/ menuitem[disabled="true"], menu[disabled="true"] { background-color: transparent !important; } /*= Remove Tab Border ========================================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { /* TARGET: original, photon */ #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme, #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background { /* Nightly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ border: unset !important; } #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme, .tab-background[selected]:-moz-lwtheme { outline-color: transparent !important; } .keyboard-focused-tab > .tab-stack > .tab-background, .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background { outline: var(--focus-outline) !important; } } /*= Tab Separator Color ======================================================*/ #TabsToolbar, #nav-bar { --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */ } /*= Light Weight Theme =======================================================*/ /* Header Image */ :root[lwtheme-image] { background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; } @media (min-width: 2500px) { :root[lwtheme-image] { background-size: contain; } @supports -moz-bool-pref("userChrome.compatibility.covered_header_image") { :root[lwtheme-image] { background-size: cover; } } } :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; background-repeat: var(--lwt-background-tiling) !important; background-position: var(--lwt-background-alignment) !important; background-color: unset !important; /* Original: var(--lwt-accent-color) */ } /* Navbar Border */ #navigator-toolbox:-moz-lwtheme { --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } /*= Findbar Border Color =====================================================*/ html|input.findbar-textbox { border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ } /*= Drop Indicator Color #473 ================================================*/ treechildren::-moz-tree-cell-text(primary, dropOn), treechildren::-moz-tree-drop-feedback, vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] { background-color: var( --button-primary-bgcolor, var(--focus-outline-color) ) !important; /* Original: SelectedItem or AccentColor*/ } #bookmarksPanel[lwt-sidebar="true"] { --focus-outline-color: var(--in-content-focus-outline-color, AccentColor) !important; } /*= Menu color #477 ==========================================================*/ @media (-moz-windows-non-native-menus) { :root { /* Override some menu color variables for light browser themes. */ --menuitem-hover-background-color: #e0e0e6; --menu-background-color: #f9f9fb; --menu-color: #15141a; --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4); --menu-disabled-color: rgba(21, 20, 26, 0.4); --menu-border-color: #cfcfd8; --menu-icon-opacity: 0.7; /* Declare menu colors for dark themes, but don't override anything yet. */ --dark-menuitem-hover-background-color: #52525e; --dark-menu-background-color: #2b2a33; --dark-menu-color: #fbfbfe; --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4); --dark-menu-disabled-color: rgba(251, 251, 254, 0.4); --dark-menu-border-color: #5b5b66; --dark-menu-icon-opacity: 1; } /* Override the menu color variables for dark browser themes. */ } @media (-moz-windows-non-native-menus) and (-moz-toolbar-prefers-color-scheme: dark), (-moz-windows-non-native-menus) and (prefers-color-scheme: dark) { :root { --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color); --menu-background-color: var(--dark-menu-background-color); --menu-color: var(--dark-menu-color); --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color); --menu-disabled-color: var(--dark-menu-disabled-color); --menu-border-color: var(--dark-menu-border-color); --menu-icon-opacity: var(--dark-menu-icon-opacity); } } /*= Firefox View Border #498 =================================================*/ :root:not([privatebrowsingmode="temporary"])[firefoxviewhidden] #firefox-view-button + #tabbrowser-tabs { border-inline-start: none !important; padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; margin-inline-start: 0 !important; } @supports -moz-bool-pref("userChrome.tab.static_separator") { #tabbrowser-tabs { border-inline-start: none !important; padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; margin-inline-start: 0 !important; } } } /*= OS - Compatibility =======================================================*/ @supports -moz-bool-pref("userChrome.compatibility.os") { /*= Windows 10 - Top border of accent color at ESR #358 ======================*/ @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { border-top: 0.5px solid rgb(47, 47, 47) !important; } :root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { border-top-color: rgb(57, 57, 57) !important; } @media (-moz-windows-accent-color-in-titlebar) { :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { border-top-color: AccentColor !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { border-top-color: -moz-accent-color !important; } } } } /*= Windows 7, 8 - Tab Bar Background *****************************************/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { /* Header Color */ :root:not([lwtheme-image]):-moz-lwtheme { background-color: var(--lwt-accent-color) !important; } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { #TabsToolbar { /* Remove Aero */ /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */ background-image: unset !important; } #TabsToolbar:-moz-lwtheme { /* background textcolor */ color: var(--lwt-text-color) !important; } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { #navigator-toolbox:-moz-lwtheme { /* background textcolor */ color: var(--lwt-text-color) !important; } } /*= Windows 7, 8 - Menu Bar ==================================================*/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { menupopup > menu, menupopup > menuitem, #context-navigation > menuitem { border: 1px solid transparent; /* Need reduce 2px at menu */ } #main-menubar > menu[open="true"], #main-menubar > menu[_moz-menuactive="true"] { background-color: -moz-menuhover !important; /* Make to original */ } :root:-moz-lwtheme #main-menubar > menu[open="true"], :root:-moz-lwtheme #main-menubar > menu[_moz-menuactive="true"] { color: inherit !important; /* Original: -moz-menubarhovertext */ background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */ } } /*= Windows - Native Menu ====================================================*/ @media not (-moz-windows-non-native-menus) { @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { .customization-uidensity-menuitem > .menu-iconic-left { width: unset !important; } menulist > menupopup > menuitem[_moz-menuactive="true"], menulist > menupopup > menu[_moz-menuactive="true"] { background-color: highlight !important; color: highlighttext !important; } #PlacesToolbar menu, #PlacesToolbar menuitem, #BMB_bookmarksPopup menu, #BMB_bookmarksPopup menuitem { border: none !important; /* Remove border */ } #PlacesToolbar menu:not([disabled], :active)[_moz-menuactive="true"], #PlacesToolbar menuitem:not([disabled], :active)[_moz-menuactive="true"], #BMB_bookmarksPopup menu:not([disabled], :active)[_moz-menuactive="true"], #BMB_bookmarksPopup menuitem:not([disabled], :active)[_moz-menuactive="true"] { background-color: var(--button-hover-bgcolor) !important; } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { @media (not (-moz-windows-non-native-menus)) and (-moz-windows-classic: 0) { menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; } menu[_moz-menuactive="true"][disabled="true"], menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 5%, transparent) !important; border-color: color-mix(in srgb, currentColor 60%, transparent) !important; } /* Remove text shadow */ :root:-moz-lwtheme #toolbar-menubar { text-shadow: unset !important; /* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */ } /* Remove Color */ :root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) { background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */ color: unset !important; /* Original: black */ } } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; } menu[_moz-menuactive="true"][disabled="true"], menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 17%, transparent) !important; border-color: color-mix(in srgb, currentColor 80%, transparent) !important; } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menu[_moz-menuactive="true"], menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menuitem[_moz-menuactive="true"], menupopup:not([placespopup="true"]) menu[_moz-menuactive="true"], menupopup:not([placespopup="true"]) menuitem[_moz-menuactive="true"] { background-color: #91c9f7 !important; border-color: transparent !important; } menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menu[_moz-menuactive="true"][disabled="true"], menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menuitem[_moz-menuactive="true"][disabled="true"], menupopup:not([placespopup="true"]) menu[_moz-menuactive="true"][disabled="true"], menupopup:not([placespopup="true"]) menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 9%, transparent) !important; border-color: transparent !important; } } } @media (-moz-gtk-csd-available) { /*= Linux - Global Menubar Active Color ====================================*/ #main-menubar > menu[open="true"], #main-menubar > menu[_moz-menuactive="true"] { color: inherit !important; /* Original: -moz-menubarhovertext */ background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */ } /*= Linux - Titlebar button at lwtheme =====================================*/ @supports not -moz-bool-pref("userChrome.compatibility.os.linux_non_native_titlebar_button") { .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; } } } /*= Linux - Light System Default Theme's Selected Tab ========================*/ @media (-moz-gtk-csd-available) { @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) { /* Because of #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); box-shadow: 0 0 4px rgba(128,128,142,0.5); } */ #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:not(:-moz-lwtheme) { box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important; } #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:not(:-moz-lwtheme) { box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important; } } } /*= Titlebar Container Size at maximized #384 ================================*/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { @supports not -moz-bool-pref("userChrome.compatibility.os.windows_maximized") { :root[tabsintitlebar] #titlebar { /* -moz-default-appearance: -moz-window-titlebar */ appearance: none !important; } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { :root[tabsintitlebar][sizemode="maximized"] #titlebar { padding-top: 8px; } } } @supports -moz-bool-pref("userChrome.compatibility.os.windows_maximized") { :root[tabsintitlebar][sizemode="maximized"] #titlebar { appearance: none !important; padding-top: 8px; } } } } /*= Others - Compatibility ===================================================*/ @supports -moz-bool-pref("userChrome.compatibility.panel_cutoff") { #appMenu-popup panelview { width: 24.5em !important; /* can modify panel width, Original: 22.5em */ } } @supports -moz-bool-pref("userChrome.compatibility.navbar_top_border") { #nav-bar { box-shadow: none !important; } } /** Theme *********************************************************************/ /*= System Default Theme =====================================================*/ @supports -moz-bool-pref("userChrome.theme.system_default") { /*= Common - URL Bar focus color =============================================*/ @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { /* URL Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { --focus-outline-color: AccentColor !important; } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { border-color: color-mix( in srgb, AccentColor 50%, transparent ) !important; /* Like: --toolbar-field-focus-border-color */ } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { --focus-outline-color: -moz-accent-color !important; } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { border-color: color-mix( in srgb, -moz-accent-color 50%, transparent ) !important; /* Like: --toolbar-field-focus-border-color */ } } } /*= Windows7 - Aero Based Theme ==============================================*/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { #TabsToolbar:not(:-moz-lwtheme) { --background-color: rgb(229, 229, 235); --toolbarseparator-color: transparent; } #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { color: var(--background-color); background-color: color-mix(in srgb, currentColor 60%, transparent); } #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { background-color: color-mix( in srgb, currentColor 85%, transparent ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ } #scrollbutton-up:not(:-moz-lwtheme), #scrollbutton-down:not(:-moz-lwtheme), #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack, #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon { color: var(--background-color) !important; background-color: color-mix(in srgb, currentColor 50%, transparent); } } /*= Windows10 - UWP like color ===============================================*/ @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root:not(:-moz-lwtheme) { --win-text-color: rgba(0, 0, 0); --win-bgcolor: rgb(204, 204, 204); --win-disabled-color: rgb(145, 145, 145); --win-disabled-bgcolor: transparent; --win-hover-bgcolor: rgb(218, 218, 218); /* also button-bgcolor */ --win-hover-active-bgcolor: #c2c2c2; /* also button-hover-bgcolor */ --win-button-hover-bgcolor: rgba(218, 218, 218, 0.66); --win-button-active-bgcolor: #aaaaaa; --win-field-bgcolor: #ffffff; --win-component-bgcolor: #f2f2f2; --win-border-color: #8a8a8a; --win-tab-separator-color: #a3a3a3; --win-sidebar-bgcolor: #e6e6e6; --win-sidebar-hover-bgcolor: #cfcfcf; --win-sidebar-button-hover-bgcolor: #b8b8b8; --win-sidebar-button-hover-active-bgcolor: #a3a3a3; --win-button-border: #747474; --win-shortcut-text-color: #757575; --win-error-color: #b31616; --win-red-border-color: #ff4343; --win-accent-foreground-color: AccentColorText; --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, AccentColor); --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, AccentColor); --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, AccentColor); --win-accent-active-color: AccentColor; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root:not(:-moz-lwtheme) { --win-accent-foreground-color: -moz-accent-color-foreground; --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color); --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color); --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color); --win-accent-active-color: -moz-accent-color; } } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --win-text-color: #ffffff; --win-bgcolor: #2b2b2b; --win-disabled-color: #747474; --win-disabled-bgcolor: transparent; --win-hover-bgcolor: #2e2e2e; /* also button-bgcolor */ --win-hover-active-bgcolor: #454545; /* also button-active-color */ --win-button-hover-bgcolor: rgba(46, 46, 46, 0.66); --win-button-active-bgcolor: #515151; --win-field-bgcolor: #373737; --win-component-bgcolor: #171717; --win-border-color: #5b5b5b; --win-tab-separator-color: #555555; --win-sidebar-bgcolor: #1f1f1f; --win-sidebar-hover-bgcolor: #353535; --win-sidebar-button-hover-bgcolor: #353535; --win-sidebar-button-hover-active-bgcolor: #4c4c4c; --win-button-border: #8f8f8f; --win-shortcut-text-color: #adadad; --win-error-color: #ffb900; --win-red-border-color: #ff4343; --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, AccentColor); --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, AccentColor); --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, AccentColor); --win-accent-active-color: AccentColor; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color); --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color); --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color); --win-accent-active-color: -moz-accent-color; } } } :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { /* Text, Icon Color */ --menu-color: var(--win-text-color) !important; --lwt-text-color: var(--win-text-color) !important; --button-color: var(--win-text-color) !important; --input-color: var(--win-text-color) !important; --toolbar-color: var(--win-text-color) !important; --toolbar-non-lwt-textcolor: var(--win-text-color) !important; --toolbarbutton-icon-fill: var(--win-text-color) !important; --toolbar-field-focus-color: var(--win-text-color) !important; --urlbar-popup-action-color: var(--win-text-color) !important; --toolbar-field-color: var(--win-text-color) !important; --autocomplete-popup-highlight-color: var(--win-text-color) !important; --tab-icon-overlay-fill: var(--win-text-color) !important; --panel-banner-item-color: var(--win-text-color) !important; --arrowpanel-color: var(--win-text-color) !important; --autocomplete-popup-color: var(--win-text-color) !important; /* Text Disabled Color */ --menu-disabled-color: var(--win-disabled-color) !important; --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important; --panel-disabled-color: var(--win-disabled-color) !important; --download-progress-paused-color: var(--win-disabled-color) !important; /* Text Shortcut Color */ --panel-shortcut-color: var(--win-shortcut-text-color) !important; --panel-description-color: var(--win-shortcut-text-color) !important; /* Title Background */ --lwt-accent-color: var(--win-bgcolor) !important; --toolbar-field-border-color: var(--win-bgcolor) !important; --chrome-content-separator-color: var(--win-bgcolor) !important; /* Component Background Color */ --menu-background-color: var(--win-component-bgcolor) !important; --toolbar-bgcolor: var(--win-component-bgcolor) !important; --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important; --arrowpanel-background: var(--win-component-bgcolor) !important; --autocomplete-popup-background: var(--win-component-bgcolor) !important; /* Border Color */ /* Separator */ --toolbarseparator-color: var(--win-tab-separator-color) !important; /* Field Background Color */ --input-bgcolor: var(--win-field-bgcolor) !important; --toolbar-field-background-color: var(--win-field-bgcolor) !important; --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important; --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important; /* Hover Background Color, Button Color */ --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important; --button-bgcolor: var(--win-hover-bgcolor) !important; --panel-banner-item-background-color: var(--win-hover-bgcolor) !important; /* Hover Active, Button Hover Color */ --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important; --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important; --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important; --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important; --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important; --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important; --panel-banner-item-hover-bgcolor: var(--win-hover-active-bgcolor) !important; /* Button Hover Active Color */ --button-active-bgcolor: var(--win-button-active-bgcolor) !important; --panel-banner-item-active-bgcolor: var(--win-button-active-bgcolor) !important; /* Disabled Background Color */ --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; /* Button Hover Color */ --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important; --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important; --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important; --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important; /* Button Border Color */ --checkbox-border-color: var(--win-button-border) !important; --input-border-color: var(--win-button-border) !important; --autocomplete-popup-separator-color: var(--win-button-border) !important; /* Accent Foreground Color */ --button-primary-color: var(--win-accent-foreground-color) !important; --checkbox-checked-color: var(--win-accent-foreground-color) !important; /* Accent Color */ --button-primary-bgcolor: var(--win-accent-color) !important; --focus-outline-color: var(--win-accent-color) !important; --checkbox-checked-bgcolor: var(--win-accent-color) !important; /* Accent Content Color */ --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important; --urlbar-popup-url-color: var(--win-accent-content-color) !important; --download-progress-fill-color: var(--win-accent-content-color) !important; /* Accent Hover Color */ --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important; --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important; /* Accent Hover Active Color */ --button-primary-active-bgcolor: var(--win-accent-active-color) !important; --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important; /* Error Color */ --error-text-color: var(--win-error-color) !important; --input-error-border-color: var(--win-error-color) !important; /* Others */ --tab-line-color: Highlight !important; --tab-selected-bgcolor: unset !important; --tabs-border-color: transparent !important; --checkbox-checked-border-color: transparent !important; /* Other Defaults */ --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important; --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important; --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important; --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; } #navigator-toolbox:not(:-moz-lwtheme) { background: var(--lwt-accent-color) !important; } /*- Separator --------------------------------------------------------------*/ :root:not(:-moz-lwtheme) { --arrowpanel-border-color: var(--win-bgcolor) !important; --panel-separator-color: var(--win-bgcolor) !important; } :root[lwt-default-theme-in-dark-mode] { --arrowpanel-border-color: var(--win-border-color) !important; --panel-separator-color: var(--win-border-color) !important; } @supports -moz-bool-pref("userChrome.theme.system_default") { @media (-moz-windows-accent-color-in-titlebar) { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* As default */ } } } /*- Proton Tab Selected ----------------------------------------------------*/ @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); } :root:not(:-moz-lwtheme) { --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; } :root[lwt-default-theme-in-dark-mode] { --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; } } /*- Menu -------------------------------------------------------------------*/ html#main-window menupopup:not(:-moz-lwtheme) { --menu-color: var(--win-text-color) !important; --menu-background-color: var(--win-component-bgcolor) !important; --menu-border-color: var(--win-bgcolor) !important; --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; --menu-disabled-color: var(--win-disabled-color) !important; --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; } /*- Toolbar ----------------------------------------------------------------*/ :root:not(:-moz-lwtheme) #titlebar, :root[lwt-default-theme-in-dark-mode] #titlebar { --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor); --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor); --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor); --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor); } /*- Sidebar ----------------------------------------------------------------*/ #sidebar-box:not([lwt-sidebar]) { appearance: none !important; } :root:not(:-moz-lwtheme) #sidebar-box, :root[lwt-default-theme-in-dark-mode] #sidebar-box { --sidebar-background-color: var(--win-sidebar-bgcolor) !important; --sidebar-text-color: var(--win-text-color) !important; --sidebar-border-color: var(--win-border-color) !important; } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ --lwt-sidebar-background-color: var(--win-sidebar-bgcolor) !important; --lwt-sidebar-text-color: var(--win-text-color) !important; } } /*- Panel ------------------------------------------------------------------*/ :root:not(:-moz-lwtheme) .subviewbutton, :root[lwt-default-theme-in-dark-mode] .subviewbutton { --button-hover-bgcolor: var(--win-hover-active-bgcolor) !important; --button-active-bgcolor: var(--win-button-active-bgcolor) !important; } :root:not(:-moz-lwtheme) toolbarbutton.subviewbutton:not([disabled], [open], :active, #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is(:hover), :root[lwt-default-theme-in-dark-mode] toolbarbutton.subviewbutton:not([disabled], [open], :active, #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is(:hover) { background-color: var(--win-hover-bgcolor) !important; } :root:not(:-moz-lwtheme) toolbarbutton.subviewbutton:not([disabled], #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is([open], :hover:active), :root[lwt-default-theme-in-dark-mode] toolbarbutton.subviewbutton:not([disabled], #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is([open], :hover:active) { background-color: var(--win-hover-active-bgcolor) !important; } /*- Others -----------------------------------------------------------------*/ /* For overwrite */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), :root:not(:-moz-lwtheme) { /* Light Theme */ --lwt-accent-color: var(--win-bgcolor) !important; } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */ } } #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme), :root[lwtheme-mozlightdark] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]) { background-image: linear-gradient( color-mix(in srgb, currentColor 11%, transparent), color-mix(in srgb, currentColor 11%, transparent) ), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } } /*= Windows10 - Titlebar accent color ========================================*/ @media (-moz-windows-accent-color-in-titlebar) { /* Tab Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color { color: AccentColorText; background-color: AccentColor; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color { color: -moz-accent-color-foreground; background-color: -moz-accent-color; } } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { --toolbarbutton-icon-fill: currentColor; --toolbarbutton-hover-background: color-mix(in srgb, AccentColorText 10%, transparent); --toolbarbutton-active-background: color-mix(in srgb, AccentColorText 15%, transparent); } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); } } } /*= GTK - URL View url accent color ==========================================*/ @media (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) .urlbarView-url { --urlbar-popup-url-color: AccentColor; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root:not(:-moz-lwtheme) .urlbarView-url { --urlbar-popup-url-color: -moz-accent-color; } } /* Nightly Compatibility */ :root:not(:-moz-lwtheme) #urlbar { --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */ --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */ } } /*= Mac - Default like color =================================================*/ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { /* Colors */ --mac-text-color: -moz-dialogtext; --mac-disabled-color: GrayText; --mac-bgcolor: Window; --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); --mac-field-bgcolor: Window; --mac-panel-bgcolor: Menu; --mac-sidebar-bgcolor: -moz-mac-source-list; --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor)); --mac-hover-bgcolor: Window; --mac-disabled-bgcolor: transparent; --mac-primary-button-color: AccentColorText; /* or -moz-mac-menutextselect */ --mac-accent-color: AccentColor; /* or LinkText */ --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, AccentColor); --mac-accent-hover-color: color-mix( in srgb, rgb(0, 0, 0) 10%, AccentColor ); /* or -moz-mac-menuselect, Highlight */ --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, AccentColor); /* or ActiveBorder */ /* Text, Icon Color */ --menu-color: var(--mac-text-color) !important; --lwt-text-color: var(--mac-text-color) !important; --button-color: var(--mac-text-color) !important; --input-color: var(--mac-text-color) !important; --toolbar-color: var(--mac-text-color) !important; --toolbar-non-lwt-textcolor: var(--mac-text-color) !important; --toolbarbutton-icon-fill: var(--mac-text-color) !important; --toolbar-field-focus-color: var(--mac-text-color) !important; --urlbar-popup-action-color: var(--mac-text-color) !important; --toolbar-field-color: var(--mac-text-color) !important; --autocomplete-popup-highlight-color: var(--mac-text-color) !important; --tab-icon-overlay-fill: var(--mac-text-color) !important; --panel-banner-item-color: var(--mac-text-color) !important; --arrowpanel-color: var(--mac-text-color) !important; --autocomplete-popup-color: var(--mac-text-color) !important; --panel-shortcut-color: var(--mac-text-color) !important; --panel-description-color: var(--mac-text-color) !important; /* Text Disabled Color */ --menu-disabled-color: var(--mac-disabled-color) !important; --button-active-bgcolor: var(--mac-disabled-color) !important; --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important; --panel-disabled-color: var(--mac-disabled-color) !important; --download-progress-paused-color: var(--mac-disabled-color) !important; /* Background Color */ --lwt-accent-color: var(--mac-bgcolor) !important; --menu-background-color: var(--mac-bgcolor) !important; --autocomplete-popup-background: var(--mac-bgcolor) !important; /* Selected Background Color */ --toolbar-bgcolor: var(--mac-selected-bgcolor) !important; --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important; /* Field Background Color */ --input-bgcolor: var(--mac-field-bgcolor) !important; --toolbar-field-background-color: var(--mac-field-bgcolor) !important; --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important; /* Panel Background Color */ --arrowpanel-background: var(--mac-panel-bgcolor) !important; /* Hover Background Color */ --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important; --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important; --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important; --button-bgcolor: var(--mac-hover-bgcolor) !important; --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important; --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important; --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important; --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important; --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important; --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important; --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important; --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; --button-hover-bgcolor: var(--mac-hover-bgcolor) !important; --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important; --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important; --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; /* Disabled Background Color */ --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important; /* Border Color */ /* --menu-border-color: var(--mac-bgcolor) !important; --toolbar-field-border-color: var(--mac-bgcolor) !important; --arrowpanel-border-color: var(--mac-bgcolor) !important; --chrome-content-separator-color: var(--mac-bgcolor) !important; --toolbarseparator-color: var(--mac-bgcolor) !important; --panel-separator-color: var(--mac-bgcolor) !important; */ /* Button Border Color */ /* --tab-line-color: var(---mac-bgcolor) !important; --checkbox-border-color: var(--mac-bgcolor) !important; --input-border-color: var(--mac-bgcolor) !important; --autocomplete-popup-separator-color: var(--mac-bgcolor) !important; */ /* Accent Color Foreground */ --button-primary-color: var(--mac-primary-button-color) !important; --checkbox-checked-color: var(--mac-primary-button-color) !important; /* Accent Color */ --button-primary-bgcolor: var(--mac-accent-color) !important; --focus-outline-color: var(--mac-accent-color) !important; --checkbox-checked-bgcolor: var(--mac-accent-color) !important; /* Accent Content Color */ --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important; --urlbar-popup-url-color: var(--mac-accent-content-color) !important; --download-progress-fill-color: var(--mac-accent-content-color) !important; /* Accent Hover Color */ --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important; --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important; /* Accent Hover Active Color */ --button-primary-active-bgcolor: var(--mac-accent-active-color) !important; --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important; /* Error Color */ /* --error-text-color: var(--win-error-color) !important; --input-error-border-color: var(--win-error-color) !important; */ /* Others */ --tab-selected-bgcolor: unset !important; --tabs-border-color: transparent !important; --checkbox-checked-border-color: transparent !important; /* Other Defaults */ --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important; --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important; --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important; --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */ --mac-accent-color: -moz-accent-color; /* or LinkText */ --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color); --mac-accent-hover-color: color-mix( in srgb, rgb(0, 0, 0) 10%, -moz-accent-color ); /* or -moz-mac-menuselect, Highlight */ --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */ } } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --mac-field-bgcolor: Field; --mac-panel-bgcolor: -moz-CellHighlight; --mac-hover-bgcolor: ButtonFace; --toolbar-field-focus-background-color: var(--mac-bgcolor) !important; --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important; } } /*- Proton Tab Selected ----------------------------------------------------*/ @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); } :root:not(:-moz-lwtheme) { --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; } :root[lwt-default-theme-in-dark-mode] { --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; } } /*- Toolbar ----------------------------------------------------------------*/ :root:not(:-moz-lwtheme) #navigator-toolbox, :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { background-color: var(--mac-bgcolor) !important; } :root:not(:-moz-lwtheme) #titlebar { --mac-hover-bgcolor: ButtonFace; } :root:not(:-moz-lwtheme) #titlebar, :root[lwt-default-theme-in-dark-mode] #titlebar { --button-hover-bgcolor: var(--mac-hover-bgcolor); --button-active-bgcolor: var(--mac-hover-bgcolor); --toolbarbutton-hover-background: var(--mac-hover-bgcolor); --toolbarbutton-active-background: var(--mac-hover-bgcolor); /* Prevent transparent tabbar at fullscreen hover #312 */ background: var(--mac-bgcolor); } :root[lwt-default-theme-in-dark-mode] #urlbar { --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; } /*- Sidebar ----------------------------------------------------------------*/ #sidebar-box:not([lwt-sidebar]) { appearance: none !important; } :root:not(:-moz-lwtheme) #sidebar-box, :root[lwt-default-theme-in-dark-mode] #sidebar-box { --sidebar-background-color: var(--mac-sidebar-bgcolor) !important; --sidebar-text-color: var(--mac-text-color) !important; /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */ } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ --lwt-sidebar-background-color: transparent !important; --lwt-sidebar-text-color: var(--mac-text-color) !important; } } :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup { --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor); --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor); } /*- Others -----------------------------------------------------------------*/ /* For Overwrite */ @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } } /* Hard Coded */ @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"] { background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } } :root:not(:-moz-lwtheme):not([customizing="true"]) tab[visuallyselected] > stack::before, :root:not(:-moz-lwtheme):not([customizing="true"]) tab[visuallyselected] > stack::after, :root[lwt-default-theme-in-dark-mode]:not([customizing="true"]) tab[visuallyselected] > stack::before, :root[lwt-default-theme-in-dark-mode]:not([customizing="true"]) tab[visuallyselected] > stack::after { fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } } } /*= Fully Theme Mode =========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_color") { /*= Default Colors - Hard Coded ==============================================*/ /* Based on chrome://global/skin/in-content/common.css */ :host, :root { --in-content-page-color: rgb(21, 20, 26); --in-content-page-background: #fff; --in-content-text-color: var(--in-content-page-color); --in-content-deemphasized-text: rgb(91, 91, 102); --in-content-box-background: #fff; --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); --in-content-box-info-background: #f0f0f4; --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); --in-content-item-hover-text: var(--in-content-page-color); --in-content-item-selected: var(--in-content-primary-button-background); --in-content-item-selected-text: var(--in-content-primary-button-text-color); --in-content-icon-color: rgb(91, 91, 102); --in-content-accent-color: #0a84ff; --in-content-accent-color-active: #0060df; --in-content-border-hover: var(--grey-90-a50); --in-content-border-invalid: var(--red-50); --in-content-border-color: #d7d7db; --in-content-error-text-color: #c50042; --in-content-link-color: var(--blue-60); --in-content-link-color-hover: var(--blue-70); --in-content-link-color-active: var(--blue-80); --in-content-link-color-visited: var(--blue-60); /* button background states are also used for checkboxes and radio buttons */ --in-content-button-text-color: var(--in-content-text-color); --in-content-button-text-color-hover: var(--in-content-text-color); --in-content-button-background: rgba(207, 207, 216, 0.33); --in-content-button-background-hover: rgba(207, 207, 216, 0.66); --in-content-button-background-active: rgb(207, 207, 216); --in-content-primary-button-text-color: rgb(251, 251, 254); --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); --in-content-primary-button-background: #0061e0; --in-content-primary-button-background-hover: #0250bb; --in-content-primary-button-background-active: #053e94; --in-content-danger-button-background: #e22850; --in-content-danger-button-background-hover: #c50042; --in-content-danger-button-background-active: #810220; --in-content-focus-outline-color: var(--in-content-primary-button-background); /* Note: 1px smaller than we want because we have a 1px transparent border. */ /* Once proton ships, these can probably stop being variables. */ --in-content-button-border-radius: 4px; --in-content-button-horizontal-padding: 15px; --in-content-button-vertical-padding: 7px; --in-content-table-background: #f8f8fa; --in-content-table-border-color: var(--in-content-box-border-color); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */ --in-content-table-border-dark-color: var(--in-content-table-border-color); --in-content-table-header-background: var( --in-content-primary-button-background ); /* Legacy: #0a84ff; rgb(5, 64, 150); */ --in-content-table-header-color: var( --in-content-primary-button-text-color ); /* Legacy: #ffffff; var(--in-content-page-color); */ --in-content-sidebar-width: 240px; --dialog-warning-text-color: var(--red-60); --checkbox-border-color: var(--in-content-box-border-color); --checkbox-unchecked-bgcolor: var(--in-content-button-background); --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); --checkbox-checked-bgcolor: var(--in-content-primary-button-background); --checkbox-checked-color: var(--in-content-primary-button-text-color); --checkbox-checked-border-color: transparent; --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); --blue-40: #45a1ff; --blue-50: #0a84ff; --blue-60: #0060df; --blue-70: #003eaa; --blue-80: #002275; --grey-30: #d7d7db; --grey-60: #4a4a4f; --grey-90-a10: rgba(12, 12, 13, 0.1); --grey-90-a20: rgba(12, 12, 13, 0.2); --grey-90-a30: rgba(12, 12, 13, 0.3); --grey-90-a50: rgba(12, 12, 13, 0.5); --grey-90-a60: rgba(12, 12, 13, 0.6); --green-50: #30e60b; --green-60: #12bc00; --green-70: #058b00; --green-80: #006504; --green-90: #003706; --orange-50: #ff9400; --red-40: #ff4f5e; --red-50: #ff0039; --red-60: #d70022; --red-70: #a4000f; --red-80: #5a0002; --red-90: #3e0200; --yellow-50: #ffe900; --yellow-60: #d7b600; --yellow-60-a30: rgba(215, 182, 0, 0.3); --yellow-70: #a47f00; --yellow-80: #715100; --yellow-90: #3e2800; --shadow-10: 0 1px 4px var(--grey-90-a10); --shadow-30: 0 4px 16px var(--grey-90-a10); --card-padding: 16px; --card-shadow: var(--shadow-10); --card-outline-color: var(--grey-30); --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); --uc-warning-icon-bgcolor: #ffa436; } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :host, :root { /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */ --in-content-page-background: rgb(28, 27, 34); --in-content-page-color: rgb(251, 251, 254); --in-content-deemphasized-text: rgb(191, 191, 201); --in-content-box-background: rgb(35, 34, 43); --in-content-box-background-odd: rgba(249, 249, 250, 0.05); --in-content-box-info-background: rgba(249, 249, 250, 0.15); --in-content-border-color: rgba(249, 249, 250, 0.2); --in-content-border-hover: rgba(249, 249, 250, 0.3); --in-content-border-invalid: rgb(255, 132, 139); --in-content-error-text-color: #ff9aa2; --in-content-button-background: rgb(43, 42, 51); --in-content-button-background-hover: rgb(82, 82, 94); --in-content-button-background-active: rgb(91, 91, 102); --in-content-icon-color: rgb(251, 251, 254); --in-content-primary-button-text-color: rgb(43, 42, 51); --in-content-primary-button-background: rgb(0, 221, 255); --in-content-primary-button-background-hover: rgb(128, 235, 255); --in-content-primary-button-background-active: rgb(170, 242, 255); --in-content-danger-button-background: #ff848b; --in-content-danger-button-background-hover: #ffbdc5; --in-content-danger-button-background-active: #ffdfe7; --in-content-table-background: rgb(35, 34, 43); --in-content-table-border-dark-color: var(--in-content-box-border-color); --in-content-accent-color: var(--in-content-primary-button-background); --in-content-accent-color-active: var(--in-content-primary-button-background-hover); --in-content-link-color: var(--in-content-primary-button-background); --in-content-link-color-hover: var(--in-content-primary-button-background-hover); --in-content-link-color-active: var(--in-content-primary-button-background-active); --in-content-link-color-visited: var(--in-content-link-color); --card-outline-color: var(--grey-60); --dialog-warning-text-color: var(--red-40); --uc-warning-icon-bgcolor: #ffbd4f; } } @media (prefers-contrast) { :host, :root { --uc-warning-icon-bgcolor: var(--in-content-page-color); } } @supports -moz-bool-pref("userChrome.theme.proton_color.dark_blue_accent") { @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :host, :root { /* Color Memo Just refer - Photon's dark color --button-primary-bgcolor: #0060DF; --button-primary-hover-bgcolor: #003EAA; --button-primary-active-bgcolor: #002275; --lwt-brighttext-url-color: #74c0ff; --lwt-toolbarbutton-icon-fill-attention: #45a1ff; Just refer - Proton's light color --in-content-accent-color: #0a84ff; --in-content-accent-color-active: #0060df; --in-content-primary-button-background: #0061e0; --in-content-primary-button-background-hover: #0250bb; --in-content-primary-button-background-active: #053e94; --blue-40: #45a1ff; rgb(69, 161, 255) --blue-50: #0a84ff; rgb(10, 132, 255) --blue-60: #0060df; rgb(0, 96, 223) --blue-70: #003eaa; rgb(0, 62, 170) --blue-80: #002275; rgb(0, 34, 117) Relation lighten(#0060df, 29%): #74b0ff; lighten(#0060df, 19.8%): #4595ff lighten(#0060df, 8.3%): #0a74ff #0060df darken(#0060df, 15.5%): #003e90; darken(#0060df, 28.1%): #002250; */ --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/ --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */ } :host, :root, dialog { --in-content-primary-button-text-color: var(--in-content-page-color) !important; --in-content-primary-button-background: var(--blue-60) !important; --in-content-primary-button-background-hover: var(--blue-50) !important; --in-content-primary-button-background-active: var(--blue-40) !important; --in-content-focus-outline-color: var(--blue-40) !important; --in-content-accent-color: var(--blue-40) !important; --in-content-accent-color-active: var(--blue-30) !important; --in-content-table-background: rgb(35, 34, 43) !important; --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important; --in-content-table-header-background: rgb(5, 64, 150) !important; --in-content-table-header-color: var(--in-content-page-color) !important; --in-content-link-color: var(--blue-40) !important; --in-content-link-color-hover: var(--blue-30) !important; --in-content-link-color-active: var(--blue-20) !important; --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; --button-primary-active-bgcolor: var(--blue-40) !important; --focus-outline-color: var(--blue-40) !important; --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important; --download-progress-fill-color: var(--blue-40) !important; --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important; --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */ } @supports -moz-bool-pref("userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } } } } } @supports -moz-bool-pref("userChrome.theme.fully_color") { /*== Menu Color ==============================================================*/ html#main-window menupopup:not(.in-menulist) { /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */ --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important; --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important; --menu-border-color: var( --toolbarbutton-active-background, var(--button-active-bgcolor, var(--card-outline-color)) ) !important; --menuitem-hover-background-color: var( --toolbarbutton-hover-background, var(--button-hover-bgcolor, var(--in-content-button-background-hover)) ) !important; --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important; --menuitem-disabled-hover-background-color: color-mix( in srgb, var(--menuitem-hover-background-color) 40%, transparent ) !important; } @media (-moz-windows-non-native-menus) { html#main-window menupopup:not(.in-menulist) { /* Above FF v105 #466 */ --panel-color: var(--menu-color) !important; --panel-background: var(--menu-background-color) !important; --panel-border-color: var(--menu-border-color) !important; } html#main-window menupopup:not(.in-menulist):not([placespopup]) menuseparator, html#main-window menupopup:not(.in-menulist)[placespopup] menuseparator::before { border-top: 1px solid var(--menu-border-color) !important; } html#main-window menupopup:not(.in-menulist) menu[disabled="true"], html#main-window menupopup:not(.in-menulist) menu[_moz-menuactive="true"][disabled="true"], html#main-window menupopup:not(.in-menulist) menuitem[disabled="true"], html#main-window menupopup:not(.in-menulist) menuitem[_moz-menuactive="true"][disabled="true"] { color: var(--menu-disabled-color) !important; } html#main-window menupopup:not(.in-menulist) menu[_moz-menuactive="true"]:not([disabled="true"]), html#main-window menupopup:not(.in-menulist) menuitem[_moz-menuactive="true"]:not([disabled="true"]) { background-color: var(--menuitem-hover-background-color) !important; color: var(--menu-color) !important; } html#main-window menupopup #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon { background-color: var(--menuitem-hover-background-color) !important; } html#main-window menupopup #context-navigation > .menuitem-iconic[_moz-menuactive="true"], html#main-window menupopup #context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-iconic-left > .menu-iconic-icon { background-color: transparent !important; } } @media (-moz-windows-non-native-menus) and (-moz-toolbar-prefers-color-scheme: light), (-moz-windows-non-native-menus) and (prefers-color-scheme: light) { :root[style*="background-noodles-right"] menupopup { --toolbarbutton-hover-background: rgba(232, 224, 255, 0.11999999731779099) !important; } } @media not all and (-moz-gtk-csd-available) { window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menupopup { --panel-color: var(--lwt-sidebar-text-color, var(--menu-color)) !important; --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important; } window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]), window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menuitem[_moz-menuactive="true"]:not([disabled="true"]) { --menuitem-hover-background-color: color-mix( in srgb, currentColor 17%, transparent ); /* Looks like toolbar button */ /* or var(--lwt-sidebar-highlight-background-color) If this value is used, unset is required in the default theme. */ background-color: var(--menuitem-hover-background-color) !important; } /* Fallback background - Set to Legacy. It will be removed Next update menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) { background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important; } */ } /* Default theme color preservation */ :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; --arrowpanel-background: var( --toolbar-bgcolor, var(--in-content-button-background) ) !important; /* --menu-background-color */ } @media not all and (-moz-gtk-csd-available) { window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] menupopup { /* Default Dark Mode */ --panel-color: var(--menu-color) !important; --panel-background: var(--menu-background-color, -moz-menuhover) !important; } } /*== Info Bar Color ==========================================================*/ .container.infobar { background-color: var(--urlbar-box-bgcolor) !important; } .notification-button { background-color: var(--button-bgcolor) !important; } .notification-button:hover { background-color: var(--button-hover-bgcolor) !important; } .notification-button:hover:active { background-color: var(--button-active-bgcolor) !important; } html|button.ghost-button:not(.semi-transparent):enabled:hover { background-color: var(--button-hover-bgcolor) !important; } html|button.ghost-button:not(.semi-transparent):enabled:hover:active { background-color: var(--in-content-button-background-active) !important; } /*== Bookmark Popup Color ====================================================*/ #editBMPanel_folderTree:-moz-lwtheme, #editBMPanel_tagsSelector:-moz-lwtheme { appearance: none !important; border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; } #editBMPanel_folderTree:-moz-lwtheme, #editBMPanel_folderTree:-moz-lwtheme > treechildren, #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image, #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover), #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected), #editBMPanel_tagsSelector:-moz-lwtheme, #editBMPanel_tagsSelector:-moz-lwtheme > richlistitem { color: var(--lwt-text-color, fieldtext) !important; } #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) { font-weight: 600 !important; } #editBMPanel_folderTree:-moz-lwtheme > treechildren, #editBMPanel_tagsSelector:-moz-lwtheme { background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important; } #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover), #editBMPanel_tagsSelector > richlistitem:hover { background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important; } #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected), #editBMPanel_tagsSelector > richlistitem[selected="true"] { background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important; } #editBMPanel_namePicker, #editBMPanel_tagsField { --input-bgcolor: var(--arrowpanel-background, Field); --input-color: var(--arrowpanel-color, FieldText); } /*== Sidebar - Field Color ===================================================*/ .sidebar-panel #search-box, xul|search-textbox.tabsFilter { --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent); appearance: none !important; padding: 5px 8px !important; border: 1px solid var(--input-bgcolor) !important; background-color: var(--lwt-sidebar-background-color, Field) !important; color: var(--lwt-sidebar-text-color, FieldText) !important; } .sidebar-panel:not([lwt-sidebar]) #search-box { --input-bgcolor: ThreeDShadow; } .sidebar-panel #search-box[focused="true"], xul|search-textbox.tabsFilter[focused="true"] { outline: 1px solid var(--input-bgcolor); } .sidebar-panel[lwt-sidebar] #search-box[focused="true"], body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] { --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important; } .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { border-color: AccentColor !important; /* Hard Coded */ outline-color: AccentColor !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { border-color: -moz-accent-color !important; /* Hard Coded */ outline-color: -moz-accent-color !important; } } /*= PopupAutoComplete ========================================================*/ #PopupAutoComplete { --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background)); /* overwrite */ --panel-border-radius: 4px !important; /* Original: 0 */ --panel-border-color: var( --arrowpanel-border-color, var(--menu-border-color) ) !important; /* Original: ThreeDShadow */ appearance: none !important; background: transparent !important; border: none !important; clip-path: inset(0 round var(--panel-border-radius)); } #PopupAutoComplete > richlistbox { border-radius: var(--panel-border-radius) !important; background-color: var(--panel-bgcolor) !important; /* Original: Field */ color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */ } .autocomplete-richlistitem:hover { background-color: var(--arrowpanel-dimmed) !important; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon, #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { fill: GrayText !important; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { --panel-border-color: var(--panel-bgcolor); color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */ background-color: var(--arrowpanel-dimmed, hsla(0deg, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */ border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ } #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { background-color: var( --arrowpanel-dimmed-further, hsla(0deg, 0%, 80%, 0.5) ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { background-color: var(--panel-bgcolor) !important; /* Original: var(--arrowpanel-dimmed) */ } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"]:hover { background-color: var(--arrowpanel-dimmed, hsla(0deg, 0%, 80%, 0.35)) !important; } #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: var(--grey-60) */ } /* New Folder Button */ #editBMPanel_newFolderButton { appearance: none; border: 0; border-radius: 4px; background-color: var(--button-bgcolor); color: var(--button-color, inherit); font-weight: 600; min-width: 0; padding: 8px 16px; /* This button is deeper in the visual hierarchy than others (notably the buttons at the bottom of the panel), so it should be slightly smaller. */ font-size: 90%; /* This button needs to align with the tree above it. */ margin-inline-start: 4px; } #editBMPanel_newFolderButton:hover { background-color: var(--button-hover-bgcolor); } #editBMPanel_newFolderButton:hover:active { background-color: var(--button-active-bgcolor); } } /*= Fully Dark Mode ==========================================================*/ @supports -moz-bool-pref("userChrome.theme.fully_dark") { /*= Remove White Flash =======================================================*/ #tabbrowser-tabbox, #tabbrowser-tabpanels, browser[type="content-primary"], browser[type="content"] > html { background: var(--in-content-page-background) !important; } /*= Notification =============================================================*/ @-moz-document url("chrome://global/content/alerts/alert.xhtml") { /* Color */ :root { --menu-color: #15141a; --menu-background-color: #f9f9fb; --menu-border-color: #cfcfd8; --menuitem-hover-background-color: #e0e0e6; } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --menu-border-color: rgba(107, 107, 107, 0.3); --menu-color: #fbfbfe; --menu-background-color: #2b2a33; --menuitem-hover-background-color: #52525e; } #alertSourceLabel { color: rgb(5, 209, 241) !important; } } /* line below removes background from the notification "window" on linux */ #alertNotification { background: transparent !important; } #alertBox { color: var(--menu-color) !important; background-color: var(--menu-background-color) !important; border-color: var(--menu-border-color) !important; border-radius: 6px !important; -moz-window-shadow: cliprounded !important; } #alertSettings { fill: currentColor !important; color: inherit !important; border-radius: 0 !important; margin-inline: 0 !important; margin-bottom: -4px !important; } .close-icon, #alertSettings { background: transparent !important; } .close-icon:hover > .toolbarbutton-icon, #alertSettings:is(:hover, [open]) > .button-box > .box-inherit { background-color: var(--menuitem-hover-background-color, #e0e0e6) !important; } /* Shape */ .close-icon > .toolbarbutton-icon, #alertSettings > .button-box > .box-inherit { border-radius: 4px !important; padding: 2px !important; margin: 2px 2px -2px 0 !important; } #alertSettings > .button-box > .box-inherit { margin: -4px 4px 3px 0 !important; } #alertSettings > .button-box > .box-inherit > .button-icon { padding: 1px; } } } /*= Proton Theme Mode ========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_chrome") { /*= Proton Commons ===========================================================*/ @-moz-document url("chrome://global/content/commonDialog.xhtml"), url("chrome://pippki/content/editcacert.xhtml"), url("chrome://pippki/content/deletecert.xhtml"), url("chrome://pippki/content/exceptionDialog.xhtml"), url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), url("chrome://global/content/appPicker.xhtml"), url("chrome://browser/content/pageinfo/pageInfo.xhtml") { /*- Overwrite --------------------------------------------------------------*/ @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --in-content-page-background: #42414d; } } :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] { --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important; --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important; --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important; --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important; --checkbox-checked-color: var(--in-content-primary-button-text-color) !important; --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important; } /*- Dialog -----------------------------------------------------------------*/ #commonDialog, #editCaCert, #deleteCertificate, #exceptiondialog, #unknownContentType, #app-picker, #topBar, #mainDeck { -moz-appearance: none !important; /* For Mac */ color: var(--in-content-page-color) !important; background-color: var(--in-content-page-background) !important; /* border-radius: 0 0 8px 8px !important; */ } /*- Button -----------------------------------------------------------------*/ button { -moz-appearance: none !important; color: var(--in-content-button-text-color) !important; background-color: var(--in-content-button-background) !important; font: inherit; font-size: 1em !important; font-weight: 600 !important; min-height: 32px !important; border: 1px solid transparent !important; /* shows up in high-contrast mode */ border-radius: var(--in-content-button-border-radius) !important; padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; min-height: 32px !important; /* Use the same margin of other elements for the alignment */ margin-inline: 4px !important; min-width: 6.3em !important; } button.medium { /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding * the 1px border): */ padding: 6px 13px !important; min-height: 28px !important; font-size: 0.95em !important; } button.small { padding: 5px 11px !important; min-height: 24px !important; font-size: 0.9em !important; } /* Remove margin added by button.css */ xul|button > .button-box > .button-text { margin: 0 !important; } button:not([disabled="true"]):hover { background-color: var(--in-content-button-background-hover) !important; color: var(--in-content-button-text-color-hover) !important; border-color: transparent !important; } xul|button:not([disabled="true"]):hover:active, xul|button[open], xul|button[open]:hover, xul|menulist[open="true"]:not([disabled="true"]) { background-color: var(--in-content-button-background-active) !important; } xul|button[default] { background-color: var(--in-content-primary-button-background) !important; color: var(--in-content-primary-button-text-color) !important; } xul|button[default]:not([disabled="true"]):hover { background-color: var(--in-content-primary-button-background-hover) !important; color: var(--in-content-primary-button-text-color) !important; } xul|button[default]:not([disabled="true"]):hover:active { background-color: var(--in-content-primary-button-background-active) !important; } xul|button[disabled="true"], xul|menulist[disabled="true"] { opacity: 0.4 !important; } xul|button:not([disabled="true"]):hover, xul|menulist:not([disabled="true"]):hover { background-color: var(--in-content-button-background-hover) !important; color: var(--in-content-button-text-color-hover) !important; border-color: transparent !important; } @media (prefers-contrast) { xul|button[default]:not([disabled="true"]):hover { border-color: currentColor !important; } button:focus { color: var(--in-content-button-text-color) !important; } xul|button[default]:focus, button.primary:focus { color: var(--in-content-primary-button-text-color) !important; } } button:-moz-focusring, xul|menulist:-moz-focusring, xul|checkbox:-moz-focusring > .checkbox-check, xul|radio[focused="true"]:-moz-focusring { box-shadow: none !important; outline: 2px solid var(--in-content-focus-outline-color) !important; outline-offset: 2px !important; } /*- Radio Button -----------------------------------------------------------*/ xul|radio { /* margin-inline-start: 0 !important; */ appearance: none !important; } xul|*.radio-check { appearance: none !important; width: 16px !important; height: 16px !important; border: 1px solid var(--in-content-box-border-color) !important; border-radius: 100% !important; padding: 0 !important; margin-inline: 0 6px !important; margin-block: 2px !important; /* extend the vertical clicktarget */ background-color: var(--in-content-button-background) !important; background-position: center !important; flex-shrink: 0 !important; /* avoid shrinking inside flex container */ } xul|*.radio-check[selected] { -moz-context-properties: fill !important; fill: currentColor !important; color: var(--in-content-primary-button-text-color) !important; background-color: var(--in-content-primary-button-background) !important; background-image: url("chrome://global/skin/icons/radio.svg") !important; border-color: transparent !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; } xul|radio:not([disabled="true"]):hover > xul|*.radio-check { background-color: var(--in-content-button-background-hover) !important; color: var(--in-content-button-text-color-hover) !important; } xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check { background-color: var(--in-content-button-background-active) !important; } xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check { background-color: var(--in-content-primary-button-background-hover) !important; color: var(--in-content-primary-button-text-color-hover) !important; } xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check { background-color: var(--in-content-primary-button-background-active) !important; } xul|*.radio-label-box { margin-inline: 0 8px !important; padding-inline-start: 0 !important; } /* Disabled checkboxes, radios and labels */ xul|checkbox[disabled="true"], xul|radio[disabled="true"], xul|label[disabled="true"] { color: inherit !important; opacity: 0.5 !important; } /*- Check Box --------------------------------------------------------------*/ /* From checkbox.css */ checkbox { appearance: none !important; align-items: center !important; -moz-box-align: center !important; margin: 4px 2px !important; } .checkbox-check { appearance: none !important; width: 16px !important; height: 16px !important; border: 1px solid currentColor !important; border-radius: 2px !important; color: var(--checkbox-border-color, ThreeDDarkShadow) !important; background-color: var(--checkbox-unchecked-bgcolor, Field) !important; margin-inline-end: 6px !important; /* or 2px */ margin-block: 2px !important; /* From common.css */ } .checkbox-check[checked] { -moz-context-properties: fill !important; fill: currentColor !important; border-color: var(--checkbox-checked-border-color, transparent) !important; background-image: url("chrome://global/skin/icons/check.svg") !important; background-position: center !important; background-repeat: no-repeat !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; color: var(--checkbox-checked-color, AccentColorText) !important; background-color: var(--checkbox-checked-bgcolor, AccentColor) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { .checkbox-check[checked] { color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; } } checkbox:not([disabled="true"]):hover > .checkbox-check { background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field)) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:not([disabled="true"]):hover > .checkbox-check { background-color: var( --checkbox-unchecked-hover-bgcolor, color-mix(in srgb, -moz-accent-color 4%, Field) ) !important; } } checkbox:not([disabled="true"]):hover:active > .checkbox-check { background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field)) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:not([disabled="true"]):hover:active > .checkbox-check { background-color: var( --checkbox-unchecked-active-bgcolor, color-mix(in srgb, -moz-accent-color 8%, Field) ) !important; } } checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { background-color: var( --checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, AccentColor) ) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { background-color: var( --checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, -moz-accent-color) ) !important; } } checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { background-color: var( --checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, AccentColor) ) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { background-color: var( --checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, -moz-accent-color) ) !important; } } checkbox:-moz-focusring > .checkbox-check { outline: 2px solid var(--focus-outline-color, AccentColor) !important; outline-offset: var(--focus-outline-offset, 2px) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:-moz-focusring > .checkbox-check { outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; } } @media (prefers-contrast) { checkbox:not([disabled="true"]):hover > .checkbox-check { /* color will set the border-color on the check due to how HCM works for in-content pages. */ color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:not([disabled="true"]):hover > .checkbox-check { /* color will set the border-color on the check due to how HCM works for in-content pages. */ color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; } } .checkbox-check[checked] { color: var(--checkbox-checked-border-color, currentColor) !important; fill: var(--checkbox-checked-color, AccentColorText) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { .checkbox-check[checked] { fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; } } checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked], checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] { color: var(--checkbox-checked-border-color-hover, AccentColorText) !important; fill: var(--checkbox-checked-border-color-hover, AccentColorText) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked], checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] { color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; } } } .checkbox-icon[src] { margin-inline-end: 2px !important; } .checkbox-label { margin: 1px 0 !important; } checkbox[disabled="true"] { opacity: 0.4 !important; } /* From common.css */ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px !important; } /*- Menulist ---------------------------------------------------------------*/ /* From mulist.css */ xul|menulist { appearance: none !important; background-color: var(--in-content-button-background, ButtonFace) !important; color: var(--in-content-button-text-color, ButtonText) !important; border-radius: 4px !important; padding-block: 4px !important; padding-inline: 12px 8px !important; margin: 5px 2px 3px !important; } xul|menulist[size="medium"] { padding-block: 6px !important; padding-inline: 16px 10px !important; } xul|menulist[size="large"] { padding-block: 8px !important; padding-inline: 16px 12px !important; } xul|menulist:hover { background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important; } xul|menulist:hover:active { background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important; } xul|menulist:-moz-focusring { outline: 2px solid var(--focus-outline-color, AccentColor) !important; outline-offset: var(--focus-outline-offset, 2px) !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { xul|menulist:-moz-focusring { outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; } } #label-box { align-items: center !important; -moz-box-align: center !important; justify-content: center !important; -moz-box-pack: center !important; font-weight: 600 !important; } dropmarker { display: flex !important; display: -moz-box !important; appearance: none !important; width: 12px !important; height: 12px !important; } dropmarker[exportparts="icon: dropmarker-icon"] { /* dropmarker::part(icon) * ::part is not apply chrome */ list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; -moz-context-properties: fill !important; fill: currentColor !important; } #highlightable-label:not([highlightable="true"]), #label[highlightable="true"] { display: none !important; } xul|menuitem > label:not(.menu-text) { margin: 0 3px !important; } /* From common.css */ xul|menulist > xul|menupopup { appearance: none !important; /* Reset native styles on Windows and macOS */ border: none !important; background-color: transparent !important; --panel-border-color: var(--in-content-box-border-color) !important; --panel-border-radius: 2px !important; --panel-background: var(--in-content-box-background) !important; --panel-color: var(--in-content-text-color) !important; --panel-padding: 0 !important; } xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem { appearance: none !important; font-size: 1em !important; padding-block: 0.2em !important; padding-inline: 10px 30px !important; } xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { color: var(--in-content-item-hover-text) !important; background-color: var(--in-content-item-hover) !important; } xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { color: var(--in-content-item-selected-text) !important; background-color: var(--in-content-item-selected) !important; } xul|menulist > xul|menupopup > xul|menu[disabled="true"], xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] { color: #999 !important; /* override the [_moz-menuactive="true"] background color from global/menu.css */ background-color: transparent !important; } xul|menulist > xul|menupopup xul|menuseparator { appearance: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--in-content-box-border-color) !important; border-bottom: none !important; } xul|menulist::part(dropmarker) { margin-block: 1px !important; } /* Override menulist.css */ xul|menulist[disabled="true"] { background-color: var(--in-content-button-background) !important; } xul|menulist:-moz-focusring > xul|*.menulist-label-box { outline: none !important; } /*- List Boxes -------------------------------------------------------------*/ html|select[size][multiple], xul|listheader, xul|richlistbox { appearance: none !important; margin-inline: 0 !important; background-color: var(--in-content-box-background) !important; border: 1px solid var(--in-content-box-border-color) !important; border-radius: 4px !important; color: var(--in-content-text-color) !important; } xul|listheader { border-bottom: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-bottom: 1px !important; box-shadow: inset 0 -1px var(--in-content-table-border-color) !important; overflow: clip !important; /* Clip border-radius */ } xul|listheader + xul|richlistbox { margin-top: 0 !important; border-top: none !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } html|select[size][multiple] > html|option, xul|treechildren::-moz-tree-row { padding: 0.3em inherit !important; margin: 0 !important; border: none !important; border-radius: 0 !important; background-image: none !important; } xul|treechildren::-moz-tree-row(multicol, odd) { background-color: var(--in-content-box-background-odd); } html|select[size][multiple] > html|option:hover, xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover, xul|treechildren::-moz-tree-row(hover) { background-color: var(--in-content-item-hover) !important; color: var(--in-content-item-hover-text) !important; } xul|richlistbox > xul|richlistitem[selected], xul|treechildren::-moz-tree-row(selected) { background-color: var(--in-content-item-selected) !important; color: var(--in-content-item-selected-text) !important; } xul|richlistbox:not(#categories) > xul|richlistitem[selected] { /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */ --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important; --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important; --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important; --in-content-button-text-color: var(--in-content-item-selected-text) !important; --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important; --in-content-focus-outline-color: var(--in-content-item-selected-text) !important; } xul|richlistitem[selected] xul|menulist:focus-visible { outline-offset: -2px !important; } /* Use a 2px border so that selected row highlight is still visible behind an existing high-contrast border that uses the background color */ @media (prefers-contrast) { xul|treechildren::-moz-tree-row(selected) { border: 2px solid currentColor !important; border-radius: 4px !important; } } xul|panel[type="autocomplete-richlistbox"] { background-color: var(--in-content-box-background) !important; border: 1px solid var(--in-content-box-border-color) !important; color: var(--in-content-text-color) !important; } /*- Each OS ----------------------------------------------------------------*/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { xul|checkbox, xul|radio { padding-inline-start: 0 !important; } /* Override menulist.css */ xul|menulist[disabled="true"] { background-color: var(--in-content-button-background) !important; } xul|menulist:-moz-focusring > xul|*.menulist-label-box { outline: none !important; } } @media (-moz-gtk-csd-available) { /* Overriding appearance also avoids incorrect selection background color with light text. */ xul|button > xul|*.button-box, xul|menulist::part(label-box), xul|*.radio-label-box, xul|*.checkbox-label-box { appearance: none !important; } xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker { appearance: none !important; } xul|menulist { font-size: inherit !important; } xul|menulist::part(dropmarker) { display: flex; display: -moz-box; margin-block: 6px !important; } xul|menulist:-moz-focusring::part(label-box) { outline: none !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before, xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before { display: none !important; } xul|menulist::part(dropmarker) { display: flex !important; display: -moz-box !important; margin-block: 1px !important; } xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem { padding-inline-end: 34px !important; } xul|*.checkbox-icon, xul|*.radio-icon { margin-inline-end: 0 !important; } xul|*.text-link:-moz-focusring { box-shadow: none !important; } } } /*= Delete Cert ==============================================================*/ @-moz-document url("chrome://pippki/content/deletecert.xhtml") { #certlist { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 4px !important; } } /*= Cert Exception Dialog ====================================================*/ @-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") { #locationTextBox { appearance: none !important; border: 1px solid var(--in-content-box-border-color) !important; border-radius: 4px !important; color: inherit !important; background-color: var(--in-content-box-background) !important; font-family: inherit !important; font-size: inherit !important; padding: 8px !important; margin: 2px 4px !important; } #locationTextBox:focus { border-color: transparent !important; outline: 2px solid var(--in-content-focus-outline-color) !important; outline-offset: -1px !important; /* Prevents antialiasing around the corners */ } #locationTextBox:-moz-ui-invalid { border-color: transparent !important; outline: 2px solid var(--in-content-border-invalid) !important; outline-offset: -1px !important; /* Prevents antialiasing around the corners */ } #locationTextBox:disabled { opacity: 0.4 !important; } #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) { width: 48px !important; height: 48px !important; background-image: url("chrome://global/skin/icons/warning.svg") !important; background-size: 48px !important; background-repeat: no-repeat !important; -moz-context-properties: fill !important; fill: currentColor !important; } #exceptiondialog:first-child > hbox > vbox > image { display: none !important; } } /*= Page Info ================================================================*/ @-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") { :root { --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; } #viewGroup > radio { padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; margin: 4px !important; list-style-image: none !important; background-image: var(--viewgroup-image) !important; background-repeat: no-repeat; background-position: top var(--in-content-button-vertical-padding) center; background-size: 32px !important; -moz-context-properties: fill !important; fill: currentColor !important; color: var(--in-content-deemphasized-text) !important; /* FieldText */ } #viewGroup > radio .radio-icon { background-image: none !important; } @supports not -moz-bool-pref("userChrome.rounding.square_button") { #viewGroup > radio { border-radius: 8px !important; } } #viewGroup > radio:hover { background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */ } #viewGroup > radio[selected="true"] { color: var(--in-content-button-text-color) !important; /* SelectedItemText */ background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */ } #generalTab { --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg); } #mediaTab { --viewgroup-image: url(chrome://browser/skin/canvas.svg); } #permTab { --viewgroup-image: url(chrome://browser/skin/permissions.svg); } #securityTab { --viewgroup-image: url(chrome://global/skin/icons/security.svg); } #viewGroup > radio > .radio-label-box { /* Overwrite */ margin: 0 !important; padding: 0 6px !important; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #viewGroup > radio > .radio-label-box { padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */ } } #mainDeck input { color: var(--in-content-page-color) !important; } #permList { -moz-appearance: none !important; color: var(--in-content-page-color) !important; background-color: var(--in-content-box-background) !important; } .permission:hover { color: var(--in-content-text-color) !important; background-color: var(--in-content-button-background-hover) !important; } .permission radio[disabled] { color: var(--in-content-deemphasized-text) !important; } treecols { -moz-appearance: none !important; background: var(--in-content-table-header-background) !important; color: var(--in-content-table-header-color) !important; } treecols > treecol, treecols > treecolpicker.treecol-image { -moz-appearance: none !important; color: var(--in-content-table-header-color) !important; background: var(--in-content-table-header-background) !important; border: 1px solid var(--in-content-table-border-color) !important; padding: 4px !important; border-spacing: 0; text-align: center !important; } tree, treechildren::-moz-tree-row { -moz-appearance: none !important; color: var(--in-content-text-color) !important; background-color: var(--in-content-table-background) !important; border: 1px solid var(--in-content-table-border-color) !important; } treechildren::-moz-tree-row(odd) { background-color: var(--in-content-box-background-odd) !important; } treechildren::-moz-tree-row(hover) { color: var(--in-content-item-hover-text) !important; background-color: var(--in-content-item-hover) !important; } treechildren::-moz-tree-row(selected) { background-color: var(--in-content-item-selected) !important; } treechildren::-moz-tree-cell { border-inline: 1px solid var(--in-content-table-border-color) !important; border-spacing: 0 !important; padding: 4px !important; margin: 0 !important; } treechildren::-moz-tree-cell-text(hover) { color: var(--in-content-item-hover-text) !important; } treechildren::-moz-tree-cell-text(selected) { font-weight: 600 !important; color: var(--in-content-item-selected-text) !important; } #imagecontainerbox { background-color: var(--in-content-box-background) !important; } #metatree, #imagetree, #imagecontainerbox, #permList { border-radius: 4px !important; } #metatree, #imagetree { overflow: hidden !important; } #topBar, #imagecontainerbox, #permList { border-color: var(--in-content-table-border-color) !important; } } /*= Library Popup ============================================================*/ @-moz-document url("chrome://browser/content/places/places.xhtml") { @media (-moz-gtk-csd-available) { :root { --organizer-color: -moz-DialogText; --organizer-deemphasized-color: GrayText; --organizer-toolbar-background: -moz-Dialog; --organizer-pane-background: -moz-Dialog; --organizer-content-background: -moz-Dialog; --organizer-hover-background: SelectedItem; --organizer-hover-color: SelectedItemText; --organizer-selected-background: SelectedItem; --organizer-selected-color: SelectedItemText; --organizer-outline-color: SelectedItem; --organizer-separator-color: ThreeDDarkShadow; --organizer-border-color: ThreeDShadow; --organizer-toolbar-field-background: Field; --organizer-toolbar-field-background-focused: Field; --organizer-toolbar-field-border-color: ThreeDShadow; --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); --organizer-toolbar-field-focus-box-shadow: unset; --organizer-pane-field-border-color: ThreeDShadow; } @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); --organizer-deemphasized-color: var(--in-content-deemphasized-text); --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ --organizer-content-background: var(--in-content-page-background); --organizer-hover-background: var(--in-content-button-background-hover); --organizer-hover-color: var(--organizer-color); --organizer-selected-background: var(--in-content-button-background-active); --organizer-selected-color: var(--organizer-color); --organizer-outline-color: var(--in-content-focus-outline-color); --organizer-separator-color: var(--organizer-pane-field-border-color); --organizer-border-color: var(--in-content-border-color); --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ --organizer-toolbar-field-background-focused: Field; --organizer-toolbar-field-border-color: transparent; --organizer-toolbar-field-focus-border-color: color-mix( in srgb, var(--organizer-outline-color) 50%, transparent ); --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --organizer-color: rgb(251, 251, 254); --organizer-deemphasized-color: rgb(191, 191, 201); --organizer-toolbar-background: rgb(43, 42, 51); --organizer-pane-background: rgb(35, 34, 43); --organizer-content-background: rgb(28, 27, 34); --organizer-hover-background: rgb(82, 82, 94); --organizer-selected-background: rgb(91, 91, 102); --organizer-toolbar-field-background: var(--in-content-page-background); --organizer-toolbar-field-background-focused: rgb(66, 65, 77); scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); } } } /*- Toolbar & Menus ------------------------------------------------------*/ #placesToolbar { appearance: none !important; background-color: var(--organizer-toolbar-background) !important; color: var(--organizer-color) !important; border-bottom: 1px solid var(--organizer-border-color) !important; padding: 4px !important; padding-inline-end: 6px !important; } #placesToolbar > toolbarbutton { appearance: none !important; padding: 5px !important; border-radius: 4px !important; } @supports -moz-bool-pref("userChrome.rounding.square_button") { #placesToolbar > toolbarbutton { border-radius: 0 !important; } } #placesToolbar > toolbarbutton[disabled] { opacity: 0.6 !important; } #placesToolbar > toolbarbutton:not([disabled]):hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } #placesToolbar > toolbarbutton:not([disabled]):hover:active { background-color: var(--organizer-selected-background) !important; } #placesToolbar > toolbarbutton > .toolbarbutton-icon, #placesMenu > menu > image, #placesMenu > menu > .menubar-text { -moz-context-properties: fill !important; fill: currentColor !important; } #placesMenu { margin-inline-start: 6px !important; } #placesMenu > menu { appearance: none !important; color: var(--organizer-color) !important; padding-block: 5px !important; padding-inline-start: 5px !important; border-radius: 4px !important; margin-inline-end: 2px !important; } @supports -moz-bool-pref("userChrome.rounding.square_button") { #placesMenu > menu { border-radius: 0 !important; } } #placesMenu > menu[_moz-menuactive="true"], #placesMenu > menu:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } #placesMenu > menu:hover:active, #placesMenu > menu[open] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } #placesMenu > menu > .menubar-text { margin-block: 0 !important; /* override menu.css */ padding-inline-end: 4px !important; } /*- Search Bar & Input ---------------------------------------------------*/ #searchFilter, #detailsPane html|input { appearance: none !important; background-color: var(--organizer-toolbar-field-background) !important; color: var(--organizer-color) !important; border: 1px solid var(--organizer-toolbar-field-border-color) !important; border-radius: 4px !important; margin: 0 !important; padding-block: 2px !important; min-height: 24px !important; } @supports -moz-bool-pref("userChrome.rounding.square_field") { #searchFilter, #detailsPane html|input { border-radius: 0 !important; } } #searchFilter[focused] { box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; background-color: var(--organizer-toolbar-field-background-focused) !important; border-color: transparent !important; outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; outline-offset: -2px !important; } /*- Sidebar & Splitter ---------------------------------------------------*/ #placesList { background-color: var(--organizer-pane-background) !important; } #placesView > splitter { border: 0 !important; border-inline-end: 1px solid var(--organizer-border-color) !important; min-width: 0 !important; width: 3px !important; background-color: transparent !important; margin-inline-start: -3px !important; position: relative !important; } /*- Downloads Pane -------------------------------------------------------*/ #downloadsRichListBox, #downloadsListBox { color: var(--organizer-color) !important; background-color: var(--organizer-content-background) !important; } #clearDownloadsButton:focus-visible { outline: 2px solid var(--organizer-outline-color) !important; } richlistitem[selected="true"], richlistitem:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; } richlistbox:where(:focus) > richlistitem[selected="true"] { background-color: var(--organizer-selected-background) !important; } /*- Tree -----------------------------------------------------------------*/ #contentView treecol { /* Use box-shadow to draw a bottom border instead of border-bottom * because otherwise the items on contentView won't be perfectly * aligned with the items on the sidebar. */ box-shadow: inset 0 -1px var(--organizer-border-color) !important; } tree { background-color: var(--organizer-content-background) !important; color: var(--organizer-color) !important; } treecol:not([hideheader="true"]), treecolpicker { appearance: none !important; border: none !important; background-color: var(--in-content-button-background) !important; color: var(--organizer-color, inherit) !important; padding: 5px 10px !important; } treecol:not([hideheader="true"], [sortable="false"]):hover, treecolpicker:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; } treecol:not([hideheader="true"], [sortable="false"]):hover:active, treecolpicker:hover:active { background-color: var(--organizer-selected-background) !important; } treecol:not([hideheader="true"], :first-child), treecolpicker { padding-left: 10px !important; border-inline-start-width: 1px !important; border-inline-start-style: solid !important; border-image: linear-gradient( transparent 0%, transparent 20%, var(--organizer-border-color) 20%, var(--organizer-border-color) 80%, transparent 80%, transparent 100% ) 1 1 !important; } treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { fill: currentColor !important; width: 18px !important; height: 18px !important; } treechildren::-moz-tree-row { background-color: transparent !important; } treechildren::-moz-tree-row(hover) { background-color: var(--organizer-hover-background) !important; } treechildren::-moz-tree-row(selected) { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; border: 1px solid transparent !important; } treechildren::-moz-tree-image(hover), treechildren::-moz-tree-twisty(hover), treechildren::-moz-tree-cell-text(hover) { color: var(--organizer-hover-color) !important; } treechildren::-moz-tree-image(selected), treechildren::-moz-tree-twisty(selected), treechildren::-moz-tree-cell-text(selected) { color: var(--organizer-selected-color) !important; } treechildren::-moz-tree-separator { height: 1px !important; border-color: var(--organizer-separator-color) !important; } treechildren::-moz-tree-separator(hover) { border-color: var(--organizer-hover-color) !important; } treechildren::-moz-tree-separator(selected) { border-color: var(--organizer-selected-color) !important; } treechildren::-moz-tree-cell-text(primary, dropOn), treechildren::-moz-tree-drop-feedback { background-color: var(--organizer-outline-color) !important; } /*- Info Box -------------------------------------------------------------*/ #detailsPane { background-color: var(--organizer-pane-background) !important; color: var(--organizer-color) !important; padding: 5px !important; border-top: 1px solid var(--organizer-border-color) !important; } #editBookmarkPanelRows .expander-up, #editBookmarkPanelRows .expander-down { appearance: none !important; min-width: 0 !important; padding: 5px !important; margin: 0 !important; margin-inline-end: 4px !important; border: 1px solid var(--organizer-pane-field-border-color) !important; border-radius: 4px !important; color: var(--organizer-color) !important; background-color: var(--organizer-content-background) !important; -moz-context-properties: fill !important; fill: currentColor !important; } @supports -moz-bool-pref("userChrome.rounding.square_button") { #editBookmarkPanelRows .expander-up, #editBookmarkPanelRows .expander-down { border-radius: 0 !important; } } #editBookmarkPanelRows .expander-up:hover, #editBookmarkPanelRows .expander-down:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } #editBookmarkPanelRows .expander-up:hover:active, #editBookmarkPanelRows .expander-down:hover:active { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } #editBookmarkPanelRows .expander-up:focus-visible, #editBookmarkPanelRows .expander-down:focus-visible { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } #editBookmarkPanelRows .expander-up > .button-box, #editBookmarkPanelRows .expander-down > .button-box { padding: 0 !important; } #editBookmarkPanelRows .expander-up { list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); } #editBookmarkPanelRows .expander-down { list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); } #places input { border: 1px solid var(--organizer-pane-field-border-color) !important; border-radius: 4px !important; background-color: var(--organizer-content-background) !important; color: var(--organizer-color) !important; min-height: 20px !important; padding-inline: 4px !important; } @supports -moz-bool-pref("userChrome.rounding.square_field") { #places input { border-radius: 0 !important; } } #places input:focus { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } #places input:not(:read-write):focus { outline: none !important; } .caption-label { margin-inline-start: 8px !important; color: var(--organizer-deemphasized-color) !important; } #editBMPanel_tagsSelectorRow > richlistbox { appearance: none !important; color: var(--organizer-color) !important; background-color: var(--organizer-content-background) !important; border: 1px solid var(--organizer-border-color) !important; border-radius: 4px !important; } @supports -moz-bool-pref("userChrome.rounding.square_field") { #editBMPanel_tagsSelectorRow > richlistbox { border-radius: 0 !important; } } #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { border: 1px solid transparent !important; } #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } } } #sanitizeEverythingWarningIcon { list-style-image: url("chrome://global/skin/icons/warning.svg") !important; -moz-context-properties: fill; fill: var(--uc-warning-icon-bgcolor); width: 48px; height: 48px; } } /*= Monospace ================================================================*/ @supports -moz-bool-pref("userChrome.theme.monospace") { * { font-family: -moz-fixed; } } /** Decoration ****************************************************************/ /*= Cursor Types =============================================================*/ @supports -moz-bool-pref("userChrome.decoration.cursor") { #appMenu-proton-update-banner, #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2, #panelMenu_showAllBookmarks, #PanelUI-historyMore, #appMenuClearRecentHistory:not([disabled]), #appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button, #appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button, #BMB_viewBookmarksSidebar, #BMB_bookmarksShowAllTop, #BMB_bookmarksShowAll, #import-button, menuitem.openintabs-menuitem, #downloadsListBox .downloadButton, #downloadsListBox .download-state[exists], #downloadsListBox .download-state[exists] .downloadDetails, #downloadsHistory, #protections-popup-footer .protections-popup-footer-button, #protections-popup-multiView .panel-subview-footer-button, #identity-popup-clear-sitedata-button, #identity-popup-more-info, #unified-extensions-manage-extensions, .unified-extensions-item-open-menu, .unified-extensions-item-menu-button.subviewbutton, #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text { cursor: pointer !important; } } /*= Panel UI Button Separator ================================================*/ @supports -moz-bool-pref("userChrome.decoration.panel_button_separator") { :root:not([chromehidden~="toolbar"]) #PanelUI-button { margin-inline-start: 3px; padding-inline-start: 2px; border-inline-start: 1px solid; border-image: linear-gradient( transparent 4px, var(--toolbarseparator-color) 4px, var(--toolbarseparator-color) calc(100% - 4px), transparent calc(100% - 4px) ); border-image-slice: 1; } } /*= Panel UI Arrow ===========================================================*/ @supports -moz-bool-pref("userChrome.decoration.panel_arrow") { #appMenu-popup { background-image: url("../icons/panelarrow-vertical.svg"); background-repeat: no-repeat; background-position-x: right 10px; background-position-y: top; -moz-context-properties: fill, stroke; fill: var(--panel-background); stroke: var(--panel-border-color); } #appMenu-popup[side="top"] { margin-top: -8px !important; /* Original: -4px */ padding-top: 4px; } #appMenu-popup[side="bottom"] { background-image: url("../icons/panelarrow-vertical-reverse.svg"); background-position-y: bottom; margin-bottom: -8px !important; /* Original: -4px */ padding-bottom: 4px; } } @media (prefers-reduced-motion: no-preference) { /*= Field Border ===========================================================*/ @supports -moz-bool-pref("userChrome.decoration.field_border") { /*- URL, Search Bar --------------------------------------------------------*/ #urlbar:hover:not([focused="true"]) > #urlbar-background, #searchbar:hover:not(:focus-within) { --toolbar-field-border-color: var(--toolbar-field-focus-border-color); } @supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { #nav-bar-customization-target > #stop-reload-button:hover ~ #urlbar-container #urlbar:not([focused="true"]) > #urlbar-background { --toolbar-field-border-color: var(--toolbar-field-focus-border-color); } } /*- Other Fields -----------------------------------------------------------*/ /* Sidebar */ .sidebar-panel[lwt-sidebar] #search-box:hover, body[lwt-sidebar] xul|search-textbox.tabsFilter:hover { border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important; } .sidebar-panel:not([lwt-sidebar]) #search-box:hover, body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { border-color: AccentColor !important; } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { .sidebar-panel:not([lwt-sidebar]) #search-box:hover, body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { border-color: -moz-accent-color !important; } } /* Others */ #editBMPanel_namePicker:hover, #editBMPanel_tagsField:hover, .findbar-container .findbar-textbox:hover { --input-border-color: color-mix(in srgb, var(--focus-outline-color, AccentColor) 50%, transparent); } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { #editBMPanel_namePicker:hover, #editBMPanel_tagsField:hover, .findbar-container .findbar-textbox:hover { --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent); } } } /*= Downloads Panel ========================================================*/ @supports -moz-bool-pref("userChrome.decoration.download_panel") { /* Accent Color for downloaded item */ #downloadsListBox .download-state[exists] .downloadDetails { color: var(--button-primary-bgcolor); } #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover { color: var(--button-primary-hover-bgcolor); } /* File moved or missing */ #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); } #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget:hover { text-decoration: none; } #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { filter: grayscale(100%) !important; } } /*= Animate ================================================================*/ @supports -moz-bool-pref("userChrome.decoration.animate") { /*- Background Color -------------------------------------------------------*/ button, toolbarbutton, stack, vbox, .toolbarbutton-icon, #tabs-newtab-button > .toolbarbutton-icon { transition: background-color 1s var(--animation-easing-function) !important; } button:hover, toolbarbutton:hover, stack:hover, vbox:hover, .toolbarbutton-icon:hover, #tabs-newtab-button:hover > .toolbarbutton-icon { transition: background-color 0.25s var(--animation-easing-function) !important; } @media (-moz-gtk-csd-available) { .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) { transition: background-image 0.25s var(--animation-easing-function) !important; } } .subviewbutton { /* treechildren::-moz-tree-row: Can't apply menu, menuitem is not apply. */ transition: background-color 0.5s var(--animation-easing-function) !important; } .subviewbutton:hover { transition: background-color 0.1s var(--animation-easing-function) !important; } /*- Pinned Tab -------------------------------------------------------------*/ #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) { /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */ transition: -moz-box-flex 0.2s var(--animation-easing-function), flex 0.2s var(--animation-easing-function), margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important; } #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] { transition: margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important; } #tabbrowser-tabs:not([movingtab]) .tab-content::before, #tabbrowser-tabs:not([movingtab]) .tab-content::after { transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important; } #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container { transition: width 0.3s var(--animation-easing-function) !important; } #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image { transition: all 0.3s var(--animation-easing-function) !important; } /*- URL / Search Bar -------------------------------------------------------*/ #urlbar-background, #searchbar { transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important; } #urlbar-background:hover, #searchbar:hover { transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important; } /* Buttons in URL bar */ #tracking-protection-icon-container, #identity-icon-box, #identity-permission-box, #notification-popup-box, #page-action-buttons > .urlbar-page-action { transition: background-color 2.5s var(--animation-easing-function) !important; } #tracking-protection-icon-container:hover, #identity-icon-box:hover, #identity-permission-box:hover, #notification-popup-box:hover, #page-action-buttons > .urlbar-page-action:hover { transition: background-color 1.25s var(--animation-easing-function) !important; } @supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon { transition: background-color 2.5s var(--animation-easing-function) !important; } #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon:hover { transition: background-color 1.25s var(--animation-easing-function) !important; } } /*- Border - Other Fields --------------------------------------------------*/ #search-box, xul|search-textbox.tabsFilter, #editBMPanel_namePicker, #editBMPanel_tagsField, .findbar-container .findbar-textbox { transition: border-color 1s var(--animation-easing-function) !important; } #search-box:hover, xul|search-textbox.tabsFilter:hover, #editBMPanel_namePicker:hover, #editBMPanel_tagsField:hover, .findbar-container .findbar-textbox:hover { transition: border-color 0.5s var(--animation-easing-function) !important; } /*- Sidebar ----------------------------------------------------------------*/ @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { #sidebar-box { /* like #sidebar-box > #sidebar */ min-width: 14em; width: 18em; max-width: 36em; /* Animation */ transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; will-change: margin-inline-start, opacity, visibility; } #sidebar-box[hidden="true"] { display: flex !important; display: -moz-box !important; margin-inline-start: -18em; opacity: 0; visibility: collapse; transition-delay: 0s, 0s, 0.25s !important; } } /*- Full Screen ------------------------------------------------------------*/ #navigator-toolbox { /* Full screen out */ transition: margin-top 1s ease; transform-origin: top; } #navigator-toolbox[inFullscreen="true"] { /* Full screen enter */ animation-duration: 1s; animation-name: fullscreen; animation-timing-function: ease; /* Full screen navbar not hover */ transition: margin-top 1.3s var(--animation-easing-function) 50ms; } #navigator-toolbox[inFullscreen="true"]:hover { margin-top: 0 !important; } @keyframes fullscreen { from { margin-top: 0; } /* Don't use `to`: Depending on density */ } /*- Expand - Synced Tabs ---------------------------------------------------*/ @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") { .item-tabs-list { transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform: translateY(0%); opacity: 1; max-height: 100%; } .item.client.closed .item-tabs-list { display: flex !important; transition: transform 0.2s ease-out, opacity 0.2s ease-out, max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s; visibility: hidden; transform: translateY(-100%); opacity: 0; max-height: 0; } } /*- Arrow - Synced Tabs ----------------------------------------------------*/ @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") { /* treechildren::-moz-tree-twisty: Can't apply */ #template-container .item.client .item-twisty-container { transition: transform 0.1s var(--animation-easing-function) !important; } #template-container .item.client.closed .item-twisty-container { transform: rotate(-90deg); background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; } #template-container .item.client.closed .item-twisty-container:dir(rtl) { transform: rotate(90deg); } } /*- Arrow - Edit Bookmark Popup --------------------------------------------*/ #editBookmarkPanelRows .expander-up .button-icon, #editBookmarkPanelRows .expander-down .button-icon { transition: transform 0.1s var(--animation-easing-function) !important; } #editBookmarkPanelRows .expander-up { list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; } #editBookmarkPanelRows .expander-up .button-icon { transform: rotate(180deg); } } @supports -moz-bool-pref("userChrome.decoration.disable_panel_animate") { :root { --panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */ } } } /** Rounding ******************************************************************/ /** Rounding ******************************************************************/ @supports -moz-bool-pref("userChrome.rounding.square_tab") { :root { --tab-border-radius: 0 !important; /* Original: 4px */ } } @supports -moz-bool-pref("userChrome.rounding.square_button") { :root { --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, .panel-info-button, .searchbar-engine-one-off-item, .urlbarView-button, .urlbarView-tip-button, .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { --toolbarbutton-border-radius: 0; /* Original: 4px */ } button, .close-icon, input[type="number"].photon-number::-moz-number-spin-box, .toggle-group-label, findbar toolbarbutton, .notification-button, #main-menubar > menu { border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.rounding.square_button") { /* Fix Tab bar button radius */ #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button), .tab-close-button { --tab-border-radius: var(--toolbarbutton-border-radius); } } @supports -moz-bool-pref("userChrome.rounding.square_dialog") { .dialogBox { border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_panel") { :root { --arrowpanel-border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_panelitem") { :root { --arrowpanel-menuitem-border-radius: 0 !important; --subviewbutton-border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_menupopup") { menupopup { --panel-border-radius: 0px !important; border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_menuitem") { xul|menulist:not([native]), xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_toolbar") { :root { --uc-rounding-toolbar: 0; } .container.infobar, .container.infobar::before, notification-message { border-radius: var(--uc-rounding-toolbar) !important; } } @supports -moz-bool-pref("userChrome.rounding.square_field") { input:not([type="radio"], [type="checkbox"]), textarea, select, menulist, tree, treecols, listheader, richlistbox, search-textbox, .subviewradio { border-radius: 0 !important; } #urlbar-input-container, #urlbar-background, #searchbar { --toolbarbutton-border-radius: 0; } } @supports -moz-bool-pref("userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { --toolbarbutton-border-radius: 0; } } @supports -moz-bool-pref("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { border-radius: 0 !important; } } /*= Library ==============================================================*/ @supports -moz-bool-pref("userChrome.rounding.square_button") { #placesToolbar > toolbarbutton, #placesMenu > menu, #editBookmarkPanelRows .expander-up, #editBookmarkPanelRows .expander-down { border-radius: 0 !important; } } @supports -moz-bool-pref("userChrome.rounding.square_field") { #searchFilter, #detailsPane html|input, #places input #editBMPanel_tagsSelectorRow > richlistbox { border-radius: 0 !important; } } /* --toolbarbutton-border-radius: 4px; */ /** Reduce Padding ************************************************************/ /*= Tab Bar - Distribution padding, radius ===================================*/ @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") or -moz-bool-pref("userChrome.tab.photon_like_padding") { :root { --proton-tab-block-margin: var(--tab-block-margin) !important; /* Original: 4px, Legacy */ } :root[uidensity="touch"] { /* Like Original */ --tab-block-margin: 4px !important; } } @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { :root { --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { :root { --tab-block-margin: 0px !important; } } /*= Tab Bar - Reduce Width, Show more tabs ===================================*/ @supports -moz-bool-pref("userChrome.padding.first_tab") { /* for First Tab Space */ :root { --uc-space-left-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */ } @supports not -moz-bool-pref("userChrome.padding.first_tab.always") { :root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]), :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) { padding-inline-start: var(--uc-space-left-tabbar) !important; } } @supports -moz-bool-pref("userChrome.padding.first_tab.always") { :root:not([tabsintitlebar]) #tabbrowser-tabs, :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs { padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width, 0px) + var(--uc-space-left-tabbar)) !important; } } } @supports -moz-bool-pref("userChrome.padding.tabbar_width") { /* Titlebar Space */ :root { --uc-title-pre-spacer: 30px; /* Original: 40px */ --uc-title-post-spacer: 25px; /* Original: 40px */ } :root:-moz-locale-dir(rtl) { --uc-title-pre-spacer: 25px; --uc-title-post-spacer: 30px; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-spacer[type="pre-tabs"] { width: var(--uc-title-pre-spacer) !important; } .titlebar-spacer[type="post-tabs"] { width: var(--uc-title-post-spacer) !important; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement) { .titlebar-spacer[type="pre-tabs"] { width: var(--uc-title-pre-spacer) !important; } .titlebar-spacer[type="post-tabs"] { width: var(--uc-title-post-spacer) !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { .titlebar-spacer[type="pre-tabs"] { width: var(--uc-title-post-spacer) !important; } .titlebar-spacer[type="post-tabs"] { width: var(--uc-title-pre-spacer) !important; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement: 0) { .titlebar-spacer[type="pre-tabs"] { width: var(--uc-title-post-spacer) !important; } .titlebar-spacer[type="post-tabs"] { width: var(--uc-title-pre-spacer) !important; } } } /* Tabbar Buttons */ :root { --newtab-button-minus-width-padding: 2px; --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding)); } #new-tab-button > .toolbarbutton-icon, #alltabs-button > .toolbarbutton-badge-stack { /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */ width: calc(2 * var(--newtab-button-width-padding) + 16px) !important; /* Original: --toolbarbutton-inner-padding */ padding-left: var(--newtab-button-width-padding) !important; padding-right: var(--newtab-button-width-padding) !important; } @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 1px !important; } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; } } :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { --scrollbtn-inner-padding: 1px; --scrollbtn-outer-padding: 3px; } #scrollbutton-up { padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */ padding-right: var(--scrollbtn-outer-padding, 4px) !important; } #scrollbutton-down { padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */ padding-right: var(--scrollbtn-inner-padding, 4px) !important; } :root:not([uidensity="touch"]) #new-tab-button, #alltabs-button { --toolbarbutton-outer-padding: 1px; /* Original: 2px*/ } /* Tab - Max Size */ @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { :root { --tab-max-width: 240px; } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { :root { --tab-max-width: 225px; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root { --tab-max-width: 180px; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root { --tab-max-width: 180px; } } } } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ } /* neighbouring tabs should "pinch" together */ @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { .tabbrowser-tab { padding-inline: 1px !important; } } @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { #TabsToolbar:not([multibar]) .tabbrowser-tab:not(:last-of-type) { margin-inline-end: -1px !important; } } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { .tabbrowser-tab { padding-inline: 0 !important; } } } /*= Tab Bar - Reduce Height, Show more contents ==============================*/ @supports -moz-bool-pref("userChrome.padding.drag_space") { /* for Extra Drag Space */ :root { --uc-space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */ } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { height: calc(var(--tab-min-height) + var(--uc-space-above-tabbar) - var(--tabs-navbar-shadow-size)); } @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] { height: calc(var(--tab-min-height) + var(--uc-space-above-tabbar) - var(--tabs-navbar-shadow-size)); } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-gtk-csd-available) { :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { height: calc(var(--tab-min-height) + var(--uc-space-above-tabbar)); } @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { :root[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"] { height: calc(var(--tab-min-height) + var(--uc-space-above-tabbar)); } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #TabsToolbar > .toolbar-items { padding-top: var(--uc-space-above-tabbar) !important; } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */ /* Add extra space to titlebar for dragging */ :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { padding-top: calc(var(--uc-space-above-tabbar) + 4px) !important; } @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { :root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, :root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { padding-top: calc(var(--uc-space-above-tabbar) + 4px) !important; } } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10), (-moz-gtk-csd-available) { /* Add extra space to titlebar for dragging */ :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { padding-top: var(--uc-space-above-tabbar) !important; } @supports -moz-bool-pref("userChrome.padding.drag_space.maximized") { :root[sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, :root[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { padding-top: var(--uc-space-above-tabbar) !important; } } } } @supports -moz-bool-pref("userChrome.padding.tabbar_height") { /* Toolbar Height */ @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { :root:not([uidensity]) { --tab-min-height: 36px !important; } :root[uidensity="compact"] { --tab-min-height: 32px !important; } :root[uidensity="touch"] { --tab-min-height: 41px !important; } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { :root:not([uidensity]) { --tab-min-height: 32px !important; } :root[uidensity="compact"] { --tab-min-height: 29px !important; } :root[uidensity="touch"] { --tab-min-height: 41px !important; } /* Top Margin */ .tab-background, .tab-content { margin-top: 0 !important; } } @supports not -moz-bool-pref("userChrome.tab.lepton_like_padding") { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { :root:not([uidensity]) { --tab-min-height: 36px !important; /* 38px -> 36px */ } :root[uidensity="compact"] { --tab-min-height: 29px !important; /* 36px -> 29px */ } } } :root { /* Works with TabMixPlus */ --tab-min-height_mlt: calc( var(--tab-min-height) + 2 * (var(--tab-block-margin, var(--proton-tab-block-margin, 0px))) ) !important; } #TabsToolbar[multibar] .tabbrowser-tab { height: unset !important; /* Original: var(--tab-min-height_mlt) */ } @supports -moz-bool-pref("userChrome.tab.connect_to_window") { :root { --tab-min-height_mlt: calc( var(--tab-min-height) + var(--tab-block-margin, var(--proton-tab-block-margin, 0px)) ) !important; } #TabsToolbar { --toolbarbutton-inner-padding: calc( (var(--tab-min-height) - 18px) / 2 ) !important; /* Prevent overflow pinned tab bottom margin */ } @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { max-height: var(--tab-min-height) !important; /* Force apply height */ } :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { height: var(--tab-min-height) !important; } } } /* Scroll Button - Size Fix */ :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; --scrollbtn-vertical-border: 2px; --scrollbtn-border-radius: 7px; } #scrollbutton-up, #scrollbutton-down { /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */ /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */ padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; /* Original: 4px */ border-top-width: var(--scrollbtn-vertical-border, 4px) !important; border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important; /* Original: calc(var(--tab-border-radius) + 4px) = 8px */ border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important; } :root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] { height: calc( var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px ); /* Compact: 28px, Normal: 33px, Touch: 38px */ } } /*= Tool Bar - Button Padding ================================================*/ @supports -moz-bool-pref("userChrome.padding.toolbar_button") or -moz-bool-pref("userChrome.tab.newtab_button_smaller") { :root { --uc-small-toolbarbutton-inner-padding: 6px; --uc-toolbarbutton-inner-padding-default: 8px; } :root[uidensity="compact"] { --uc-small-toolbarbutton-inner-padding: 4px; --uc-toolbarbutton-inner-padding-default: 6px; } :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { --uc-small-toolbarbutton-inner-padding: 9px; --uc-toolbarbutton-inner-padding-default: 9px; } } @supports -moz-bool-pref("userChrome.padding.toolbar_button") { :root[uidensity="compact"] { --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ } @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { :root { --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important; } } } /*= Nav Bar - Reduce Width ===================================================*/ @supports -moz-bool-pref("userChrome.padding.navbar_width") { #nav-bar:not([customizing]) toolbarspring { min-width: 1px !important; max-width: 100px !important; } } /*= URL Bar - Reduce Padding =================================================*/ @supports not -moz-bool-pref("userChrome.urlView.as_commandbar") { @supports -moz-bool-pref("userChrome.padding.urlbar") { :root:not([uidensity="touch"]) #urlbar-container, :root:not([uidensity="touch"]) #search-container { padding-block: 3px !important; /* Original: 4px */ } :root:not([uidensity="compact"]) #urlbar-container, :root:not([uidensity="compact"]) #search-container { padding-block: 2px !important; } /* spread menu */ :root:not([uidensity]) .urlbarView-row { padding-block: 1px !important; /* Original: 2px */ } :root[uidensity="compact"] .urlbarView-row { padding-block: 0px !important; } :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { padding-block: 8px !important; /* Original: 10px */ } :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { padding-block: 2px !important; } } } @supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; left: 0 !important; width: 100% !important; } #urlbar[breakout][breakout-extend] > #urlbar-input-container { height: var(--urlbar-height) !important; padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !important; } } @supports -moz-bool-pref("userChrome.padding.urlView_expanding") { #urlbar[breakout][breakout-extend] > #urlbar-background { animation-name: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; } } @supports -moz-bool-pref("userChrome.padding.urlView_result") { .urlbarView { margin-inline: 0 !important; width: 100% !important; } .urlbarView-row { padding-block: 0 !important; } } /*= BookMark Bar - Reduce Height =============================================*/ @supports -moz-bool-pref("userChrome.padding.bookmarkbar") { :root[uidensity="compact"] #PersonalToolbar toolbarbutton { margin-top: 0px !important; /* Original: 2px */ margin-bottom: 1px !important; } } /*= Info Bar - Reduce Padding ================================================*/ @supports -moz-bool-pref("userChrome.padding.infobar") or -moz-bool-pref("userChrome.autohide.infobar") { #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin, 8px)) !important; } } @supports -moz-bool-pref("userChrome.padding.infobar") { :root:not([uidensity]) notification-message { --infobar-message-vertical-margin: 3px; --infobar-vertical-margin: 7px; --infobar-button-vertical-margin: 3px; } :root[uidensity="compact"] notification-message { --infobar-message-vertical-margin: 2px; --infobar-vertical-margin: 6px; --infobar-button-vertical-margin: 2px; } :root[uidensity="touch"] notification-message { --infobar-message-vertical-margin: 4px; --infobar-vertical-margin: 8px; --infobar-button-vertical-margin: 4px; } .infobar > .icon { margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-message { padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-button-container > .notification-button { margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */ } .notification-close { margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */ } /* Hard coded for compatibility - Disappearing phenomenon */ .container.infobar::before { content: ""; display: block; width: 2px; position: absolute; background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); top: 0; inset-inline-start: 0; height: 100%; border-start-start-radius: 4px; border-end-start-radius: 4px; } } /*= Menu - Reduce Padding ====================================================*/ @supports -moz-bool-pref("userChrome.padding.menu") { :root { --menu-padding: 0.35em; /* Win7, 8: 0px */ } :root[uidensity="compact"] { --menu-padding: 0.25em; } :root[uidensity="touch"] { --menu-padding: 0.5em; } @supports -moz-bool-pref("userChrome.padding.menu_compact") { :root { --menu-padding: 2px; } :root[uidensity="compact"] { --menu-padding: 0px; } } menupopup:not(.in-menulist) > menuitem, menupopup > menu { /* Original: 0.5em */ padding-block: var(--menu-padding) !important; } #ContentSelectDropdown > menupopup > menucaption, #ContentSelectDropdown > menupopup > menuitem { padding-block: 0 !important; } @media (-moz-gtk-csd-available) { #ContentSelectDropdown > menupopup > menucaption, #ContentSelectDropdown > menupopup > menuitem { padding-block: var(--menu-padding) !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:not([uidensity="touch"]) .menu-text, :root:not([uidensity="touch"]) .menu-iconic-text { padding-inline-end: 0 !important; /* Original: 2px */ } :root:not([uidensity="touch"]) .menupopup-arrowscrollbox { padding-block: 1px !important; /* Original: 4px*/ } :root:not([uidensity="touch"]) #context-navigation:not([hidden]) { padding: 0 0 1px !important; /* Original: 0 0 4px*/ } :root:not([uidensity="touch"]) .menu-right { margin-right: 6px !important; /* Original: 12px */ } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { /* Remove border */ menupopup > menuitem, menupopup > menu { padding-block: calc(var(--menu-padding) - 2px) !important; } /* Make to original */ :root:not([uidensity="touch"]) #context-navigation:not([hidden]) { padding: 0 0 4px !important; } } @media (-moz-gtk-csd-available) { menupopup > menu { padding-inline-start: 0.5em; } } /* Arrow Icon Align to Right */ .bookmark-item.subviewbutton > .menu-right { margin-inline-end: 0 !important; } } /*= Bookmark Menu - Reduce Padding ===========================================*/ @supports -moz-bool-pref("userChrome.padding.bookmark_menu") { :root { --bookmark-menu-padding: 3px; } :root[uidensity="compact"] { --bookmark-menu-padding: 1.5px; } @supports -moz-bool-pref("userChrome.padding.menu_compact") { :root { --bookmark-menu-padding: 2px; } :root[uidensity="compact"] { --bookmark-menu-padding: 0px; } } :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem { padding-block: var(--bookmark-menu-padding) !important; } @supports -moz-bool-pref("userChrome.padding.menu_compact") or -moz-bool-pref("userChrome.padding.bookmark_menu.compact") { :root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item, :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item { min-height: unset !important; /* Original: 24px */ } } } /*= Global Menu - Set Padding ================================================*/ @supports -moz-bool-pref("userChrome.padding.global_menubar") { /* Vertical Align - Center & Height: 100% */ #main-menubar { flex: 1 !important; -moz-box-flex: 1 !important; } /* Rounding */ #main-menubar > menu { border-radius: 4px; } /* Menubar item padding */ :root { --global-menubar-padding: 2px; } :root[uidensity="compact"] { --global-menubar-padding: 1px; } :root[uidensity="touch"] { --global-menubar-padding: 4px; } #main-menubar > menu { padding-block: var(--global-menubar-padding) !important; } /* Reduce items */ #main-menubar > menu > menupopup menuitem, #main-menubar > menu > menupopup menu { padding-block: var(--bookmark-menu-padding) !important; } @supports -moz-bool-pref("userChrome.compatibility.os.win11") { #main-menubar > menu > menupopup menuitem, #main-menubar > menu > menupopup menu { --bookmark-menu-padding: 3px; } #main-menubar > menu > menupopup menuitem:is([type="checkbox"], [type="radio"]), #main-menubar > menu > menupopup menu:is([type="checkbox"], [type="radio"]) { --bookmark-menu-padding: 0px; } } } /*= Panel - Reduce padding ===================================================*/ @supports -moz-bool-pref("userChrome.padding.panel") { :root { --arrowpanel-menuitem-margin-block: 0; /* FF 102 compatibility */ --arrowpanel-menuitem-margin-inline: 8px; --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline) !important; /* Original: 0 8px */ --arrowpanel-menuitem-padding-block: 5px !important; /* Original: 8px */ --arrowpanel-menuitem-padding-inline: 5px !important; /* Original: 8px */ --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; /* Compatibility */ --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ } :root[uidensity="compact"] { --arrowpanel-menuitem-margin-inline: 4px; /* FF 102 compatibility */ --arrowpanel-menuitem-padding-block: 3px !important; --arrowpanel-menuitem-padding-inline: 3px !important; } :root[uidensity="touch"] { --arrowpanel-menuitem-padding-block: 8px !important; /* Original: 8px */ --arrowpanel-menuitem-padding-inline: 8px !important; /* Original: 8px */ } .all-tabs-item { margin: var(--arrowpanel-menuitem-margin) !important; } @supports not -moz-bool-pref("userChrome.icon.disabled") { @supports not -moz-bool-pref("userChrome.icon.panel") { .subviewbutton { min-height: calc(16px + var(--arrowpanel-menuitem-padding-block) * 2) !important; } } } .unified-extensions-item-menu-button.subviewbutton { padding: 8px !important; /* Original: var(--arrowpanel-menuitem-padding-inline) */ } } @supports -moz-bool-pref("userChrome.padding.panel_header") { .panel-header { padding: unset !important; padding-top: 4px !important; } } /*= Popup Panel - Reduce padding =============================================*/ @supports -moz-bool-pref("userChrome.padding.popup_panel") { #protections-popup-main-header-label { height: unset !important; /* Original: 37.6px */ } #identity-popup, #permission-popup, #protections-popup { --vertical-section-padding: 0.8em; /* Original: 0.9em */ } .protections-popup-footer-button, .protections-popup-category { min-height: 24px; /* Original: 32px */ height: unset !important; } /** Popup panel - Compact mode */ :root[uidensity="compact"] #protections-popup-content { margin-block: 0 !important; } :root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer { padding-block-start: 0 !important; padding-block-end: 4px !important; } :root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button, :root[uidensity="compact"] #protections-popup-multiView .protections-popup-category { min-height: 20px !important; } :root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike { margin: 0 0 3px !important; } :root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike > button { padding: 3px 8px !important; } :root[uidensity="compact"] #protections-popup-trackersView-settings-button { margin: 4px 8px 0 !important; } :root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header { padding: 2px 5px !important; } :root[uidensity="compact"] #protections-popup-no-trackers-found-description { margin: 2em 4em !important; } :root[uidensity="compact"] #downloadsListBox { margin: 0 !important; } } /** Tab Bar UI ****************************************************************/ /*= Tabs on Bottom ===========================================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { /* Don't use display: flex at not fullscreen!! side effect #372 */ :root[sizemode="fullscreen"] #navigator-toolbox { display: flex !important; /* Needed for content to take up entire height, compatibility with tabs on bottom */ flex-wrap: wrap; } :root[sizemode="fullscreen"] #titlebar, :root[sizemode="fullscreen"] #nav-bar, :root[sizemode="fullscreen"] #PersonalToolbar, :root[sizemode="fullscreen"] #tab-notification-deck, :root[sizemode="fullscreen"] #tab-notification-deck-template { flex-basis: 100%; } /* -moz-default-appearance: -moz-window-titlebar */ :root[sizemode="fullscreen"] #titlebar { -moz-appearance: none !important; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /*= Tabbar - Move to bottom ==================================================*/ #titlebar { order: 2; -moz-box-ordinal-group: 2; --tabs-navbar-shadow-size: 0px; } #tab-notification-deck { order: 2; -moz-box-ordinal-group: 2; } #TabsToolbar .titlebar-spacer { display: none; } #TabsToolbar-customization-target > .toolbarbutton-1:last-child { padding-inline-end: var(--toolbar-start-end-padding, 8px); } @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; -moz-box-ordinal-group: 2; } } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { #navigator-toolbox { border-bottom-color: var( --toolbar-bgcolor ) !important; /* Original: 1px solid var(--chrome-content-separator-color); */ } } } } /*= Tabbar - Hidden at single tab ===========================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.hidden_single_tab") { #tabbrowser-tabs .tabbrowser-tab:only-of-type { display: none !important; } #tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { height: auto !important; min-height: auto !important; } @media (prefers-reduced-motion: no-preference) { #tabbrowser-tabs { transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } } } /*= Menubar - Always on top ==================================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]) { --uc-window-control-width: 0px !important; } /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ :root:not([sizemode="fullscreen"]) #nav-bar { border-inline-width: 0; } #navigator-toolbox { -moz-window-dragging: drag; } :root[sizemode="fullscreen"] #navigator-toolbox { padding-top: 0px !important; } #toolbar-menubar { position: fixed; display: flex; top: var(--uc-titlebar-padding); height: var(--uc-menubar-height); width: 100%; overflow: hidden; } :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ } #toolbar-menubar > .titlebar-buttonbox-container { height: 100%; order: 100; } #toolbar-menubar > [flex] { flex-grow: 100; } #toolbar-menubar > spacer[flex] { order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-post); } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px; } :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { visibility: collapse !important; } :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: visible; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /*= Tabbar - Move to bottom ==================================================*/ #titlebar { order: 2; -moz-box-ordinal-group: 2; --tabs-navbar-shadow-size: 0px; } #tab-notification-deck { order: 2; -moz-box-ordinal-group: 2; } #TabsToolbar .titlebar-spacer { display: none; } #TabsToolbar-customization-target > .toolbarbutton-1:last-child { padding-inline-end: var(--toolbar-start-end-padding, 8px); } @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; -moz-box-ordinal-group: 2; } } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { #navigator-toolbox { border-bottom-color: var( --toolbar-bgcolor ) !important; /* Original: 1px solid var(--chrome-content-separator-color); */ } } } } /*= Tabbar - Hidden at single tab ===========================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.hidden_single_tab") { #tabbrowser-tabs .tabbrowser-tab:only-of-type { display: none !important; } #tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { height: auto !important; min-height: auto !important; } @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { #tabbrowser-tabs { transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } } } /*= Menubar - Always on top ==================================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]) { --uc-window-control-width: 0px !important; } /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ :root:not([sizemode="fullscreen"]) #nav-bar { border-inline-width: 0; } #navigator-toolbox { -moz-window-dragging: drag; } :root[sizemode="fullscreen"] #navigator-toolbox { padding-top: 0px !important; } #toolbar-menubar { position: fixed; display: flex; top: var(--uc-titlebar-padding); height: var(--uc-menubar-height); width: 100%; overflow: hidden; } :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ } #toolbar-menubar > .titlebar-buttonbox-container { height: 100%; order: 100; } #toolbar-menubar > [flex] { flex-grow: 100; } #toolbar-menubar > spacer[flex] { order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-post); } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px; } :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { visibility: collapse !important; } :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: visible; } } } } } } /*= Tab Bar - Oneliner =======================================================*/ @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root { --uc-navbar-width-origin: 40vw; --uc-navbar-width: var(--uc-navbar-width-origin); --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); } @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { :root { --uc-navbar-width-origin: 50vw; --uc-navbar-width: 24em; } } #nav-bar { --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; margin-bottom: var(--uc-navbar-block, 0px) !important; } #titlebar { transform: translateY(var(--uc-navbar-block, 0px)); } #TabsToolbar > .titlebar-buttonbox-container { transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } #navigator-toolbox { position: relative; z-index: 2; } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { :root { --uc-navbar-gap: 10px; --uc-navbar-block: 1.5px; } :root[uidensity="compact"] { --uc-navbar-block: 1px; } :root[uidensity="touch"] { --uc-navbar-block: 3px; } #nav-bar { --toolbarbutton-inner-padding: 6px; /* Original: 8px */ border-radius: var(--uc-rounding-toolbar, var(--tab-border-radius, 4px)); } #nav-bar, #nav-bar-customization-target { align-items: center; -moz-box-align: center; } #urlbar-container { min-height: calc(var(--urlbar-container-height) - 2px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } #nav-bar { --lwt-tabs-border-color: transparent; background-color: unset !important; background-image: unset !important; } } #urlbar-container { min-width: calc( var(--uc-oneliner-urlbar-base-width, 50px) + 24px + 2 * var(--toolbarbutton-inner-padding) ) !important; } #urlbar[breakout][breakout-extend] { min-width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))) !important; } #PersonalToolbar { position: relative; z-index: -1; } toolbarspring.chromeclass-toolbar-additional { display: none !important; } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-margin) !important; } #nav-bar { margin-inline-end: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="pre-tabs"] { display: none !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-margin) !important; } #nav-bar { margin-inline-start: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="post-tabs"] { display: none !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root { --uc-navbar-width-origin: 40vw; --uc-navbar-width: var(--uc-navbar-width-origin); --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); } @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { :root { --uc-navbar-width-origin: 50vw; --uc-navbar-width: 24em; } } #nav-bar { --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; margin-bottom: var(--uc-navbar-block, 0px) !important; } #titlebar { transform: translateY(var(--uc-navbar-block, 0px)); } #TabsToolbar > .titlebar-buttonbox-container { transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } #navigator-toolbox { position: relative; z-index: 2; } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { :root { --uc-navbar-gap: 10px; --uc-navbar-block: 1.5px; } :root[uidensity="compact"] { --uc-navbar-block: 1px; } :root[uidensity="touch"] { --uc-navbar-block: 3px; } #nav-bar { --toolbarbutton-inner-padding: 6px; /* Original: 8px */ border-radius: var(--uc-rounding-toolbar, var(--tab-border-radius, 4px)); } #nav-bar, #nav-bar-customization-target { align-items: center; -moz-box-align: center; } #urlbar-container { min-height: calc(var(--urlbar-container-height) - 2px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } #nav-bar { --lwt-tabs-border-color: transparent; background-color: unset !important; background-image: unset !important; } } #urlbar-container { min-width: calc( var(--uc-oneliner-urlbar-base-width, 50px) + 24px + 2 * var(--toolbarbutton-inner-padding) ) !important; } #urlbar[breakout][breakout-extend] { min-width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))) !important; } #PersonalToolbar { position: relative; z-index: -1; } toolbarspring.chromeclass-toolbar-additional { display: none !important; } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-margin) !important; } #nav-bar { margin-inline-end: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="pre-tabs"] { display: none !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-margin) !important; } #nav-bar { margin-inline-start: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="post-tabs"] { display: none !important; } } } } } /*= Tab Bar - Shared Layout ==================================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( "userChrome.hidden.tabbar" ) or -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root { --uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ --uc-window-drag-space-pre: 0px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ --uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */ --uc-window-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); } :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 105px; } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 138px; } } @media (-moz-gtk-csd-available) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* 84px is default value of linux */ } @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 28px; } } @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button), (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 56px; } } @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 84px; } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[tabsintitlebar] { --uc-window-control-width: 72px; } :root[sizemode="fullscreen"] { --uc-window-control-space: 0px; } } :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement: 0) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } } @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { --uc-window-control-space: 0px; } } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement: 0) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports (not -moz-bool-pref("userChrome.tabbar.on_bottom")) or (not -moz-bool-pref("userChrome.hidden.tabbar")) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; --uc-window-control-space: 0px; } } } @media screen and (min-width: 1100px) { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; } } @media (-moz-gtk-csd-available) { @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } @media (-moz-gtk-csd-available) { @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } } @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { --uc-window-control-space: 0px; } } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } @media (-moz-gtk-csd-available) { @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement: 0) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-space: 0px; } } } } } } } } @supports selector(:has(a)) { #navigator-toolbox:has(#toolbar-menubar[autohide="false"]) { --uc-window-drag-space-pre: 0px; --uc-window-control-space: 0px; } } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( "userChrome.hidden.tabbar" ) { @supports not -moz-bool-pref("userChrome.hidden.titlebar_container") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { #navigator-toolbox { padding-top: calc( max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) ) !important; } } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { position: fixed; display: block; top: 0; right: 0; z-index: 1; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { margin-block: 10px; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container { left: 0; right: unset !important; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } :root[sizemode="normal"][tabsintitlebar] #titlebar, :root[sizemode="maximized"][tabsintitlebar] #titlebar { appearance: none !important; } .browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } } } @media (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; } #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; min-height: 0 !important; max-height: 0 !important; } :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { #navigator-toolbox { padding-top: calc( max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) ) !important; } } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { position: fixed; display: block; top: 0; right: 0; z-index: 1; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { margin-block: 10px; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container { left: 0; right: unset !important; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } :root[sizemode="normal"][tabsintitlebar] #titlebar, :root[sizemode="maximized"][tabsintitlebar] #titlebar { appearance: none !important; } .browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } } } @media (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; } #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; min-height: 0 !important; max-height: 0 !important; } :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { #navigator-toolbox { padding-top: calc( max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) ) !important; } } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { position: fixed; display: block; top: 0; right: 0; z-index: 1; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { margin-block: 10px; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container { left: 0; right: unset !important; } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } :root[sizemode="normal"][tabsintitlebar] #titlebar, :root[sizemode="maximized"][tabsintitlebar] #titlebar { appearance: none !important; } .browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } } } @media (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; } #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; min-height: 0 !important; max-height: 0 !important; } :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { #navigator-toolbox { padding-top: calc( max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) ) !important; } } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { position: fixed; display: block; top: 0; right: 0; z-index: 1; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { margin-block: 10px; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container { left: 0; right: unset !important; } } @media (-moz-gtk-csd-available) { @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } :root[sizemode="normal"][tabsintitlebar] #titlebar, :root[sizemode="maximized"][tabsintitlebar] #titlebar { appearance: none !important; } .browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } } } /* At Activated Menubar */ } @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; } #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { transition-delay: 0s !important; } } @media screen and (max-width: 1100px) { @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } } @media screen and (max-width: 1100px) { @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; min-height: 0 !important; max-height: 0 !important; } :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } } } @media screen and (max-width: 1100px) { :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } } @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } } } } @media screen and (min-width: 1100px) { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { #navigator-toolbox { padding-top: calc( max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) ) !important; } } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { position: fixed; display: block; top: 0; right: 0; z-index: 1; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { margin-block: 10px; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container { left: 0; right: unset !important; } } @media (-moz-gtk-csd-available) { @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } :root[sizemode="normal"][tabsintitlebar] #titlebar, :root[sizemode="maximized"][tabsintitlebar] #titlebar { appearance: none !important; } .browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } } } @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; } #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; min-height: 0 !important; max-height: 0 !important; } :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Titlebar Button Box */ :root { --uc-titlebar-padding: 0px; } #navigator-toolbox { padding-top: var(--uc-titlebar-padding) !important; } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { #navigator-toolbox { padding-top: calc( max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) ) !important; } } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { position: fixed; display: block; top: 0; right: 0; z-index: 1; } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { margin-block: 10px; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container { left: 0; right: unset !important; } } @media (-moz-gtk-csd-available) { @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { margin-top: calc(-1 * var(--uc-titlebar-padding)); } :root[sizemode="normal"][tabsintitlebar] #titlebar, :root[sizemode="maximized"][tabsintitlebar] #titlebar { appearance: none !important; } .browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #toolbar-menubar:not([autohide="true"]) { visibility: visible !important; height: 0; } } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } } } @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; } #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; min-height: 0 !important; max-height: 0 !important; } :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { visibility: collapse !important; } } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } } } } } } @supports not -moz-bool-pref("userChrome.navbar.as_sidebar") { /*= Navbar - Padding for window controls =====================================*/ /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ #nav-bar { border-inline-style: solid !important; border-inline-color: transparent; } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-control-space) !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-control-space) !important; } } } } } } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement: 0) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-control-space) !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-control-space) !important; } } } } } } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } } } } } @media (-moz-gtk-csd-available) { @media (-moz-gtk-csd-reversed-placement) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } } } } } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls { right: unset; } } } } } /*= Tab Bar - Show only current tab ==========================================*/ @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root:not([tabsintitlebar="true"]) #tabbrowser-tabs, #scrollbutton-up, #scrollbutton-down, .titlebar-spacer[type="pre-tabs"], spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), .tabbrowser-tab:not([selected="true"]), .tabbrowser-tab[selected="true"] .tab-background, .tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), .tabbrowser-tab[selected="true"] .tab-close-button, #tabs-newtab-button { display: none !important; } .tabbrowser-tab[selected="true"] { -moz-window-dragging: drag; --tab-max-width: 100vw; min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-window-control-space)) !important; max-width: var(--tab-max-width) !important; margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important; } .tabbrowser-tab[selected="true"][pinned="true"] { flex: 100; -moz-box-flex: 100; max-width: var(--tab-max-width) !important; } .tabbrowser-tab[selected="true"] .tab-label-container { margin-inline: 0 !important; } .tab-content { margin-inline: auto; width: 100%; } /* Pinned */ #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; } #tabbrowser-tabs { --tab-overflow-pinned-tabs-width: 0 !important; padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ } .tab-throbber[pinned], .tab-icon-pending[pinned], .tab-icon-image[pinned], .tab-sharing-icon-overlay[pinned], .tab-icon-overlay[pinned] { margin-inline-end: 5.5px; } .tab-label-container[pinned] { width: unset !important; } /* Padding */ @supports not -moz-bool-pref("userChrome.centered.tab") { #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } @supports -moz-bool-pref("userChrome.centered.tab") { @supports -moz-bool-pref("userChrome.centered.tab.label") { #tabbrowser-arrowscrollbox { margin-inline: 2px !important; } :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } } } @supports -moz-bool-pref("browser.tabs.tabmanager.enabled") { :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, :root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button { display: flex !important; display: -moz-box !important; } } } /*= Tab Bar - Multi Row ======================================================*/ @supports -moz-bool-pref("userChrome.tabbar.multi_row") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ :root { --uc-multirow-tabbar-rows: 3; --uc-multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */ } #tabbrowser-tabs { min-height: unset !important; padding-inline-start: 0px !important; } @-moz-document url("chrome://browser/content/browser.xhtml") { #scrollbutton-up ~ spacer, #scrollbutton-up, #scrollbutton-down { display: var(--scrollbutton-display-model, initial); } scrollbox[part][orient="horizontal"] { display: flex; flex-wrap: wrap; overflow-y: auto; max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); } } .scrollbox-clip[orient="horizontal"], #tabbrowser-arrowscrollbox { overflow: -moz-hidden-unscrollable; display: block; --scrollbutton-display-model: none; } #tabbrowser-tabs .tabbrowser-tab[pinned] { position: static !important; margin-inline-start: 0px !important; } .tabbrowser-tab[fadein]:not([pinned]) { flex-grow: var(--uc-multirow-tab-dynamic-width); } .tabbrowser-tab > stack { width: 100%; height: 100%; } /* remove bottom margin so it doesn't throw off row height computation */ #tabs-newtab-button { margin-bottom: 0 !important; } #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { display: flex !important; display: -moz-box !important; } #alltabs-button, :root:not([customizing]) #TabsToolbar #new-tab-button, #tabbrowser-arrowscrollbox > spacer, .tabbrowser-tab::after { display: none !important; } } /*= Tab Bar - Scollmode disabled =============================================*/ @supports -moz-bool-pref("userChrome.tabbar.unscroll") { /* Disable scrollbox */ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { overflow: -moz-hidden-unscrollable !important; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) { /* Set minimum width below which tabs will not shrink */ --tab-min-width: 16px; container-type: inline-size; container-name: backgroundTab; } @container backgroundTab (max-width: 46px) { #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) .tab-content { --inline-tab-padding: 0px; justify-self: center; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) .tab-icon-stack > * { margin-inline-end: 0 !important; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) .tab-label-container, #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]):hover .tab-close-button { visibility: collapse !important; } } #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox-periphery { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); } #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { z-index: 2 !important; } #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { padding-inline-end: calc( 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 ) !important; } } /*= Tab Bar - Fill width tab =================================================*/ @supports -moz-bool-pref("userChrome.tabbar.fill_width") { /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ .tabbrowser-tab[fadein]:not([style^="max-width"]) { --tab-max-width: 100vw; max-width: var(--tab-max-width) !important; } } /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; margin-bottom: 0px !important; } .tab-content { margin-top: var(--tab-block-margin); } .tab-stack { margin-top: 0px !important; margin-bottom: 0px !important; } /* Remove line at Toolbar's top */ #tabbrowser-tabs { z-index: 1 !important; } @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { #TabsToolbar:not([multibar]) { overflow: clip; /* Prevent toolbar area over */ } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack { /* Temporary solution for compatibility #513 */ overflow-y: clip; } } /*= Selected Tab =============================================================*/ /*= Selected Tab - Color like toolbar ========================================*/ @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { :root:not(:-moz-lwtheme) { /* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */ --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ --tab-selected-bgimage: unset !important; /* Above FF v101 */ } #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme { /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) */ background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } } /*= Multi Selected Color - More Contrast =====================================*/ @supports -moz-bool-pref("userChrome.tab.multi_selected") { #TabsToolbar { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); } #TabsToolbar[brighttext] { --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); } #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]) { /* Original: background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); background-position: 0 0, 0 0, right top; background-repeat: repeat-x, repeat-x, no-repeat; background-size: auto 100%, auto 100%, auto auto; */ background-attachment: scroll, fixed !important; background-color: transparent !important; background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)), var(--lwt-header-image, none) !important; background-position: 0 0, right top !important; background-repeat: repeat-x, no-repeat !important; background-size: auto 100%, auto auto !important; } @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background[multiselected="true"] { outline: none !important; } } @supports not -moz-bool-pref("userChrome.tab.connect_to_window") { /* Backport from FF 99 */ .tab-background[multiselected="true"] { outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); outline-offset: -1px; } .tab-background[multiselected="true"][selected="true"] { outline-width: 2px; outline-offset: -2px; } } } /*= Selected Tab - Box Shadow ================================================*/ @supports -moz-bool-pref("userChrome.tab.box_shadow") { #TabsToolbar { --uc-tab-shadow-color: var( --tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"]:not(:focus), :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { --uc-tab-shadow-color: var(--toolbar-color); } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); filter: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { filter: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); } } /*= Selected Tab - Bottom Rounded Corner =====================================*/ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #TabsToolbar { --uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --uc-tab-corner-padding: 0px; --uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding)); --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { /* Box */ display: block; position: absolute; z-index: 1; bottom: 0; /* Shape */ width: var(--uc-tab-corner-rounding); height: 100%; /* Color */ fill: transparent; stroke: transparent; -moz-context-properties: fill, stroke; /* Image */ background-size: var(--uc-tab-corner-rounding); background-repeat: no-repeat; background-position-y: bottom; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { content: ""; } } @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { /* Based on tab background background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); defaults background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); */ fill: var( --lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) ) !important; } } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { left: var(--uc-tab-corner-position); background-image: var(--uc-tab-corner-left-side-svg); } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { right: var(--uc-tab-corner-position); background-image: var(--uc-tab-corner-right-side-svg); } :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))); } @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { content: ""; } } :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } :root:not([customizing="true"]) .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 11%, transparent); } @supports -moz-bool-pref("userChrome.tab.multi_selected") { :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 65%, transparent); opacity: 0.3; } } :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme::before, :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme::after { /* As Selected Tab - Box Shadow */ stroke: var(--toolbar-color); } @media (-moz-gtk-csd-available) { :root:not([customizing="true"]) { /* Fill color for GTK */ } :root:not([customizing="true"]):not([lwtheme="true"]) .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, :root:not([customizing="true"]):not([lwtheme="true"]) .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { /* As GTK Toolbar's background-color + background-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); stroke: transparent; opacity: 1; } :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[visuallyselected] .tab-background::after { stroke: transparent; } } } } } } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.australis" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #TabsToolbar { --uc-tab-corner-height: calc(var(--tab-min-height) + 1px); --uc-tab-corner-size: var(--uc-tab-corner-height); --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); --uc-tab-corner-bgimage: none; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chrome.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); --uc-tab-corner-size: 16px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); --uc-tab-corner-size: 14px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab { padding-inline: 0 !important; overflow-clip-margin: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab .tab-background { --tab-border-radius: 0px; margin-inline: var(--uc-tab-corner-half-size) !important; position: relative; } } @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab[visuallyselected] { padding-inline: 0 !important; overflow-clip-margin: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab[visuallyselected] .tab-background { --tab-border-radius: 0px; margin-inline: var(--uc-tab-corner-half-size) !important; position: relative; } .tabbrowser-tab[visuallyselected] .tab-background::before, .tabbrowser-tab[visuallyselected] .tab-background::after { content: ""; } } .tabbrowser-tab .tab-background::before, .tabbrowser-tab .tab-background::after { /* Box */ display: block; position: absolute; z-index: -1; bottom: -1px; /* Shape */ width: var(--uc-tab-corner-size); height: var(--uc-tab-corner-height); /* Color */ fill: transparent; -moz-context-properties: fill; /* Image */ background-size: cover, auto auto; background-repeat: no-repeat, no-repeat; background-position: bottom, right top; background-attachment: scroll, fixed; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab .tab-background::before, .tabbrowser-tab .tab-background::after { content: ""; } } @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { .tabbrowser-tab .tab-background::before, .tabbrowser-tab .tab-background::after { /* Based on tab background background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); defaults background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); */ fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; } } .tabbrowser-tab .tab-background::before { right: 100%; background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-left-side-clipPath); } .tabbrowser-tab .tab-background::after { left: 100%; background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-right-side-clipPath); } .tabbrowser-tab:has(+ .tabbrowser-tab[visuallyselected]) .tab-background::after { --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped); } .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before { --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped); } .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { --uc-tab-corner-bgimage: var(--lwt-header-image, none); } .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 11%, transparent); } @supports -moz-bool-pref("userChrome.tab.multi_selected") { .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before, .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after { fill: var(--uc-multiselected-tab-bgcolor); } } #tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { --uc-tab-corner-bgimage: none; } @media (-moz-gtk-csd-available) { /* Fill color for GTK */ @supports -moz-bool-pref("userChrome.tab.box_shadow") { :root:not([lwtheme="true"]) .tabbrowser-tab { --uc-tab-shadow-color: rgba(0, 0, 0, 0.4); } } :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background { background-clip: content-box; } :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { /* As GTK Toolbar's background-color + background-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); fill: rgba(255, 255, 255, 0.075); } @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { fill: rgba(255, 255, 255, 0.15); } } } #tabbrowser-tabs[positionpinnedtabs], #tabbrowser-tabs:not([overflow]) .tabbrowser-tab:first-of-type, #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { margin-left: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab:last-of-type { margin-right: var(--uc-tab-corner-half-size) !important; } } } /*= Selected Tab - Photon like contextline ===================================*/ @supports -moz-bool-pref("userChrome.tab.photon_like_contextline") or -moz-bool-pref("userChrome.tab.static_separator") or -moz-bool-pref( "userChrome.tab.bar_separator" ) { :root[lwtheme-mozlightdark] #tabbrowser-tabs, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { --tab-line-color: rgb(10, 132, 255) !important; } @media (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) #tabbrowser-tabs { --tab-line-color: Highlight !important; /* -moz-accent-color */ } } } @supports -moz-bool-pref("userChrome.tab.photon_like_contextline") { .tab-context-line { display: inline-flex !important; display: -moz-inline-box !important; height: 2px !important; border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { /* Photon like color Default: var(--tab-line-color, rgb(10, 132, 255)) Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) FF v96+ replace by var(--lwt-tab-line-color) */ background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important; } .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; transform: none !important; } #TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { background-color: rgba(255, 255, 255, 0.2) !important; } /* Prevent identity color flashing */ .tabbrowser-tab[usercontextid] .tab-context-line { --identity-icon-color: none; } :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { /* As Selected Tab - Box Shadow */ stroke: var(--toolbar-color) !important; } /* Animation */ .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { opacity: 0 !important; transform: scaleX(0) !important; } @media (prefers-reduced-motion: no-preference) { .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */ } } /* Remove side's background color border */ #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { --tabs-border-color: rgba(0, 0, 0, 0.3) !important; box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */ } #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background { box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ } /* Container Tab */ .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { margin: unset !important; } } /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @supports -moz-bool-pref("userChrome.tab.dynamic_separator") { #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; --tab-separator-position-x: -2.5px; --tab-separator-position-y: calc(-50% + 1px); } #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) { --start-tab-separator-position-x: 1.5px; --end-tab-separator-position-x: -1.5px; --tab-separator-position-x: 2.5px; } #tabbrowser-arrowscrollbox-periphery { position: relative; } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { .tab-stack::before, #tabs-newtab-button::before { /* Box Model */ content: ""; display: block; position: absolute; /* Position */ top: 50%; /* Bar shape */ width: 1px; height: 20px; /* Bar Color */ opacity: 0; background-color: var(--toolbarseparator-color); /* More position */ transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { .tab-stack::before, #tabs-newtab-button::before { background-color: var(--tabs-border-color); } } #tabs-newtab-button::before { left: calc(50% - (8px + var(--toolbarbutton-inner-padding))); } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { /* Box Model */ content: ""; display: block; position: absolute; /* Position */ top: 50%; /* Bar shape */ width: 1px; height: 20px; /* Bar Color */ opacity: 0; background-color: var(--toolbarseparator-color); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { background-color: var(--tabs-border-color); } } .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } .tabbrowser-tab:last-of-type .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before { opacity: var(--tab-separator-opacity); } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } } } } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { opacity: var(--tab-separator-opacity); } } #navigator-toolbox:not([movingtab]) .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-stack::before, #navigator-toolbox:not([movingtab]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-stack::before { opacity: 0 !important; } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab:last-of-type:is([visuallyselected], [multiselected], :hover) ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { opacity: 0 !important; } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-stack::before { opacity: 0 !important; } :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { margin-left: 2px; } :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { margin-left: 1px; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabs-newtab-button::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):last-of-type .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } } /* Latest Tab & New tab margin */ #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:last-of-type { margin-inline-end: 1px !important; } } /*= Unselected Tab - Static Separator ========================================*/ @supports -moz-bool-pref("userChrome.tab.static_separator") { #TabsToolbar { --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent); } .tab-stack::before, .tabbrowser-tab:last-of-type .tab-stack::after { content: ""; } .tab-stack::before, .tab-stack::after { /* Box Model */ display: block; position: absolute; /* Position */ top: 50%; transform: translateY(-50%); z-index: 1; /* Bar shape */ width: 0px; height: 100%; /* Bar Color */ border-right: 1px solid var(--toolbarseparator-color); } .tab-stack::after { right: 0; } @supports -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { .tabbrowser-tab[visuallyselected] .tab-stack::before, .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-stack::before, .tabbrowser-tab[visuallyselected] .tab-stack::after { --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); } } @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { .tabbrowser-tab[visuallyselected] .tab-stack::before, .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-stack::before, .tabbrowser-tab[visuallyselected] .tab-stack::after { opacity: 0; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { .tab-stack::before, .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } } /*= Unselected Tab - Bar Separator ===========================================*/ @supports -moz-bool-pref("userChrome.tab.bar_separator") { .tab-stack::before { /* Box Model */ content: ""; display: block; position: absolute; /* Position */ top: 50%; left: 0%; transform: translateX(calc((var(--inline-tab-padding) - 5px) / 2)) translateY(calc(-50% + var(--tab-block-margin))); z-index: 1; /* Bar shape */ width: 3px; height: 20px; /* Bar Color */ background-color: var( --uc-bar-separator-color, var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) ); } @media (prefers-reduced-motion: no-preference) { .tab-stack::before { transition-property: opacity, background-color; transition-duration: 0.2s; transition-timing-function: var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } :root[sessionrestored] .tabbrowser-tab[busy] .tab-stack::before { --uc-bar-separator-color: currentColor; opacity: 0.7; } :root[sessionrestored] .tabbrowser-tab[busy][progress] .tab-stack::before { --uc-bar-separator-color: var(--tab-loading-fill); opacity: 1; } :root[sessionrestored] #TabsToolbar[brighttext] .tabbrowser-tab[busy][progress]:not([selected="true"]) .tab-stack::before { --uc-bar-separator-color: var(--lwt-tab-loading-fill-inactive, #84c1ff); } @supports -moz-bool-pref("userChrome.tab.unloaded") { :root[sessionrestored] .tabbrowser-tab[pending] .tab-stack::before { opacity: 0.7; } } } /*= New tab button ============================================================*/ /*= New tab button - Looks like tab ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") { #tabs-newtab-button { /* Size */ align-items: stretch !important; -moz-box-align: stretch !important; padding-top: var(--tab-block-margin) !important; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { #tabs-newtab-button { /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't override style. Therefore, we should approach it by bypass. */ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ --uc-tabs-navbar-shadow-size: 0.5px; --uc-tab-corner-rounding: 4px; /* Hardcoded */ --uc-newtab-bgcolor: transparent; /* Corner Rounding Image */ --uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); background-repeat: no-repeat; background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); background-size: var(--uc-tab-corner-rounding); /* Corner Rounding Color */ fill: var(--uc-newtab-bgcolor) !important; -moz-context-properties: fill !important; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.australis" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabs-newtab-button { --uc-newtab-position: 0px; --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); transform: translateX(var(--uc-tab-corner-half-height-reverse)); padding-inline: var(--uc-tab-corner-half-height) !important; overflow-clip-margin: var(--uc-tab-corner-half-height) !important; background-image: var(--uc-tab-corner-left-side-svg), linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), var(--uc-tab-corner-right-side-svg); background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), center bottom var(--uc-tabs-navbar-shadow-size), right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), var(--uc-tab-corner-height) var(--uc-tab-corner-height); background-origin: padding-box; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabs-newtab-button { --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); } } } } /* Corner Rounding Color */ #tabs-newtab-button:hover { --uc-newtab-bgcolor: var(--toolbarbutton-hover-background); } #tabs-newtab-button:hover:active { --uc-newtab-bgcolor: var(--toolbarbutton-active-background); } @media (-moz-windows-accent-color-in-titlebar) { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcoded for compatibility */ } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.australis" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( to left, color-mix(in srgb, AccentColorText 10%, transparent), color-mix(in srgb, AccentColorText 10%, transparent) ), var(--uc-tab-corner-right-side-svg); } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( to left, color-mix(in srgb, AccentColorText 15%, transparent), color-mix(in srgb, AccentColorText 15%, transparent) ), var(--uc-tab-corner-right-side-svg); } } } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { fill: color-mix( in srgb, -moz-accent-color-foreground 10%, transparent ) !important; /* Hardcoded for compatibility */ } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { fill: color-mix( in srgb, -moz-accent-color-foreground 15%, transparent ) !important; /* Hardcoded for compatibility */ } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.australis" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( to left, color-mix(in srgb, -moz-accent-color-foreground 10%, transparent), color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) ), var(--uc-tab-corner-right-side-svg); } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { background-image: var(--uc-tab-corner-left-side-svg), linear-gradient( to left, color-mix(in srgb, -moz-accent-color-foreground 15%, transparent), color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) ), var(--uc-tab-corner-right-side-svg); } } } } } /* '+'Icon */ #tabs-newtab-button .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.australis" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabs-newtab-button .toolbarbutton-icon { --tab-border-radius: 0px; width: unset !important; padding-inline: 0px !important; margin-inline: calc(var(--uc-tab-corner-half-height) - 7.75px) !important; background-color: transparent !important; } } /* Fix tab overlap #678 */ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { tab:where([visuallyselected="true"]) { z-index: 1; } } } /*= New tab button - Smaller button ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_smaller") { #tabs-newtab-button > .toolbarbutton-icon { --tab-border-radius: var(--toolbarbutton-border-radius); margin-left: 1px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding); } } /*= New tab button - Proton like button ======================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_proton") { :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); } } /*= Unloaded Tab - Contents Opacity ===========================================*/ @supports -moz-bool-pref("userChrome.tab.unloaded") { .tabbrowser-tab[pending] .tab-content { opacity: 0.7; } } /*= Clipped tabs =============================================================*/ /** Clipped tabs - Letters cleary *********************************************/ @supports -moz-bool-pref("userChrome.tab.letters_cleary") { #tabbrowser-tabs[closebuttons="activetab"] { --inline-tab-padding: 7px !important; /* Original: 8px */ } #tabbrowser-tabs[overflow="true"] { --inline-tab-padding: 6px !important; /* Original: 8px */ } .tab-content[pinned] { --inline-tab-padding: 10px; /* Prevent overflow pinned tab's divide line not aligned */ padding-inline: var(--inline-tab-padding) !important; } :root[uidensity="compact"] .tab-content[pinned] { --inline-tab-padding: 8px; } .tabbrowser-tab .tab-label-container { --tab-label-mask-size: 1.8em; /* Original: 2em */ } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container { --tab-label-mask-size: 30%; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container { --tab-label-mask-size: 25%; } .tabbrowser-tab[visuallyselected="true"]:not([labelendaligned]):hover .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected="true"], [labelendaligned]):hover .tab-label-container { --tab-label-mask-size: 0.9em; /* Original: 1em */ } } /** Clipped tabs - Show close button at hover *********************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { display: inline-flex !important; display: -moz-inline-box !important; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; opacity: 0; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { visibility: visible !important; opacity: 1; } @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.with_selected") { #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { visibility: collapse !important; opacity: 0; } } @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; opacity: 0; } .tabbrowser-tab:hover .tab-close-button { visibility: visible !important; opacity: 1; } @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.with_selected") { .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { visibility: collapse !important; opacity: 0; } } } /* Animate */ @media (prefers-reduced-motion: no-preference) { /* Fade out */ .tabbrowser-tab .tab-close-button { transition: opacity 0.1s var(--animation-easing-function) !important; } /* Fade in */ .tabbrowser-tab:hover .tab-close-button { transition: opacity 0.25s var(--animation-easing-function) !important; } } /* Closed Button's icon thicker */ .tabbrowser-tab .tab-content > .close-icon { list-style-image: url("../icons/dismiss-filled.svg") !important; } /* Closed Button's icon larger */ .tab-close-button { padding: 6px !important; /* Original: 7px */ } .tabbrowser-tab:not(:hover, [pinned]) > .tab-stack > .tab-content > .tab-close-button { padding-inline-start: 1px !important; /* Original: 0px */ width: 19px !important; /* Original: 17px */ } /* Closed Button's padding reduce */ #tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { margin-inline-end: calc( var(--inline-tab-padding) / -2 + 2px ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/ padding: 4px !important; /* Original: 7px */ width: 20px !important; /* Original: 24px */ height: 20px !important; /* Original: 24px */ } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button { padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { #tabbrowser-tabs { --uc-close-button-size: 24px; --uc-close-button-padding: 6px; --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); } #tabbrowser-tabs[closebuttons="activetab"] { --uc-close-button-size: 20px; --uc-close-button-padding: 4px; } .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { display: flex !important; display: -moz-box !important; order: -1 !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ width: var(--uc-close-button-size) !important; height: var(--uc-close-button-size) !important; padding: var(--uc-close-button-padding) !important; margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { display: flex !important; display: -moz-box !important; order: -1 !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ width: var(--uc-close-button-size) !important; height: var(--uc-close-button-size) !important; padding: var(--uc-close-button-padding) !important; margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { display: none !important; } } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { display: flex !important; display: -moz-box !important; order: -1 !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ width: var(--uc-close-button-size) !important; height: var(--uc-close-button-size) !important; padding: var(--uc-close-button-padding) !important; margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { margin-inline-end: var(--uc-close-button-margin) !important; } } } /** Clipped tabs - Always show tab icon ***************************************/ @supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") { .tab-icon-image:not([src], [pinned], [crashed], [busy]) { display: inline-flex !important; display: -moz-inline-box !important; } } /*= Sound Tab ================================================================*/ /*= Sound Tab - Hide Label ===================================================*/ @supports -moz-bool-pref("userChrome.tab.sound_hide_label") { @supports not -moz-bool-pref("userChrome.tab.sound_show_label") { .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { display: none !important; } } } /*= Sound Tab - Show Label ===================================================*/ @supports -moz-bool-pref("userChrome.tab.sound_show_label") { .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { display: flex !important; display: -moz-box !important; } } /*= Sound Tab - Show with Favicons ===========================================*/ @supports -moz-bool-pref("userChrome.tab.sound_with_favicons") { /* Makes the favicons always visible (also on hover) */ .tab-icon-image:not([pinned]) { opacity: 1 !important; } /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ .tabbrowser-tab { --uc-sound-tab-icon-position-x: -0.5px; } .tabbrowser-tab:-moz-locale-dir(rtl) { --uc-sound-tab-icon-position-x: 0.5px; } .tab-icon-overlay:not([crashed]), .tab-icon-overlay[pinned][crashed][selected] { /* Position */ top: 0 !important; inset-inline-end: -9px !important; z-index: 1 !important; transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px); /* Shape */ padding: 1.5px !important; border-radius: 10px !important; width: 17px !important; height: 17px !important; } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ color: currentColor !important; stroke: transparent !important; background: transparent !important; fill-opacity: 0.8 !important; opacity: 1 !important; } /* Label */ @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="ltr"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { --uc-sound-tab-label-position-x: 4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container > * { transform: translateX(var(--uc-sound-tab-label-position-x)); } } @supports -moz-bool-pref("userChrome.hidden.tab_icon") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="ltr"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { --uc-sound-tab-label-position-x: 4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container > * { transform: translateX(var(--uc-sound-tab-label-position-x)); } } } /* Animate */ @media (prefers-reduced-motion: no-preference) { .tab-icon-overlay:not([crashed]), .tab-icon-overlay[pinned][crashed][selected] { transition: 0.1s var(--animation-easing-function); } .tab-label-container > * { transition: transform 0.25s var(--animation-easing-function); } } /* None exist favicon - Size bigger */ @supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") { .tabbrowser-tab .tab-label-container[labeldirection="ltr"], .tabbrowser-tab .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { --uc-sound-tab-no-icon-position-x: -0.5px; --uc-sound-tab-no-icon-label-position-x: 3px; } .tabbrowser-tab .tab-label-container[labeldirection="rtl"], .tabbrowser-tab .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-no-icon-position-x: 0.5px; --uc-sound-tab-no-icon-label-position-x: -3px; } @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px); inset-inline-end: 0 !important; margin-inline-end: 0 !important; padding: 0 !important; } .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { opacity: 0 !important; /* Favicon hidden */ } .tabbrowser-tab:not([image]):not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container > * { transform: translateX(var(--uc-sound-tab-no-icon-label-position-x)); } } @supports -moz-bool-pref("userChrome.hidden.tab_icon") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { .tabbrowser-tab .tab-icon-overlay:not([pinned], [sharing], [crashed]) { transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px); inset-inline-end: 0 !important; margin-inline-end: 0 !important; padding: 0 !important; } .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { opacity: 0 !important; /* Favicon hidden */ } .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container > * { transform: translateX(var(--uc-sound-tab-no-icon-label-position-x)); } } } } /* Busy - Show */ .tab-throbber[busy], .tab-icon-pending[busy] { opacity: 1 !important; } /* Busy - Overlay Position */ .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px); } .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] { inset-inline-end: -9px !important; margin-inline-end: 9.5px !important; padding: 1.5px !important; } /* Hover */ .tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: var(--toolbar-bgcolor, white) !important; stroke: var(--lwt-tab-text, var(--toolbar-color)) !important; background-color: var(--lwt-tab-text, var(--toolbar-color)) !important; fill-opacity: 0.95 !important; } #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover, #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover, #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: var(--toolbar-bgcolor, black) !important; } .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover { padding: 0 !important; } } /*= PictureInPicture Tab - Show PIP Icon =====================================*/ @supports -moz-bool-pref("userChrome.tab.pip") { #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after, #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after { content: ""; } .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after { /* Shape */ display: inline-flex !important; display: -moz-inline-box !important; width: 14px; height: 14px; background-size: 14px; order: 1 !important; -moz-box-ordinal-group: 1 !important; /* Color */ fill: currentColor; opacity: 0.8; -moz-context-properties: fill; /* Icon */ background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); } .tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after { opacity: 0.95; } /* Close Button's position */ .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { order: 2 !important; -moz-box-ordinal-group: 2 !important; } #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { margin-left: 7px !important; } #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]):hover .tab-close-button { margin-left: 2px !important; } } /*= Container Tab - Color line at icon's bottom ==============================*/ @supports -moz-bool-pref("userChrome.tab.container") { @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { .tab-context-line { display: none; } } #tabbrowser-tabs { --uc-container-position-x: 9px; --uc-container-position-y-default: 11.5px; --uc-container-position-y: calc(50% + var(--uc-container-position-y-default)); --uc-titlechanged-container-position-x: 32%, 50%, 70%; } #tabbrowser-tabs:-moz-locale-dir(rtl) { --uc-container-position-x: -9px; } :root[uidensity="compact"] #tabbrowser-tabs { --uc-container-position-y-default: 10.5px; --uc-titlechanged-container-position-x: 30%, 50%, 70%; } :root[uidensity="touch"] #tabbrowser-tabs { --uc-container-position-y-default: 12.5px; } .tab-content:not([titlechanged])::before { /* Box Model */ content: ""; display: block; position: absolute; top: 50%; transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); width: 25%; opacity: 0.75; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 30px); opacity: 1; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); } /* Animate */ @media (prefers-reduced-motion: no-preference) { .tab-content:not([titlechanged])::before { transition: 0.15s var(--animation-easing-function); transition-property: width, opacity; } } /* Pinned Tab */ .tabbrowser-tab[pinned] .tab-content::before { transform: translateY(var(--uc-container-position-y)); width: 16px; } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { opacity: 0; } } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, var(--identity-icon-color), var(--identity-icon-color) 2px, transparent 2px ); background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } /* Pinned Tab - Titlechanged & soundplaying */ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } } /*= Crashed Tab - Don't show Favicons ========================================*/ @supports -moz-bool-pref("userChrome.tab.crashed") { .tab-icon-image[crashed] { display: none !important; } } /** Nav Bar UI ****************************************************************/ /*= Nav Bar - Navbar comabine with sidebar===================================*/ @supports -moz-bool-pref("userChrome.navbar.as_sidebar") { :root { --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); --uc-urlbar-container-height: 36px; --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); } #nav-bar, #sidebar-box, #sidebar-header, #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } #nav-bar, #wrapper-urlbar-container, #urlbar-container { position: absolute !important; } #nav-bar-customization-target { justify-content: space-between; -moz-box-pack: justify; } #nav-bar { z-index: 1; margin-top: calc( var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block) ); overflow-y: visible !important; background: none !important; box-shadow: none !important; -moz-window-dragging: drag; } @supports selector(:has(a)) { :root:has(#sidebar-box[hidden="true"]) #nav-bar { margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; opacity: 0; visibility: hidden; } :root:has(#sidebar-box[positionend="true"]) #nav-bar { right: 0; } } @media (prefers-reduced-motion: no-preference) { @supports -moz-bool-pref("userChrome.decoration.animate") { @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { #nav-bar { transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear, margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; will-change: margin-inline-start, opacity, visibility, margin-top; } :root:has(#sidebar-box[hidden="true"]) #nav-bar, #navigator-toolbox:is(:hover, :focus-within) #nav-bar { transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; } } @supports -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { #nav-bar { transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; will-change: margin-top; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar { transition-delay: 0s !important; } } } } #urlbar-container { top: var(--uc-urlbar-margin-top); min-width: calc(var(--uc-sidebar-activate-width) - 2 * var(--toolbarbutton-inner-padding)) !important; margin-inline: auto !important; /* Original: var(--urlbar-margin-inline) */ left: 50%; transform: translateX(-50%); } #customizableui-special-spring1, #customizableui-special-spring2, #wrapper-customizableui-special-spring1, #wrapper-customizableui-special-spring2 { display: none !important; } #sidebar-header { margin-top: var(--uc-navbar-sideblock-height) !important; -moz-window-dragging: drag; } :root[customizing="true"] #wrapper-urlbar-container { left: 50%; } :root[customizing="true"] #browser[collapsed="true"] { visibility: visible !important; } :root[customizing="true"] #browser[collapsed="true"] #appcontent { visibility: collapse; } :root[customizing="true"] #browser[collapsed="true"] #sidebar-box { position: absolute; height: 100%; } :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { right: 0; } :root[customizing="true"] #customization-container { --uc-customization-conatiner-margin: var(--uc-navbar-height-default); width: calc(100% - var(--uc-sidebar-activate-width)); height: calc(100% - var(--uc-customization-conatiner-margin)); } @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[customizing="true"] #customization-container { --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); } } :root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { margin-inline-start: var(--uc-sidebar-activate-width); } :root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { margin-inline-end: var(--uc-sidebar-activate-width); } :root[customizing="true"] #customization-palette-container, :root[customizing="true"] #customization-panel-container { flex-shrink: 0.5 !important; } } /** Bookark Bar UI ************************************************************/ @supports -moz-bool-pref("userChrome.bookmarkbar.multi_row") { #PersonalToolbar { --uc-multirow-bookmark-rows: 3; --uc-multirow-bookmark-row-margin: 2px; max-height: none !important; } #PlacesToolbar > hbox { display: block; width: 100vw; } #PlacesToolbarItems { display: flex; flex-wrap: wrap; overflow-y: auto; scroll-snap-type: y mandatory; max-height: calc( var(--uc-multirow-bookmark-rows) * ( var(--uc-bm-height, calc(20px + 2 * var(--bookmark-block-padding, 4px))) + 2 * var(--uc-multirow-bookmark-row-margin) ) ) !important; } #PlacesChevron { display: none; } #PlacesToolbarItems > .bookmark-item { scroll-snap-align: start; margin-block: var(--uc-multirow-bookmark-row-margin) !important; } } /** Url View UI ***************************************************************/ /*= Url Bar - Icon box as Separator ==========================================*/ @supports -moz-bool-pref("userChrome.urlbar.iconbox_with_separator") { #identity-box { /* separator */ position: relative; } #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open]), #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open]), #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open]) { /* remove background from urlbar box */ background-color: transparent !important; } #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open])::after, #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open])::after, #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open])::after { opacity: 0.375; } #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button::after, #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button::after, #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button::after { /* Box Model */ content: ""; position: absolute; display: block; /* Position */ right: 0; top: 50%; transform: translateY(-50%); /* Bar shape */ width: 1px; height: 1em; /* Bar Color */ opacity: 0; background-color: currentColor; } #identity-box[pageproxystate="valid"] #identity-icon-label { /* increase space between icon and text - as identity box padding */ padding-inline-start: 8px !important; } @media (prefers-reduced-motion: no-preference) { .identity-box-button::after { transition: opacity 0.2s var(--animation-easing-function); } } } /*= Url View - Share Layout ==================================================*/ @supports -moz-bool-pref("userChrome.urlView.as_commandbar") or -moz-bool-pref("userChrome.urlView.full_width_padding") { .urlbarView { --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); margin-inline: 0 !important; /* Original: calc(5px + var(--urlbar-container-padding)) */ } } /*= Url View - Looks like Launcher ===========================================*/ @supports -moz-bool-pref("userChrome.urlView.as_commandbar") { /* Init & Base Layout */ .urlbarView { --urlbarView-favicon-width: 32px; /* Original: 16px */ --uc-urlView-typeIcon-size: 18px; --uc-urlView-icon-size-differ: 14px; --uc-searchBar-icon-size: 20px; --uc-searchBar-button-size: 32px; --uc-urlView-row-padding: 8px; --uc-urlView-row-bottom: 2px; --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); position: fixed !important; left: 50vw; transform: translateX(-50%); top: 12vh !important; width: calc(100vw - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; /* paddding as margin */ /* background */ background-color: var(--toolbar-field-focus-background-color) !important; background-clip: border-box; border: 1px solid var(--arrowpanel-border-color) !important; border-radius: var(--toolbarbutton-border-radius) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); } @supports not -moz-bool-pref("userChrome.urlView.full_width_padding") { .urlbarView { padding-inline: var(--uc-urlView-padding) !important; } } .urlbarView-body-inner { border-top: none !important; } /* Big icons */ :root[uidensity="compact"] .urlbarView { --urlbarView-favicon-width: 24px; /* Original: 16px */ --uc-urlView-typeIcon-size: 16px; --uc-urlView-icon-size-differ: 8px; --uc-searchBar-icon-size: 18px; --uc-searchBar-button-size: 30px; } :root[uidensity="touch"] .urlbarView { --uc-urlView-row-padding: 17px; --uc-urlView-row-bottom: 11px; } .urlbarView-row:not([type="tip"], [type="dynamic"]) { position: relative; min-height: calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) !important; } .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-row-inner { height: var(--urlbarView-favicon-width) !important; } .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-favicon { position: absolute; top: 50%; transform: translateY(-50%); } .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-title { padding-inline-start: calc( var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width) ) !important; } .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-type-icon { width: var(--uc-urlView-typeIcon-size) !important; height: var(--uc-urlView-typeIcon-size) !important; margin-inline-start: calc( var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding) ) !important; /* Original: 8px */ bottom: var(--uc-urlView-row-bottom); } .urlbarView-row[dynamicType="quickactions"] .urlbarView-favicon-img { width: var(--urlbarView-favicon-width) !important; /* Original: 16px */ height: var(--urlbarView-favicon-width) !important; /* Original: 16px */ } .urlbarView-row[dynamicType="quickactions"] .urlbarView-label { font-size: 0.95em !important; /* Original: 11px */ } :root[uidensity="touch"] .urlbarView-row { padding-block: 6px !important; } :root[uidensity="touch"] .urlbarView-row-inner { padding-block: 11px !important; } #urlbar .searchbar-engine-one-off-item { min-width: var(--uc-searchBar-button-size) !important; /* Original: 28px */ height: var(--uc-searchBar-button-size) !important; } #urlbar .searchbar-engine-one-off-item > .button-box > .button-icon { width: var(--uc-searchBar-icon-size) !important; /* Original: 16px */ height: var(--uc-searchBar-icon-size) !important; } } /*= Url View - Full Width Pddding ============================================*/ @supports -moz-bool-pref("userChrome.urlView.full_width_padding") { .urlbarView { --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); } @supports not -moz-bool-pref("userChrome.urlView.as_commandbar") { .urlbarView { --uc-urlView-full-width-padding: var(--uc-urlView-padding); width: 100% !important; } } #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { border-color: transparent !important; } #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before { content: ""; position: absolute; border-top: 1px solid var(--autocomplete-popup-separator-color); transform: translate(-50%, -1px); left: 50%; } #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before, .urlbarView .search-one-offs { width: calc(100% + 2px - var(--uc-urlView-padding-double)) !important; } .urlbarView .search-one-offs { margin-inline: var(--uc-urlView-full-width-padding) !important; } .urlbarView-row-inner { padding-inline: calc(var(--uc-urlView-full-width-padding) + var(--urlbarView-item-inline-padding)) !important; } } /*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { #urlbar:not([breakout-extend="true"]) #pageActionButton { display: block !important; visibility: visible !important; } } /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { .urlbarView-type-icon { min-width: 16px !important; height: 16px !important; margin-block: 0 !important; margin-inline-start: 0 !important; } .urlbarView-favicon { margin-inline-start: 20px !important; } } /*= Url View - Go button when typing =========================================*/ @supports -moz-bool-pref("userChrome.urlView.go_button_when_typing") { #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { display: block !important; } } /*= Url View - Item Focus Border =============================================*/ @supports -moz-bool-pref("userChrome.urlView.focus_item_border") { .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] { box-shadow: 3px 0 var(--toolbar-field-focus-border-color) inset !important; } } /** Panel UI ******************************************************************/ @supports -moz-bool-pref("userChrome.panel.remove_strip") { #appMenu-fxa-separator { --panel-separator-zap-gradient: none; /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */ } } @supports -moz-bool-pref("userChrome.panel.full_width_separator") { /* Full width separators */ :root { /* Original --panel-separator-margin-vertical: 4px; --panel-separator-margin-horizontal: 8px; --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); */ --panel-separator-margin-horizontal: 0 !important; } } @supports -moz-bool-pref("userChrome.panel.full_width_padding") { /* Original --arrowpanel-menuitem-margin: 0 8px; --arrowpanel-menuitem-padding-block: 8px; --arrowpanel-menuitem-padding-inline: 8px; --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); */ :root, :root:is([uidensity="compact"], [uidensity="touch"]) { --arrowpanel-menuitem-margin: 0 !important; --arrowpanel-menuitem-margin-inline: 0 !important; --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; } } /** Sidebar UI ****************************************************************/ @supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") or -moz-bool-pref( "userChrome.navbar.as_sidebar" ) { :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ --uc-sidebar-width: 40px; --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-size: 1px; --uc-sidebar-shadow-width: 0px; --uc-sidebar-shadow-position: var(--uc-sidebar-shadow-position-default); --uc-sidebar-shadow-position-default: calc(var(--uc-sidebar-shadow-size) + var(--uc-sidebar-shadow-width)); --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ } #sidebar-splitter { display: none !important; } } @supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { --uc-sidebar-shadow-color: #28282f; z-index: 1 !important; position: relative !important; box-shadow: var(--uc-sidebar-shadow-position) 0px 15px -10px var(--uc-sidebar-shadow-color); } #sidebar-box[positionend="true"] { --uc-sidebar-shadow-position: calc(-1 * var(--uc-sidebar-shadow-position-default)); } #sidebar { display: block; } } @supports -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box[positionend="true"] { direction: rtl; } #sidebar-header, #sidebar { background-color: var(--sidebar-background-color) !important; color: var(--sidebar-text-color) !important; overflow: hidden; } #sidebar-header { font-size: unset !important; } #sidebar-header > #sidebar-switcher-target { font-size: 1.333em; } @supports not -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box, #sidebar-header, #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } #sidebar-box { margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; will-change: padding-inline; --uc-sidebar-shadow-width: var(--uc-sidebar-activate-width); } #sidebar-box:not([hidden="true"]) { padding-inline-start: var(--uc-sidebar-activate-width) !important; } @media (prefers-reduced-motion: no-preference) { #sidebar-box { transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, box-shadow 0s linear, visibility 0s linear !important; } } } } /** Combined UI ***************************************************************/ /*= Combined - At URL bar ====================================================*/ @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref( "userChrome.combined.nav_button.home_button" ) or -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref( "userChrome.combined.urlbar.home_button" ) or -moz-bool-pref("userChrome.combined.urlbar.reload_button") { #nav-bar { --uc-combined-circlebutton-background: hsla(0, 100%, 100%, 0.5); --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background); --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background); --uc-combined-circlebutton-border-color: hsla(240, 5%, 5%, 0.3); --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary)); --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); } #nav-bar[brighttext] { --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background); --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background); --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent); } #nav-bar-customization-target > * { order: 1; -moz-box-ordinal-group: 1; } #nav-bar-customization-target > #urlbar-container { order: 5; -moz-box-ordinal-group: 5; } #nav-bar-customization-target > #urlbar-container ~ * { order: 7; -moz-box-ordinal-group: 7; } } @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #urlbar-container { /* var(--urlbar-margin-inline) */ margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important; } #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { padding-left: var(--uc-urlbar-combined-margin, 0px); } @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #urlbar-container { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #urlbar-container { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); } @supports -moz-bool-pref("userChrome.combined.nav_button") { @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #urlbar-container { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); } } } } } @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { @supports -moz-bool-pref("userChrome.autohide.forward_button") { #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar:not([breakout][breakout-extend]) { padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding)); } } @media (prefers-reduced-motion: no-preference) { #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar { transition-property: margin-left, padding-left; transition-duration: 0.5s; transition-timing-function: var(--animation-easing-function); } } } } @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or (not -moz-bool-pref("userChrome.combined.sub_button.as_normal")) or (-moz-bool-pref("userChrome.combined.nav_button") and -moz-bool-pref("userChrome.combined.urlbar.home_button")) { #nav-bar-customization-target > #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); z-index: 2; position: relative; } #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ padding-block: var(--urlbar-icon-padding) !important; height: var(--uc-urlbar-icon-size) !important; } @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #forward-button { padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { @supports not -moz-bool-pref("userChrome.combined.sub_button.none_background") { @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); border-color: hsla(240deg, 5%, 5%, 0.35); } #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240deg, 5%, 5%, 0.4); } #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40% ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } } } @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); border-color: hsla(240deg, 5%, 5%, 0.35); } #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240deg, 5%, 5%, 0.4); } #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40% ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } } } } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { #nav-bar-customization-target > #forward-button { margin-inline-start: var(--uc-forward-button-margin) !important; } } @supports -moz-bool-pref("userChrome.autohide.forward_button") { #nav-bar-customization-target > #forward-button:not([disabled="true"]) { margin-inline-start: var(--uc-forward-button-margin) !important; } } } #nav-bar-customization-target > #back-button { position: relative; } @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #back-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); border-color: hsla(240deg, 5%, 5%, 0.35); } #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240deg, 5%, 5%, 0.4); } #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40% ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } } } @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #back-button { z-index: 2; } @supports not -moz-bool-pref("userChrome.combined.sub_button.as_normal") { #nav-bar-customization-target > #back-button { margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; } @supports not -moz-bool-pref("userChrome.combined.sub_button.none_background") { #nav-bar-customization-target > #back-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); border-color: hsla(240deg, 5%, 5%, 0.35); } #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240deg, 5%, 5%, 0.4); } #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40% ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } } #nav-bar-customization-target > #back-button > .toolbarbutton-icon { padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ padding-block: var(--urlbar-icon-padding) !important; height: var(--uc-urlbar-icon-size) !important; } } } @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #back-button { z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; } @supports -moz-bool-pref("userChrome.padding.toolbar_button") { @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { #nav-bar-customization-target > #back-button { --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); } } } @supports not -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button { padding-inline-end: 0 !important; } } @supports -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button:not([disabled="true"]) { padding-inline-end: 0 !important; } #nav-bar-customization-target > #back-button[disabled="true"] { padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } #nav-bar-customization-target > #back-button > .toolbarbutton-icon { background-origin: padding-box; background-clip: padding-box; border: 1px solid var(--uc-combined-circlebutton-border-color); border-radius: 10000px !important; padding-inline-end: var(--urlbar-icon-padding) !important; height: auto !important; } } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #back-button { z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; } @supports -moz-bool-pref("userChrome.padding.toolbar_button") { @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { #nav-bar-customization-target > #back-button { --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); } } } @supports not -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button { padding-inline-end: 0 !important; } } @supports -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button:not([disabled="true"]) { padding-inline-end: 0 !important; } #nav-bar-customization-target > #back-button[disabled="true"] { padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } #nav-bar-customization-target > #back-button > .toolbarbutton-icon { background-origin: padding-box; background-clip: padding-box; border: 1px solid var(--uc-combined-circlebutton-border-color); border-radius: 10000px !important; padding-inline-end: var(--urlbar-icon-padding) !important; height: auto !important; } } } } @supports -moz-bool-pref("userChrome.combined.nav_button") { @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #home-button { position: relative; z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; padding-inline-end: 0 !important; } @supports -moz-bool-pref("userChrome.padding.toolbar_button") { @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { #nav-bar-customization-target > #home-button { --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); } } } #nav-bar-customization-target > #home-button > menupopup { margin-top: -1px !important; } #nav-bar-customization-target > #home-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); background-origin: padding-box; background-clip: padding-box; border: 1px solid var(--uc-combined-circlebutton-border-color); border-radius: 10000px !important; padding-inline-end: var(--urlbar-icon-padding) !important; height: auto !important; } #nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); border-color: hsla(240deg, 5%, 5%, 0.35); } #nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240deg, 5%, 5%, 0.4); } } } @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #back-button { order: 2; -moz-box-ordinal-group: 2; } #nav-bar-customization-target > #forward-button { order: 4; -moz-box-ordinal-group: 4; } @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > :first-child:is(#back-button, #forward-button, #home-button) + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button, #home-button), #nav-bar-customization-target > :first-child:is(#back-button, #forward-button, #home-button) + :is(#back-button, #forward-button, #home-button) + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button, #home-button), #nav-bar-customization-target > :first-child:is(#back-button, #forward-button, #home-button) + :is(#back-button, #forward-button, #home-button) + :is(#back-button, #forward-button, #home-button) + :is(toolbarbutton, toolbaritem) { padding-inline-start: var(--toolbar-start-end-padding) !important; } } @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > :first-child:is(#back-button, #forward-button) + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button), #nav-bar-customization-target > :first-child:is(#back-button, #forward-button) + :is(#back-button, #forward-button) + :is(toolbarbutton, toolbaritem) { padding-inline-start: var(--toolbar-start-end-padding) !important; } } } @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #home-button { order: 3; -moz-box-ordinal-group: 3; } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #home-button:is(:first-child) + :is(toolbarbutton, toolbaritem) { padding-inline-start: var(--toolbar-start-end-padding) !important; } } #nav-bar-customization-target > #home-button { position: relative; z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; padding-inline-end: 0 !important; } @supports -moz-bool-pref("userChrome.padding.toolbar_button") { @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { #nav-bar-customization-target > #home-button { --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); } } } #nav-bar-customization-target > #home-button > menupopup { margin-top: -1px !important; } #nav-bar-customization-target > #home-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); background-origin: padding-box; background-clip: padding-box; border: 1px solid var(--uc-combined-circlebutton-border-color); border-radius: 10000px !important; padding-inline-end: var(--urlbar-icon-padding) !important; height: auto !important; } #nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); border-color: hsla(240deg, 5%, 5%, 0.35); } #nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240deg, 5%, 5%, 0.4); } } @supports -moz-bool-pref("userChrome.combined.urlbar.reload_button") { #nav-bar-customization-target > #stop-reload-button { order: 6; -moz-box-ordinal-group: 6; } #urlbar { padding-right: calc(var(--uc-toolbarbutton-size) - var(--urlbar-margin-inline) / 2); } #nav-bar-customization-target > #stop-reload-button { z-index: 3; position: relative; --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); color: var(--urlbar-box-hover-text-color) !important; margin-left: calc(-1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); } #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { width: var(--uc-urlbar-icon-size) !important; height: var(--uc-urlbar-icon-size) !important; padding: var(--urlbar-icon-padding) !important; } } /** Others UI *****************************************************************/ /*= Counter for Tab ==========================================================*/ @supports -moz-bool-pref("userChrome.counter.tab") { #tabbrowser-tabs { counter-reset: tab-counts; } .tabbrowser-tab:not([hidden="true"]) { counter-increment: tab-counts; } .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { content: " " counter(tab-counts); } .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { content: counter(tab-counts) ": "; } .tabbrowser-tab:not([hidden="true"]) .tab-label-container { display: grid; align-content: safe center; align-items: safe center; } @supports -moz-bool-pref("userChrome.centered.tab") { @supports not -moz-bool-pref("userChrome.centered.tab.label") { .tabbrowser-tab:not([hidden="true"]) .tab-label-container { justify-content: start; justify-items: start; } } } @supports not -moz-bool-pref("userChrome.centered.tab") { .tabbrowser-tab:not([hidden="true"]) .tab-label-container { justify-content: start; justify-items: start; } } .tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { display: inline-block; grid-row: 1; } .tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { grid-row: 1; } .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] { width: unset !important; /* Original: 0 */ } .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-text, .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-secondary-label { width: 0; } .tab-label, .tab-secondary-label { overflow: hidden; } @supports -moz-bool-pref("userChrome.tab.sound_with_favicons") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container[labeldirection="ltr"], .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { --uc-sound-tab-label-position-x: 2px; } .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -2px; } .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container::before { transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); } } @supports -moz-bool-pref("userChrome.hidden.tab_icon") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container[labeldirection="ltr"], .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { --uc-sound-tab-label-position-x: 2px; } .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -2px; } .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container::before { transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); } } } .tab-label-container::beforee { transition: transform 0.25s var(--animation-easing-function); } } } /*= Counter for Bookmark menu ================================================*/ @supports -moz-bool-pref("userChrome.counter.bookmark_menu") { menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { counter-reset: bookmark-counts 0; } menupopup[placespopup="true"] > menu.bookmark-item::after { display: inline-flex; display: -moz-inline-box; content: "(" counter(bookmark-counts) ")"; } menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text, menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container, menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { order: 2; -moz-box-ordinal-group: 2; } menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item { counter-increment: bookmark-counts; } } @supports -moz-bool-pref("userChrome.findbar.floating_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ #main-window > body > box { z-index: 1; } findbar { order: -1; -moz-box-ordinal-group: 0; position: relative; height: 0 !important; overflow: visible; border-top: none !important; padding: 0 !important; background: none !important; pointer-events: none; z-index: 1; margin-right: 16px; border-right: 1px solid var(--chrome-content-separator-color); } findbar::before { content: ""; display: flex; display: -moz-box; position: absolute; flex: 200; -moz-box-flex: 200; } .findbar-container, .findbar-closebutton { border-style: solid; border-color: var(--chrome-content-separator-color); background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; pointer-events: auto; height: 33px !important; } .findbar-container { flex-direction: row-reverse; -moz-box-direction: reverse; border-width: 0 0 1px 1px; border-radius: var(--uc-rounding-toolbar, var(--toolbarbutton-border-radius)) 0 0 var(--uc-rounding-toolbar, var(--toolbarbutton-border-radius)) !important; } .findbar-container > .findbar-find-fast { padding: var(--toolbarbutton-inner-padding) 1px; margin: 0 !important; } .findbar-container > .findbar-find-status { display: flex; display: -moz-box; overflow: hidden; text-overflow: ellipsis; flex: 1; -moz-box-flex: 1; } .findbar-container > hbox { margin-inline: 5px; } .findbar-closebutton { width: 30px !important; /* Original: 24px */ margin: 0 !important; border-width: 0 1px 1px 0px; border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important; padding: 2px 5px 2px 3px !important; overflow: clip; } .findbar-closebutton image { padding: 4px; border-radius: var(--toolbarbutton-border-radius); } .findbar-closebutton:hover > image { background: var(--toolbarbutton-hover-background) !important; } } /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox { position: fixed !important; /* Needed for content to take up entire height */ z-index: 1000 !important; /* Puts the UI above the content */ } :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { width: 100%; /* Makes the UI take up the entire width */ } @media (-moz-gtk-csd-available) { /* Fix transparent background */ :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { appearance: auto !important; } } } } @supports -moz-bool-pref("userChrome.fullscreen.show_bookmarkbar") { :root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]), :root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */ } } /** Centered ******************************************************************/ /*= Centered - Tab ===========================================================*/ @supports -moz-bool-pref("userChrome.centered.tab") { .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; } @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 1px; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label { padding-inline-end: 18px; } } @supports not -moz-bool-pref("userChrome.centered.tab.label") { .tab-icon-stack { flex: 1; -moz-box-flex: 1; justify-content: end; } } @supports -moz-bool-pref("userChrome.centered.tab.label") { /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ .tab-label-container { display: grid; justify-content: safe center; align-items: safe center; } .tab-label, .tab-secondary-label { overflow: clip; } .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; } } } /*= Centered - URL Bar =======================================================*/ @supports -moz-bool-pref("userChrome.centered.urlbar") { #urlbar:not([focused]) #urlbar-input, #urlbar:not([focused]) .urlbar-input { text-align: center !important; } } /*= Centered - Bookmark Bar ==================================================*/ @supports -moz-bool-pref("userChrome.centered.bookmarkbar") { #PlacesToolbarItems { display: flex !important; justify-content: safe center !important; } } /** Auto Hide *****************************************************************/ @supports -moz-bool-pref("userChrome.autohide.back_button") or -moz-bool-pref("userChrome.autohide.forward_button") { :root { --uc-toolbarbutton-hide-size: calc( -1 * (16px + (2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)))) ); } } @-moz-document url("chrome://browser/content/browser.xhtml") { @supports -moz-bool-pref("userChrome.autohide.back_button") { :root:not([customizing="true"]) #back-button[disabled="true"] { margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { #back-button { transition-property: background-color, opacity, margin-left !important; } #back-button[disabled="true"] { transition: background-color 1s var(--animation-easing-function), opacity 1s var(--animation-easing-function), margin-left 0.5s ease !important; } } } @supports -moz-bool-pref("userChrome.autohide.forward_button") { :root:not([customizing="true"]) #forward-button[disabled="true"] { margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { #forward-button { transition-property: background-color, opacity, margin-left !important; } #forward-button[disabled="true"] { transition: background-color 1s var(--animation-easing-function), opacity 1s var(--animation-easing-function), margin-left 0.5s ease !important; } } } } @supports -moz-bool-pref("userChrome.autohide.page_action") { #page-action-buttons > .urlbar-page-action { margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)); opacity: 0; } #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, .urlbar-page-action[open], .urlbar-page-action[open] ~ .urlbar-page-action { margin-inline-end: 0px !important; opacity: 1; } @media (prefers-reduced-motion: no-preference) { #page-action-buttons > .urlbar-page-action { transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, opacity 1.5s var(--animation-easing-function) 600ms !important; } @supports -moz-bool-pref("userChrome.decoration.animate") { #page-action-buttons > .urlbar-page-action { transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, opacity 1.5s var(--animation-easing-function) 600ms, background-color 2.5s var(--animation-easing-function) !important; } } #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, .urlbar-page-action[open], .urlbar-page-action[open] ~ .urlbar-page-action { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.tab") { @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { margin-bottom: -64px; } } } @supports -moz-bool-pref("userChrome.autohide.tab.opacity") { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { opacity: 0%; } } @supports -moz-bool-pref("userChrome.autohide.tab.blur") { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { filter: blur(8px); } } @media (prefers-reduced-motion: no-preference) { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { transition-timing-function: var(--animation-easing-function); transition-duration: 0.2s; transition-delay: 600ms; } .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]):is(:hover, :focus-within) { transition-delay: 0s; } @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { transition-property: margin-bottom; } } } @supports -moz-bool-pref("userChrome.autohide.tab.opacity") { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { transition-property: opacity; } } @supports -moz-bool-pref("userChrome.autohide.tab.blur") { .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { transition-property: filter; } } } } :root { --uc-autohide-toolbar-speed: 0.25s; --uc-autohide-toolbar-delay: 600ms; } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") or -moz-bool-pref( "userChrome.hidden.tabbar" ) or -moz-bool-pref("userChrome.navbar.as_sidebar") { :root { --uc-tabbar-height: var(--uc-tabbar-height-default); --uc-tabbar-height-default: var(--tab-min-height); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); --uc-navbar-height: var(--uc-navbar-height-default); --uc-navbar-height-default: calc( 16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) ); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); --uc-bm-height: var(--uc-bm-height-default); --uc-bm-height-default: calc( 20px + (2 * var(--bookmark-block-padding, 4px)) ); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); --uc-titlebar-buttonbox-height: 34px; --uc-menubar-height: 0px; --uc-menubar-height-default: calc(1.6rem + 2px); --uc-menubar-inner-height: calc(1.6rem - 2px); } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { :root { --uc-tabbar-height: 0px; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { :root { --uc-tabbar-height: 0px; } } } } } @supports -moz-bool-pref("userChrome.hidden.navbar") { :root { --uc-navbar-height: 0px; } } @supports selector(:has(a)) { :root:not([tabsintitlebar]):has(#toolbar-menubar) { --uc-menubar-height: var(--uc-menubar-height-default); } @media (-moz-gtk-csd-available) { :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); } } :root[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) { --uc-menubar-height: var(--uc-titlebar-buttonbox-height); } :root:not([tabsintitlebar]):has(#toolbar-menubar[autohide="true"][inactive="true"]), :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"][inactive="true"]) { --uc-menubar-height: 0px; } #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } @supports -moz-bool-pref("userChrome.navbar.as_sidebar") { #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { --uc-bm-height: var(--uc-bm-height-default); } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { --uc-bm-height: 0px; } } } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) or -moz-bool-pref("userChrome.autohide.infobar") { #navigator-toolbox { position: relative; } #navigator-toolbox:is(:hover, :focus-within) { z-index: 2; } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar { z-index: -1; } #navigator-toolbox:not(:hover):not(:focus-within) { animation: 1s keepfront; } @keyframes keepfront { from { z-index: 3; } to { z-index: 3; } } #sidebar-box:is(:hover, :focus-within) { position: relative; z-index: 2 !important; } @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { #navigator-toolbox { --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); margin-bottom: var(--uc-toolbar-hide-height) !important; } @media (prefers-reduced-motion: no-preference) { @supports -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { transition: margin-top 1s ease, margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } #navigator-toolbox[inFullscreen="true"] { transition: margin-top 1.3s var(--animation-easing-function) 50ms, margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } } @supports not -moz-bool-pref("userChrome.decoration.animate") { #navigator-toolbox { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-tabbar-height); } @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); } } } @supports -moz-bool-pref("userChrome.autohide.navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); } } } } } } } } @supports not -moz-bool-pref("userChrome.autohide.tabbar") { @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-bm-height); } } } @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.autohide.navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-navbar-height); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-navbar-height); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); } } } } } } } } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } #TabsToolbar:not([customizing]) { will-change: opacity; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]), #TabsToolbar:not([customizing]) .titlebar-buttonbox-container { opacity: 0; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { opacity: 0; } } #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar, #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar .titlebar-buttonbox-container { opacity: 1; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { opacity: 1; } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } #TabsToolbar:not([customizing]) { will-change: opacity; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]), #TabsToolbar:not([customizing]) .titlebar-buttonbox-container { opacity: 0; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { opacity: 0; } } #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar, #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar .titlebar-buttonbox-container { opacity: 1; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { opacity: 1; } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") { :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } #TabsToolbar:not([customizing]) { will-change: opacity; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]), #TabsToolbar:not([customizing]) .titlebar-buttonbox-container { opacity: 0; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { opacity: 0; } } #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar, #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar .titlebar-buttonbox-container { opacity: 1; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { opacity: 1; } } } } @media (prefers-reduced-motion: no-preference) { #titlebar:not([customizing]) { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), background-color 1s var(--animation-easing-function) !important; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]), #TabsToolbar:not([customizing]) .titlebar-buttonbox-container { transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } } #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { transition-delay: 0s !important; } @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]), #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) .titlebar-buttonbox-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { transition-delay: 0s !important; } } } } @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.autohide.navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; opacity: 1; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; opacity: 1; } } } } } @media (prefers-reduced-motion: no-preference) { #nav-bar:not([customizing]) { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { #nav-bar:not([customizing]) { transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { transition-delay: 0s !important; } } } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #PersonalToolbar:not([customizing]) { margin-bottom: var(--uc-bm-hide-height); opacity: 0; will-change: margin-bottom, opacity; } @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { @supports not -moz-bool-pref("userChrome.autohide.toolbar_overlap.allow_layout_shift") { @supports not selector(:has(a)) { #PersonalToolbar:not([customizing])[collapsed="true"] { visibility: visible !important; max-height: unset !important; } } } } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { margin-bottom: 0; opacity: 1; } @media (prefers-reduced-motion: no-preference) { #PersonalToolbar:not([customizing]) { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.infobar") { #tab-notification-deck:not([customizing]) > .notificationbox-stack { --infobar-height: calc( 25px + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px) ); } #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { --infobar-message-margin: 0 4px calc(-1 * var(--infobar-height)); opacity: 0; will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); opacity: 1; } @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { #tab-notification-deck:not([customizing]) { height: 0; } } @media (prefers-reduced-motion: no-preference) { #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; } :root[inFullscreen="true"] #sidebar-box { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } @supports -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-header, #sidebar { min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; will-change: min-width, max-width; } #sidebar-box:is(:hover, :focus-within) { --uc-sidebar-shadow-width: calc(var(--uc-sidebar-activate-width) - var(--uc-sidebar-width)); } #sidebar-box:is(:hover, :focus-within) > #sidebar-header, #sidebar-box:is(:hover, :focus-within) > #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } :root[inFullscreen="true"] #sidebar-box { --uc-sidebar-shadow-width: var(--uc-sidebar-fullscreen-width); margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; padding-inline-start: var(--uc-sidebar-fullscreen-width); will-change: padding-inline-start, opacity, box-shadow, visibility; } :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { --uc-sidebar-shadow-width: var(--uc-sidebar-activate-width); padding-inline-start: var(--uc-sidebar-activate-width); } :root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar { min-width: calc(var(--uc-sidebar-activate-width)) !important; max-width: calc(var(--uc-sidebar-activate-width)) !important; will-change: unset; } @media (prefers-reduced-motion: no-preference) { #sidebar-header, #sidebar { transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } #sidebar-box:is(:hover, :focus-within) { transition: margin-inline-start var(--uc-autohide-sidebar-speed) var(--animation-easing-function), opacity var(--uc-autohide-sidebar-speed) ease-in-out, box-shadow var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-speed), visibility 0s linear !important; } #sidebar-box:is(:hover, :focus-within) > #sidebar-header, #sidebar-box:is(:hover, :focus-within) > #sidebar { transition-delay: 0ms !important; } :root[inFullscreen="true"] #sidebar-box { transition: padding-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay), opacity var(--uc-autohide-fullscreen-sidebar-speed) ease-in-out, box-shadow calc(var(--uc-autohide-fullscreen-sidebar-speed) + 0.05s) var(--animation-easing-function), visibility 0s linear !important; } :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { transition-delay: 0ms !important; } } } @supports not -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box { --uc-sidebar-fullscreen-margin: calc( var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse) ); overflow: hidden; will-change: min-width, max-width; } #sidebar-box:is(:hover, :focus-within) { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-start; } :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):is(:hover, :focus-within) { margin-inline-start: 0 !important; } :root[inFullscreen="true"] #sidebar-box[positionend="true"] { margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-end; } :root[inFullscreen="true"] #sidebar-box[positionend="true"]:is(:hover, :focus-within) { margin-inline-end: 0 !important; } @media (prefers-reduced-motion: no-preference) { #sidebar-box { transition: min-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay), max-width var(--uc-autohide-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } #sidebar-box:is(:hover, :focus-within) { transition-delay: 0ms !important; } :root[inFullscreen="true"] #sidebar-box { transition: margin-inline-start var(--uc-autohide-fullscreen-sidebar-speed) var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } :root[inFullscreen="true"] #sidebar-box[positionend="true"] { transition-property: margin-inline-end !important; } :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { transition-delay: 0ms !important; } } } } @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { order: -1; -moz-box-ordinal-group: 0; min-width: calc( var(--uc-navbar-width, 100vw) - (2 * var(--urlbar-margin-inline) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px)) ) !important; } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin)); } } @media (prefers-reduced-motion: no-preference) { @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { #nav-bar { transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { transition-delay: 0s !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) { #nav-bar { transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { transition-delay: 0s !important; } } } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #urlbar-container { transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { transition-delay: 0s !important; } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (prefers-reduced-motion: no-preference) and (max-width: 1100px) { #urlbar-container { transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { transition-delay: 0s !important; } } } } } } /** Hidden ********************************************************************/ @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.hidden.tabbar") { #TabsToolbar { display: none !important; } } @supports -moz-bool-pref("userChrome.hidden.navbar") { #nav-bar { visibility: collapse; /* display: none is not work */ } } } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports -moz-bool-pref("userChrome.hidden.tabbar") { #TabsToolbar { display: none !important; } } @supports -moz-bool-pref("userChrome.hidden.navbar") { #nav-bar { visibility: collapse; /* display: none is not work */ } } } } } @supports -moz-bool-pref("userChrome.hidden.tab_icon") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { .tabbrowser-tab:not([pinned="true"]) .tab-icon-image { display: none; } } @supports -moz-bool-pref("userChrome.hidden.tab_icon.always") { .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { display: none; } } } @supports -moz-bool-pref("userChrome.hidden.titlebar_container") { .titlebar-buttonbox-container { display: none !important; } } @supports -moz-bool-pref("userChrome.hidden.sidebar_header") { @supports not -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-header { display: none !important; } } @supports -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]) #sidebar-header { display: none !important; } } } @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox") { @supports not -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { #identity-box[pageproxystate="valid"].notSecureText #identity-icon-label, #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { display: none; } #identity-box[pageproxystate="valid"].notSecureText #identity-icon-box { padding-inline-end: 5px; /* Original: 8px */ } } @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { #identity-box[pageproxystate="valid"].notSecureText, #identity-box[pageproxystate="valid"].chromeUI, #identity-box[pageproxystate="valid"].extensionPage { margin-inline-end: var(--identity-box-margin-inline) !important; } #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box:not(:hover), #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) { background-color: transparent !important; } @supports not -moz-bool-pref("userChrome.urlbar.iconbox_with_separator") { #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { padding-inline: var(--urlbar-icon-padding) !important; } } #identity-box[pageproxystate="valid"] #identity-icon-label { display: none !important; } } } @supports -moz-bool-pref("userChrome.hidden.bookmarkbar_icon") { #PlacesToolbarItems .bookmark-item > .toolbarbutton-icon { display: none; } } @supports -moz-bool-pref("userChrome.hidden.bookmarkbar_label") { #PlacesToolbarItems .bookmark-item > .toolbarbutton-text { visibility: collapse; /* display: none is not work */ } } @supports -moz-bool-pref("userChrome.hidden.disabled_menu") { menu[disabled="true"], menuitem:not(#context-back, #context-forward)[disabled="true"] { visibility: collapse !important; } @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { #context-back[disabled="true"], #context-forward[disabled="true"] { visibility: collapse !important; } } } /** Icons *********************************************************************/ @supports not -moz-bool-pref("userChrome.icon.disabled") { /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ /* on Toolbar and Menus */ :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container), #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]), #editBMPanel_folderMenuList .folder-icon:not([id]), .downloadIconShow > .button-box > .button-icon { list-style-image: url("../icons/folder.svg") !important; } /* Standard Folder - Open */ :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"], :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container, open) { list-style-image: url("../icons/folder-open.svg") !important; } /*= Other Folder - Inbox Icon ================================================*/ /* on Menus */ #PlacesToolbar #OtherBookmarks, #BMB_bookmarksPopup #BMB_unsortedBookmarks, #bookmarksMenuPopup #menu_unsortedBookmarks, :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks), :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____), #editBMPanel_unfiledRootItem, #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] { list-style-image: url("../icons/mail-inbox-all.svg") !important; } /* Other Folder - Open */ #PlacesToolbar #OtherBookmarks[open="true"], #BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"], #bookmarksMenuPopup #menu_unsortedBookmarks[open="true"], :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks), :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) { list-style-image: url("../icons/mail-inbox.svg") !important; } /*= Default Icon - Override ===================================================*/ /* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */ /* Query */ :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) { list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important; } /* History */ :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer), :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { list-style-image: url("chrome://browser/skin/history.svg") !important; } /* Downloads */ :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important; } /* Tag */ :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer), :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { list-style-image: url("chrome://browser/skin/places/tag.svg") !important; } /* Bookmark */ :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { list-style-image: url("chrome://browser/skin/bookmark.svg") !important; } /* Bookmark Toolbar */ #BMB_bookmarksPopup #BMB_bookmarksToolbar, #bookmarksMenuPopup #bookmarksToolbarFolderMenu, :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important; } /* Bookmark Menu */ :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu________) { list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; } /*= Default Icon - Open ======================================================*/ /* Query */ :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"] > .menu-iconic-left > .menu-iconic-icon { transform: rotate(15deg) !important; } /* History */ :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer), :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) { list-style-image: url("../icons/history-reverse.svg") !important; } /* Tag */ :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"][tagContainer="true"][open="true"], :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer), :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) { list-style-image: url("../icons/tag-open.svg") !important; } /* Bookmark */ :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) { list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; } /* Bookmark Toolbar */ #BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"], #bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"], :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) { list-style-image: url("../icons/bookmarksToolbar-open.svg") !important; } /* Bookmark Menu */ :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, open, queryFolder_menu________) { list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ } @-moz-document url("chrome://browser/content/places/places.xhtml") { @media (-moz-gtk-csd-available) { /*= Menubar - Icons ==========================================================*/ #organizeButton, #viewMenu, #maintenanceButton, #back-button, #forward-button, #clearDownloadsButton { fill: currentColor !important; -moz-context-properties: fill, fill-opacity, stroke !important; } /* Add */ #organizeButton { list-style-image: url("chrome://global/skin/icons/settings.svg") !important; } #viewMenu { list-style-image: url("../icons/sort.svg") !important; } #maintenanceButton { list-style-image: url("../icons/import-export.svg") !important; } #clearDownloadsButton { list-style-image: url("chrome://global/skin/icons/delete.svg") !important; } #clearDownloadsButton > .toolbarbutton-icon { display: inline-flex !important; display: -moz-inline-box !important; margin-top: 0; margin-bottom: 0; margin-inline-start: 0; margin-inline-end: 2px; } /* Replace */ #back-button { list-style-image: url("chrome://browser/skin/back.svg") !important; } #forward-button { list-style-image: url("chrome://browser/skin/forward.svg") !important; } #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1) !important; } } } } /** Panel - Icons *************************************************************/ :root { --uc-sidebar-icon: url("chrome://browser/skin/sidebars.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars-right.svg"); } @supports selector(:has(a)) { :root:has(#sidebar-box[positionend="true"]) { --uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg"); --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg"); } } @supports -moz-bool-pref("userChrome.icon.panel") { /*= Padding ==================================================================*/ :root { --arrowpanel-menuicon-padding: 8px; --arrowpanel-menublank-padding: calc( var(--arrowpanel-menuicon-padding) * 2 + var(--arrowpanel-menuitem-padding-inline) ) !important; --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important; } .subviewbutton > .toolbarbutton-icon { width: 16px; } @supports not -moz-bool-pref("userChrome.icon.panel_full") { :root { /* Global */ --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); /* General Panel */ --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; /* Blank Menu Left Padding */ --arrowpanel-menuimageblank-padding-horizontal: calc( var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline) ); --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px); } } #downloadsHistory .button-text, .subviewbutton > .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menuicon-padding) !important; } .toolbaritem-combined-buttons:not(.unified-extensions-item) > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { padding-inline-start: 0 !important; } #panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text, #appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menublank-padding) !important; } #appMenu-proton-update-banner .toolbarbutton-text { margin-inline-start: 0 !important; padding-inline-start: 0 !important; /* FF v107 */ } #appMenu-multiView .subviewbutton::before, #appMenu-proton-update-banner::before { display: inline-flex; display: -moz-inline-box; margin-inline-end: var(--arrowpanel-menuicon-padding); width: 16px; height: 16px; } #appMenu-proton-update-banner { margin-bottom: 2px !important; padding-inline-start: var(--arrowpanel-menuitem-padding-inline) !important; } #appMenu-fxa-status2, #appMenu-zoom-controls2, #appMenu-zoom-controls { align-items: center; padding-top: var(--arrowpanel-menuimageblank-padding-block) !important; padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important; } #appMenu-zoom-controls2::before, #appMenu-zoom-controls::before { margin-inline-end: 0 !important; } #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2 { --arrowpanel-menuitem-padding-block: 0px; } .subviewbutton[type="checkbox"]:not([checked="true"], #allTabsMenu_sortTabsButton) > .toolbarbutton-text { margin-left: 16px !important; } /* Icons Color */ #appMenu-multiView .subviewbutton::before, #appMenu-proton-update-banner::before, #downloadsHistory .button-icon, .subviewbutton:not(#appMenu-proton-update-banner) > image { fill: currentColor !important; fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important; -moz-context-properties: fill, fill-opacity, stroke !important; } #appMenu-zoomReduce-button2 > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important; } #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon { stroke: var(--button-hover-bgcolor) !important; } .subviewbutton[disabled="true"] > image { /* Ghost icons when disabled */ opacity: 0.4; } /*= Panel - Main =============================================================*/ #appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon { display: inline-flex !important; display: -moz-inline-box !important; margin-inline-start: var(--arrowpanel-menuicon-padding); order: -1 !important; -moz-box-ordinal-group: 0 !important; } #appMenu-proton-update-banner::before { content: url("../icons/whatsnew.svg"); } #appMenu-fxa-status2::before { /* Don't exist img tag */ content: url("chrome://browser/skin/fxa/avatar-empty.svg"); } #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before { display: none; } #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"]) #appMenu-fxa-label2::before { /* url("https://profile.accounts.firefox.com/v1/avatar/a") */ content: ""; border-radius: 50% !important; background-size: 16px !important; background-image: var(--avatar-image-url) !important; } @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") { #appMenu-new-tab-button2 { list-style-image: url("chrome://browser/skin/new-tab.svg"); } } @supports -moz-bool-pref("userChrome.icon.panel_photon") { #appMenu-save-file-button2, #appMenu-find-button2, #appMenu-more-button2 { padding-top: var(--arrowpanel-menuitemblank-padding) !important; padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; } #appMenu-zoom-controls2, #appMenu-zoom-controls { padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; } } @supports not -moz-bool-pref("userChrome.icon.panel_photon") { @supports not -moz-bool-pref("userChrome.icon.panel_full") { #appMenu-new-tab-button2, #appMenu-passwords-button, #appMenu-extensions-themes-button, #appMenu-save-file-button2, #appMenu-find-button2, #appMenu-more-button2, #appMenu-help-button2, #appMenu-quit-button2 { padding-top: var(--arrowpanel-menuitemblank-padding-block) !important; padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important; } #appMenu-zoom-controls2, #appMenu-zoom-controls { padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; } } } #appMenu-new-window-button2 { list-style-image: url("chrome://browser/skin/window.svg"); } #appMenu-new-private-window-button2 { list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); } #appMenu-bookmarks-button { list-style-image: url("chrome://browser/skin/bookmark.svg"); } #appMenu-history-button { list-style-image: url("chrome://browser/skin/history.svg"); } #appMenu-downloads-button { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") { #appMenu-passwords-button { list-style-image: url("chrome://browser/skin/login.svg"); } #appMenu-extensions-themes-button { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); } } #appMenu-print-button2 { list-style-image: url("chrome://global/skin/icons/print.svg"); } @supports -moz-bool-pref("userChrome.icon.panel_full") { #appMenu-save-file-button2 { list-style-image: url("../icons/toolbarButton-download.svg"); } #appMenu-find-button2 { list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } #appMenu-zoom-controls2::before, #appMenu-zoom-controls::before { content: url("../icons/screenshot.svg"); } } #save-page-button { list-style-image: url("../icons/toolbarButton-download.svg") !important; } #appMenu-settings-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); } @supports -moz-bool-pref("userChrome.icon.panel_full") { #appMenu-more-button2 { list-style-image: url("chrome://browser/skin/ion.svg"); } } @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") { #appMenu-help-button2 { list-style-image: url("chrome://global/skin/icons/help.svg"); } #appMenu-quit-button2 { list-style-image: url("../icons/quit.svg"); } } /*= Panel - Account ==========================================================*/ #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon { width: 16px !important; height: 16px !important; } /* Default */ #fxa-manage-account-button::before { content: ""; display: inline-flex; display: -moz-inline-box; width: 32px !important; height: 32px !important; border-radius: 50%; background-size: 32px; background-image: var(--avatar-image-url); margin-inline-end: var(--arrowpanel-menuicon-padding); } @supports -moz-bool-pref("userChrome.icon.account_image_to_right") { #fxa-manage-account-button::before { order: 2 !important; -moz-box-ordinal-group: 2 !important; } } @supports -moz-bool-pref("userChrome.icon.account_label_to_right") { #fxa-menu-header-title, #fxa-menu-header-description { text-align: right; } } .syncNowBtn { visibility: visible !important; order: -1 !important; -moz-box-ordinal-group: 0 !important; margin-inline-end: var(--arrowpanel-menuicon-padding); } #PanelUI-fxa-menu-setup-sync-button { list-style-image: url("chrome://browser/skin/sync.svg"); } #PanelUI-fxa-menu-connect-device-button { list-style-image: url("../icons/add-device.svg"); } #PanelUI-fxa-menu-sendtab-button { list-style-image: url("../icons/send-to-device.svg"); } #PanelUI-fxa-menu-sync-prefs-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); } #PanelUI-fxa-menu-account-signout-button { list-style-image: url("../icons/sign-out.svg"); } #PanelUI-remotetabs-view-managedevices::before { /* Box */ content: ""; padding-inline-end: 16px; padding-block: 1px; margin-inline-end: var(--arrowpanel-menuicon-padding); /* Color */ fill: currentColor; fill-opacity: var(--toolbarbutton-icon-fill-opacity); -moz-context-properties: fill, fill-opacity, stroke; background-size: 16px; background-repeat: no-repeat; background-position: left center; background-image: url("chrome://global/skin/icons/settings.svg"); } .PanelUI-remotetabs-notabsforclient-label { margin-inline-start: calc( var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline) ) !important; padding-inline-start: var(--arrowpanel-menublank-padding) !important; } /* Change Separator */ #PanelUI-fxa-menu::before { content: ""; display: flex; display: -moz-box; border-bottom: 1px solid var(--panel-separator-color); margin: var(--panel-separator-margin); padding: 0; } #PanelUI-fxa-menu > :first-child { order: -1; -moz-box-ordinal-group: 0; } #PanelUI-sign-out-separator { display: none; } .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] { list-style-image: url("../icons/send-to-device.svg"); } .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) { list-style-image: url("chrome://global/skin/icons/settings.svg"); } /*= Panel - Bookmark =========================================================*/ #panelMenuBookmarkThisPage { list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); } panelMenuBookmarkThisPage[starred] { list-style-image: url("chrome://browser/skin/bookmark.svg"); } #panelMenu_searchBookmarks { list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } #panelMenu_viewBookmarksToolbar { list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } #panelMenu_showAllBookmarks { list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); } /*= Panel - History ==========================================================*/ #appMenuRecentlyClosedTabs { list-style-image: url("chrome://browser/skin/tab.svg"); } #appMenuRecentlyClosedWindows { list-style-image: url("chrome://browser/skin/window.svg"); } #appMenuRestoreSession, #appMenu-restoreSession { list-style-image: url("../icons/restore-session.svg"); } #appMenuClearRecentHistory { list-style-image: url("chrome://browser/skin/forget.svg"); } #PanelUI-historyMore { list-style-image: url("chrome://browser/skin/history.svg"); } #appMenu-library-recentlyClosedTabs { list-style-image: url("../icons/movetowindow-16.svg"); } #appMenu-library-recentlyClosedWindows { list-style-image: url("../icons/restore-session.svg"); } /*= Panel - More tools =======================================================*/ #appmenu-moreTools-button { list-style-image: url("chrome://browser/skin/customize.svg"); } /* Web Developer Tools */ #appmenu-developer-tools-view .subviewbutton:nth-child(1), #PanelUI-developer-tools-view .subviewbutton:nth-child(1) { list-style-image: url("../icons/developer.svg"); } /* Task Manager */ #appmenu-developer-tools-view .subviewbutton:nth-child(2), #PanelUI-developer-tools-view .subviewbutton:nth-child(2) { list-style-image: url("../icons/performance.svg"); } /* Remote Debugging - Edge bug.svg */ #appmenu-developer-tools-view .subviewbutton:nth-child(3), #PanelUI-developer-tools-view .subviewbutton:nth-child(3) { list-style-image: url("../icons/bug.svg"); } /* Browser Toolbox - Edge webdeveloper.svg */ #appmenu-developer-tools-view .subviewbutton:nth-child(4), #PanelUI-developer-tools-view .subviewbutton:nth-child(4) { list-style-image: url("../icons/window-dev-tools.svg"); } /* Browser Content Toolbox */ #appmenu-developer-tools-view .subviewbutton:nth-child(5), #PanelUI-developer-tools-view .subviewbutton:nth-child(5) { list-style-image: url("../icons/command-frames.svg"); } /* Browser Console */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(5), #PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) { list-style-image: url("chrome://devtools/skin/images/command-console.svg"); } /* Responsive Design Mode */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(4), #PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) { list-style-image: url("../icons/command-responsivemode.svg"); } /* Eyedropper */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(3), #PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) { list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); } /* Page Source - Edge file-search.svg */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(2), #PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) { list-style-image: url("../icons/document-search.svg"); } /* Extensions for Devel */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(1), #PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) { list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg"); } #appmenu-developer-tools-view .subviewbutton:last-child { margin-bottom: 6px !important; } /*= Panel - Help =============================================================*/ #appMenu_menu_openHelp { list-style-image: url("chrome://global/skin/icons/help.svg"); } #appMenu_feedbackPage { list-style-image: url("../icons/send.svg"); } #appMenu_helpSafeMode { list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg"); } #appMenu_troubleShooting { list-style-image: url("chrome://global/skin/icons/more.svg"); } #appMenu_help_reportSiteIssue { list-style-image: url("chrome://global/skin/icons/lightbulb.svg"); } #appMenu_menu_HelpPopup_reportPhishingtoolmenu { list-style-image: url("chrome://global/skin/icons/warning.svg"); } #appMenu_aboutName { list-style-image: url("chrome://global/skin/icons/info.svg"); } /*= Panel - Library ==========================================================*/ #appMenu-library-bookmarks-button { list-style-image: url("chrome://browser/skin/bookmark.svg"); } #appMenu-library-history-button { list-style-image: url("chrome://browser/skin/history.svg"); } #appMenu-library-downloads-button { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } /*= Panel - Downloads ========================================================*/ #downloadsHistory { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } #downloadsHistory .box-inherit.button-box { display: inline-flex !important; display: -moz-inline-box !important; } /*= Toolbar - Overflow Menu ==================================================*/ #overflowMenu-customize-button { list-style-image: url("chrome://browser/skin/customize.svg"); } /*= Tabbar - All Tab Menu ====================================================*/ #allTabsMenu-undoCloseTab { list-style-image: url("../icons/undo.svg"); } #allTabsMenu-searchTabs { list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } #allTabsMenu-containerTabsButton { list-style-image: url("../icons/container-openin-16.svg"); } #allTabsMenu-hiddenTabsButton { list-style-image: url("../icons/eye-hide.svg"); } #allTabsMenu-containerTabsView .subviewbutton:last-child { list-style-image: url("chrome://global/skin/icons/settings.svg"); } /*= BMB_bookmarksPopup =======================================================*/ #BMB_viewBookmarksSidebar { --menuitem-image: var(--uc-sidebar-icon); } #BMB_viewBookmarksSidebar[data-l10n-args='{"isVisible":true}'] { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } #BMB_searchBookmarks { --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } #BMB_bookmarksShowAllTop, #BMB_bookmarksShowAll { --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); } #BMB_bookmarksToolbar { --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #BMB_bookmarksShowAllTop { list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important; } #BMB_bookmarksShowAllTop > .menu-iconic-left { display: flex !important; display: -moz-box !important; } } /* BMB_bookmarksToolbarPopup */ #BMB_viewBookmarksToolbar[data-l10n-args='{"isVisible":true}'] { --menuitem-image: url("../icons/eye-hide.svg"); } #BMB_viewBookmarksToolbar[data-l10n-args='{"isVisible":false}'] { --menuitem-image: url("../icons/eye-show.svg"); } /*= protections-popup ========================================================*/ #protections-popup-settings-button > .protections-popup-settings-icon, #protections-popup-show-report-button > .protections-popup-show-report-icon { -moz-context-properties: fill, fill-opacity, stroke; fill: currentColor; margin-inline-end: 1em; } #protections-popup-settings-button > .protections-popup-settings-icon, #protections-popup-multiView .panel-subview-footer-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); } #protections-popup-show-report-button > .protections-popup-show-report-icon { /* chrome://browser/skin/controlcenter/dashboard.svg */ list-style-image: url("../icons/dashboard.svg"); } /*= identity-popup ===========================================================*/ #identity-popup-clear-sitedata-button, #identity-popup-more-info { padding-inline: 5px !important; } #identity-popup-securityView-body { margin-inline-start: 32px !important; /* Original: 10px */ } #identity-popup-clear-sitedata-button { list-style-image: url("../icons/broom.svg"); } /*= sidebarMenu-popup ========================================================*/ #identity-popup-more-info { list-style-image: url("chrome://global/skin/icons/info.svg"); } #sidebar-switcher-bookmarks { list-style-image: url("chrome://browser/skin/bookmark.svg"); } #sidebar-switcher-history { list-style-image: url("chrome://browser/skin/history.svg"); } #sidebar-switcher-tabs { list-style-image: url("../icons/synced-tabs.svg"); } #sidebar-reverse-position { list-style-image: var(--uc-sidebar-icon-reverse); } #sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] { list-style-image: url("chrome://global/skin/icons/close.svg"); } /*= unified-extensions-view ===================================================*/ #unified-extensions-manage-extensions { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); } /*= Compatibility ============================================================*/ .sync-engine-tabs .checkbox-icon, .sync-engine-tabs.sync-engine-image, #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon, #sync-button { list-style-image: url("../icons/synced-tabs.svg") !important; } /*= Tab Mix Plus =============================================================*/ #allTabsMenu_sortTabsButton { list-style-image: url("../icons/text-sort-ascending.svg"); } } /** Menu - Icons Layout *******************************************************/ @supports -moz-bool-pref("userChrome.icon.menu") { menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]), #main-menubar > menu { -moz-appearance: none !important; /* Linux: menulist */ } /* Icon */ #main-menubar > menu, :not(menu, #ContentSelectDropdown) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown) > menupopup:not(.in-menulist) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar, #context_openANewTab.tabmix-newtab-menu-icon { /* Color */ -moz-context-properties: fill, fill-opacity, stroke !important; fill: currentColor !important; stroke: currentColor; /* Layout */ background-size: 16px !important; background-repeat: no-repeat !important; background-image: var(--menuitem-image); } #tabContextMenu > .tabmix-newtab-menu-icon { -moz-context-properties: fill, fill-opacity, stroke !important; fill: currentColor !important; } /* For native context menus */ @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { :not(menu, #ContentSelectDropdown) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown) > menupopup:not(.in-menulist) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } /* Padding */ :root { --uc-menu-background-position: left; --context-menu-background-padding-default: 5px; --context-menu-background-padding: var(--context-menu-background-padding-default); } :root:-moz-locale-dir(rtl) { --uc-menu-background-position: right; } :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menu:not(.menu-iconic), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar, #context_openANewTab.tabmix-newtab-menu-icon { background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; } /* Menubar */ @supports -moz-bool-pref("userChrome.icon.global_menubar") { #main-menubar > menu { background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important; padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important; padding-inline-end: 3px; } #main-menubar > menu:first-child { background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default)) center !important; padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important; } #main-menubar > menu > menupopup { --menuitem-image: none; /* Prevent Image Inheritance */ } @supports not -moz-bool-pref("userChrome.padding.global_menubar") { #main-menubar > menu { padding-block: 2px !important; } } } /* Padding - Windows */ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root { --bookmark-menu-icon-text-padding: calc( var(--context-menu-text-padding) + var(--arrowpanel-menuitem-padding-inline) ); --bookmark-menu-icon-background-padding: calc( var(--arrowpanel-menuitem-padding-inline) + var(--bookmark-menu-icon-align-padding) ); } @media (-moz-windows-non-native-menus) { :root { --context-menu-background-padding: 1em; --context-menu-text-padding: 24px; --menu-background-padding-default: calc( var(--context-menu-background-padding) + var(--context-menu-text-padding) ); --bookmark-menu-icon-align-padding: 0px; } } @media not (-moz-windows-non-native-menus) { :root { --context-menu-text-padding: calc(1.45em + 8px); --bookmark-menu-icon-align-padding: calc((1.45em - 16px) / 2 + 1px); } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { :root { --context-menu-background-padding-default: 2px; } @media (not (-moz-windows-non-native-menus)) and (-moz-windows-classic) { :root { --context-menu-background-padding-default: -0.5px; } } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { :root { --context-menu-background-padding-default: 3px; } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root { --context-menu-background-padding: 3px; --menu-background-padding-default: 0px; } @supports -moz-bool-pref("userChrome.compatibility.os.win11") { :root { --context-menu-background-padding: 5px; } #main-menubar { --context-menu-background-padding: calc(5px + ((1.45em - 16px) / 2)); } menuitem:is([type="checkbox"], [type="radio"]) { --menu-padding: 0px; } menuitem[checked="true"] { --context-menu-background-padding: 0px; } menuitem[checked="true"] > .menu-iconic-left { transform: translateX(2px); } } menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-iconic > .menu-iconic-left, menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menuitem-iconic > .menu-iconic-left, menupopup:not([placespopup="true"]) .menu-iconic > .menu-iconic-left, menupopup:not([placespopup="true"]) .menuitem-iconic > .menu-iconic-left { appearance: none !important; padding-block: 0 !important; padding-inline-start: 5px !important; margin-inline-end: 8px !important; } @supports -moz-bool-pref("userChrome.compatibility.os.win11") { menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-iconic > .menu-iconic-left, menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menuitem-iconic > .menu-iconic-left, menupopup:not([placespopup="true"]) .menu-iconic > .menu-iconic-left, menupopup:not([placespopup="true"]) .menuitem-iconic > .menu-iconic-left { box-sizing: content-box; } } menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-accel, menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-iconic-accel, menupopup:not([placespopup="true"]) .menu-accel, menupopup:not([placespopup="true"]) .menu-iconic-accel { box-sizing: content-box; min-height: 16px; } menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-accel, menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-iconic-accel, menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-text, menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) .menu-iconic-text, menupopup:not([placespopup="true"]) .menu-accel, menupopup:not([placespopup="true"]) .menu-iconic-accel, menupopup:not([placespopup="true"]) .menu-text, menupopup:not([placespopup="true"]) .menu-iconic-text { padding-block: 0 !important; } } } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { @media not (-moz-windows-non-native-menus) { :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar, #context_openANewTab.tabmix-newtab-menu-icon { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: 0 !important; } } @media (-moz-windows-non-native-menus) { :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar, #context_openANewTab.tabmix-newtab-menu-icon { padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } } } /* Padding - Linux */ @media (-moz-gtk-csd-available) { :root { --context-menu-background-padding-default: 6px; --context-menu-text-padding: 21px; } #main-menubar > menu > .menubar-text { padding-inline-start: 3px; } } /* Padding - Mac */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root { --context-menu-background-padding-default: 10px; --context-menu-mac-padding: 21px; } /* context menu width */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), #blockedPopupDontShowMessage { padding-inline-end: var(--context-menu-background-padding) !important; } /* text position */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem > .menu-text, :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menu > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } /* Checkbox menuitem, None iconic menu */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup:not(.in-menulist) > menuitem[type="checkbox"] { padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; } /* Global Menu */ @supports -moz-bool-pref("userChrome.icon.global_menu.mac") { menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup) menu:not(.menu-iconic) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } } /*= Bookmark Menu - Layout ===================================================*/ /* #goPopup(Legacy of historyMenuPopup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu * #BMB_bookmarksPopup: looks like arrow panel */ /* Empty Menu */ menupopup menupopup[emptyplacesresult] .menu-text, #PersonalToolbar menupopup[emptyplacesresult] .menu-text { margin-inline-start: 0 !important; } /* Bookmark Popup - As Arrow Panel */ #BMB_bookmarksPopup, #PersonalToolbar { --context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline); } /* Windows */ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { /* Bookmark Popup - None icon menu */ menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; padding-inline-start: var(--bookmark-menu-icon-text-padding) !important; background-position: var(--uc-menu-background-position) var(--bookmark-menu-icon-background-padding) center !important; } } /* Windows 7, 8 */ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { /* Global Menu */ menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item { padding-inline-start: 0 !important; } } /* Linux */ @media (-moz-gtk-csd-available) { /* Global Menu */ menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item { padding-inline-start: var(--context-menu-background-padding) !important; } /* Bookmark Popup - Iconic menu */ #BMB_bookmarksPopup .menu-iconic-text, #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text { margin-inline-start: -1px !important; } /* Bookmark Popup - None icon menu */ menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic), #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { padding-inline-start: calc(var(--context-menu-background-padding) + 2px) !important; } menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) .menu-text, menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) .menu-text, #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) .menu-text, #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) .menu-text { margin-inline-start: var(--context-menu-text-padding) !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { /* Bookmark Popup - As Arrow Panel */ #PersonalToolbar menupopup menuitem, #PersonalToolbar menupopup menu { padding-inline: var(--arrowpanel-menuitem-padding-inline) !important; } /* Bookmark Popup - None icon menu */ menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important; } #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important; } menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) > .menu-text, menupopup:is(#BMB_bookmarksPopup)[placespopup="true"] menu:not(.menu-iconic) > .menu-text, #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]) > .menu-text, #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } } @supports -moz-bool-pref("userChrome.icon.context_menu") { /** Context Menu - Icons ******************************************************/ /*= tabContextMenu ===========================================================*/ #context_openANewTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition, #sidebartabs_asamuzak_jp-menuitem-_newTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow { --menuitem-image: url("chrome://browser/skin/window.svg"); } #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow { --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #context_reloadTab, #context_reloadSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_reloadTab, #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:reloadTree, #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, #sidebartabs_asamuzak_jp-menuitem-_reloadTab, #sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, #context_toggleMuteSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab, #sidebartabs_asamuzak_jp-menuitem-_muteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); stroke: transparent !important; } #context_toggleMuteTab[muted], #context_toggleMuteSelectedTabs[muted], #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"], #sidebartabs_asamuzak_jp-menuitem-_muteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, #context_pinSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab, #sidebartabs_asamuzak_jp-menuitem-_pinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, #context_unpinSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"], #sidebartabs_asamuzak_jp-menuitem-_pinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, #context_duplicateTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab, #sidebartabs_asamuzak_jp-menuitem-_dupeTab { --menuitem-image: url("../icons/tab-copy.svg"); } #tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab { --menuitem-image: url("../icons/tab-unload.svg"); } #context_bookmarkTab, #context_bookmarkSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_bookmarkSelected, #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:bookmarkTree, #sidebartabs_asamuzak_jp-menuitem-_bookmarkTab, #sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context_moveTabOptions, #treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab, #sidebartabs_asamuzak_jp-menuitem-_moveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } #context_sendTabToDevice, #treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice { --menuitem-image: url("../icons/send-to-device.svg"); } #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { /* At windows */ --menuitem-image: url("../icons/share.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #context_shareTabURL, menuitem.share-tab-url-item { --menuitem-image: url("../icons/share.svg"); } } #context_reopenInContainer, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, #sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer, #sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } #context_selectAllTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_selectAllTabs, #sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } #context_closeTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:closeTree, #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, #sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #context_closeTabOptions, #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeMultipleTabs, #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs, #sidebartabs_asamuzak_jp-menuitem-_closeMultipleTabs { --menuitem-image: url("../icons/filter-dismiss.svg"); } } #context_undoCloseTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_undoCloseTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, #sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } /*= new-tab-button-popup =====================================================*/ #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { --menuitem-image: url("../icons/container-openin-16.svg"); } #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"], .new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } /*= toolbar-context-menu =====================================================*/ .customize-context-manageExtension { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } .customize-context-removeExtension { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } .customize-context-reportExtension { --menuitem-image: url("../icons/send.svg"); } .customize-context-moveToPanel { --menuitem-image: url("chrome://browser/skin/pin-12.svg"); } #toolbar-context-autohide-downloads-button { /* checkbox */ --menuitem-image: url("../icons/eye-tracking-off.svg"); } .customize-context-removeFromToolbar { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #toolbar-context-always-open-downloads-panel { /* checkbox */ --menuitem-image: url("../icons/drawer-arrow-download.svg"); } #toolbar-context-openANewTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #toolbar-context-reloadSelectedTab, #toolbar-context-reloadSelectedTabs { --menuitem-image: url("../icons/reload.svg"); } #toolbar-context-bookmarkSelectedTab, #toolbar-context-bookmarkSelectedTabs { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #toolbar-context-selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } #toolbar-context-undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } #toggle_toolbar-menubar { /* checkbox */ --menuitem-image: url("../icons/calendar-agenda.svg"); } #toggle_PersonalToolbar { /* Also placeContext */ --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } menuitem.viewCustomizeToolbar { --menuitem-image: url("chrome://browser/skin/customize.svg"); } .fullscreen-context-autohide { /* checkbox */ --menuitem-image: url("../icons/eye-tracking-off.svg"); } #toolbar-context-menu > menuitem[data-l10n-id="full-screen-exit"] { --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); } /*= Tab Mix Plus =============================================================*/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8), (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { #context_openANewTab.tabmix-newtab-menu-icon .menu-iconic-left { display: none; } } @supports -moz-bool-pref("userChrome.icon.menu.full") { #tm-duplicateinWin { --menuitem-image: url("../icons/tab-desktop-multiple-bottom.svg"); } #tm-mergeWindowsTab { --menuitem-image: url("../icons/merge.svg"); } } #tm-renameTab { --menuitem-image: url("chrome://global/skin/icons/edit.svg"); } #tm-copyTabUrl { --menuitem-image: url("../icons/link.svg"); } #tm-autoreloadTab_menu { --menuitem-image: url("../icons/timer10.svg"); } #context_reloadTabOptions { --menuitem-image: url("../icons/reload.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #context_reloadTabOptions { --menuitem-image: url("../icons/filter-reload.svg"); } } @supports not -moz-bool-pref("userChrome.icon.menu.full") { #context_reloadTabOptions + #context_reloadTab { --menuitem-image: url("../icons/blank.svg"); } } #tm-docShell { --menuitem-image: url("chrome://browser/skin/permissions.svg"); } #tm-freezeTab { --menuitem-image: url("../icons/weather-snowflake.svg"); } #tm-protectTab { --menuitem-image: url("../icons/shield-task.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #tm-lockTab { --menuitem-image: url("../icons/lock-closed.svg"); } } @supports -moz-bool-pref("userChrome.icon.menu.full") { #context_bookmarkAllTabs { --menuitem-image: url("../icons/bookmark-multiple.svg"); } } /*= contentAreaContextMenu ===================================================*/ #context-viewsource-goToLine { --menuitem-image: url("../icons/text-number-format.svg"); } #context-viewsource-wrapLongLines { /* checkbox */ --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); } #context-viewsource-highlightSyntax { /* checkbox */ --menuitem-image: url("../icons/highlight.svg"); } #spell-no-suggestions { --menuitem-image: url("../icons/text-proofing-tools.svg"); } #spell-add-to-dictionary { --menuitem-image: url("../icons/book-add.svg"); } #spell-undo-add-to-dictionary { --menuitem-image: url("../icons/undo.svg"); } #context-openlinkincurrent { --menuitem-image: url("../icons/link-square.svg"); } #context-openlinkincontainertab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #context-openlinkintab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #context-openlinkinusercontext-menu { --menuitem-image: url("../icons/container-openin-16.svg"); } #context-openlink { --menuitem-image: url("chrome://browser/skin/window.svg"); } #context-openlinkprivate { --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #context-bookmarklink { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context-savelink { --menuitem-image: url("../icons/toolbarButton-download.svg"); } #context-savelinktopocket { --menuitem-image: url("../icons/pocket-outline.svg"); } #context-copyemail { --menuitem-image: url("chrome://browser/skin/mail.svg"); } #context-copylink { --menuitem-image: url("../icons/link.svg"); } #context-sendlinktodevice { --menuitem-image: url("../icons/send-to-device.svg"); } #context-media-play { --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); } #context-media-pause { --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); } #context-media-mute { --menuitem-image: url("chrome://global/skin/media/audio-muted.svg"); } #context-media-unmute { --menuitem-image: url("chrome://global/skin/media/audio.svg"); } #context-media-playbackrate { --menuitem-image: url("../icons/time-picker.svg"); } #context-media-loop { /* checkbox */ --menuitem-image: url("../icons/arrow-repeat-all.svg"); } #context-leave-dom-fullscreen { --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg"); } #context-video-fullscreen { --menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg"); } #context-media-hidecontrols { --menuitem-image: url("../icons/eye-hide.svg"); } #context-media-showcontrols { --menuitem-image: url("../icons/eye-show.svg"); } #context-viewvideo { --menuitem-image: url("../icons/video.svg"); } #context-video-pictureinpicture { /* checkbox */ --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); } #context-reloadimage { --menuitem-image: url("../icons/image-arrow-counterclockwise.svg"); } #context-viewimage { --menuitem-image: url("../icons/image-add.svg"); } #context-saveimage { --menuitem-image: url("../icons/image.svg"); } #context-video-saveimage { --menuitem-image: url("../icons/video-snapshot.svg"); } #context-savevideo { --menuitem-image: url("../icons/video.svg"); } #context-saveaudio { --menuitem-image: url("chrome://global/skin/media/audio.svg"); } #context-copyimage-contents { --menuitem-image: url("../icons/image-copy.svg"); } #context-copyimage, #context-copyvideourl, #context-copyaudiourl { --menuitem-image: url("../icons/link.svg"); } #context-sendimage, #context-sendvideo, #context-sendaudio { --menuitem-image: url("chrome://browser/skin/mail.svg"); } #context-viewimageinfo { --menuitem-image: url("chrome://global/skin/icons/info.svg"); } #context-viewimagedesc { --menuitem-image: url("../icons/image-alt-text.svg"); } #context-setDesktopBackground { --menuitem-image: url("../icons/resize-image.svg"); } #context-ctp-play { --menuitem-image: url("chrome://global/skin/icons/plugin.svg"); } #context-ctp-hide { --menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg"); } #context-savepage { --menuitem-image: url("../icons/toolbarButton-download.svg"); } #context-pocket { --menuitem-image: url("../icons/pocket-outline.svg"); } #context-sendpagetodevice { --menuitem-image: url("../icons/send-to-device.svg"); } #fill-login { --menuitem-image: url("../icons/password.svg"); } #fill-login-generated-password { --menuitem-image: url("chrome://browser/skin/login.svg"); } #manage-saved-logins { --menuitem-image: url("../icons/key-multiple.svg"); } #context-undo { --menuitem-image: url("../icons/undo.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #context-redo { --menuitem-image: url("../icons/redo.svg"); } } #context-cut { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #context-copy { --menuitem-image: url("../icons/edit-copy.svg"); } #context-paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #context-delete { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #context-selectall { --menuitem-image: url("../icons/select-all-on.svg"); } #context-reveal-password { --menuitem-image: url("../icons/eye-show.svg"); } #context-print-selection { --menuitem-image: url("chrome://global/skin/icons/print.svg"); } #context-take-screenshot { --menuitem-image: url("chrome://browser/skin/screenshot.svg"); } #context-keywordfield { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context-searchselect, #context-searchselect-private { --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } #frame { --menuitem-image: url("../icons/command-frames.svg"); } #spell-check-enabled { /* checkbox */ --menuitem-image: url("../icons/text-proofing-tools.svg"); } #spell-add-dictionaries-main { --menuitem-image: url("../icons/book-add.svg"); } #spell-dictionaries { --menuitem-image: url("../icons/book.svg"); } #context-bidi-text-direction-toggle { --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg"); } #context-bidi-page-direction-toggle { --menuitem-image: url("../icons/document-landscape-split-hint.svg"); } #context-viewpartialsource-selection, #context-viewsource { --menuitem-image: url("../icons/document-search.svg"); } #context-inspect-a11y { --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg"); } #context-inspect { --menuitem-image: url("../icons/command-pick.svg"); } #context-media-eme-learnmore { /* iconic */ } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #context-back { --menuitem-image: url("chrome://browser/skin/back.svg"); } #context-forward { --menuitem-image: url("chrome://browser/skin/forward.svg"); } #context-reload { --menuitem-image: url("../icons/reload.svg"); } #context-stop { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } #context-bookmarkpage { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } } /*= Tab Mix Plus =============================================================*/ #tm-autoreload_menu { --menuitem-image: url("../icons/timer10.svg"); } #tm-linkWithhistory { --menuitem-image: url("../icons/new-tab-skip-forward.svg"); } #tm-openAllLinks { --menuitem-image: url("../icons/new-tab-multiple.svg"); } #tm-openinverselink { --menuitem-image: url("../icons/new-tab-forward.svg"); } #tm-content-closetab { --menuitem-image: url("../icons/dismiss-filled.svg"); } #tm-duplicateTabContext { --menuitem-image: url("../icons/tab-copy.svg"); } #tm-duplicateinWinContext { --menuitem-image: url("../icons/tab-desktop-multiple-bottom.svg"); } #tm-detachTabContext { --menuitem-image: url("../icons/convert-range.svg"); } #tm-mergeWindows { --menuitem-image: url("../icons/merge.svg"); } #tm-content-freezeTab { --menuitem-image: url("../icons/weather-snowflake.svg"); } #tm-content-protectTab { --menuitem-image: url("../icons/shield-task.svg"); } #tm-content-lockTab { --menuitem-image: url("../icons/lock-closed.svg"); } #tm-content-undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } /*= downloadsContextMenu =====================================================*/ .downloadPauseMenuItem { --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); } .downloadResumeMenuItem { --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); } .downloadUnblockMenuItem { --menuitem-image: url("../icons/checkmark-circle.svg"); } .downloadUseSystemDefaultMenuItem { --menuitem-image: url("chrome://browser/skin/open.svg"); } .downloadAlwaysUseSystemDefaultMenuItem { /* checkbox */ --menuitem-image: url("../icons/folder-globe.svg"); } .downloadAlwaysOpenSimilarFilesMenuItem { /* checkbox */ --menuitem-image: url("../icons/fluid.svg"); } .downloadShowMenuItem { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); } @supports -moz-bool-pref("userChrome.icon.library") { .downloadShowMenuItem { --menuitem-image: url("../icons/folder.svg"); } } #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem, #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { --menuitem-image: url("../icons/link-square.svg"); } #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem, #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { --menuitem-image: url("../icons/link.svg"); } .downloadDeleteFileMenuItem { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } .downloadRemoveFromHistoryMenuItem { --menuitem-image: url("../icons/eraser.svg"); } #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { --menuitem-image: url("../icons/broom.svg"); } /*= placeContext =============================================================*/ #placesContext_open { --menuitem-image: url("../icons/link-square.svg"); } #placesContext_openBookmarkContainer\:tabs, #placesContext_openBookmarkLinks\:tabs { --menuitem-image: url("../icons/movetowindow-16.svg"); } #placesContext_open\:newtab, #placesContext_openContainer\:tabs, #placesContext_openLinks\:tabs { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #placesContext_open\:newcontainertab { --menuitem-image: url("../icons/container-openin-16.svg"); } #placesContext_open\:newwindow { --menuitem-image: url("chrome://browser/skin/window.svg"); } #placesContext_open\:newprivatewindow { --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #placesContext_show_bookmark\:info, #placesContext_show\:info, #placesContext_show_folder\:info { --menuitem-image: url("chrome://global/skin/icons/edit.svg"); } #placesContext_deleteBookmark, #placesContext_deleteFolder, #placesContext_delete, #placesContext_delete_history { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #placesContext_deleteHost { --menuitem-image: url("../icons/eye-hide.svg"); } #placesContext_sortBy\:name { --menuitem-image: url("../icons/text-sort-ascending.svg"); } #placesContext_cut { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #placesContext_copy { --menuitem-image: url("../icons/edit-copy.svg"); } #placesContext_paste_group { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #placesContext_new\:bookmark { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); } @supports -moz-bool-pref("userChrome.icon.library") { #placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("../icons/folder.svg"); } } #placesContext_new\:separator { --menuitem-image: url("../icons/vertical-line.svg"); } #placesContext_paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #placesContext_createBookmark { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #show-other-bookmarks_PersonalToolbar { /* checkbox */ --menuitem-image: url("../icons/star-line-horizontal.svg"); } #placesContext_showAllBookmarks { --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); } .openintabs-menuitem { --menuitem-image: url("../icons/movetowindow-16.svg"); } /*= Notification =============================================================*/ #doNotDisturbMenuItem { --menuitem-image: url(chrome://global/skin/media/pause-fill.svg); } #disableForOriginMenuItem { --menuitem-image: url("chrome://global/skin/icons/blocked.svg"); } #openSettingsMenuItem { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } /*= blockedPopupOptions ======================================================*/ #blockedPopupAllowSite { --menuitem-image: url("chrome://global/skin/icons/check.svg"); } #blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] { --menuitem-image: url("chrome://global/skin/icons/edit.svg"); } #blockedPopupDontShowMessage { /* checkbox */ --menuitem-image: url("chrome://global/skin/icons/blocked.svg"); } /*= autohide-context =========================================================*/ #autohide-context > menuitem[data-l10n-id="full-screen-autohide"] { /* checkbox */ --menuitem-image: url("../icons/eye-tracking-off.svg"); } #autohide-context > menuitem[data-l10n-id="full-screen-exit"] { --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); } /*= pictureInPictureToggleContextMenu ========================================*/ #pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] { --menuitem-image: url("../icons/eye-hide.svg"); } /*= pageActionContextMenu ====================================================*/ .pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } .pageActionContextMenuItem.extensionPinned.extensionUnpinned .removeExtensionItem { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } /*= customizationPanelItemContextMenu ========================================*/ #customizationPanelItemContextMenuUnpin { --menuitem-image: url("../icons/unpin-tab.svg"); } .customize-context-removeFromPanel { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } /*= customizationPaletteItemContextMenu ======================================*/ .customize-context-addToToolbar { --menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg"); } .customize-context-addToPanel { --menuitem-image: url("chrome://browser/skin/menu.svg"); } /*= customizationPanelContextMenu ============================================*/ #customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] { --menuitem-image: url("chrome://browser/skin/customize.svg"); } /*= downloads-button-autohide-panel ==========================================*/ #downloads-button-autohide-checkbox { /* checkbox */ --menuitem-image: url("../icons/eye-tracking-off.svg"); } /*= SyncedTabsSidebarContext =================================================*/ #syncedTabsOpenSelected { --menuitem-image: url("../icons/link-square.svg"); } #syncedTabsOpenSelectedInTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #syncedTabsOpenSelectedInWindow { --menuitem-image: url("chrome://browser/skin/window.svg"); } #syncedTabsOpenSelectedInPrivateWindow { --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #syncedTabsBookmarkSelected { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #syncedTabsCopySelected { --menuitem-image: url("../icons/link.svg"); } #syncedTabsOpenAllInTabs { --menuitem-image: url("../icons/movetowindow-16.svg"); } #syncedTabsManageDevices { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } #syncedTabsRefresh { --menuitem-image: url("chrome://browser/skin/sync.svg"); } /*= SyncedTabsSidebarTabsFilterContext =======================================*/ #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] { --menuitem-image: url("../icons/undo.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { --menuitem-image: url("../icons/edit-copy.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { --menuitem-image: url("../icons/select-all-on.svg"); } #syncedTabsRefreshFilter { --menuitem-image: url("chrome://browser/skin/sync.svg"); } /*= urlbar-input-container ===================================================*/ #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { --menuitem-image: url("../icons/undo.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { --menuitem-image: url("../icons/redo.svg"); } } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { --menuitem-image: url("../icons/edit-copy.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #paste-and-go { --menuitem-image: url("../icons/edit-paste-go.svg"); } } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] { --menuitem-image: url("../icons/select-all-on.svg"); } /*= textbox-contextmenu ======================================================*/ /* Browser's Searchbar, Library's Searchbar, Page Info */ .textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] { --menuitem-image: url("../icons/undo.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { .textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] { --menuitem-image: url("../icons/redo.svg"); } } .textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] { --menuitem-image: url("../icons/edit-copy.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] { --menuitem-image: url("../icons/select-all-on.svg"); } /* Only searchbar */ @supports -moz-bool-pref("userChrome.icon.menu.full") { menuitem.searchbar-paste-and-search { --menuitem-image: url("../icons/edit-paste-search.svg"); } } menuitem.searchbar-clear-history { --menuitem-image: url("chrome://browser/skin/forget.svg"); } /*= context_sendTabToDevicePopupMenu =========================================*/ .sync-menuitem.sendtab-target[clientType="phone"] { --menuitem-image: url("chrome://browser/skin/device-phone.svg"); } .sync-menuitem.sendtab-target[clientType="tablet"] { --menuitem-image: url("chrome://browser/skin/device-tablet.svg"); } .sync-menuitem.sendtab-target[clientType="desktop"] { --menuitem-image: url("chrome://browser/skin/device-desktop.svg"); } .sync-menuitem.sendtab-target[clientType="tv"] { --menuitem-image: url("chrome://browser/skin/device-tv.svg"); } .sync-menuitem.sendtab-target[clientType="vr"] { --menuitem-image: url("chrome://browser/skin/device-vr.svg"); } .sync-menuitem.sendtab-target[clientType=""] { --menuitem-image: url("../icons/send-to-device.svg"); } .sync-menuitem.sendtab-target:not([clientType]) { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } #treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice\:manage { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } /*= unified-extensions-context-menu ==========================================*/ .unified-extensions-context-menu-pin-to-toolbar { --menuitem-image: url("../icons/pin-tab.svg"); } .unified-extensions-context-menu-manage-extension { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } .unified-extensions-context-menu-remove-extension { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } .unified-extensions-context-menu-report-extension { --menuitem-image: url("../icons/send.svg"); } } @supports -moz-bool-pref("userChrome.icon.global_menubar") { /*= main-menubar =============================================================*/ #file-menu { --menuitem-image: url("../icons/mail-inbox-all.svg"); } #edit-menu { --menuitem-image: url("chrome://global/skin/icons/edit.svg"); } #view-menu { --menuitem-image: url("../icons/content-view.svg"); } #history-menu { --menuitem-image: url("chrome://browser/skin/history.svg"); } #bookmarksMenu { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #tools-menu { --menuitem-image: url("../icons/toolbox.svg"); } #helpMenu { --menuitem-image: url("chrome://global/skin/icons/help.svg"); } } @supports -moz-bool-pref("userChrome.icon.global_menu") { /** Global Menu ***************************************************************/ /*= menu_FilePopup ===========================================================*/ #menu_newNavigatorTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #menu_newUserContext { --menuitem-image: url("../icons/container-openin-16.svg"); } #menu_newNavigator { --menuitem-image: url("chrome://browser/skin/window.svg"); } #menu_newPrivateWindow { --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #menu_openFile { --menuitem-image: url("chrome://browser/skin/open.svg"); } #menu_savePage { --menuitem-image: url("../icons/toolbarButton-download.svg"); } #menu_sendLink { --menuitem-image: url("chrome://browser/skin/mail.svg"); } menu.share-tab-url-item { --menuitem-image: url("chrome://browser/skin/share.svg"); } #menu_print { --menuitem-image: url("chrome://global/skin/icons/print.svg"); } #menu_importFromAnotherBrowser { --menuitem-image: url("chrome://browser/skin/import.svg"); } #goOfflineMenuitem { /* checkbox */ --menuitem-image: url("../icons/plug-disconnected.svg"); } #menu_FileQuitItem { --menuitem-image: url("../icons/quit.svg"); } /* Mange Containers */ #menu_newUserContext menupopup menuitem:last-child { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } /*= menu_EditPopup ===========================================================*/ #menu_undo { --menuitem-image: url("../icons/undo.svg"); } @supports -moz-bool-pref("userChrome.icon.menu.full") { #menu_redo { --menuitem-image: url("../icons/redo.svg"); } } #menu_cut { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #menu_copy { --menuitem-image: url("../icons/edit-copy.svg"); } #menu_paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #menu_delete { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #menu_selectAll { --menuitem-image: url("../icons/select-all-on.svg"); } #menu_find { --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } #menu_preferences { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } /*= menu_viewPopup ===========================================================*/ #viewToolbarsMenu { --menuitem-image: url("../icons/toolbar.svg"); } #viewSidebarMenuMenu { --menuitem-image: var(--uc-sidebar-icon); } #viewFullZoomMenu { --menuitem-image: url("../icons/screenshot.svg"); } #pageStyleMenu { --menuitem-image: url("../icons/document-css.svg"); } #repair-text-encoding { --menuitem-image: url("chrome://browser/skin/characterEncoding.svg"); } #enterFullScreenItem { --menuitem-image: url("chrome://browser/skin/fullscreen.svg"); } #exitFullScreenItem { --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); } #fullScreenItem { /* checkbox */ --menuitem-image: url("chrome://browser/skin/fullscreen.svg"); } #menu_readerModeItem { --menuitem-image: url("chrome://browser/skin/reader-mode.svg"); } #menu_showAllTabs { --menuitem-image: url("../icons/tab.svg"); } #documentDirection-swap { --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg"); } /* view-menu-popup sub menu */ #menu_customizeToolbars { --menuitem-image: url("chrome://browser/skin/customize.svg"); } /* viewSidebarMenu sub menu */ #menu_bookmarksSidebar { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #menu_historySidebar { --menuitem-image: url("chrome://browser/skin/history.svg"); } #menu_tabsSidebar { --menuitem-image: url("../icons/synced-tabs.svg"); } /* viewFullZoomMenu sub menu */ #menu_zoomEnlarge { --menuitem-image: url("chrome://browser/skin/add-circle-fill.svg"); stroke: transparent !important; } #menu_zoomReduce { --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg"); stroke: transparent !important; } #menu_zoomReset { --menuitem-image: url("../icons/resize.svg"); } #toggle_zoom { --menuitem-image: url("../icons/screenshot.svg"); } /*= goPopup ==================================================================*/ #menu_showAllHistory { --menuitem-image: url("chrome://browser/skin/history.svg"); } #sanitizeItem { --menuitem-image: url("chrome://browser/skin/forget.svg"); } #sync-tabs-menuitem { --menuitem-image: url("chrome://browser/skin/sync.svg"); } #historyRestoreLastSession { --menuitem-image: url("../icons/restore-session.svg"); } #hiddenTabsMenu { --menuitem-image: url("../icons/eye-hide.svg"); } #historyUndoMenu { --menuitem-image: url("chrome://browser/skin/tab.svg"); } #historyUndoWindowMenu { --menuitem-image: url("chrome://browser/skin/window.svg"); } /* sub menu */ #historyUndoPopup .restoreallitem { --menuitem-image: url("../icons/movetowindow-16.svg"); } #historyUndoWindowPopup .restoreallitem { --menuitem-image: url("../icons/restore-session.svg"); } /*= bookmarksMenuPopup =======================================================*/ #bookmarksShowAll { --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); } #menu_bookmarkThisPage, #menu_bookmarkAllTabs { --menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg"); } #menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"] { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } /*= menu_ToolsPopup ==========================================================*/ #menu_openDownloads { --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg"); } #menu_openAddons { --menuitem-image: url("chrome://mozapps/skin/extensions/extension.svg"); } #sync-setup { --menuitem-image: url("chrome://browser/skin/fxa/avatar-empty.svg"); } #sync-syncnowitem { --menuitem-image: url("chrome://browser/skin/sync.svg"); } #menu_openFirefoxView { --menuitem-image: url("chrome://branding/content/icon32.png"); } #webDeveloperMenu, #browserToolsMenu { --menuitem-image: url("../icons/developer.svg"); } #menu_pageInfo { --menuitem-image: url("../icons/document-endnote.svg"); } /* menuWebDeveloperPopup sub menu */ #menu_devToolbox { /* checkbox */ --menuitem-image: url("../icons/developer.svg"); } #menu_taskManager { --menuitem-image: url("../icons/performance.svg"); } #menu_devtools_remotedebugging { --menuitem-image: url("../icons/bug.svg"); } #menu_browserToolbox { --menuitem-image: url("../icons/window-dev-tools.svg"); } #menu_browserContentToolbox { --menuitem-image: url("../icons/command-frames.svg"); } #menu_browserConsole { --menuitem-image: url("chrome://devtools/skin/images/command-console.svg"); } #menu_responsiveUI { /* checkbox */ --menuitem-image: url("../icons/command-responsivemode.svg"); } #menu_eyedropper { /* checkbox */ --menuitem-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); } #menu_pageSource { --menuitem-image: url("../icons/document-search.svg"); } #extensionsForDevelopers { --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg"); } /*= windowPopup ==============================================================*/ #windowPopup > menuitem[command="minimizeWindow"] { --menuitem-image: url("../icons/arrow-between-down.svg"); } #windowPopup > menuitem[command="zoomWindow"] { --menuitem-image: url("../icons/auto-fit-width.svg"); } /*= menu_HelpPopup ===========================================================*/ #menu_openHelp { --menuitem-image: url("chrome://global/skin/icons/help.svg"); } #feedbackPage { --menuitem-image: url("../icons/send.svg"); } #helpSafeMode { --menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg"); } #troubleShooting { --menuitem-image: url("chrome://global/skin/icons/more.svg"); } #help_reportSiteIssue { --menuitem-image: url("chrome://global/skin/icons/lightbulb.svg"); } #menu_HelpPopup_reportPhishingtoolmenu { --menuitem-image: url("chrome://global/skin/icons/warning.svg"); } #aboutName { --menuitem-image: url("chrome://global/skin/icons/info.svg"); } } @supports -moz-bool-pref("userChrome.icon.library") { /*= organizeButtonPopup ======================================================*/ #newbookmark { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #newfolder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); } @supports -moz-bool-pref("userChrome.icon.library") { #newfolder { --menuitem-image: url("../icons/folder.svg"); } } #newseparator { --menuitem-image: url("../icons/vertical-line.svg"); } #orgUndo { --menuitem-image: url("../icons/undo.svg"); } #orgCut { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #orgCopy { --menuitem-image: url("../icons/edit-copy.svg"); } #orgPaste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #orgDelete { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #orgSelectAll { --menuitem-image: url("../icons/select-all-on.svg"); } #orgClose { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } /*= viewMenuPopup ============================================================*/ #viewColumns { --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); } #viewSort { --menuitem-image: url("../icons/text-sort-ascending.svg"); } /*= maintenanceButtonPopup ===================================================*/ #backupBookmarks { --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); } #fileImport { --menuitem-image: url("../icons/toolbarButton-download.svg"); } #fileExport { --menuitem-image: url("chrome://browser/skin/open.svg"); } #browserImport { --menuitem-image: url("chrome://browser/skin/import.svg"); } } } /** Waterfox ******************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenu-restart-button { list-style-image: url("../icons/refresh-cw.svg") !important; } } @supports -moz-bool-pref("userChrome.icon.menu") { #menu_FileRestartItem { --menuitem-image: url("../icons/refresh-cw.svg"); } #toggle_status-dummybar { --menuitem-image: url("../icons/pulse-square.svg"); } menuitem.privatetab-icon { --menuitem-image: url("../icons/private-favicon.svg"); } } /** Tor Browser ***************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenuNewIdentity { list-style-image: url("chrome://browser/skin/new_identity.svg"); } #appMenuNewCircuit { list-style-image: url("chrome://browser/skin/new_circuit.svg"); } #appMenu_torBrowserUserManual { list-style-image: url("chrome://browser/skin/onion.svg"); } } @supports -moz-bool-pref("userChrome.icon.menu") { #menu_newIdentity { --menuitem-image: url("chrome://browser/skin/new_identity.svg"); } #menu_newCircuit { --menuitem-image: url("chrome://browser/skin/new_circuit.svg"); } #torBrowserUserManual { --menuitem-image: url("chrome://browser/skin/onion.svg"); } } }