exu/configs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
3f9736c350
configs/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css

12246 lines
522 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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");
}
}
}
Reference in New Issue View Git Blame Copy Permalink