From aa7e85eb7bcace926deb705de46aed712b3f3067 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Mar 2022 07:18:40 +0900 Subject: [PATCH] Clean: SASS - use built in theme fn --- src/theme/_built_in.scss | 9 +- src/userChrome.scss | 2 + userChrome.css | 6432 +------------------------------------- 3 files changed, 25 insertions(+), 6418 deletions(-) diff --git a/src/theme/_built_in.scss b/src/theme/_built_in.scss index a994c92..421433f 100644 --- a/src/theme/_built_in.scss +++ b/src/theme/_built_in.scss @@ -1,19 +1,16 @@ // lwtheme-mozlightdark: Legacy - v96 /*= Lightmode - Color darker =================================================*/ -:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), /* Legacy */ -:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { +#{built-in-light-theme()} { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } @include OS($win10, $mac) { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, /* Legacy */ - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + #{selector.nest(built-in-light-theme(), "#navigator-toolbox")} { background-color: var(--lwt-accent-color) !important; } } /*= Darkmode - Color lighter =================================================*/ -:root[lwtheme-mozlightdark][lwthemetextcolor="bright"], /* Legacy */ -:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { +#{built-in-dark-theme()} { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } diff --git a/src/userChrome.scss b/src/userChrome.scss index 284fbd5..42affaa 100644 --- a/src/userChrome.scss +++ b/src/userChrome.scss @@ -1,6 +1,8 @@ @use "utils/os" as *; @use "utils/option" as *; @use "utils/color_scheme" as *; +@use "utils/theme" as *; +@use "sass:selector"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; diff --git a/userChrome.css b/userChrome.css index ced3d26..53fe2ce 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,6414 +1,22 @@ -@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -@namespace html "http://www.w3.org/1999/xhtml"; -/** Default Thme - 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) */ - } +/* Error: expected selector. + * , + * 5 | built-in-light-theme(){ + * | ^ + * ' + * src/theme/_built_in.scss 5:21 @import + * src/userChrome.scss 11:11 @content + * src/utils/_option.scss 7:5 @content + * src/utils/_each.scss 18:9 AtEach() + * src/utils/_option.scss 6:3 Option() + * src/userChrome.scss 10:1 root stylesheet */ - @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);"] { - 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);"] { - 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) */ - } +body::before { + font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", + "Droid Sans Mono", monospace, monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: "Error: expected selector.\a \2577 \a 5 \2502 built-in-light-theme(){\a \2502 ^\a \2575 \a src/theme/_built_in.scss 5:21 @import\a src/userChrome.scss 11:11 @content\a src/utils/_option.scss 7:5 @content\a src/utils/_each.scss 18:9 AtEach()\a src/utils/_option.scss 6:3 Option()\a src/userChrome.scss 10:1 root stylesheet"; } -/** 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; - } - - /*= 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 */ - /* Light Theme */ - #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { - border: unset !important; - /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ - } - - /* Dark Theme */ - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - border: unset !important; - /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ - } - } - /*= 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; - } - } - :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.3); - /* Legacy: v96 */ - --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); - } -} -/*= OS - Compatibility =======================================================*/ -@supports -moz-bool-pref(userChrome.compatibility.os) { - /*= 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:-moz-lwtheme { - color: var(--lwt-text-color) !important; - } - - /* Remove Aero */ - #TabsToolbar { - /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */ - background-image: unset !important; - } - } - @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - #navigator-toolbox:-moz-lwtheme { - color: var(--lwt-text-color) !important; - } - } - /*= Windows 7, 8 - Menu Active Color =========================================*/ - @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 */ - } - - 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) { - 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=disabled], -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=disabled], -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-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 =====================================*/ - .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; - } - } - } -} -/** 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: -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); - } - - #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-seperator-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-shorcut-text-color: #757575; - --win-error-color: #b31616; - --win-red-border-color: #ff4343; - --win-accent-forground-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-seperator-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-shorcut-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%, -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-shorcut-text-color) !important; - --panel-description-color: var(--win-shorcut-text-color) !important; - /* Title Background, Border Color */ - --menu-border-color: var(--win-bgcolor) !important; - --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; - /* Seperator */ - --toolbarseparator-color: var(--win-tab-seperator-color) !important; - /* Field Backround 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 Forground Color */ - --button-primary-color: var(--win-accent-forground-color) !important; - --checkbox-checked-color: var(--win-accent-forground-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; - } - - /*- Proton Tab Selected ----------------------------------------------------*/ - @supports -moz-bool-pref(userChrome.tab.proton) { - :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: transparent !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: -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, -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: -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: -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 */ - /* 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 Backround 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 Backround 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 Forground */ - --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; - } - - @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 -moz-bool-pref(userChrome.tab.proton) { - :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.connect_to_window) { - :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, white 15%, -moz-dialog) !important; - } - } - :root:not([customizing=true]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, -:root:not([customizing=true]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after, -:root:not([customizing=true])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before, -:root:not([customizing=true])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after { - fill: color-mix(in srgb, white 15%, -moz-dialog) !important; - } - } -} -/** Fully Theme Mode **********************************************************/ -/* Default Themes - https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json - */ -@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 radiobuttons */ - --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-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); - } - - @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); - } - } -} -@supports -moz-bool-pref(userChrome.theme.fully_color) { - /*== Menu Color ==============================================================*/ - html#main-window menupopup { - /* 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 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. - */ - } - - /* Fallback background */ - 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) !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; - border-radius: 4px; - 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: -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 { - 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, rgba(204, 204, 204, 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, rgba(204, 204, 204, 0.5)) !important; - /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ - } -} -/* 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: #05d1f1 !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; - } - - /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding - * the 1px border): */ - button.medium { - 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:-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; - } - - 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; - } - - @inclue 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; - } - } - /*- Radio Button -----------------------------------------------------------*/ - xul|radio { - /* margin-inline-start: 0 !important; */ - appearance: none !important; - } - - xul|*.radio-check { - appearance: none !important; - width: 16px !important; - height: 16px !important; - padding: 0 !important; - border: 1px solid var(--in-content-box-border-color) !important; - border-radius: 100% !important; - margin-block: 2px !important; - /* extend the vertical clicktarget */ - margin-inline: 0 6px !important; - background-color: var(--in-content-button-background) !important; - background-position: center !important; - flex-shrink: 0 !important; - /* avoid shrinking inside flex container */ - } - - 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-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])[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; - } - - xul|checkbox[disabled=true], -xul|radio[disabled=true], -xul|label[disabled=true] { - opacity: 0.5 !important; - } - - /*- Check Box --------------------------------------------------------------*/ - /* From checkbox.css */ - checkbox { - appearance: none !important; - -moz-box-align: center !important; - margin: 4px 2px !important; - } - - .checkbox-icon[src] { - margin-inline-end: 2px !important; - } - - .checkbox-label { - margin: 1px 0 !important; - } - - checkbox[disabled=true] { - opacity: 0.4 !important; - } - - .checkbox-check { - appearance: none !important; - color: var(--checkbox-border-color, ThreeDDarkShadow) !important; - background-color: var(--checkbox-unchecked-bgcolor, Field) !important; - border: 1px solid currentColor !important; - border-radius: 2px !important; - margin-inline-end: 6px !important; - } - - .checkbox-check { - height: 16px !important; - width: 16px !important; - } - - 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, -moz-accent-color 8%, Field)) !important; - } - - .checkbox-check[checked] { - border-color: var(--checkbox-checked-border-color, transparent) !important; - background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; - background-image: url("chrome://global/skin/icons/check.svg") !important; - background-position: center !important; - background-repeat: no-repeat !important; - -moz-context-properties: fill !important; - fill: currentColor !important; - color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; - } - - 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%, -moz-accent-color)) !important; - } - - checkbox:-moz-focusring > .checkbox-check { - outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; - outline-offset: var(--focus-outline-offset, 2px) !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, -moz-accent-color 4%, Field)) !important; - } - - .checkbox-check[checked] { - color: var(--checkbox-checked-border-color, currentColor) !important; - fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; - } - - checkbox:not([disabled=true]):hover:active > .checkbox-check[checked], -checkbox:not([disabled=true]):hover > .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; - } - } - /* From common.css */ - xul|*.checkbox-check { - margin-block: 2px !important; - } - - 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, -moz-accent-color) !important; - outline-offset: var(--focus-outline-offset, 2px) !important; - } - - #label-box { - -moz-box-align: center !important; - -moz-box-pack: center !important; - font-weight: 600 !important; - } - - dropmarker { - display: -moz-box !important; - appearance: none !important; - width: 12px !important; - height: 12px !important; - } - - /* dropmarker::part(icon) - * ::part is not apply chrome - */ - dropmarker[exportparts="icon: dropmarker-icon"] { - 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: -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: -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 Exeption 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 antialising 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 antialising 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 { - border-radius: 8px !important; - padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; - margin: 4px !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; */ - } - - #viewGroup > radio { - color: var(--in-content-deemphasized-text) !important; - /* FieldText */ - } - - #viewGroup > radio { - 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; - } - - #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 6 !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-primary-button-background); - --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-outline-color: rgb(0, 221, 255); - --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; - } - - #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; - border-radius: 4px !important; - padding-block: 5px !important; - padding-inline-start: 5px !important; - margin-inline-end: 2px !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; - } - - #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 { - 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; - } - - /*- 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; - list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); - -moz-context-properties: fill !important; - fill: currentColor !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 { - list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); - } - - #editBookmarkPanelRows .expander-up > .button-box, -#editBookmarkPanelRows .expander-down > .button-box { - padding: 0 !important; - } - - #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; - } - - #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; - } - - #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; - } - } - } -} -/** 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 { - cursor: pointer !important; - } - - /* TODO: For now, fxa-menu doesn't show any status. - (JS required, observe .syncNowBtn status) - #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] { - cursor: progress !important; - } - */ -} -@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); - } - - /*- 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: -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, -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"]) .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), 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: -moz-box-flex 0.2s var(--animation-easing-function), margin-inline-start 0.2s var(--animation-easing-function) !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; - } - - /*- Border - Other Fields --------------------------------------------------*/ - #search-box:hover, -xul|search-textbox.tabsFilter:hover, -#editBMPanel_namePicker:hover, -#editBMPanel_tagsField:hover, -.findbar-container .findbar-textbox:hover { - 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 ----------------------------------------------------------------*/ - #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; - } - - #sidebar-box[hidden=true] { - 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 0.3s var(--animation-easing-function) 50ms; - } - - #navigator-toolbox[inFullscreen=true]:hover { - transition-duration: 1.5s; - transition-delay: 0.1s; - } - - @keyframes fullscreen { - from { - margin-top: 0; - } - /* Dont' 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); - background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; - } - } - /*- 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); - } - } -} -/** 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; - } -} -@supports -moz-bool-pref(userChrome.tab.photon_like_radius) { - :root { - --tab-border-radius: 0px !important; - /* Original: 4px */ - } - - /* Fix Tab bar button radious */ - #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack, -.tab-close-button { - --tab-border-radius: 4px !important; - } -} -/*= Tab Bar - Reduce Width, Show more tabs ===================================*/ -@supports -moz-bool-pref(userChrome.padding.first_tab) { - /* for First Tab Space */ - :root { - --space-left-tabbar: 8px; - /* If the option is not specified, it is equivalent to 0px. */ - } - - :root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]), -:root:is([sizemode=maximized], [sizemode=fullscreen]) #tabbrowser-tabs:not([positionpinnedtabs]) { - padding-inline-start: var(--space-left-tabbar) !important; - } -} -@supports -moz-bool-pref(userChrome.padding.tabbar_width) { - /* Titlebar Space */ - .titlebar-spacer[type=pre-tabs] { - width: 30px !important; - /* Original: 40px */ - } - - .titlebar-spacer[type=post-tabs] { - width: 25px !important; - /* Original: 40px */ - } - - /* 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; - } - } - .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) { - .tabbrowser-tab { - padding-inline: 1px !important; - } - - .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -0.5px !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 { - --space-above-tabbar: 8px; - /* If the option is not specified, it is equivalent to 0px. */ - } - - :root[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide=true] { - height: calc(var(--tab-min-height) + var(--space-above-tabbar)); - } - - :root[sizemode=normal][chromehidden~=menubar] #TabsToolbar > .toolbar-items, -:root[sizemode=normal] #toolbar-menubar[autohide=true][inactive] + #TabsToolbar > .toolbar-items { - padding-top: var(--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]) #TabsToolbar { - --tab-min-height: 36px; - } - - :root[uidensity=compact] #TabsToolbar { - --tab-min-height: 32px; - } - - :root[uidensity=touch] #TabsToolbar { - --tab-min-height: 41px; - } - } - @supports -moz-bool-pref(userChrome.tab.photon_like_padding) { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 32px; - } - - :root[uidensity=compact] #TabsToolbar { - --tab-min-height: 29px; - } - - :root[uidensity=touch] #TabsToolbar { - --tab-min-height: 41px; - } - - /* Top Margin */ - .tab-background, -.tab-content { - margin-top: 0 !important; - } - } - @supports not -moz-bool-pref(userChrome.tab.photon_like_padding) { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px !important; - /* 38px -> 36px */ - } - - :root[uidensity=compact] #TabsToolbar { - --tab-min-height: 29px !important; - /* 36px -> 29px */ - } - } - @supports -moz-bool-pref(userChrome.tab.connect_to_window) { - #TabsToolbar { - --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; - /* Prevent overflow pinned tab bottom margin */ - } - - :root:not([uidensity=compact]) #tabbrowser-arrowscrollbox, -#tabbrowser-arrowscrollbox[overflowing=true] > .tabbrowser-tab[pinned=true], -#tabbrowser-arrowscrollbox[overflowing=true] > .tabbrowser-tab[pinned=true] .tab-stack, -#tabbrowser-arrowscrollbox[overflowing=true] > .tabbrowser-tab[pinned=true] .tab-content { - max-height: var(--tab-min-height) !important; - /* Force apply height */ - } - - :root[uidensity=compact] #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 */ - } - - /* Pinned Tab - Titlechanged Indicator position fix */ - .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: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important; - } - - :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected=true]), -:root[uidensity=compact] .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: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important; - } - - :root[uidensity=touch] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected=true]), -:root[uidensity=touch] .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: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; - } -} -/*= Tool Bar - Button Padding ================================================*/ -@supports -moz-bool-pref(userChrome.padding.toolbar_button) { - :root[uidensity=compact] { - --toolbarbutton-outer-padding: 2px !important; - /* Original: 3px, General is 2px */ - } -} -/*= 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 -moz-bool-pref(userChrome.padding.urlbar) { - :root:not([uidensity=touch]) #urlbar-container, -:root:not([uidensity=touch]) #search-container { - padding-block: 3px !important; - /* Original: 4px */ - margin-inline: 5px !important; - /* Original: 5px */ - } - - :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; - } -} -/*= BookMark Bar - Reduce Height =============================================*/ -@supports -moz-bool-pref(userChrome.padding.bookmarkbar) { - :root[uidensity=compact] #PersonalToolbar toolbarbutton { - margin-top: 0px; - /* Original: 2px */ - } -} -/*= Info Bar - Reduce Padding ================================================*/ -@supports -moz-bool-pref(userChrome.padding.infobar) { - :root:not([uidensity]) #tab-notification-deck { - --infobar-message-margin: 0 4px 3px; - } - - :root[uidensity=compact] #tab-notification-deck { - --infobar-message-margin: 0 4px 2px; - } - - #tab-notification-deck notification-message[message-bar-type=infobar]:not([style*=margin-top]) { - margin: var(--infobar-message-margin, 0 4px 4px) !important; - } - - :root:not([uidensity]) notification-message[message-bar-type=infobar] { - --infobar-vertical-margin: 7px; - --infobar-button-vertical-margin: 3px; - } - - :root[uidensity=compact] notification-message[message-bar-type=infobar] { - --infobar-vertical-margin: 6px; - --infobar-button-vertical-margin: 2px; - } - - .infobar > .icon { - margin-block: var(--infobar-vertical-margin, 8px) !important; - /* Original: 8px */ - } - - .notification-message { - padding-block: var(--infobar-vertical-margin, 8px) !important; - /* Original: 8px */ - } - - .notification-button-container > .notification-button { - margin-block: var(--infobar-button-vertical-margin, 4px) !important; - /* Original: 4px */ - } - - .notification-close { - margin: var(--infobar-button-vertical-margin, 4px) 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(0, #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; - } - - 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; - } - - @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; - } - - :root:not([uidensity=touch]) #BMB_bookmarksPopup .subviewbutton, -: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; - } -} -/*= Global Menu - Set Padding ================================================*/ -@supports -moz-bool-pref(userChrome.padding.global_menu) { - /* Vertical Align - Center & Height: 100% */ - #main-menubar { - -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; - } -} -/*= Panel - Reduce padding ===================================================*/ -@supports -moz-bool-pref(userChrome.padding.panel) { - :root { - --arrowpanel-menuicon-padding: 8px; - --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; - /* Original: 0 8px */ - --arrowpanel-menuitem-padding: 5px !important; - /* Original: 8px */ - --arrowpanel-padding: 0.8em !important; - /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ - } - - :root[uidensity=compact] { - --arrowpanel-menuitem-padding: 3px !important; - /* Original: 8px */ - } - - :root[uidensity=touch] { - --arrowpanel-menuitem-padding: 8px !important; - /* Original: 8px */ - } -} -/*= 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 */ - /* Footer Button Height */ - :root[uidensity=compact] .panel-footer.panel-footer-menulike > button { - padding: 3px 8px !important; - } - - /* Footer Button Height */ - :root[uidensity=compact] #protections-popup-trackersView-settings-button { - margin: 4px 8px 0 !important; - } - - /* not cut off for Protection popup Footer on windows */ - :root[uidensity=compact] #protections-popup-multiView #protections-popup-footer { - padding: 3px 0 10px !important; - } - - /* Button and disabled category in Protection popup */ - :root[uidensity=compact] #protections-popup-multiView .protections-popup-footer-button, -:root[uidensity=compact] #protections-popup-multiView .protections-popup-category { - height: 20px !important; - min-height: 20px !important; - } - - /* Footer Button in Tracking Content Panel */ - :root[uidensity=compact] #protections-popup-multiView .panel-footer.panel-footer-menulike { - margin: 0 0 3px !important; - } - - /* Identity popup header padding */ - :root[uidensity=compact] #identity-popup-multiView #identity-popup-mainView-panel-header { - padding: 2px 5px !important; - } - - /* Text When There is no trackers */ - :root[uidensity=compact] #protections-popup-no-trackers-found-description { - margin: 2em 4em !important; - } - - /* Download Item margin */ - :root[uidensity=compact] #downloadsListBox { - margin: 0 !important; - } -} -/** Tab Bar UI ****************************************************************/ -/*= Tab Bar - 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; - } - - #TabsToolbar { - overflow: hidden; - /* Prevent toolbar area over */ - } - - /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - z-index: 0 !important; - } -} -/*= Selected Tab =============================================================*/ -/*= Selected Tab - Color like toolbar ========================================*/ -@supports -moz-bool-pref(userChrome.tab.connect_to_window) { - :root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ - --tab-selected-bgcolor: unset !important; - /* Original: rgb(255,255,255); */ - } - - #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) { - #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme { - background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; - } - - .tab-background[multiselected=true]:not([selected=true]) > .tab-loading-burst:not([bursting]) { - background: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; - } - - #TabsToolbar[brighttext] .tab-background[multiselected=true]:not([selected=true]) > .tab-loading-burst:not([bursting]) { - opacity: 0.15; - } -} -/*= Selected Tab - Box Shadow ================================================*/ -@supports -moz-bool-pref(userChrome.tab.box_shadow) { - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected=true]:not(:focus) > .tab-stack > .tab-background:-moz-lwtheme { - /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) - Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; - } - - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; - } - - /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ - #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { - box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), 0 0 4px rgba(128, 128, 142, 0.5) !important; - } - - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; - } - - /* 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 { - box-shadow: 0 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), 0 0 4px rgba(128, 128, 142, 0.5) !important; - } - - :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 { - box-shadow: 0 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; - } -} -/*= Selected Tab - Bottom Rounded Corner =====================================*/ -@supports -moz-bool-pref(userChrome.tab.bottom_rounded_corner) { - #tabbrowser-tabs { - --tab-corner-rounding: 3px; - /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - } - - :root:not([customizing=true]) tab[visuallyselected] > stack::before, -:root:not([customizing=true]) tab[visuallyselected] > stack::after { - content: "" !important; - /* Box */ - display: block !important; - position: absolute !important; - z-index: 1 !important; - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; - /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; - -moz-context-properties: fill, stroke !important; - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - - :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]) tab[visuallyselected] > stack:-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]) tab[visuallyselected] > stack:-moz-lwtheme::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color) !important; - } - - tab[visuallyselected] > stack::before { - left: var(--tab-corner-position) !important; - background-image: url("./icons/tab-bottom-corner-left.svg"); - } - - tab[visuallyselected] > stack::after { - left: auto; - right: var(--tab-corner-position); - background-image: url("./icons/tab-bottom-corner-right.svg"); - } - - @media (-moz-gtk-csd-available) { - /* Fill color for GTK */ - :root:not([customizing=true]):not([lwtheme=true]) tab[visuallyselected] > stack::before, -:root:not([customizing=true]):not([lwtheme=true]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + backround-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, white 15%, -moz-dialog) !important; - stroke: transparent !important; - } - - :root:not([customizing=true]):not([lwtheme=true]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, -:root:not([customizing=true]):not([lwtheme=true]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { - stroke: transparent !important; - } - } -} -/*= Selected Tab - Photon like contextline ===================================*/ -@supports -moz-bool-pref(userChrome.tab.photon_like_contextline) { - :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 */ - } - } - .tab-context-line { - 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) */ - background-color: var(--tab-line-color, #0a84ff) !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 identitiy 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_separtor) { - @supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { - #tabbrowser-arrowscrollbox { - position: absolute; - } - - .tab-background::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(-2.5px) translateY(calc(-50% + 1px)); - } - } - @supports not -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { - .tab-background::before, -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::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); - } - - .tab-background::before { - transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important; - } - - .tabbrowser-tab[last-visible-tab] .tab-background::after { - right: 0; - transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important; - } - } - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { - opacity: var(--tab-separator-opacity); - } - - @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[first-visible-unpinned-tab] .tab-background::before, -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after { - opacity: var(--tab-separator-opacity); - } - } - #navigator-toolbox:not([movingtab]) .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before, -#navigator-toolbox:not([movingtab]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::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-background::before, -#navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) ~ .tabbrowser-tab[afterhovered] .tab-background::before, -#navigator-toolbox:not([movingtab]) .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) ~ #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-background::before { - opacity: 0 !important; - } - } - /* Animate */ - @media (prefers-reduced-motion: no-preference) { - .tab-background::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-visible-tab] .tab-background::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-visible-tab] { - margin-inline-end: 1px !important; - } -} -/*= Unselected Tab - Static Separator ========================================*/ -@supports -moz-bool-pref(userChrome.tab.static_separator) { - .tabbrowser-tab[first-visible-tab=true] .tab-background::before, -.tab-background::after { - content: ""; - } - - .tab-background::before, -.tab-background::after { - /* Box Model */ - display: block; - position: absolute; - /* Position */ - top: 50%; - transform: translateY(calc(-50% + 1px)) !important; - /* Bar shape */ - width: 0px; - height: 100%; - /* Bar Color */ - opacity: 0.3; - border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; - } - - .tab-background::after { - right: 0; - } - - .tabbrowser-tab[visuallyselected] .tab-background::before, -.tabbrowser-tab[visuallyselected] .tab-background::after, -.tabbrowser-tab[beforeselected-visible] .tab-background::after { - opacity: 0; - } - - /* Animate */ - @media (prefers-reduced-motion: no-preference) { - .tab-background::before, -.tab-background::after { - transition: opacity 0.2s var(--animation-easing-function); - /* cubic-bezier(.07, .95, 0, 1) */ - } - } -} -/*= New tab button ============================================================*/ -/*= New tab button - Looks like tab ==========================================*/ -@supports -moz-bool-pref(userChrome.tab.newtab_button_like_tab) { - #tabs-newtab-button { - /* Original: - margin: 0 0 var(--tabs-navbar-shadow-size) !important - => Can't ovrride style. Therefore, we should approach it by bypass. - */ - --tabs-navbar-shadow-size: -1px; - /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; - --tab-corner-rounding: 4px; - /* Hardcorded */ - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; - /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); - /* Corner Rounding Color */ - fill: transparent !important; - -moz-context-properties: fill !important; - } - - /* Corner Rounding Color */ - #tabs-newtab-button:hover { - fill: var(--toolbarbutton-hover-background) !important; - } - - #tabs-newtab-button:hover:active { - fill: var(--toolbarbutton-active-background) !important; - } - - @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, -moz-accent-color-foreground 10%, transparent) !important; - /* Hardcorded 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; - /* Hardcorded for compatibility */ - } - } - /* '+'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(--tabs-navbar-original-shadow-size)) !important; - -moz-context-properties: fill, fill-opacity; - fill: var(--toolbarbutton-icon-fill); - fill-opacity: var(--toolbarbutton-icon-fill-opacity); - } -} -/*= New tab button - Smaller button ==========================================*/ -@supports -moz-bool-pref(userChrome.tab.newtab_button_smaller) { - #tabs-newtab-button > .toolbarbutton-icon { - margin-left: 1px; - /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - --toolbarbutton-inner-padding: 6px; - } - - :root[uidensity=compact] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 4px; - /* Photon: 6px */ - } - - :root[uidensity=touch] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 9px; - /* Photon: 9px */ - } -} -/*= 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); - } - - :root:not([uidensity=compact]) #tabs-newtab-button > .toolbarbutton-icon { - margin-left: 2px; - } - - :root[uidensity=compact] #tabs-newtab-button > .toolbarbutton-icon { - margin-left: 1px; - } -} -/*= Unloaded Tab - Contents Opacity ===========================================*/ -@supports -moz-bool-pref(userChrome.tab.unloaded) { - #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content { - opacity: 0.7; - } -} -/*= Clipped tabs =============================================================*/ -/** Clipped tabs - Letters cleary *********************************************/ -@supports -moz-bool-pref(userChrome.tab.letters_cleary) { - :root { - --inline-tab-padding: 6px !important; - /* Original: 8px */ - } - - :root[uidensity=touch] { - --inline-tab-padding: 8px !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-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]), -#tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) { - mask-image: linear-gradient(to right, black 70%, transparent) !important; - } - - #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection=rtl]:not([pinned]), -#tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) { - mask-image: linear-gradient(to left, black 70%, transparent) !important; - } -} -/** 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: -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; - } - - /* Animate */ - @media (prefers-reduced-motion: no-preference) { - /* Fade out */ - #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - transition: opacity 0.1s var(--animation-easing-function) !important; - } - - /* Fade in */ - #tabbrowser-tabs[closebuttons=activetab] .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) > .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) */ - } -} -/*= Sound Tab ================================================================*/ -/*= Sound Tab - Hide Label ===================================================*/ -@supports -moz-bool-pref(userChrome.tab.sound_hide_label) { - .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { - display: none !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) */ - .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(-0.5px) 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; - } - - .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { - transform: translateX(4px); - } - - /* 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 > .tab-label { - transition: transform 0.25s var(--animation-easing-function); - } - } - /* None exist favicon - Size bigger */ - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - transform: translateX(-0.5px) 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([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { - transform: translateX(3px); - } - - /* 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(-0.5px) 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: -moz-inline-box !important; - width: 14px; - height: 14px; - background-size: 14px; - -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 { - -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.tab.photon_like_contextline) { - .tab-context-line { - display: none; - } - } - .tab-content:not([titlechanged])::before { - /* Box Model */ - content: ""; - display: block; - position: absolute !important; - transform: translate(9px, 12px) !important; - /* 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) !important; - transition-property: width, opacity; - } - } - /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { - transform: translateY(12px) !important; - width: 16px; - } - - /* 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: 32%, 50%, 70% !important; - } - - :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected=true]), -:root[uidensity=compact] .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); */ - background-position-x: 30%, 50%, 70% !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]) { - background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; - } - - :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]) { - background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; - } -} -/*= Crashed Tab - Don't show Favicons ========================================*/ -@supports -moz-bool-pref(userChrome.tab.crashed) { - .tab-icon-image[crashed] { - display: none !important; - } -} -/** Fullscreen - Overlap toolbar **********************************************/ -@supports -moz-bool-pref(userChrome.fullscreen.overlap) { - @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root[sizemode=fullscreen] #navigator-toolbox { - position: fixed !important; - /* Needed for content to take up entire height */ - display: block !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 */ - } - - :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 */ - } - } -} -/** 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; - } - - /* Boomark */ - :-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; - } - - /* Boomark */ - :-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 !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: -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 *************************************************************/ -@supports -moz-bool-pref(userChrome.icon.panel) { - /*= Padding ==================================================================*/ - :root { - --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important; - --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; - } - - .subviewbutton > .toolbarbutton-icon { - width: 16px; - } - - @supports -moz-bool-pref(userChrome.icon.panel_sparse) { - :root { - /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); - --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); - } - - :root[uidensity=compact] { - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); - } - - :root[uidensity=touch] { - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); - } - - :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) - 2px) !important; - /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc( - var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding) - ); - --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); - } - } - #downloadsHistory .button-text, -.subviewbutton > .toolbarbutton-text { - padding-inline-start: var(--arrowpanel-menuicon-padding) !important; - } - - .toolbaritem-combined-buttons > .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; - } - - #appMenu-multiView .subviewbutton::before, -#appMenu-proton-update-banner::before { - display: -moz-inline-box; - margin-inline-end: var(--arrowpanel-menuicon-padding); - width: 16px; - height: 16px; - } - - #appMenu-proton-update-banner { - margin-bottom: 2px !important; - } - - #appMenu-proton-update-banner::before { - margin-inline-start: var(--arrowpanel-menuitem-padding) !important; - } - - #appMenu-fxa-status2, -#appMenu-zoom-controls2 { - align-items: center; - padding-top: var(--arrowpanel-menuimageblank-padding) !important; - padding-bottom: var(--arrowpanel-menuimageblank-padding) !important; - } - - #appMenu-zoom-controls2::before { - margin-inline-end: 0 !important; - } - - .subviewbutton[type=checkbox]:not([checked=true]) > .toolbarbutton-text { - margin-left: 16px !important; - } - - /* Icons Color */ - #appMenu-multiView .subviewbutton::before, -#appMenu-proton-update-banner::before, -#downloadsHistory .button-icon, -.subviewbutton > image { - fill: currentColor !important; - fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important; - -moz-context-properties: fill !important; - } - - #appMenu-zoomReduce-button2 > .toolbarbutton-icon, -#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { - stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important; - -moz-context-properties: fill, stroke !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: -moz-inline-box !important; - margin-inline-start: var(--arrowpanel-menuicon-padding); - -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) { - #appMenu-new-tab-button2 { - list-style-image: url("chrome://browser/skin/new-tab.svg"); - } - } - @supports -moz-bool-pref(userChrome.icon.panel_sparse) { - #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) !important; - padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; - } - - #appMenu-zoom-controls2 { - 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) { - #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("chrome://browser/skin/save.svg"); - } - - #appMenu-find-button2 { - list-style-image: url("chrome://global/skin/icons/search-glass.svg"); - } - - #appMenu-zoom-controls2::before { - content: url("./icons/screenshot.svg"); - } - } - #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"); - } - - #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: -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); - } - - .syncNowBtn { - visibility: visible !important; - -moz-box-ordinal-group: 1 !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("chrome://browser/skin/fxa/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; - 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)) !important; - padding-inline-start: var(--arrowpanel-menublank-padding) !important; - } - - /* Change Separator */ - #PanelUI-fxa-menu::before { - content: ""; - display: -moz-box; - border-bottom: 1px solid var(--panel-separator-color); - margin: var(--panel-separator-margin); - padding: 0; - } - - #PanelUI-fxa-menu > :first-child { - -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 { - 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 Toolbaox - */ - #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: -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("chrome://global/skin/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/password-hide.svg"); - } - - #allTabsMenu-containerTabsView .subviewbutton:last-child { - list-style-image: url("chrome://global/skin/icons/settings.svg"); - } - - /*= BMB_bookmarksPopup =======================================================*/ - #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: -moz-box !important; - } - } - /*= 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: 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("chrome://browser/skin/tab.svg"); - } - - #sidebar-reverse-position { - list-style-image: url("chrome://browser/skin/sidebars-right.svg"); - } - - #sidebar-box[positionend=true] #sidebar-reverse-position { - /* Can't apply this. shadow dom */ - list-style-image: url("chrome://browser/skin/sidebars.svg"); - } - - #sidebarMenu-popup > .subviewbutton[data-l10n-id=sidebar-menu-close] { - list-style-image: url("chrome://global/skin/icons/close.svg"); - } -} -/** Menu - Icons Layout *******************************************************/ -@supports -moz-bool-pref(userChrome.icon.menu) { - menupopup menuitem:not([type=checkbox], [type=radio]), -menupopup menu:not([type=checkbox], [type=radio]), -#main-menubar > menu { - -moz-appearance: none !important; - /* Linux: menulist */ - } - - /* Icon */ - :not(menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, .in-menulist, [type=checkbox], [checked=true]), -:not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [type=checkbox], [checked=true]), -#main-menubar > menu, -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type=checkbox], [checked=true]), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type=checkbox], [checked=true]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -#blockedPopupDontShowMessage { - /* Color */ - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - /* Layout */ - background-size: 16px !important; - background-repeat: no-repeat !important; - background-image: var(--menuitem-image); - } - - /* For native context menus on macOS */ - @supports -moz-bool-pref("widget.macos.native-context-menus") { - :not(menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, [type=checkbox], [checked=true], .in-menulist), -:not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type=checkbox], [checked=true], .in-menulist) { - list-style-image: var(--menuitem-image) !important; - } - } - /* Padding */ - :root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); - } - - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type=checkbox], [checked=true], .bookmark-item), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type=checkbox], [checked=true]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -#blockedPopupDontShowMessage { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; - } - - /* Menubar */ - @supports -moz-bool-pref(userChrome.icon.global_menu) { - #main-menubar > menu { - background-position: left 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: left 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 */ - } - } - /* 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) { - /* Checkbox */ - :root { - --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); - } - - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type=checkbox][checked=false] > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); - } - } - @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - :root { - --context-menu-background-padding-default: 2px; - } - } - @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - :root { - --context-menu-background-padding-default: 3px; - } - } - @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type=checkbox], [checked=true], .in-menulist), -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type=checkbox], [checked=true], .in-menulist), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type=checkbox], [checked=true], .bookmark-item), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type=checkbox], [checked=true]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -#blockedPopupDontShowMessage { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; - } - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root { - --context-menu-background-padding: 1em; - --context-menu-text-padding: 24px; - /* 16px + 8px */ - --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); - } - - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type=checkbox], [checked=true], .in-menulist), -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type=checkbox], [checked=true], .in-menulist), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type=checkbox], [checked=true], .bookmark-item), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type=checkbox], [checked=true]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -#blockedPopupDontShowMessage { - 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; - } - - #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 > menuitem:not(.menuitem-iconic, [type=checkbox], [checked=true], .in-menulist), -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type=checkbox], [checked=true], .in-menulist), -#blockedPopupDontShowMessage { - padding-inline-end: var(--context-menu-background-padding) !important; - } - - /* text position */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text, -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text { - padding-inline-start: var(--context-menu-mac-padding) !important; - } - - /* Checkbox menuitem, None iconic menu */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type=checkbox], -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; - } - } - /*= Bookmark Menu - Layout ===================================================*/ - /* #goPopup(Legacy of historyMenuPoup), #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); - } - - /* 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; - } - - /* Bookmark Popup - None icon menu */ - #BMB_bookmarksPopup, -#PersonalToolbar { - --arrowpanel-menuicon-padding: 9px; - } - - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled=true]), -menupopup:is(#BMB_bookmarksPopup) 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-padding) !important; - background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; - } - - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled=true]), -menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { - padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important; - } - - #PersonalToolbar menupopup[placespopup=true] menuitem:not(.menuitem-iconic, [disabled=true]), -#PersonalToolbar menupopup[placespopup=true] menu:not(.menu-iconic) { - padding-inline-start: var(--arrowpanel-menuicon-padding) !important; - } - } - /* Windows */ - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled=true]), -menupopup:is(#BMB_bookmarksPopup) 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-padding) !important; - padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important; - background-position: left calc(var(--arrowpanel-menuicon-padding)) center !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 { - padding-inline-start: 1px !important; - } - - /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled=true]), -menupopup:is(#BMB_bookmarksPopup) 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(--arrowpanel-menuitem-padding) + 1px) !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - /* Bookmark Popup - As Arrow Panel */ - #PersonalToolbar menupopup menuitem, -#PersonalToolbar menupopup menu { - padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important; - } - - /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled=true]), -menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { - padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; - } - } - @supports -moz-bool-pref(userChrome.icon.context_menu) { - /** Context Menu - Icons ******************************************************/ - /*= tabContextMenu ===========================================================*/ - #context_openANewTab { - --menuitem-image: url("chrome://browser/skin/new-tab.svg"); - } - - #context_reloadTab, -#context_reloadSelectedTabs { - --menuitem-image: url("./icons/reload.svg"); - } - - #context_toggleMuteTab, -#context_toggleMuteSelectedTabs { - --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); - } - - #context_toggleMuteTab[muted], -#context_toggleMuteSelectedTabs[muted] { - --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); - } - - #context_pinTab, -#context_pinSelectedTabs { - --menuitem-image: url("./icons/pin-tab.svg"); - } - - #context_unpinTab, -#context_unpinSelectedTabs { - --menuitem-image: url("./icons/unpin-tab.svg"); - } - - #context_duplicateTab, -#context_duplicateTabs { - --menuitem-image: url("./icons/notebook-subsection.svg"); - } - - #context_bookmarkTab, -#context_bookmarkSelectedTabs { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #context_moveTabOptions { - --menuitem-image: url("./icons/arrow-swap.svg"); - } - - #context_sendTabToDevice { - --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"); - } - - #context_reopenInContainer { - --menuitem-image: url("./icons/container-openin-16.svg"); - } - - #context_selectAllTabs { - --menuitem-image: url("./icons/tab-multiple.svg"); - } - - #context_closeTab { - --menuitem-image: url("chrome://global/skin/icons/close.svg"); - } - - #context_undoCloseTab { - --menuitem-image: url("chrome://global/skin/icons/undo.svg"); - } - - /*= new-tab-button-popup =====================================================*/ - #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 { - --menuitem-image: url("./icons/password-hide.svg"); - } - - .customize-context-removeFromToolbar { - --menuitem-image: url("chrome://global/skin/icons/delete.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("chrome://global/skin/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"); - } - - /*= 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/code.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("chrome://global/skin/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("chrome://browser/skin/save.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("chrome://browser/skin/save.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("chrome://global/skin/icons/undo.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-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 */ - } - - #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"); - } - } - /*= 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\: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_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"); - } - - /*= 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 */ - } - - #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 */ - } - - /*= 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 */ - } - - .downloadShowMenuItem { - --menuitem-image: url("./icons/folder.svg"); - } - - #downloadsContextMenu > menuitem[command=downloadsCmd_openReferrer] { - --menuitem-image: url("./icons/link-square.svg"); - } - - #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"); - } - - /*= 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("chrome://global/skin/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("chrome://global/skin/icons/undo.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"); - } - - #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, Libray's Searchbar, Page Info */ - .textbox-contextmenu > menuitem[data-l10n-id=text-action-undo] { - --menuitem-image: url("chrome://global/skin/icons/undo.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 */ - menuitem.searchbar-clear-history { - --menuitem-image: url("chrome://browser/skin/forget.svg"); - } - - /*= context_sendTabToDevicePopupMenu =========================================*/ - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=phone] { - --menuitem-image: url("chrome://browser/skin/device-phone.svg"); - } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=tablet] { - --menuitem-image: url("chrome://browser/skin/device-tablet.svg"); - } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=desktop] { - --menuitem-image: url("chrome://browser/skin/device-desktop.svg"); - } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=tv] { - --menuitem-image: url("chrome://browser/skin/device-tv.svg"); - } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=vr] { - --menuitem-image: url("chrome://browser/skin/device-vr.svg"); - } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=""] { - --menuitem-image: url("./icons/send-to-device.svg"); - } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target:not([clientType]) { - --menuitem-image: url("chrome://global/skin/icons/settings.svg"); - } - } - @supports -moz-bool-pref(userChrome.icon.global_menu) { - /** Global Menu ***************************************************************/ - /*= 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"); - } - - /*= menu_FilePopup ===========================================================*/ - #menu_newNavigatorTab { - --menuitem-image: url("chrome://browser/skin/new-tab.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("chrome://browser/skin/save.svg"); - } - - #menu_sendLink { - --menuitem-image: url("chrome://browser/skin/mail.svg"); - } - - #menu_print { - --menuitem-image: url("chrome://global/skin/icons/print.svg"); - } - - #menu_importFromAnotherBrowser { - --menuitem-image: url("chrome://browser/skin/import.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("chrome://global/skin/icons/undo.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: url("chrome://browser/skin/sidebars.svg"); - } - - #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"); - } - - #fullScreenItem { - --menuitem-image: url("chrome://browser/skin/fullscreen.svg"); - } - - #menu_readerModeItem { - --menuitem-image: url("chrome://browser/skin/reader-mode.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"); - } - - /* viewFullZoomMenu sub menu */ - #menu_zoomEnlarge { - --menuitem-image: url("chrome://browser/skin/add-circle-fill.svg"); - } - - #menu_zoomReduce { - --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg"); - } - - #menu_zoomReset { - --menuitem-image: url("./icons/resize.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"); - } - - #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"); - } - - #webDeveloperMenu, -#browserToolsMenu { - --menuitem-image: url("./icons/developer.svg"); - } - - #menu_pageInfo { - --menuitem-image: url("./icons/document-endnote.svg"); - } - - /* menuWebDeveloperPopup sub menu */ - #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_pageSource { - --menuitem-image: url("./icons/document-search.svg"); - } - - #extensionsForDevelopers { - --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.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"); - } - } -} -/** Libray Menu ***************************************************************/ -@supports -moz-bool-pref(userChrome.icon.library) { - @supports -moz-bool-pref(userChrome.icon.menu) { - /*= organizeButtonPopup ======================================================*/ - #newbookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #newfolder { - --menuitem-image: url("./icons/folder.svg"); - } - - #newseparator { - --menuitem-image: url("./icons/vertical-line.svg"); - } - - #orgUndo { - --menuitem-image: url("chrome://global/skin/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("chrome://browser/skin/save.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"); - } - - menuitem.privatetab-icon { - list-style-image: url("./icons/priavate-favicon.svg") !important; - fill: currentColor; - -moz-context-properties: fill; - } -} -@supports -moz-bool-pref(userChrome.theme.fully_color) { - /* 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); - } -} -/*= 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"); - } -} - -/*# sourceMappingURL=userChrome.css.map */