diff --git a/README.org b/README.org index 161c53a..50e5ccc 100644 --- a/README.org +++ b/README.org @@ -73,7 +73,7 @@ It's in beta testing, and I'am looking forward to hearing from you. - Unselect: - Divide Line: React to hover like chrome - Unloaded: - - Dimmed: Looks like inactive + - Dimmed: Looks like inactive - Clipped: - Clearer Text: Adjusted clipped gradation - Closed Button: Visible on hover @@ -114,7 +114,7 @@ It's in beta testing, and I'am looking forward to hearing from you. bash -c "$(curl -fsSL https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.sh)" #+END_SRC - Windows users: Run with powershell +Windows users: Run with powershell ([[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution#windows-7-powershell-script-not-works][Does not work at Win7?]]) #+BEGIN_SRC powershell Powershell -c "Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iwr https://raw.githubusercontent.com/black7375/Firefox-UI-Fix/master/install.ps1 -useb | iex" #+END_SRC diff --git a/css/leptonChrome.css b/css/leptonChrome.css new file mode 100644 index 0000000..3790864 --- /dev/null +++ b/css/leptonChrome.css @@ -0,0 +1,7468 @@ +@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) */ + } + + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + background-color: var(--lwt-accent-color) !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + background-color: var(--lwt-accent-color) !important; + } + } + /*= Darkmode - Color lighter =================================================*/ + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; + /* Original: rgba(43, 42, 51, 1) */ + } +} +/** Compatibility Fixes *******************************************************/ +/*= Theme - Compatibility ====================================================*/ +@supports -moz-bool-pref("userChrome.compatibility.theme") { + /*= Hotfix #98 ===============================================================*/ + /* Hidden Tab Panel Padding */ + #allTabsMenu-hiddenTabsView .all-tabs-item { + margin-inline: 8px; + border-radius: 4px; + } + + /*= Remote Tabs Panel's Bottom Padding =======================================*/ + #PanelUI-remotetabs #PanelUI-remotetabs-main { + margin-bottom: 6px; + } + + /*= Identity Popup Icon Crop =================================================*/ + .identity-popup-security-connection.identity-button { + padding-block: 1px !important; + } + + /*= Zoom in button's plus icon horizontal rate ===============================*/ + #customization-palette-container #zoom-in-button > .toolbarbutton-icon, + #customization-panel-container #zoom-in-button > .toolbarbutton-icon, + #widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon { + padding-inline-start: 0px !important; + } + + /*= 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; + } + @supports -moz-bool-pref("userChrome.compatibility.covered_header_image") { + :root[lwtheme-image] { + background-size: cover; + } + } + } + :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; + background-repeat: var(--lwt-background-tiling) !important; + background-position: var(--lwt-background-alignment) !important; + background-color: unset !important; + /* Original: var(--lwt-accent-color) */ + } + + /* Navbar Border */ + #navigator-toolbox:-moz-lwtheme { + --tabs-border-color: rgba(0, 0, 0, 0.3); + /* Legacy: v96 */ + --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); + } +} +/*= OS - Compatibility =======================================================*/ +@supports -moz-bool-pref("userChrome.compatibility.os") { + /*= Windows 10 - Top border of accent color at ESR #358 ======================*/ + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { + border-top: 0.5px solid #2f2f2f !important; + } + + :root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { + border-top-color: #393939 !important; + } + + @media (-moz-windows-accent-color-in-titlebar) { + :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { + border-top-color: -moz-accent-color !important; + } + } + } + /*= Windows 7, 8 - Tab Bar Background *****************************************/ + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + /* Header Color */ + :root:not([lwtheme-image]):-moz-lwtheme { + background-color: var(--lwt-accent-color) !important; + } + } + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { + #TabsToolbar:-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 =====================================*/ + @supports not -moz-bool-pref("userChrome.compatiblity.os.linux_non_native_titlebar_button") { + .titlebar-button:-moz-lwtheme { + appearance: auto !important; + } + + .titlebar-min:-moz-lwtheme, + .titlebar-max:-moz-lwtheme, + .titlebar-restore:-moz-lwtheme, + .titlebar-close:-moz-lwtheme { + list-style-image: none !important; + } + + .titlebar-button:-moz-lwtheme:hover, + .titlebar-button:-moz-lwtheme:hover:active { + background-color: unset !important; + color: unset !important; + } + } + } + /*= Linux - Light System Default Theme's Selected Tab ========================*/ + @media (-moz-gtk-csd-available) { + @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) { + /* Because of + #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { + border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); + box-shadow: 0 0 4px rgba(128,128,142,0.5); + } + */ + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important; + } + + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:not(:-moz-lwtheme) { + box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important; + } + } + } +} +/*= Others - Compatibility ===================================================*/ +@supports -moz-bool-pref("userChrome.compatibility.panel_cutoff") { + #appMenu-popup panelview { + width: 24.5em !important; + /* can modify panel width, Original: 22.5em */ + } +} +@supports -moz-bool-pref("userChrome.compatibility.navbar_top_border") { + #nav-bar { + box-shadow: none !important; + } +} +/** 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); + --toolbarseparator-color: transparent; + } + + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + color: var(--background-color); + background-color: color-mix(in srgb, currentColor 60%, transparent); + } + + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab:hover + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + background-color: color-mix(in srgb, currentColor 85%, transparent) !important; + /* Original: color-mix(in srgb, currentColor 11%, transparent) */ + } + + #scrollbutton-up:not(:-moz-lwtheme), + #scrollbutton-down:not(:-moz-lwtheme), + #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack, + #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon { + color: var(--background-color) !important; + background-color: color-mix(in srgb, currentColor 50%, transparent); + } + } + /*= Windows10 - UWP like color ===============================================*/ + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root:not(:-moz-lwtheme) { + --win-text-color: rgba(0, 0, 0); + --win-bgcolor: rgb(204, 204, 204); + --win-disabled-color: rgb(145, 145, 145); + --win-disabled-bgcolor: transparent; + --win-hover-bgcolor: rgb(218, 218, 218); + /* also button-bgcolor */ + --win-hover-active-bgcolor: #c2c2c2; + /* also button-hover-bgcolor */ + --win-button-hover-bgcolor: rgba(218, 218, 218, 0.66); + --win-button-active-bgcolor: #aaaaaa; + --win-field-bgcolor: #ffffff; + --win-component-bgcolor: #f2f2f2; + --win-border-color: #8a8a8a; + --win-tab-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; + } + + @supports -moz-bool-pref("userChrome.theme.system_default") { + @media (-moz-windows-accent-color-in-titlebar) { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { + --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; + /* As default */ + } + } + } + /*- Proton Tab Selected ----------------------------------------------------*/ + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); + } + + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; + } + + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; + } + } + /*- Menu -------------------------------------------------------------------*/ + html#main-window menupopup:not(:-moz-lwtheme) { + --menu-color: var(--win-text-color) !important; + --menu-background-color: var(--win-component-bgcolor) !important; + --menu-border-color: var(--win-bgcolor) !important; + --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; + --menu-disabled-color: var(--win-disabled-color) !important; + --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; + } + + /*- Toolbar ----------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) #titlebar, + :root[lwt-default-theme-in-dark-mode] #titlebar { + --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor); + --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor); + --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor); + --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor); + } + + /*- Sidebar ----------------------------------------------------------------*/ + #sidebar-box:not([lwt-sidebar]) { + appearance: none !important; + } + + :root:not(:-moz-lwtheme) #sidebar-box, + :root[lwt-default-theme-in-dark-mode] #sidebar-box { + --sidebar-background-color: var(--win-sidebar-bgcolor) !important; + --sidebar-text-color: var(--win-text-color) !important; + --sidebar-border-color: var(--win-border-color) !important; + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { + /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ + --lwt-sidebar-background-color: 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 not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); + } + + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + } + /*- Toolbar ----------------------------------------------------------------*/ + :root:not(:-moz-lwtheme) #navigator-toolbox, + :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { + background-color: var(--mac-bgcolor) !important; + } + + :root:not(:-moz-lwtheme) #titlebar { + --mac-hover-bgcolor: ButtonFace; + } + + :root:not(:-moz-lwtheme) #titlebar, + :root[lwt-default-theme-in-dark-mode] #titlebar { + --button-hover-bgcolor: var(--mac-hover-bgcolor); + --button-active-bgcolor: var(--mac-hover-bgcolor); + --toolbarbutton-hover-background: var(--mac-hover-bgcolor); + --toolbarbutton-active-background: var(--mac-hover-bgcolor); + /* Prevent transparent tabbar at fullscreen hover #312 */ + background: var(--mac-bgcolor); + } + + :root[lwt-default-theme-in-dark-mode] #urlbar { + --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; + --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; + } + + /*- Sidebar ----------------------------------------------------------------*/ + #sidebar-box:not([lwt-sidebar]) { + appearance: none !important; + } + + :root:not(:-moz-lwtheme) #sidebar-box, + :root[lwt-default-theme-in-dark-mode] #sidebar-box { + --sidebar-background-color: var(--mac-sidebar-bgcolor) !important; + --sidebar-text-color: var(--mac-text-color) !important; + /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */ + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], + body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { + /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ + --lwt-sidebar-background-color: transparent !important; + --lwt-sidebar-text-color: var(--mac-text-color) !important; + } + } + :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup { + --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor); + --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor); + } + + /*- Others -----------------------------------------------------------------*/ + /* For Overwrite */ + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { + --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } + } + /* Hard Coded */ + @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"] { + background: color-mix(in srgb, white 15%, -moz-dialog) !important; + } + } + :root:not(:-moz-lwtheme):not([customizing="true"]) tab[visuallyselected] > stack::before, + :root:not(:-moz-lwtheme):not([customizing="true"]) tab[visuallyselected] > stack::after, + :root[lwt-default-theme-in-dark-mode]:not([customizing="true"]) tab[visuallyselected] > stack::before, + :root[lwt-default-theme-in-dark-mode]:not([customizing="true"]) tab[visuallyselected] > stack::after { + fill: color-mix(in srgb, 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-border-dark-color: var(--in-content-table-border-color); + --in-content-table-header-background: var(--in-content-primary-button-background); + /* Legacy: #0a84ff; rgb(5, 64, 150); */ + --in-content-table-header-color: var(--in-content-primary-button-text-color); + /* Legacy: #ffffff; var(--in-content-page-color); */ + --in-content-sidebar-width: 240px; + --dialog-warning-text-color: var(--red-60); + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + } + + @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.proton_color.dark_blue_accent") { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :host, + :root { + /* Color Memo + Just refer - Photon's dark color + --button-primary-bgcolor: #0060DF; + --button-primary-hover-bgcolor: #003EAA; + --button-primary-active-bgcolor: #002275; + --lwt-brighttext-url-color: #74c0ff; + --lwt-toolbarbutton-icon-fill-attention: #45a1ff; + + Just refer - Proton's light color + --in-content-accent-color: #0a84ff; + --in-content-accent-color-active: #0060df; + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + + --blue-40: #45a1ff; rgb(69, 161, 255) + --blue-50: #0a84ff; rgb(10, 132, 255) + --blue-60: #0060df; rgb(0, 96, 223) + --blue-70: #003eaa; rgb(0, 62, 170) + --blue-80: #002275; rgb(0, 34, 117) + + Relation + lighten(#0060df, 29%): #74b0ff; + lighten(#0060df, 19.8%): #4595ff + lighten(#0060df, 8.3%): #0a74ff + #0060df + darken(#0060df, 15.5%): #003e90; + darken(#0060df, 28.1%): #002250; + */ + --blue-20: #b6d6ff; + /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/ + --blue-30: #74c0ff; + /* rgb(116, 192, 255), Add for active color */ + } + + :host, + :root, + dialog { + --in-content-primary-button-text-color: var(--in-content-page-color) !important; + --in-content-primary-button-background: var(--blue-60) !important; + --in-content-primary-button-background-hover: var(--blue-50) !important; + --in-content-primary-button-background-active: var(--blue-40) !important; + --in-content-focus-outline-color: var(--blue-40) !important; + --in-content-accent-color: var(--blue-40) !important; + --in-content-accent-color-active: var(--blue-30) !important; + --in-content-table-background: rgb(35, 34, 43) !important; + --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important; + --in-content-table-header-background: rgb(5, 64, 150) !important; + --in-content-table-header-color: var(--in-content-page-color) !important; + --in-content-link-color: var(--blue-40) !important; + --in-content-link-color-hover: var(--blue-30) !important; + --in-content-link-color-active: var(--blue-20) !important; + --in-content-link-color-visited: var(--blue-40) !important; + } + + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + --button-primary-color: var(--in-content-page-color) !important; + --button-primary-bgcolor: var(--blue-60) !important; + --button-primary-hover-bgcolor: var(--blue-50) !important; + --button-primary-active-bgcolor: var(--blue-40) !important; + --focus-outline-color: var(--blue-40) !important; + --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important; + --download-progress-fill-color: var(--blue-40) !important; + --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important; + --lwt-brighttext-url-color: var(--blue-30) !important; + /* Original: as primary bgcolor */ + } + + @supports -moz-bool-pref("userChrome.decoration.download_panel") { + :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + --button-primary-bgcolor: var(--blue-30); + --button-primary-hover-bgcolor: var(--blue-20); + } + } + } + } +} +@supports -moz-bool-pref("userChrome.theme.fully_color") { + /*== Menu Color ==============================================================*/ + html#main-window menupopup { + /* 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; + } + + @media (prefers-contrast) { + xul|button[default]:not([disabled="true"]):hover { + border-color: currentColor !important; + } + + button:focus { + color: var(--in-content-button-text-color) !important; + } + + xul|button[default]:focus, + button.primary:focus { + color: var(--in-content-primary-button-text-color) !important; + } + } + /*- 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 6px !important; + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #viewGroup > radio > .radio-label-box { + padding-top: 32px !important; + /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */ + } + } + #mainDeck input { + color: var(--in-content-page-color) !important; + } + + #permList { + -moz-appearance: none !important; + color: var(--in-content-page-color) !important; + background-color: var(--in-content-box-background) !important; + } + + .permission:hover { + color: var(--in-content-text-color) !important; + background-color: var(--in-content-button-background-hover) !important; + } + + .permission radio[disabled] { + color: var(--in-content-deemphasized-text) !important; + } + + treecols { + -moz-appearance: none !important; + background: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + + treecols > treecol, + treecols > treecolpicker.treecol-image { + -moz-appearance: none !important; + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + border: 1px solid var(--in-content-table-border-color) !important; + padding: 4px !important; + border-spacing: 0; + text-align: center !important; + } + + tree, + treechildren::-moz-tree-row { + -moz-appearance: none !important; + color: var(--in-content-text-color) !important; + background-color: var(--in-content-table-background) !important; + border: 1px solid var(--in-content-table-border-color) !important; + } + + treechildren::-moz-tree-row(odd) { + background-color: var(--in-content-box-background-odd) !important; + } + + treechildren::-moz-tree-row(hover) { + color: var(--in-content-item-hover-text) !important; + background-color: var(--in-content-item-hover) !important; + } + + treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected) !important; + } + + treechildren::-moz-tree-cell { + border-inline: 1px solid var(--in-content-table-border-color) !important; + border-spacing: 0 !important; + padding: 4px !important; + margin: 0 !important; + } + + treechildren::-moz-tree-cell-text(hover) { + color: var(--in-content-item-hover-text) !important; + } + + treechildren::-moz-tree-cell-text(selected) { + font-weight: 600 !important; + color: var(--in-content-item-selected-text) !important; + } + + #imagecontainerbox { + background-color: var(--in-content-box-background) !important; + } + + #metatree, + #imagetree, + #imagecontainerbox, + #permList { + border-radius: 4px !important; + } + + #metatree, + #imagetree { + overflow: hidden !important; + } + + #topBar, + #imagecontainerbox, + #permList { + border-color: var(--in-content-table-border-color) !important; + } + } + /*= Library Popup ============================================================*/ + @-moz-document url("chrome://browser/content/places/places.xhtml") + { + @media (-moz-gtk-csd-available) { + :root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; + } + + @media not all and (prefers-contrast) { + :root { + --organizer-color: var(--in-content-page-color); + --organizer-deemphasized-color: var(--in-content-deemphasized-text); + --organizer-toolbar-background: rgb(249, 249, 251); + /* --toolbar-bgcolor */ + --organizer-pane-background: rgb(229, 229, 235); + /* --lwt-accent-color */ + --organizer-content-background: var(--in-content-page-background); + --organizer-hover-background: var(--in-content-button-background-hover); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: var(--in-content-button-background-active); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: var(--in-content-focus-outline-color); + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: var(--in-content-border-color); + --organizer-toolbar-field-background: rgb(240, 240, 244); + /* --lwt-accent-color */ + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix( + in srgb, + var(--organizer-outline-color) 50%, + transparent + ); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251, 251, 254); + --organizer-deemphasized-color: rgb(191, 191, 201); + --organizer-toolbar-background: rgb(43, 42, 51); + --organizer-pane-background: rgb(35, 34, 43); + --organizer-content-background: rgb(28, 27, 34); + --organizer-hover-background: rgb(82, 82, 94); + --organizer-selected-background: rgb(91, 91, 102); + --organizer-toolbar-field-background: var(--in-content-page-background); + --organizer-toolbar-field-background-focused: rgb(66, 65, 77); + scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + } + } + } + /*- Toolbar & Menus ------------------------------------------------------*/ + #placesToolbar { + appearance: none !important; + background-color: var(--organizer-toolbar-background) !important; + color: var(--organizer-color) !important; + border-bottom: 1px solid var(--organizer-border-color) !important; + padding: 4px !important; + padding-inline-end: 6px !important; + } + + #placesToolbar > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; + } + + #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, + #downloadsListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + + richlistitem[selected="true"], + richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; + } + + /*- Tree -----------------------------------------------------------------*/ + #contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; + } + + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"]), + treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover, + treecolpicker:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover:active, + treecolpicker:hover:active { + background-color: var(--organizer-selected-background) !important; + } + + treecol:not([hideheader="true"], :first-child), + treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; + } + + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + + treechildren::-moz-tree-row { + background-color: transparent !important; + } + + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + + /*- 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 ----------------------------------------------------------------*/ + @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #sidebar-box { + /* like #sidebar-box > #sidebar */ + min-width: 14em; + width: 18em; + max-width: 36em; + /* Animation */ + transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + + #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); + } + } + @supports -moz-bool-pref("userChrome.decoration.disable_panel_animate") { + :root { + --panelui-subview-transition-duration: 1ms !important; + /* Disable top right corner menu sliding animation (0ms will not work!) */ + } + } +} +/** Rounding ******************************************************************/ +/** Rounding ******************************************************************/ +@supports -moz-bool-pref("userChrome.rounding.square_tab") { + :root { + --tab-border-radius: 0 !important; + /* Original: 4px */ + } +} +@supports -moz-bool-pref("userChrome.rounding.square_button") { + :root { + --toolbarbutton-border-radius: 0 !important; + /* Original: 4px */ + } + + button { + border-radius: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.round.square_button") { + /* Fix Tab bar button radious */ + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon, + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text, + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack, + .tab-close-button { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_panel") { + :root { + --arrowpanel-border-radius: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_panelitem") { + :root { + --arrowpanel-menuitem-border-radius: 0 !important; + --subviewbutton-border-radius: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_menupopup") { + xul|menupopup { + border-radius: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_menuitem") { + xul|menulist:not([native]), + xul|menulist > xul|menupopup xul|menu, + xul|menulist > xul|menupopup xul|menuitem { + border-radius: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_field") { + html|select[size][multiple], + xul|listheader, + xul|richlistbox, + html|input { + border-radius: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.rounding.square_checklabel") { + .checkbox-check, + xul|*.radio-check { + border-radius: 0 !important; + } +} +/* +--toolbarbutton-border-radius: 4px; +*/ +/** Reduce Padding ************************************************************/ +/*= Tab Bar - Distribution padding, radius ===================================*/ +@supports -moz-bool-pref("userChrome.tab.lepton_like_padding") or -moz-bool-pref("userChrome.tab.photon_like_padding") { + :root { + --proton-tab-block-margin: var(--tab-block-margin) !important; + /* Original: 4px, Legacy */ + } + + :root[uidensity="touch"] { + /* Like Original */ + --tab-block-margin: 4px !important; + } +} +@supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { + :root { + --tab-block-margin: 2px !important; + /* New version of --proton-tab-block-margin */ + } +} +@supports -moz-bool-pref("userChrome.tab.photon_like_padding") { + :root { + --tab-block-margin: 0px !important; + } +} +/*= Tab Bar - Reduce Width, Show more tabs ===================================*/ +@supports -moz-bool-pref("userChrome.padding.first_tab") { + /* for First Tab Space */ + :root { + --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") { + @supports -moz-bool-pref("userChrome.tab.lepton_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.lepton_like_padding") { + @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px; + /* 38px -> 36px */ + } + + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px; + /* 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 */ + } +} +/*= 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; + } +} +@supports -moz-bool-pref("userChrome.padding.urlView_expanding") { + #urlbar[breakout][breakout-extend] { + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; + left: 0 !important; + width: 100% !important; + } + + #urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: var(--urlbar-height) !important; + padding-block: 0 !important; + padding-inline: 0 !important; + } + + #urlbar[breakout][breakout-extend] > #urlbar-background { + animation-name: none !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; + } +} +@supports -moz-bool-pref("userChrome.padding.urlView_result") { + .urlbarView { + margin-inline: 0 !important; + width: 100% !important; + } + + .urlbarView-row { + padding-block: 0 !important; + } +} +/*= BookMark Bar - Reduce Height =============================================*/ +@supports -moz-bool-pref("userChrome.padding.bookmarkbar") { + :root[uidensity="compact"] #PersonalToolbar toolbarbutton { + margin-top: 0px; + /* 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; + } + + @supports -moz-bool-pref("userChrome.padding.menu_compact") { + :root { + --menu-padding: 2px; + } + + :root[uidensity="compact"] { + --menu-padding: 0px; + } + } + menupopup:not(.in-menulist) > menuitem, + menupopup > menu { + /* Original: 0.5em */ + padding-block: var(--menu-padding) !important; + } + + #ContentSelectDropdown > menupopup > menucaption, + #ContentSelectDropdown > menupopup > menuitem { + padding-block: 0 !important; + } + + @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_menubar") { + /* 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-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; + /* Original: 0 8px */ + --arrowpanel-menuitem-padding-block: 5px !important; + /* Original: 8px */ + --arrowpanel-menuitem-padding-inline: 5px !important; + /* Original: 8px */ + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; + /* Compatibility */ + --arrowpanel-padding: 0.8em !important; + /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ + } + + :root[uidensity="compact"] { + --arrowpanel-menuitem-padding-block: 3px !important; + --arrowpanel-menuitem-padding-inline: 3px !important; + } + + :root[uidensity="touch"] { + --arrowpanel-menuitem-padding-block: 8px !important; + /* Original: 8px */ + --arrowpanel-menuitem-padding-inline: 8px !important; + /* Original: 8px */ + } +} +@supports -moz-bool-pref("userChrome.padding.panel_header") { + .panel-header { + padding: unset !important; + padding-top: 4px !important; + } +} +/*= Popup Panel - Reduce padding =============================================*/ +@supports -moz-bool-pref("userChrome.padding.popup_panel") { + #protections-popup-main-header-label { + height: unset !important; + /* Original: 37.6px */ + } + + #identity-popup, + #permission-popup, + #protections-popup { + --vertical-section-padding: 0.8em; + /* Original: 0.9em */ + } + + .protections-popup-footer-button, + .protections-popup-category { + min-height: 24px; + /* Original: 32px */ + height: unset !important; + } + + /** Popup panel - Compact mode */ + /* 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 ****************************************************************/ +/*= Tabs on Bottom ===========================================================*/ +@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { + #navigator-toolbox { + display: flex !important; + /* Needed for content to take up entire height, compatibility with tabs on bottom */ + flex-wrap: wrap; + } + + #titlebar, + #nav-bar, + #PersonalToolbar, + #tab-notification-deck, + #tab-notification-deck-template { + flex-basis: 100%; + } +} +@supports -moz-bool-pref("userChrome.tab.on_bottom") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /*= Tabbar - Move to bottom ==================================================*/ + #titlebar { + order: 2; + -moz-appearance: none !important; + --tabs-navbar-shadow-size: 0px; + } + + #tab-notification-deck { + order: 2; + } + + #TabsToolbar .titlebar-spacer { + display: none; + } + + @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + #PersonalToolbar { + order: 2; + } + } + @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + #navigator-toolbox { + border-bottom-color: var(--toolbar-bgcolor) !important; + /* Original: 1px solid var(--chrome-content-separator-color); */ + } + } + } + } + /*= Windows Control - Move to toolbar ========================================*/ + :root { + --uc-titlebar-padding: 0px; + } + + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } + + /*= Navbar - Padding for window controls =====================================*/ + /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + :root { + --uc-window-control-width: 0px; + /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ + --uc-window-drag-space-pre: 0px; + /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ + --uc-window-drag-space-post: 0px; + /* Same as .titlebar-spacer[type="post-tabs"] */ + } + + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 84px; + /* 84px is default value of linux */ + --uc-window-drag-space-pre: 30px; + --uc-window-drag-space-post: 25px; + } + + :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + /* Remove pre space */ + } + + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-style: solid !important; + border-inline-color: var(--toolbar-bgcolor); + } + + /* Windows */ + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 105px; + } + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 138px; + } + } + /* Use this pref to check Mac OS where window controls are on left */ + /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 72px; + } + + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } + } + /*= Menubar - Always on top ==================================================*/ + @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + /* height if native titlebar is enabled, assumes empty menubar */ + --uc-menubar-height: 20px; + --uc-menubar-padding: 1px; + /* FF's menubar padding */ + --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); + } + + :root[tabsintitlebar] { + /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ + --uc-menubar-height: 30px; + } + + /* Menubar on top patch - use with tabs_on_bottom.css */ + /* Only really useful if menubar is ALWAYS visible */ + :root:not([sizemode="fullscreen"]) { + --uc-window-control-width: 0px !important; + } + + /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ + :root:not([sizemode="fullscreen"]) #nav-bar { + border-inline-width: 0; + } + + #navigator-toolbox { + -moz-window-dragging: drag; + padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; + } + + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } + + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } + + :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { + height: var(--uc-menubar-height) !important; + /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ + } + + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } + + #toolbar-menubar > [flex] { + flex-grow: 100; + } + + #toolbar-menubar > spacer[flex] { + order: 99; + flex-grow: 1; + min-width: var(--uc-window-drag-space-post); + } + + #toolbar-menubar .toolbarbutton-1 { + --toolbarbutton-inner-padding: 3px; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + height: var(--uc-menubar-container-height); + } + + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + visibility: collapse !important; + } + + :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: visible; + } + } +} +/*= Tab Bar - 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.color_like_toolbar") { + :root:not(:-moz-lwtheme) { + /* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */ + --tab-selected-bgcolor: unset !important; + /* Original: rgb(255,255,255); */ + --tab-selected-bgimage: unset !important; + /* Above FF v101 */ + } + + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"]:-moz-lwtheme { + /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) + */ + background-image: linear-gradient(transparent, transparent), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + } +} +/*= Multi Selected Color - More Contrast =====================================*/ +@supports -moz-bool-pref("userChrome.tab.multi_selected") { + #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; + } + + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + .tab-background[multiselected="true"] { + outline: none !important; + } + } + @supports not -moz-bool-pref("userChrome.tab.connect_to_window") { + /* Backport from FF 99 */ + .tab-background[multiselected="true"] { + outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); + outline-offset: -1px; + } + + .tab-background[multiselected="true"][selected="true"] { + outline-width: 2px; + outline-offset: -2px; + } + } +} +/*= Selected Tab - Box Shadow ================================================*/ +@supports -moz-bool-pref("userChrome.tab.box_shadow") { + #TabsToolbar[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; + } +} +/*= Selected Tab - Photon like contextline ===================================*/ +@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; + /* (24px - 16px) / 2 */ + } + + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none !important; + } +} +/*= 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 -moz-bool-pref("userChrome.compatibility.dynamic_separator") { + .tab-background::before, + #tabs-newtab-button::before { + background-color: var(--tabs-border-color); + } + } + } + @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); + } + @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { + .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + background-color: var(--tabs-border-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") { + #tabbrowser-tabs[closebuttons="activetab"] { + --inline-tab-padding: 7px !important; + /* Original: 8px */ + } + + #tabbrowser-tabs[overflow="true"] { + --inline-tab-padding: 6px !important; + /* Original: 8px */ + } + + .tab-content[pinned] { + --inline-tab-padding: 10px; + /* Prevent overflow pinned tab's divide line not aligned */ + padding-inline: var(--inline-tab-padding) !important; + } + + :root[uidensity="compact"] .tab-content[pinned] { + --inline-tab-padding: 8px; + } + + #tabbrowser-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; + } + + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { + .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + + .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + } + } + /* 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; + } + + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { + /* Fade out */ + .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + transition: opacity 0.1s var(--animation-easing-function) !important; + } + + /* Fade in */ + .tabbrowser-tab:hover .tab-close-button { + transition: opacity 0.25s var(--animation-easing-function) !important; + } + } + } + /* Closed Button's icon thicker */ + .tabbrowser-tab .tab-content > .close-icon { + list-style-image: url("../icons/dismiss-filled.svg") !important; + } + + /* Closed Button's icon larger */ + .tab-close-button { + padding: 6px !important; + /* Original: 7px */ + } + + .tabbrowser-tab:not(:hover, [pinned]) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 1px !important; + /* Original: 0px */ + width: 19px !important; + /* Original: 17px */ + } + + /* Closed Button's padding reduce */ + #tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { + margin-inline-end: calc(var(--inline-tab-padding) / -2 + 2px) !important; + /* Original: calc(var(--inline-tab-padding) / -2)*/ + padding: 4px !important; + /* Original: 7px */ + width: 20px !important; + /* Original: 24px */ + height: 20px !important; + /* Original: 24px */ + } + + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not(:hover) + > .tab-stack + > .tab-content + > .tab-close-button { + padding-inline-start: 3px !important; + /* Original: 0px */ + width: 19px !important; + /* Redefine from 19px !important, Original: 17px = (width - padding) */ + } +} +/** Clipped tabs - Always show tab icon ***************************************/ +@supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") { + .tab-icon-image:not([src], [pinned], [crashed], [busy]) { + display: -moz-inline-box !important; + } +} +/*= 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 Label ===================================================*/ +@supports -moz-bool-pref("userChrome.tab.sound_show_label") { + .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { + display: -moz-box !important; + } +} +/*= Sound Tab - Show with Favicons ===========================================*/ +@supports -moz-bool-pref("userChrome.tab.sound_with_favicons") { + /* Makes the favicons always visible (also on hover) */ + .tab-icon-image:not([pinned]) { + opacity: 1 !important; + } + + /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ + .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 */ + @supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") { + .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; + } + } + .tabbrowser-tab { + --container-position-y: 11px; + } + + :root[uidensity="compact"] .tabbrowser-tab { + --container-position-y: 10px; + } + + :root[uidensity="touch"] .tabbrowser-tab { + --container-position-y: 12px; + } + + .tab-content:not([titlechanged])::before { + /* Box Model */ + content: ""; + display: block; + position: absolute !important; + transform: translate(9px, var(--container-position-y)) !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(var(--container-position-y)) !important; + width: 16px; + } + + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + opacity: 0; + } + } + /* Pinned Tab - Titlechanged Indicator override */ + .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + --dotted-identity-image: radial-gradient( + circle, + var(--identity-icon-color), + var(--identity-icon-color) 2px, + transparent 2px + ); + background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; + background-position-x: 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; + } + + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important; + } + + /* Pinned Tab - Titlechanged & soundplaying */ + .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + 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; + } +} +/*= Tab Label - Make to Center ===============================================*/ +@supports -moz-bool-pref("userChrome.tab.centered_label") { + /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ + .tab-label-container { + display: grid; + justify-content: safe center; + align-items: safe center; + } + + .tab-label, + .tab-secondary-label { + overflow: hidden; + } + + .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), + .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; + } + + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not(:hover, [pinned]) + .tab-label-container:not([textoverflow]) { + margin-inline-end: 1px; + } + + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([selected]):not(:hover, [pinned]) + .tab-label-container:not([textoverflow]) { + margin-inline-end: 19px; + } + } +} +/** Url View UI ***************************************************************/ +/*= Url View - Move icon to left =============================================*/ +@supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { + .urlbarView-type-icon { + min-width: 16px !important; + height: 16px !important; + margin-bottom: 0 !important; + margin-inline-start: 0 !important; + } + + .urlbarView-favicon { + margin-inline-start: 20px !important; + } +} +/*= Url View - Go button when typing =========================================*/ +@supports -moz-bool-pref("userChrome.urlView.go_button_when_typing") { + #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { + display: block !important; + } +} +/*= Url View - Always show page actions ======================================*/ +@supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { + #pageActionButton { + display: block !important; + } +} +/** Panel UI ******************************************************************/ +@supports -moz-bool-pref("userChrome.panel.remove_strip") { + #appMenu-fxa-separator { + --panel-separator-zap-gradient: none; + /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */ + } +} +@supports -moz-bool-pref("userChrome.panel.full_width_separator") { + /* Full width separators */ + :root { + /* Original + --panel-separator-margin-vertical: 4px; + --panel-separator-margin-horizontal: 8px; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); + */ + --panel-separator-margin-horizontal: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.panel.full_width_padding") { + /* Original + --arrowpanel-menuitem-margin: 0 8px; + --arrowpanel-menuitem-padding-block: 8px; + --arrowpanel-menuitem-padding-inline: 8px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + */ + :root, + :root:is([uidensity="compact"], [uidensity="touch"]) { + --arrowpanel-menuitem-margin: 0 !important; + --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; + } +} +/** Fullscreen - Overlap toolbar **********************************************/ +@supports -moz-bool-pref("userChrome.fullscreen.overlap") { + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox { + position: fixed !important; + /* Needed for content to take up entire height */ + z-index: 1000 !important; + /* Puts the UI above the content */ + } + + :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { + width: 100%; + /* Makes the UI take up the entire width */ + } + + :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-menuicon-padding: 8px; + --arrowpanel-menublank-padding: calc( + var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline)) + ) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; + --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important; + } + + .subviewbutton > .toolbarbutton-icon { + width: 16px; + } + + @supports -moz-bool-pref("userChrome.icon.panel_photon") or -moz-bool-pref("userChrome.icon.panel_sparse") { + :root { + /* Global */ + --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); + /* General Panel */ + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc( + var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline) + ); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px); + } + } + #downloadsHistory .button-text, + .subviewbutton > .toolbarbutton-text { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; + } + + .toolbaritem-combined-buttons > .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-inline) !important; + } + + #appMenu-fxa-status2, + #appMenu-zoom-controls2 { + align-items: center; + padding-top: var(--arrowpanel-menuimageblank-padding-block) !important; + padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important; + } + + #appMenu-zoom-controls2::before { + margin-inline-end: 0 !important; + } + + #appMenu-zoomReduce-button2, + #appMenu-zoomReset-button2, + #appMenu-zoomEnlarge-button2, + #appMenu-fullscreen-button2 { + --arrowpanel-menuitem-padding-block: 0px; + } + + .subviewbutton[type="checkbox"]:not([checked="true"]) > .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") or -moz-bool-pref("userChrome.icon.panel_photon") { + #appMenu-new-tab-button2 { + list-style-image: url("chrome://browser/skin/new-tab.svg"); + } + } + @supports -moz-bool-pref("userChrome.icon.panel_photon") { + #appMenu-save-file-button2, + #appMenu-find-button2, + #appMenu-more-button2 { + padding-top: var(--arrowpanel-menuitemblank-padding) !important; + padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; + } + + #appMenu-zoom-controls2 { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + } + } + @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-block) !important; + padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !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") or -moz-bool-pref("userChrome.icon.panel_photon") { + #appMenu-passwords-button { + list-style-image: url("chrome://browser/skin/login.svg"); + } + + #appMenu-extensions-themes-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); + } + } + #appMenu-print-button2 { + list-style-image: url("chrome://global/skin/icons/print.svg"); + } + + @supports -moz-bool-pref("userChrome.icon.panel_full") { + #appMenu-save-file-button2 { + list-style-image: url("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"); + } + } + @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") { + #appMenu-help-button2 { + list-style-image: url("chrome://global/skin/icons/help.svg"); + } + + #appMenu-quit-button2 { + list-style-image: url("../icons/quit.svg"); + } + } + /*= Panel - Account ==========================================================*/ + #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, + #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon { + width: 16px !important; + height: 16px !important; + } + + /* Default */ + #fxa-manage-account-button::before { + content: ""; + display: -moz-inline-box; + width: 32px !important; + height: 32px !important; + border-radius: 50%; + background-size: 32px; + background-image: var(--avatar-image-url); + margin-inline-end: var(--arrowpanel-menuicon-padding); + } + @supports -moz-bool-pref("userChrome.icon.account_image_to_right") { + #fxa-manage-account-button::before { + -moz-box-ordinal-group: 2 !important; + } + } + + @supports -moz-bool-pref("userChrome.icon.account_label_to_right") { + #fxa-menu-header-title, + #fxa-menu-header-description { + text-align: right; + } + } + .syncNowBtn { + visibility: visible !important; + -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-inline) + ) !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("../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, + .openintabs-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, url("../icons/blank.svg")) !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, + .openintabs-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_menubar") { + #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, + .openintabs-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, + .openintabs-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; + } + + /* Global Menu */ + /* Disabled. some icons not appear + 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"]) { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")); + } + */ + } + /*= 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-inline); + } + + /* 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-inline) !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-inline) !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-inline) + 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-inline)) !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-inline) + 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("../icons/undo.svg"); + } + + /*= new-tab-button-popup =====================================================*/ + #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], + .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { + --menuitem-image: url("../icons/container-openin-16.svg"); + } + + #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"], + .new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } + + /*= toolbar-context-menu =====================================================*/ + .customize-context-manageExtension { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } + + .customize-context-removeExtension { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + .customize-context-reportExtension { + --menuitem-image: url("../icons/send.svg"); + } + + .customize-context-moveToPanel { + --menuitem-image: url("chrome://browser/skin/pin-12.svg"); + } + + .toolbar-context-autohide-downloads-button { + --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("../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("../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("../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("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #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("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + .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("../icons/undo.svg"); + } + + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { + --menuitem-image: url("../icons/select-all-on.svg"); + } + + #syncedTabsRefreshFilter { + --menuitem-image: url("chrome://browser/skin/sync.svg"); + } + + /*= urlbar-input-container ===================================================*/ + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { + --menuitem-image: url("../icons/undo.svg"); + } + + #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("../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_menubar") { + /*= main-menubar =============================================================*/ + #file-menu { + --menuitem-image: url("../icons/mail-inbox-all.svg"); + } + + #edit-menu { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); + } + + #view-menu { + --menuitem-image: url("../icons/content-view.svg"); + } + + #history-menu { + --menuitem-image: url("chrome://browser/skin/history.svg"); + } + + #bookmarksMenu { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #tools-menu { + --menuitem-image: url("../icons/toolbox.svg"); + } + + #helpMenu { + --menuitem-image: url("chrome://global/skin/icons/help.svg"); + } + } + @supports -moz-bool-pref("userChrome.icon.global_menu") { + /** Global Menu ***************************************************************/ + /*= menu_FilePopup ===========================================================*/ + #menu_newNavigatorTab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); + } + + #menu_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("../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"); + } + + #sync-syncnowitem { + --menuitem-image: url("chrome://browser/skin/sync.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("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #newfolder { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #newseparator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + + #orgUndo { + --menuitem-image: url("../icons/undo.svg"); + } + + #orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #orgCopy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #orgSelectAll { + --menuitem-image: url("../icons/select-all-on.svg"); + } + + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + /*= viewMenuPopup ============================================================*/ + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + + #viewSort { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + + /*= maintenanceButtonPopup ===================================================*/ + #backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); + } + + #fileImport { + --menuitem-image: url("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 { + --menuitem-image: url("../icons/private-favicon.svg"); + } +} +@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"); + } +} diff --git a/css/leptonContent.css b/css/leptonContent.css new file mode 100644 index 0000000..850664e --- /dev/null +++ b/css/leptonContent.css @@ -0,0 +1,2898 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); +/** Video player **************************************************************/ +/* Control Bar Size */ +@supports -moz-bool-pref("userContent.player.size") { + #controlsContainer { + --button-size: 32px !important; + /* Original: 30px */ + --controlBar-height: 40px; + /* Original: 40px, Replace to this value */ + } + + #controlsContainer .touch { + --button-size: 48px !important; + /* Original: 40px */ + --controlBar-height: 52px; + /* Original: 52px */ + } + + .videocontrols[inDOMFullscreen] #controlsContainer { + --button-size: 64px !important; + /* Original: 30px */ + --track-size: 6px !important; + /* Original: 5px, Touch: 7px */ + --thumb-size: 15px !important; + /* Original: 13px, Touch: 16px */ + --controlBar-height: 64px; + /* Original: 40px */ + } + + .videocontrols[inDOMFullscreen] #controlsContainer .touch { + --button-size: 72px !important; + /* Original: 40px */ + --controlBar-height: 64px; + /* Original: 52px */ + } + + #controlsContainer .controlBar { + height: var(--controlBar-height) !important; + /* Original: 40px */ + } + + .videocontrols[inDOMFullscreen] #controlsContainer .controlBar { + padding-bottom: 8px !important; + } +} +/* Control Bar UI */ +@supports -moz-bool-pref("userContent.player.ui") { + audio { + --duration-color: #929292; + /* Like Original */ + --media-background: rgba(26, 26, 26, 0.8); + /* Like Original */ + border-radius: 8px; + --box-shadow1: rgba(14, 13, 26, 0.12); + --box-shadow2: rgba(7, 48, 114, 0.12); + --box-shadow3: rgba(34, 0, 51, 0.04); + box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3); + /* Or: 0 2px 15px rgba(0,0,0,.1); */ + } + + video { + --duration-color: #eee; + --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85)); + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + audio { + --box-shadow1: rgba(249, 249, 250, 0.12); + --box-shadow2: rgba(91, 91, 102, 0.12); + --box-shadow3: rgba(82, 82, 94, 0.04); + } + } + @media (prefers-contrast) { + video { + --duration-color: #929292; + /* Like Original */ + --media-background: rgba(26, 26, 26, 0.8); + /* Like Original */ + } + } + #controlsContainer .controlBar { + background: var(--media-background) !important; + } + + #controlsContainer .duration { + color: var(--duration-color) !important; + /* Original: #929292 */ + } + + @supports -moz-bool-pref("userContent.player.ui.twoline") { + audio { + /* #controlsContainer .controlBar */ + --controlBar-flex-wrap: unset; + --controlBar-justify-content: center; + --controlBar-align-content: unset; + --controlBar-twoline-more-height: 0px; + --controlBar-padding-inline: 9px; + /* #controlsContainer .scrubberStack */ + /* .scrubberStack - Vertical */ + --scrubberStack-order: unset; + --scrubberStack-height: 100%; + --scrubberStack-transform: none; + /* .scrubberStack - Horizontal */ + --scrubberStack-margin-inline: 9px; + /* #controlsContainer .positionDurationBox */ + --positionDurationBox-flex-grow: unset; + --positionDurationBox-margin-left: unset; + --positionDurationBox-text-align: center; + /* Others */ + --button-outside-margin: 0; + } + + video { + /* #scrubber .scrubber::-moz-range-thumb */ + --scrubber-thumb-scale: 0; + --scrubber-thumb-color: #48a0f7; + /* Color as hover, Prevent flashing */ + /* .progressBar::-moz-progress-bar */ + --progressBar-scale: 0.65; + /* #controlsContainer .controlBar */ + --controlBar-flex-wrap: wrap; + --controlBar-justify-content: space-between; + --controlBar-align-content: space-around; + --controlBar-padding-inline: 0 !important; + /* Original: 9px */ + /* #controlsContainer .scrubberStack */ + /* .scrubberStack - Vertical */ + --scrubberStack-order: -1; + /* .scrubberStack - Horizontal */ + --scrubberStack-flex-basis: auto; + --scrubberStack-twoline-width: 100%; + --scrubberStack-margin-inline: 0; + /* #controlsContainer .positionDurationBox */ + --positionDurationBox-flex-grow: 2; + --positionDurationBox-margin-left: 15px; + --positionDurationBox-text-align: left; + /* Others */ + --duration-color: #dadada; + --button-outside-margin: 9px; + } + + .scrubber:not(:hover)::-moz-range-thumb { + transform: scale(var(--scrubber-thumb-scale, 1)); + background-color: var(--scrubber-thumb-color, currentColor) !important; + } + + .progressStack { + transform-origin: bottom; + transform: scaleY(var(--progressBar-scale, 1)); + } + + .scrubber:hover::-moz-range-thumb, + .progressContainer:hover .progressStack { + transform: scale(1); + } + + #controlsContainer .controlBar { + flex-wrap: var(--controlBar-flex-wrap); + justify-content: var(--controlBar-justify-content); + align-content: var(--controlBar-align-content); + height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important; + padding-inline: var(--controlBar-padding-inline) !important; + /* Original: 9px */ + } + + #controlsContainer .scrubberStack { + /* Vertical */ + order: var(--scrubberStack-order); + height: var(--scrubberStack-height, var(--thumb-size)) !important; + transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2))); + /* Horizontal */ + flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important; + width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); + margin-inline: var(--scrubberStack-margin-inline) !important; + } + + #controlsContainer .positionDurationBox { + flex-grow: var(--positionDurationBox-flex-grow); + margin-left: var(--positionDurationBox-margin-left); + text-align: var(--positionDurationBox-text-align) !important; + } + + #playButton { + margin-left: var(--button-outside-margin) !important; + } + + #fullscreenButton { + margin-right: var(--button-outside-margin) !important; + } + } +} +@supports -moz-bool-pref("userContent.player.icon") { + #controlsContainer .fullscreenButton { + background-image: url("../icons/enter-fullscreen.svg") !important; + } + + #controlsContainer .fullscreenButton[fullscreened] { + background-image: url("../icons/exit-fullscreen.svg") !important; + } +} +@supports -moz-bool-pref("userContent.player.noaudio") { + #controlsContainer .muteButton[noAudio] { + /* Remove volume button at noAudio */ + display: none !important; + } +} +/* Click to play UI */ +@supports -moz-bool-pref("userContent.player.click_to_play") { + #controlsContainer .clickToPlay { + cursor: pointer; + opacity: 0.65 !important; + } + + #controlsContainer .controlsSpacerStack:hover > .clickToPlay { + opacity: 0.85 !important; + } + + #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover { + opacity: 1 !important; + fill: #48a0f7 !important; + /* color as .scrubber */ + } +} +/* Animation */ +@supports -moz-bool-pref("userContent.player.animate") { + @media (prefers-reduced-motion: no-preference) { + /* Control Bar */ + #controlsContainer .controlBar { + transition: transform 350ms ease; + opacity: 1 !important; + } + + #controlsContainer .controlBar[hidden] { + transform: translateY(100%); + transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important; + opacity: 0 !important; + } + + #controlsContainer .controlBar[hidden] .progressBar, + #controlsContainer .controlBar[hidden] .bufferBar { + display: unset !important; + opacity: 0.55; + transition: opacity 150ms ease 50ms; + } + + /* Two line Control Bar */ + .scrubber::-moz-range-thumb, + .progressStack { + transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1); + } + + /* Click to play */ + #controlsContainer .clickToPlay { + transition: opacity 150ms ease-in-out, fill 150ms ease-in-out; + } + } +} +/** Activity Stream ***********************************************************/ +@-moz-document url("about:home"), url("about:newtab") { + /** Activity Stream - Search Focus Border: like URL *************************/ + @supports -moz-bool-pref("userContent.page.field_border") { + /* At DarkMode, Color */ + body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], + body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"], + body[style*="--newtab-background-color: rgb(43, 42, 51);"] { + /* inner */ + --newtab-focus-border: rgba(0, 221, 255, 0.5) !important; + /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ + --newtab-focus-border-selected: var(--newtab-focus-border) !important; + /* Original: #B5D3FF */ + /* For Nightly */ + --newtab-primary-action-background: var(--newtab-focus-border) !important; + } + @supports -moz-bool-pref("userContent.page.proton_color") { + @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") { + body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], + body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"], + body[style*="--newtab-background-color: rgb(43, 42, 51);"] { + --newtab-focus-border: var(--in-content-focus-outline-color) !important; + } + } + } + } + /** Activity Stream - Web Site Icon: full size ******************************/ + @supports -moz-bool-pref("userContent.newTab.full_icon") { + .top-site-outer .tile { + overflow: hidden; + } + + .top-site-outer .tile .icon-wrapper { + width: 100% !important; + /* Original: 48px */ + height: 100% !important; + /* Original: 48px */ + } + } + /** Activity Stream - Animate ***********************************************/ + @supports -moz-bool-pref("userContent.newTab.animate") { + @media (prefers-reduced-motion: no-preference) { + :root { + --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); + } + + /* Background */ + .top-site-outer, + #searchSubmit, + button.icon, + button.close-button { + transition: background 1.5s var(--animation-easing-function); + } + + .top-site-outer:hover, + #searchSubmit:hover, + button.icon:hover, + button.close-button:hover { + transition: background 0.5s var(--animation-easing-function); + } + + /* Search Bar */ + .search-inner-wrapper input { + transition: 1s var(--animation-easing-function); + transition-property: border-color, box-shadow; + } + + .search-wrapper .search-inner-wrapper:active input, + .search-wrapper input:focus { + transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); + } + + @supports -moz-bool-pref("userContent.page.field_border") { + .search-wrapper .search-inner-wrapper:hover input { + border-color: var(--newtab-primary-action-background) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } + } + } + /** Activity Stream - Pocket order to last **********************************/ + @supports -moz-bool-pref("userContent.newTab.pocket_to_last") { + .body-wrapper.on { + display: flex; + flex-wrap: wrap; + } + + .body-wrapper.on > .discovery-stream.ds-layout { + flex-basis: 100%; + } + + .body-wrapper.on > .collapsible-section[data-section-id="topstories"], + .home-section > #pocket-section, + .home-section > .divider, + .home-section > div:not(.section) { + order: 2; + } + } + /** Activity Stream - Home Search Bar looks like proton *********************/ + @supports -moz-bool-pref("userContent.newTab.animate") { + /* Dropdown Colors */ + #root { + --newtab-search-background-color: rgba(255, 255, 255, 1); + /* Same as light theme's --panel-background */ + /* Set search dropdown background */ + --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important; + --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; + --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + #root { + /* Default Dark Mode */ + --newtab-search-background-color: rgba(66, 65, 77, 1); + /* Same as dark theme's --panel-background */ + } + } + .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root { + /* Light weight theme */ + --newtab-search-background-color: var(--lwt-sidebar-background-color); + } + + /* Padding */ + #searchSuggestionTable { + border-radius: 4px !important; + -moz-window-shadow: cliprounded; + } + + .contentSearchSuggestionTable .contentSearchOneOffItem { + width: 32px !important; + height: 32px !important; + /* Margin */ + margin-block: 5px !important; + margin-inline-start: 5px !important; + margin-inline-end: 8px !important; + /* Border */ + border-radius: 4px !important; + border-image: none !important; + /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */ + border-inline-end: none !important; + /* Original: 1px solid; */ + } + + #contentSearchSettingsButton::before { + content: url("chrome://global/skin/icons/settings.svg") !important; + display: -moz-inline-box; + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + /* Align */ + margin-inline-end: 5px; + vertical-align: -25%; + } + + /* Pointer */ + .contentSearchSuggestionTable .contentSearchOneOffItem, + #contentSearchSettingsButton { + cursor: pointer; + } + + /*- Fix Color For Nightly ------------------------------------------------*/ + .contentSearchSuggestionTable, + .contentSearchHeaderRow, + .contentSearchHeader, + .contentSearchSuggestionsContainer { + color: var(--newtab-text-primary-color) !important; + background: var(--newtab-search-background-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, + .contentSearchSuggestionTable .contentSearchSettingsButton:hover { + color: var(--newtab-text-primary-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, + .contentSearchSuggestionTable .contentSearchSettingsButton:hover, + .contentSearchSuggestionTable .contentSearchOneOffItem.selected { + background: var(--newtab-element-hover-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, + .contentSearchSuggestionTable .contentSearchOneOffItem:active { + background: var(--newtab-element-active-color) !important; + } + + .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { + fill: var(--newtab-icon-secondary-color) !important; + } + } +} +/** Error Page - Restore illustrations ****************************************/ +@supports -moz-bool-pref("userContent.page.illustration") { + @-moz-document url-prefix("about:neterror"), + url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), + url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + { + /* Illustrations Position */ + #errorPageContainer, + .description-wrapper { + min-height: 300px; + background-position: left center; + background-repeat: no-repeat; + background-size: 38%; + } + + #errorPageContainer { + display: flex; + flex-direction: column; + } + + .description-wrapper { + padding-inline-start: 38%; + } + + /* Container */ + .container { + min-width: var(--in-content-container-min-width); + /* 13em */ + max-width: var(--in-content-container-max-width); + /* 52em */ + } + + /* Text Position */ + #text-container { + margin: auto; + padding-inline-start: 38%; + } + } + @-moz-document url-prefix("about:neterror?e=connectionFailure"), + url-prefix("about:neterror?e=netInterrupt"), + url-prefix("about:neterror?e=netTimeout"), + url-prefix("about:neterror?e=netReset"), + url-prefix("about:neterror?e=netOffline"), + url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + { + #errorPageContainer { + background-image: url("../icons/error-connection-failure.svg"); + } + } + @-moz-document url-prefix("about:neterror?e=dnsNotFound") { + #errorPageContainer { + background-image: url("../icons/error-server-not-found.svg"); + } + } + @-moz-document url-prefix("about:neterror?e=malformedURI") { + #errorPageContainer { + background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg"); + } + } + @-moz-document url-prefix("about:neterror?e=clockSkewError"), + url-prefix("about:neterror?e=nssFailure") { + #errorPageContainer { + background-image: url("../icons/blue-berror.svg"); + background-size: 18.5em; + } + } + @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + { + .description-wrapper { + background-image: url("../icons/error-session-restore.svg"); + } + } + @-moz-document url-prefix("about:neterror?e=fileNotFound") { + @media (min-width: 970px) { + .title { + background-image: url("chrome://global/skin/icons/info.svg") !important; + } + } + #text-container { + padding-inline-start: 0; + } + } + @-moz-document url-prefix("about:tabcrashed") { + @media (min-width: 970px) { + .title { + background-image: url("chrome://browser/skin/tab-crashed.svg") !important; + } + } + } + @-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") + { + @media (min-width: 970px) { + .title { + background-image: url("chrome://browser/content/aboutRobots-icon.png") !important; + } + } + } + @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") + { + @media (min-width: 970px) { + .title { + background-image: url("../icons/welcome-back.svg") !important; + } + } + } +} +/** Fully Dark Mode ***********************************************************/ +/*= Fully Dark Mode - Dark Mode Colors =======================================*/ +@supports -moz-bool-pref("userContent.page.proton_color") { + @-moz-document url-prefix("about:"), + url-prefix("https://addons.mozilla.org"), + url-prefix("https://support.mozilla.org"), + url-prefix("https://accounts.firefox.com"), + url-prefix("view-source"), + regexp("^(((jar:)?file:///)|(chrome://)).*/$") + { + /*= 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-border-dark-color: var(--in-content-table-border-color); + --in-content-table-header-background: var(--in-content-primary-button-background); + /* Legacy: #0a84ff; rgb(5, 64, 150); */ + --in-content-table-header-color: var(--in-content-primary-button-text-color); + /* Legacy: #ffffff; var(--in-content-page-color); */ + --in-content-sidebar-width: 240px; + --dialog-warning-text-color: var(--red-60); + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + } + + @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("userContent.page.proton_color.dark_blue_accent") { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :host, + :root { + /* Color Memo + Just refer - Photon's dark color + --button-primary-bgcolor: #0060DF; + --button-primary-hover-bgcolor: #003EAA; + --button-primary-active-bgcolor: #002275; + --lwt-brighttext-url-color: #74c0ff; + --lwt-toolbarbutton-icon-fill-attention: #45a1ff; + + Just refer - Proton's light color + --in-content-accent-color: #0a84ff; + --in-content-accent-color-active: #0060df; + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + + --blue-40: #45a1ff; rgb(69, 161, 255) + --blue-50: #0a84ff; rgb(10, 132, 255) + --blue-60: #0060df; rgb(0, 96, 223) + --blue-70: #003eaa; rgb(0, 62, 170) + --blue-80: #002275; rgb(0, 34, 117) + + Relation + lighten(#0060df, 29%): #74b0ff; + lighten(#0060df, 19.8%): #4595ff + lighten(#0060df, 8.3%): #0a74ff + #0060df + darken(#0060df, 15.5%): #003e90; + darken(#0060df, 28.1%): #002250; + */ + --blue-20: #b6d6ff; + /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/ + --blue-30: #74c0ff; + /* rgb(116, 192, 255), Add for active color */ + } + + :host, + :root { + --in-content-primary-button-text-color: var(--in-content-page-color) !important; + --in-content-primary-button-background: var(--blue-60) !important; + --in-content-primary-button-background-hover: var(--blue-50) !important; + --in-content-primary-button-background-active: var(--blue-40) !important; + --in-content-focus-outline-color: var(--blue-40) !important; + --in-content-accent-color: var(--blue-40) !important; + --in-content-accent-color-active: var(--blue-30) !important; + --in-content-table-background: rgb(35, 34, 43) !important; + --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important; + --in-content-table-header-background: rgb(5, 64, 150) !important; + --in-content-table-header-color: var(--in-content-page-color) !important; + --in-content-link-color: var(--blue-40) !important; + --in-content-link-color-hover: var(--blue-30) !important; + --in-content-link-color-active: var(--blue-20) !important; + --in-content-link-color-visited: var(--blue-40) !important; + } + } + } + @supports -moz-bool-pref("userContent.page.proton_color.system_accent") { + :host, + :root { + --in-content-primary-button-text-color: -moz-accent-color-foreground !important; + --in-content-primary-button-background: Highlight !important; + --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important; + --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important; + } + } + } +} +@supports -moz-bool-pref("userContent.page.dark_mode") { + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + /*= Addons.org =============================================================*/ + @-moz-document url-prefix("https://addons.mozilla.org") + { + /* Basic */ + .Page-content, + .SecondaryHero, + body, + main[aria-label="Content"] { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + /* Text */ + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .Page-content h1, + .Page-content h2, + .SearchResult-link, + .Home-SubjectShelf-link:link, + .Home-SubjectShelf-link:visited, + .DropdownMenuItem-link a, + .Select, + .Badge, + .Notice-generic, + .Notice-genericWarning, + .Notice-button, + .Paginate .Button.Paginate-item:first-child, + .Paginate .Button.Paginate-item:last-child, + .Paginate .Button.Paginate-item--current-page, + .Button--neutral, + .blog-entry-title, + .blogpost-nav * { + color: var(--in-content-text-color) !important; + } + + .AutoSearchInput-suggestions-item:is(:active, :focus, :hover), + .AutoSearchInput-suggestions-item--highlighted, + .SecondaryHero-message-link, + .SecondaryHero-module-link, + .Card-contents a:not(.Button), + .Card-footer-link a, + .Card-shelf-footer-in-header a, + .SearchResult-link:is(:active, :focus, :hover), + .SearchResult:hover .SearchResult-link, + .Home-SubjectShelf-link:is(:active, :focus, :hover), + .DropdownMenuItem-link a:is(:active, :focus, :hover), + .AddonMeta .MetadataCard-title a:is(:active, :hover), + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover), + .AddonMeta .MetadataCard-content a:is(:active, :hover), + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover), + .Addon-summary a, + .RatingsByStar-count a:hover, + .RatingsByStar-star a:hover, + .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page), + .AddonTitle-author a, + .PermissionsCard-learn-more, + .DefinitionList a, + .ShowMoreCard-contents a, + .AddonDescription-contents a, + .AddonTitle a, + .TooltipMenu-opener, + .LanguageTools .Card-contents a, + .blog-entry-read-more-link, + .blogpost-nav-next.blogpost-nav-no-prev:hover p, + .blogpost-content-wrapper p a, + .blogpost-nav-prev:hover p, + .blogpost-nav-next:hover p { + color: var(--in-content-link-color) !important; + } + + .SearchResult--meta-section, + .MetadataCard-title, + .MetadataCard-title a, + .MetadataCard-content a, + .CollectionSort-label, + .SearchResult-summary, + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, + .PermissionsCard-subhead--optional, + .PermissionsCard-subhead--required, + .Definition-dt, + .RatingsByStar-count a, + .RatingsByStar-star a, + .Paginate-page-number, + .AddonSummaryCard-addonAverage, + .AddonReviewCard-authorByLine, + .UserReview-byLine, + .UserReview-reply-header, + .Home-heroHeader-subtitle, + .blog-entry-date, + .blogpost-breadcrumb *, + .AddonTitle-author, + .ExpandableCard-ToggleLink, + .SearchFilters-label, + .PromotedBadge-label--line { + color: var(--in-content-deemphasized-text) !important; + } + + .PromotedBadge-label--recommended { + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + } + + /* Background */ + .Button--action { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + + .Select, + .Button--neutral, + .Button--neutral:link, + .Notice-button, + .AMInstallButton .AMInstallButton-loading-button { + background-color: var(--in-content-button-background) !important; + } + + .Button--neutral.Button--micro:not(.Button--disabled):hover, + .Button--neutral:not(.Button--disabled):hover, + .Notice-button:hover { + background: var(--in-content-button-background-hover) !important; + } + + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover { + background: var(--in-content-primary-button-background-hover) !important; + } + + .ShowMoreCard-contents::after { + background: linear-gradient(rgba(255, 255, 255, 0), var(--in-content-table-background)) !important; + } + + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .Paginate, + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer, + .StaticAddonCard, + .blogpost-nav, + .blogpost-nav * { + background: var(--in-content-table-background) !important; + } + + .Paginate .Button.Paginate-item:is(:active, :hover) { + background: var(--in-content-button-background-hover) !important; + } + + .Notice-generic, + .Notice-genericWarning { + background: color-mix( + in srgb, + var(--in-content-page-background) 40%, + var(--in-content-table-background) + ) !important; + } + + .LanguageTools-header-row { + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + } + + .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { + background-color: var(--in-content-box-background-odd) !important; + } + + /* Fill */ + .Icon-arrow-blue.SearchSuggestion-icon-arrow { + filter: hue-rotate(330deg) brightness(1.3) !important; + } + + .SecondaryHero-module-icon { + filter: invert(85%) !important; + } + + .Icon-magnifying-glass, + .Notice-icon { + filter: invert(65%) !important; + } + + .PermissionsCard-learn-more .Icon, + .Permission .Icon { + filter: invert(100%) !important; + } + + .Icon-heart { + filter: brightness(0) !important; + } + + /* Others */ + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } + + .AutoSearchInput-query { + border: 1px solid var(--in-content-table-background) !important; + } + + .AutoSearchInput-query:is(:hover, :focus) { + border-color: var(--in-content-primary-button-background) !important; + } + + .AutoSearchInput-query:focus { + box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), + 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; + } + + .PromotedBadge-link--line { + border-color: var(--in-content-deemphasized-text) !important; + } + + .PromotedBadge-link--line:hover { + border-color: var(--in-content-button-background-hover) !important; + } + + .blog-entry-read-more-link { + border-color: var(--in-content-link-color) !important; + } + + .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-right .cls-1 { + stroke: var(--in-content-text-color) !important; + } + + /* /developers/ */ + .DevHub-Navigation { + background: var(--in-content-page-background) !important; + } + + .DevHub-Navigation.scheme-light ul li a, + .DevHub-content-copy h2, + .content p { + color: var(--in-content-page-color) !important; + } + + .DevHub-callout-box { + background: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + } + /*= Support.org ============================================================*/ + @-moz-document url-prefix("https://support.mozilla.org") + { + /* Basic */ + :root { + --color-blue-06: var(--in-content-link-color) !important; + --color-blue-07: var(--in-content-link-color-hover) !important; + --color-blue-09: var(--in-content-link-color-active) !important; + --page-bg: var(--in-content-page-background) !important; + --color-white: var(--in-content-page-background) !important; + --color-shade-bg: var(--in-content-page-background) !important; + --color-marketing-gray-02: var(--card-outline-color) !important; + --color-inverse-bg: var(--in-content-page-color) !important; + --color-inverse: var(--in-content-page-background) !important; + --color-text: var(--in-content-page-color) !important; + --color-moz-text: var(--in-content-page-color) !important; + --color-moz-heading: var(--in-content-page-color) !important; + --color-text-light: var(--in-content-deemphasized-text) !important; + --color-link: var(--in-content-link-color) !important; + --color-success: var(--green-70) !important; + --color-warning: var(--yellow-80) !important; + --color-error: var(--red-60) !important; + --color-error-hover: var(--red-50) !important; + --color-moz-heading: #fff; + --color-moz-inverse-bg: var(red) !important; + --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent), + 0 0 0 2px var(--in-content-primary-button-background-active); + } + + .warning { + --color-link: rgb(55, 255, 255) !important; + } + + body, + #main-content, + #instant-search-content, + #mzp-c-menu-panel-help, + .mzp-c-navigation, + .kbox-container { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + #editor { + border: 2px solid var(--in-content-border-color) !important; + } + + .CodeMirror-linenumbers { + background: var(--in-content-table-background); + } + + .CodeMirror-lines { + color: var(--in-content-deemphasized-text) !important; + background: var(--in-content-page-background) !important; + } + + .CodeMirror-scroll { + background: var(--in-content-page-background) !important; + } + + /* Text */ + .mzp-c-menu-category .mzp-c-menu-title, + .mzp-c-menu-item .mzp-c-menu-item-link, + .mzp-c-menu-item .mzp-c-menu-item-link > *, + .mzp-c-menu-item .mzp-c-menu-item-list a, + #doc-content .menu, + .document--content .menu, + .forum--entry-content .menu, + .tag-name a { + color: var(--in-content-page-color) !important; + } + + .ts-select-trigger, + input[type="date"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="text"], + input[type="time"], + input[type="url"], + select, + textarea, + #doc-content .button, + #doc-content .key, + .document--content .button, + .document--content .key, + .forum--entry-content .button, + .forum--entry-content .key { + color: var(--in-content-deemphasized-text) !important; + } + + .tag-list a { + color: var(--color-marketing-gray-10) !important; + } + + .tag-list a:hover, + .sidebar-nav a:hover { + color: var(--color-link) !important; + } + + .tag-list li { + background: var(--in-content-page-color) !important; + } + + .tag-list li:hover { + background: var(--in-content-deemphasized-text) !important; + } + + #remaining-characters { + color: var(--in-content-page-color) !important; + } + + /* Background */ + .sidebar-nav.topics, + .sidebar-nav.topics > li { + background: var(--in-content-page-background) !important; + } + + .mzp-c-menu-panel { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + .mzp-c-menu-list-list, + .mzp-c-menu-list-list:hover { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-background) !important; + } + + .mzp-c-menu-list-item:focus, + .mzp-c-menu-list-item:hover { + background: var(--in-content-button-background-hover) !important; + } + + .cm-bold { + color: var(--in-content-page-color) !important; + } + + /* Fill */ + .sumo-nav--logo, + .sumo-nav--search-button, + .sumo-nav--toggle-button, + .card:not(.is-inverse) .card--icon-sm, + .mzp-c-menu-item-icon, + .mzp-c-menu-button-close, + .topic-article--icon, + .card--topic > .card--icon, + .mzp-c-details .is-summary button::before, + details .is-summary button::before, + summary::before, + .icon-button > button, + .search-button { + filter: invert(95%) !important; + } + + button.markup-toolbar-button { + /*using 0.5 because in middle*/ + filter: invert(0.5) !important; + } + + /* Others */ + .support-callouts > .card.is-inverse { + background: #20133a !important; + } + + .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) { + color: var(--in-content-page-color) !important; + } + + .sumo-button.secondary-button { + border-color: transparent !important; + } + + .mzp-c-menu-panel { + border-color: var(--in-content-button-background-hover) !important; + } + + .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title { + border-color: var(--in-content-page-color) !important; + } + + @media screen and (-moz-toolbar-prefers-color-scheme: dark) and (min-width: 768px), + screen and (prefers-color-scheme: dark) and (min-width: 768px) { + .mzp-c-menu-panel { + box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important; + } + } + .card--product, + .card--topic, + .card--article { + box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12), + 0 8px 12px 1px rgba(82, 82, 94, 0.04) !important; + } + } + /*= Accounts.com ===========================================================*/ + @-moz-document url-prefix("https://accounts.firefox.com") + { + /* Basic */ + body { + color: var(--in-content-page-color) !important; + background: var(--in-content-page-background) !important; + } + + .button.primary-button, + .button[type="submit"]:not(.secondary-button), + .settings-button.primary-button, + .settings-button[type="submit"]:not(.secondary-button), + button.primary-button, + button[type="submit"]:not(.secondary-button) { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + + /* Text */ + header h1, + .info, + .info a, + .prefillEmail, + .faint a:hover, + .cta-neutral:hover { + color: var(--in-content-page-color) !important; + } + + #main-content.panel a, + .links a, + .link-blue, + .text-blue-500 { + color: var(--in-content-link-color) !important; + } + + .link-blue:hover { + color: var(--in-content-link-color-hover) !important; + } + + .signed-in-email-message, + .verification-email-message, + .verification-message, + .verification-recovery-code-message, + .verification-totp-message, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-row input::placeholder, + .firefox-family-services > ul > .firefox-service, + .faint, + .faint a, + .text-grey-400 { + color: var(--in-content-deemphasized-text) !important; + } + + /* Background */ + .flex .flex-wrap { + background: var(--in-content-page-background); + } + + .password-row .show-password-label { + background-color: unset !important; + } + + #main-content, + .modal, + .firefox-family-services, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + header, + .bg-white:not(nav) { + background: var(--in-content-box-background) !important; + } + + #suggest-sync, + .cta-neutral { + background: var(--in-content-button-background) !important; + } + + .cta-neutral:hover, + .bg-grey-50:hover, + .hover\:bg-grey-100:hover { + background: var(--in-content-button-background-hover) !important; + } + + .text-blue-500 .cta-neutral, + .text-blue-500 .bg-grey-50, + .text-blue-500 .hover\:bg-grey-100 { + background: var(--in-content-button-background) !important; + } + + .hover\:bg-grey-200:hover { + background: var(--in-content-button-background-active) !important; + } + + .button.primary-button:hover:enabled, + .button[type="submit"]:not(.secondary-button):hover:enabled, + .settings-button.primary-button:hover:enabled, + .settings-button[type="submit"]:not(.secondary-button):hover:enabled, + button.primary-button:hover:enabled, + button[type="submit"]:not(.secondary-button):hover:enabled { + background: var(--in-content-primary-button-background-hover) !important; + } + + .tooltip, + .tooltip::before { + background: var(--in-content-danger-button-background) !important; + } + + /* Fill */ + .dismiss, + #about-mozilla, + .show-password-label, + footer a[data-testid="link-mozilla"] { + filter: invert(95%) !important; + } + + header button svg, + header .rounded svg, + #service svg { + filter: brightness(15) !important; + } + + button.relative, + #fxa-settings nav svg { + filter: brightness(2) !important; + } + + /* Others */ + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .unit-row-hr .border-grey-100 { + border-color: var(--in-content-border-color) !important; + } + + .input-row input[type="email"]:hover, + .input-row input[type="number"]:hover, + .input-row input[type="password"]:hover, + .input-row input[type="tel"]:hover, + .input-row input[type="text"]:hover { + border-color: var(--in-content-border-hover) !important; + } + + #main-content { + box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12), + 0 6px 10px -4px rgba(82, 82, 94, 0.04) !important; + } + + .input-row input[type="email"]:focus, + .input-row input[type="number"]:focus, + .input-row input[type="password"]:focus, + .input-row input[type="tel"]:focus, + .input-row input[type="text"]:focus { + box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important; + } + } + } +} +/** Fully Proton Mode *********************************************************/ +@supports -moz-bool-pref("userContent.page.proton") { + /*= Common contents ==========================================================*/ + /*= abouts' common ===========================================================*/ + @-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard"), + url-prefix("about:sync-log"), + url-prefix("about:memory"), + regexp("^(((jar:)?file:///)|(chrome://)).*/$") + { + /* Base */ + html, + body { + font: message-box !important; + appearance: none !important; + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + + body { + font-size: 15px !important; + font-weight: normal !important; + margin: 0 !important; + } + + h1 { + line-height: 1.2 !important; + } + + h2 { + line-height: 1.4em !important; + } + + /* Link */ + a { + color: var(--in-content-link-color) !important; + } + + a:hover, + .text-link:hover { + color: var(--in-content-link-color-hover) !important; + text-decoration: underline !important; + } + + a:visited { + color: var(--in-content-link-color-visited) !important; + } + + a:hover:active, + .text-link:hover:active { + color: var(--in-content-link-color-active) !important; + } + + a:-moz-focusring, + .text-link:-moz-focusring { + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 1px !important; + border-radius: 4px !important; + } + + /* Button */ + button { + font: inherit; + } + + button, + select, + input[type="color"] { + appearance: none !important; + min-height: 32px !important; + color: var(--in-content-button-text-color, inherit) !important; + border: 1px solid transparent !important; + /* shows up in high-contrast mode */ + border-radius: var(--in-content-button-border-radius) !important; + background-color: var(--in-content-button-background) !important; + font-weight: 400 !important; + padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; + text-decoration: none !important; + margin: 4px 8px !important; + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: 1em !important; + } + + button { + font-weight: 600 !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 { + --in-content-button-vertical-padding: 6px; + --in-content-button-horizontal-padding: 13px; + min-height: 28px !important; + font-size: 0.95em !important; + } + + button.small { + --in-content-button-vertical-padding: 5px; + --in-content-button-horizontal-padding: 11px; + min-height: 24px !important; + font-size: 0.9em !important; + } + + ::-moz-focus-inner { + border: none !important; + } + + button:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + + button:enabled:hover, + input[type="color"]:hover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + border-color: transparent !important; + } + + button:enabled:hover:active, + input[type="color"]:enabled:hover:active { + background-color: var(--in-content-button-background-active) !important; + } + + button:disabled, + input[type="color"]:disabled { + opacity: 0.4 !important; + } + + button[autofocus], + button[type="submit"], + button.primary { + background-color: var(--in-content-primary-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + } + + button[autofocus]:enabled:hover, + button[type="submit"]:enabled:hover, + button.primary:enabled:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + + button[autofocus]:enabled:hover:active, + button[type="submit"]:enabled:hover:active, + button.primary:enabled:hover:active { + background-color: var(--in-content-primary-button-background-active) !important; + } + + /* Checkbox */ + input[type="checkbox"] { + margin-block: 2px !important; + } + + input[type="checkbox"] { + appearance: none !important; + height: 16px !important; + width: 16px !important; + border: 1px solid var(--checkbox-border-color) !important; + background-color: var(--checkbox-unchecked-bgcolor) !important; + border-radius: 2px !important; + margin-inline: 0 6px !important; + flex-shrink: 0 !important; + /* avoid shrinking inside flex container */ + } + + input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor) !important; + } + + input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor) !important; + } + + input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color) !important; + background-color: var(--checkbox-checked-bgcolor) !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) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + + input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor) !important; + } + + input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor) !important; + } + + /* Textarea */ + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + 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; + } + + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, + textarea:focus, + search-textbox[focused], + tree:focus-visible, + richlistbox:focus-visible { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; + /* Prevents antialising around the corners */ + } + + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, + textarea:-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 */ + } + + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, + textarea:disabled, + search-textbox[disabled="true"] { + opacity: 0.4 !important; + } + + /* Table */ + table { + width: 100% !important; + } + } + @-moz-document url-prefix("about:plugins"), + url-prefix("about:cache"), + url-prefix("about:checkerboard") { + table { + border: 1px solid var(--in-content-table-border-color) !important; + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:cache"), + url-prefix("about:checkerboard") { + th, + td { + border: 1px solid var(--in-content-table-border-color) !important; + } + + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + } + /*= Field Border =============================================================*/ + @supports -moz-bool-pref("userContent.page.field_border") { + @media (prefers-reduced-motion: no-preference) { + @-moz-document url-prefix("about:") { + xul|search-textbox:hover { + border-color: var(--in-content-focus-outline-color) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } + @-moz-document url-prefix("about:config") { + #about-config-search:hover { + border-color: var(--in-content-focus-outline-color) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } + } + } + /*= View Source ==============================================================*/ + @-moz-document url-prefix("view-source") { + :root { + background-color: var(--in-content-page-background) !important; + /* Original: white */ + color: var(--in-content-page-color) !important; + /* Original: black */ + /* Colors */ + --view-source-green: var(--green-80); + --view-source-purple: #800080; + /* Like alphenglow */ + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --view-source-green: var(--green-60); + --view-source-purple: #c68aff; + } + } + pre[id]::before, + span[id]::before { + color: color-mix(in srgb, var(--in-content-page-color) 70%, var(--in-content-page-background)) !important; + /* Original: #ccc */ + } + + .highlight .start-tag, + .highlight .end-tag { + color: var(--view-source-purple) !important; + /* Original: purple */ + } + + .highlight .comment { + color: var(--view-source-green) !important; + /* Original: green */ + } + + .highlight .cdata { + color: var(--in-content-border-invalid) !important; + /* Original: #CC0066 */ + } + + .highlight .doctype { + color: #4682b4 !important; + /* Original: steelblue */ + } + + .highlight .pi { + color: orchid !important; + /* Original: orchid */ + } + + .highlight .entity { + color: #ff4500 !important; + /* Original: #FF4500 */ + } + + .highlight .attribute-name { + color: var(--view-source-green) !important; + /* Original: black */ + } + + .highlight .attribute-value { + color: var(--in-content-link-color) !important; + /* Original: blue */ + } + + .highlight .markupdeclaration { + color: #4682b4 !important; + /* Original: steelblue */ + } + + .highlight .error, + .highlight + .error + > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) { + color: var(--in-content-error-text-color) !important; + /* Original: red */ + } + } + /*= Directory View ===========================================================*/ + @-moz-document url-prefix("about:sync-log"), + regexp("^(((jar:)?file:///)|(chrome://)).*/$") + { + body { + background-color: var(--in-content-box-background) !important; + margin: 4em auto !important; + /* Override to default */ + } + + thead a { + color: var(--in-content-page-color) !important; + } + + td ::before { + vertical-align: top !important; + } + } + /*= about:plugins ============================================================*/ + @-moz-document url-prefix("about:plugins") { + .notice { + background: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } + } + /*= about:cache ==============================================================*/ + @-moz-document url-prefix("about:cache") { + table { + padding: 0 !important; + } + + th, + td { + padding: 4px !important; + text-align: match-parent !important; + } + } + /*= about:checkerboard =======================================================*/ + @-moz-document url-prefix("about:checkerboard") { + #canvas { + border: 1px solid var(--in-content-border-color) !important; + } + + #excludePageFromZoom { + vertical-align: bottom !important; + } + } + /*= about:memory =============================================================*/ + @-moz-document url-prefix("about:memory") { + .opsRow, + .section { + background-color: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + + .opsRowLabel input { + vertical-align: bottom !important; + } + } + /*= chrome://browser/content/places/places.xhtml =============================*/ + @-moz-document url("chrome://browser/content/places/places.xhtml") + { + /** 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" */ + } + + /*= 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; + } + } + /*= Context Menu ===========================================================*/ + @supports -moz-bool-pref("userChrome.icon.context_menu") { + menupopup menuitem:not([type="checkbox"], [type="radio"]), + menupopup menu:not([type="checkbox"], [type="radio"]), + #main-menubar > menu { + -moz-appearance: none !important; + /* Linux: menulist */ + } + + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + /* 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); + } + + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Padding - Windows */ + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + /* 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) { + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + 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) + ); + } + + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { + 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; + } + } + /* 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 */ + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { + padding-inline-end: var(--context-menu-background-padding) !important; + } + + /* text position */ + #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text, + #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text { + padding-inline-start: var(--context-menu-mac-padding) !important; + } + + /* Checkbox menuitem, None iconic menu */ + #placesContext menuitem[type="checkbox"], + #placesContext menu:not(.menu-iconic) { + padding-inline-start: calc( + var(--context-menu-background-padding) + var(--context-menu-mac-padding) + ) !important; + } + } + /* Icon lists */ + /*= 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("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #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"); + } + + /*= organizeButtonPopup ======================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #newfolder { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #newfolder { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #newseparator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + + #orgUndo { + --menuitem-image: url("../icons/undo.svg"); + } + + #orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #orgCopy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #orgSelectAll { + --menuitem-image: url("../icons/select-all-on.svg"); + } + + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + /*= viewMenuPopup ============================================================*/ + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + + #viewSort { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + + /*= maintenanceButtonPopup ===================================================*/ + #backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); + } + + #fileImport { + --menuitem-image: url("chrome://browser/skin/save.svg"); + } + + #fileExport { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + } + @media (-moz-gtk-csd-available) { + /*= Layout Fixes =========================================================*/ + menupopup menu { + padding-block: 4px; + } + + .menu-right { + width: 16px !important; + /* Original: 1ex */ + background-image: url("chrome://global/skin/icons/arrow-right.svg"); + background-position: right center; + } + + /*= Proton ===============================================================*/ + @supports -moz-bool-pref("userContent.page.proton") { + :root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; + } + + @media not all and (prefers-contrast) { + :root { + --organizer-color: var(--in-content-page-color); + --organizer-deemphasized-color: var(--in-content-deemphasized-text); + --organizer-toolbar-background: rgb(249, 249, 251); + /* --toolbar-bgcolor */ + --organizer-pane-background: rgb(229, 229, 235); + /* --lwt-accent-color */ + --organizer-content-background: var(--in-content-page-background); + --organizer-hover-background: var(--in-content-button-background-hover); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: var(--in-content-button-background-active); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: var(--in-content-focus-outline-color); + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: var(--in-content-border-color); + --organizer-toolbar-field-background: rgb(240, 240, 244); + /* --lwt-accent-color */ + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix( + in srgb, + var(--organizer-outline-color) 50%, + transparent + ); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251, 251, 254); + --organizer-deemphasized-color: rgb(191, 191, 201); + --organizer-toolbar-background: rgb(43, 42, 51); + --organizer-pane-background: rgb(35, 34, 43); + --organizer-content-background: rgb(28, 27, 34); + --organizer-hover-background: rgb(82, 82, 94); + --organizer-selected-background: rgb(91, 91, 102); + --organizer-toolbar-field-background: var(--in-content-page-background); + --organizer-toolbar-field-background-focused: rgb(66, 65, 77); + scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + } + } + } + /*- Toolbar & Menus ------------------------------------------------------*/ + #placesToolbar { + appearance: none !important; + background-color: var(--organizer-toolbar-background) !important; + color: var(--organizer-color) !important; + border-bottom: 1px solid var(--organizer-border-color) !important; + padding: 4px !important; + padding-inline-end: 6px !important; + } + + #placesToolbar > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; + } + + #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, + #downloadsListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + + richlistitem[selected="true"], + richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; + } + + /*- Tree -----------------------------------------------------------------*/ + #contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; + } + + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"]), + treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover, + treecolpicker:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + + treecol:not([hideheader="true"], [sortable="false"]):hover:active, + treecolpicker:hover:active { + background-color: var(--organizer-selected-background) !important; + } + + treecol:not([hideheader="true"], :first-child), + treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; + } + + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + + treechildren::-moz-tree-row { + background-color: transparent !important; + } + + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + + /*- 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; + } + + /*- Radio Button ---------------------------------------------------------*/ + menuitem[type="radio"] { + /* margin-inline-start: 0 !important; */ + appearance: none !important; + } + + menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon { + 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 */ + } + + menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + + menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-active) !important; + } + + menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + -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; + } + + menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + + menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active + > .menu-iconic-left + > .menu-iconic-icon { + background-color: var(--in-content-primary-button-background-active) !important; + } + + menuitem[type="radio"] > .menu-iconic-text { + margin-inline: 0 8px !important; + padding-inline-start: 0 !important; + } + + /* Disabled checkboxes, radios and labels */ + menuitem[type="radio"][disabled="true"], + menuitem[type="checkbox"][disabled="true"] { + color: inherit !important; + } + + menuitem[type="radio"][disabled="true"], + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.5 !important; + } + + /*- Check Box ------------------------------------------------------------*/ + /* From checkbox.css */ + menuitem[type="checkbox"] { + appearance: none !important; + -moz-box-align: center !important; + margin: 0px 2px !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + margin-inline-end: 2px !important; + } + + menuitem[type="checkbox"] > .menu-iconic-text { + margin: 1px 0 !important; + } + + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.4 !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + 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; + } + + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + height: 16px !important; + width: 16px !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } + + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + 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; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } + + menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; + } + + @media (prefers-contrast) { + menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { + /* 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; + } + + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } + + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon, + menuitem[type="checkbox"]:not([disabled="true"]):hover + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + 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 */ + menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { + margin-block: 2px !important; + } + + /*- Menu Separtor --------------------------------------------------------*/ + menuseparator { + appearance: none !important; + min-width: 2px; + min-height: 0; + border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); + border-bottom: none; + margin: var(--panel-separator-margin, 6px); + padding: 0; + } + } + } + } +} diff --git a/docs/Project_Structure.md b/docs/Project_Structure.md index 91857e6..712fea2 100644 --- a/docs/Project_Structure.md +++ b/docs/Project_Structure.md @@ -18,10 +18,11 @@ The overall structure of this project. root |- __tests__/: Mixin spec test |- icons/: Icons, illustrations +|- css/: Build result of SCSS Files |- docs/: Development Documents |- src/: Source files -|- src/userChrome.scss: Entry of SCSS for Browser UI -|- src/userContent.scss: Entry of SCSS for Web pages +|- src/leptonChrome.scss: Entry of SCSS for Browser UI +|- src/leptonContent.scss: Entry of SCSS for Web pages |- .gitattributes: Exclude at `Download Zip` |- .github: Issue/PR Template, Github Actions |- .prettierignore: Exclude coding style @@ -31,8 +32,8 @@ root |- package.json: Build setup, package dependency |- LEPTON: Meta infos (branch, version) |- user.js: about:config settings -|- userChrome.css: Build result of src/userChrome.scss (Don't modify directly!!) -|- userContent.css: Build result of src/userContent.scss (Don't modify directly!!) +|- userChrome.css: Entry of css for Browser UI (Don't modify directly!!) +|- userContent.css: Entry of css for Web pages (Don't modify directly!!) |- yarn.lock: Auto generated dependency (Don't modify directly!!) ``` @@ -43,7 +44,8 @@ Most of them are made in SVG. Except for illustrations, there must be an `fill="context-fill" fill-opacity="context-fill-opacity"` property to dynamically determine color and transparency. Icons are mainly [FirefoxUX/photon-icons](https://github.com/FirefoxUX/photon-icons) -or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons). +or [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons). +Although not yet used, [tabler/tabler-icons](https://github.com/tabler/tabler-icons) and [feathericons/feather](https://github.com/feathericons/feather) can also be referred to. You can see more in the issue, [Unify icon design langauge #213](https://github.com/black7375/Firefox-UI-Fix/issues/213). @@ -89,12 +91,6 @@ CSS settings are relatively simple. - `userChrome-overrides.css` at `/chrome/` - `userContent-overrides.css` at `/chrome/` -Then, activate the following options: -- `userChrome.overrides` to `true` -- `userContent.overrides` to `true` - -It is now loading, and there is no need to manage the version control to the `userChrome.css` and `userContents.css` file. - `user-overrides.js` needs to use a shell script and has some priorities. - `/user-overrides.js` - `./user-overrides.js` (Will be copied `/chrome/`) diff --git a/docs/Restrictions.md b/docs/Restrictions.md index 6da0db3..9b5b247 100644 --- a/docs/Restrictions.md +++ b/docs/Restrictions.md @@ -11,6 +11,8 @@ * [DOM structure cannot be modified](#dom-structure-cannot-be-modified) * [Shadow DOM](#shadow-dom) * [XUL](#xul) + * [Namespace](#namespace) + * [Import](#import) @@ -121,4 +123,73 @@ Example of legacy documents that will help. - [UDN: ::-moz-tree-cell-text](https://udn.realityripple.com/docs/Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text) Another case. -Like [``](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute/align), [`attributes`] is set and CSS of same property may not be appplied. (Ex. [`box-align: start`](https://udn.realityripple.com/docs/Web/CSS/box-align)) +Like [``](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute/align), [`attributes`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute) is set and CSS of same property may not be appplied. (Ex. [`box-align: start`](https://udn.realityripple.com/docs/Web/CSS/box-align)) + +### Namespace +In older codes, the following [namespace](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) is commonly seen: + +```css +@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); +``` + +However, it is [only applicable to XUL](https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces), so it is recommended to use with `prefix`. +```css +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Use */ +xul|search-textbox { + border: 2px solid red !important; +} +html|input { + border: 2px solid green !important; +} +``` + +If you want to limit the coverage to some pages, you can use [`@-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document): +```css +/* Main browser UI */ +@-moz-document url(chrome://browser/content/browser.xhtml) { + /* Your CSS */ +} + +/* Library UI */ +@-moz-document url("chrome://browser/content/places/places.xhtml") { + /* Your CSS */ +} + +/* PageInfo UI */ +@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") { + /* Your CSS */ +} +``` + +### Import +There are a few caveats when you [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) the CSS. +It's because of specification definition, not Firefox design, but to prevent some mistakes. + +`@import` rule is not a [nested statement](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule#conditional_group_rules). + +```css +/* Precede */ +@import url("YourFile.css"); /* Works */ + +/* Nested */ +@supports -moz-bool-pref("userChrome.test.pref") { + @import url("AnotherFile.css"); /* Not Works */ +} +``` + +Any [`@namespace`](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) rules must follow all `@charset` and @import rules, and precede all other at-rules and style declarations in a style sheet. + +```css +/* Before - Namespace */ +@import url("YourFile.css"); /* Works */ + +/* Declare - Namespace */ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* After - Namespace */ +@import url("YourFile.css"); /* Not Works */ +``` diff --git a/install.ps1 b/install.ps1 index 515ebda..46f1123 100644 --- a/install.ps1 +++ b/install.ps1 @@ -49,13 +49,13 @@ https://github.com/black7375/Firefox-UI-Fix#readme param( [Alias("u")] - [Switch]$updateMode, + [switch]$updateMode, [Alias("f")] [string]$profileDir, [Alias("p")] [string]$profileName, [Alias("h")] - [Switch]$help = $false + [switch]$help = $false ) #** Helper Utils *************************************************************** @@ -92,25 +92,33 @@ function Verify-PowerShellVersion { #== Required Tools ============================================================= function Install-Choco() { # https://chocolatey.org/install + # https://docs.chocolatey.org/en-us/choco/setup#non-administrative-install + $InstallDir='C:\ProgramData\chocoportable' + $env:ChocolateyInstall="$InstallDir" + Set-ExecutionPolicy Bypass -Scope Process -Force [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072 iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) - $env:Path += ";C:\ProgramData\chocolatey" + $env:Path += ";C:\ProgramData\chocoportable" # Adimin: ";C:\ProgramData\chocolatey" + refreshenv } function Check-Git() { - if( -Not (Get-Command git) ) { - if ( -Not (Get-Command choco)) { + if ( -Not (Get-Command git -errorAction SilentlyContinue) ) { + if ( -Not (Get-Command choco -errorAction SilentlyContinue) ) { Install-Choco } - choco install git -y - $env:Path += ";C:\Program Files\Git\bin" + choco install git.commandline -y + $env:Path += ";C:\tools\git\bin" # Adimin: ";C:\Program Files\Git\bin" + refreshenv } Lepton-OKMessage "Required - git" } #== PATH / File ================================================================ +$PSDefaultParameterValues['Out-File:Encoding'] = 'utf8' + $currentDir = (Get-Location).path function Filter-Path() { @@ -634,6 +642,147 @@ function Check-InstallTypes() { } } +#== Custom Install ============================================================= +$customFiles = @( + "user-overrides.js", + "userChrome-overrides.css", + "userContent-overrides.css" +) +$localCustomFiles = $customFiles.Clone() + +$customFileExist = $false +function Check-CustomFiles() { + $global:localCustomFiles = Filter-Path $localCustomFiles + + if ( $global:localCustomFiles.Length -gt 0 ) { + $global:customFileExist = $true + Lepton-OKMessage "Check custom file detected" + + foreach ( $customFile in $global:localCustomFiles ) { + Write-Host "- ${customFile}" + } + } +} + +function Copy-CustomFiles() { + if ( "${customFileExist}" -eq $true ) { + # If Release or Network mode, Local is passed (Already copied) + if ( "${leptonInstallType}" -ne "Local" ) { + foreach ( $profilePath in $global:firefoxProfilePaths ) { + foreach ( $customFile in $global:localCustomFiles ) { + if ( "${customFile}" -eq "user-overrides.js" ) { + Copy-Auto "${customFile}" "${profilePath}\${customFile}" + } + else { + Copy-Auto "${customFile}" "${profilePath}\chrome\${customFile}" + } + } + } + } + + Lepton-OKMessage "End custom file copy" + } +} + +$customMethod = "" +$customReset = $false +$customAppend = $false +function Set-CustomMethod() { + $local:menuAppend="Append - Maintain changes in existing files and apply custom" + $local:menuOverwrite="Overwrite - After initializing the change, apply only custom" + $local:menuNone="None - Maintain changes in existing files" + $local:menuReset="Reset- Reset to pure lepton theme without custom" + + Write-Host "Select custom method" + while ( "${customMethod}" -eq "" ) { + $local:applyMethod = Menu @("${menuAppend}", "${menuOverwrite}", "${menuNone}", "${menuReset}") + switch ( $applyMethod ) { + "${menuAppend}" { + $global:customMethod = "Append" + $global:customAppend = $true + } + "${menuOverwrite}" { + $global:customMethod = "Overwrite" + $global:customReset = $true + $global:customAppend = $true + } + "${menuNone}" { + $global:customMethod = "None" + } + "${menuReset}" { + $global:customMethod = "Reset" + $global:customReset = $true + } + default { Write-Host "Invalid option, reselect please." } + } + } + + Lepton-OKMessage "Selected ${customMethod}" +} + +$customFileApplied = $false +function Apply-CustomFile() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $profilePath, + [Parameter(Mandatory=$true, Position=1)] + [string] $targetPath, + [Parameter(Mandatory=$true, Position=2)] + [string] $customPath, + [Parameter(Position=3)] + [string] $otherCustomPath = "" + ) + + $local:leptonDir = "${profilePath}\chrome" + $local:gitDir = "${leptonDir}\.git" + if ( Test-Path -Path "${customPath}" -PathType leaf ) { + $global:customFileApplied = $true + + if ( "${customMethod}" -eq "" ) { + Set-CustomMethod + } + + if ( "${customReset}" -eq $true ) { + if ( "${targetPath}" -like "*user.js" ) { + Copy-Item -Path "${leptonDir}\user.js" -Destination "${targetPath}" -Force + } + else { + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout HEAD -- "${targetPath}" + } + } + if ( "${customAppend}" -eq $true ) { + # Apply without duplication + if ( -not (Write-Output "$(Write-Output $(Get-Content -Path "${targetPath}"))" | Select-String -Pattern "$(Write-Output $(Get-Content -Path "${customPath}"))" -SimpleMatch -Quiet) ) { + Get-Content -Path "${customPath}" | Out-File -FilePath "${targetPath}" -Append + } + } + } + elseif ( "${otherCustomPath}" -ne "" ) { + Apply-CustomFile "${profilePath}" "${targetPath}" "${otherCustomPath}" + } +} + +function Apply-CustomFiles() { + foreach ( $profilePath in $global:firefoxProfilePaths ) { + foreach ( $customFile in $global:customFiles ) { + $local:targetFile = $customFile.Replace("-overrides", "") + if ( "${customFile}" -eq "user-overrides.js" ) { + $local:targetPath = "${profilePath}\${targetFile}" + $local:customPath = "${profilePath}\user-overrides.js" + $local:otherCustomPath = "${profilePath}\chrome\user-overrides.js" + Apply-CustomFile "${profilePath}" "${targetPath}" "${customPath}" "${otherCustomPath}" + } + else { + Apply-CustomFile "${profilePath}" "${profilePath}\chrome\${targetFile}" "${profilePath}\chrome\${customFile}" + } + } + } + + if ( "${customFileApplied}" -eq $true ) { + Lepton-OKMessage "End custom file applied" + } +} + #== Install Helpers ============================================================ $chromeDuplicate = $false function Check-ChromeExist() { @@ -692,10 +841,16 @@ function Copy-Lepton() { #== Each Install =============================================================== function Install-Local() { Copy-Lepton "${currentDir}" "user.js" + Copy-CustomFiles + + Apply-CustomFiles } function Install-Release() { Copy-Lepton "chrome" "user.js" + Copy-CustomFiles + + Apply-CustomFiles } function Install-Network() { @@ -704,9 +859,12 @@ function Install-Network() { Clone-Lepton Copy-Lepton + Copy-CustomFiles Clean-Lepton Check-ChromeRestore + + Apply-CustomFiles } function Install-Profile() { @@ -722,6 +880,35 @@ function Install-Profile() { } #** Update ********************************************************************* +function Stash-File() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $leptonDir, + [Parameter(Mandatory=$true, Position=1)] + [string] $gitDir + ) + + if ( "$(git --git-dir "${gitDir}" --work-tree "${leptonDir}" diff --stat)" -ne '' ) { + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout stash + return $true + } + return $false +} +function Restore-File() { + Param ( + [Parameter(Mandatory=$true, Position=0)] + [string] $leptonDir, + [Parameter(Mandatory=$true, Position=1)] + [string] $gitDir, + [Parameter(Position=2)] + [switch] $gitDirty = $false + ) + + if ( "${gitDirty}" -eq $true ) { + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout stash pop --quiet + } +} + function Update-Profile() { Check-Git foreach ( $profileDir in $global:firefoxProfileDirPaths ) { @@ -734,10 +921,15 @@ function Update-Profile() { $local:Branch = $LEPTONINFO["${section}"]["Branch"] $local:Path = $LEPTONINFO["${section}"]["Path"] - $local:LEPTONGITPATH="${Path}\chrome\.git" - if ( "${Type}" -eq "Git" ){ - git --git-dir "${LEPTONGITPATH}" checkout "${Branch}" - git --git-dir "${LEPTONGITPATH}" pull --no-edit + $local:leptonDir = "${Path}\chrome" + $local:gitDir = "${leptonDir}\.git" + if ( "${Type}" -eq "Git" ) { + $local:gitDirty = $(Stash-File "${leptonDir}" "${gitDir}") + + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}" + git --git-dir "${gitDir}" --work-tree "${leptonDir}" pull --no-edit + + Restore-File "${leptonDir}" "${gitDir}" $gitDirty } elseif ( "${Type}" -eq "Local" -or "${Type}" -eq "Release" ) { Check-ChromeExist @@ -749,12 +941,15 @@ function Update-Profile() { if ( "${Branch}" -eq $null ) { $Branch = "${leptonBranch}" } - git --git-dir "${LEPTONGITPATH}" checkout "${Branch}" + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}" if ( "${Type}" -eq "Release" ) { - $local:Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0) - git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}" + $local:Ver=$(git --git-dir "${gitDir}" describe --tags --abbrev=0) + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "tags/${Ver}" } + + Clean-Lepton + Check-ChromeRestore } else { Lepton-ErrorMessage "Unable to find update type, ${Type} at ${section}" @@ -762,8 +957,8 @@ function Update-Profile() { } } } - Clean-Lepton - Check-ChromeRestore + + Apply-CustomFiles } #** Main *********************************************************************** @@ -784,6 +979,8 @@ function Install-Lepton { Update-ProfilePaths Write-LeptonInfo + Check-CustomFiles + if ( $updateMode ) { Update-Profile } diff --git a/install.sh b/install.sh index 2f32316..ad9823f 100755 --- a/install.sh +++ b/install.sh @@ -616,6 +616,137 @@ check_install_types() { fi } +#== Custom Install ============================================================= +customFiles=( + user-overrides.js + userChrome-overrides.css + userContent-overrides.css +) +localCustomFiles=("${customFiles[@]}") + +customFileExist="" +check_custom_files() { + paths_filter localCustomFiles + + if [ "${#localCustomFiles[@]}" -gt 0 ]; then + customFileExist="true" + lepton_ok_message "Check custom file detected" + + for customFile in "${localCustomFiles[@]}"; do + echo "- ${customFile}" + done + fi +} + +copy_custom_files() { + if [ "${customFileExist}" == "true" ]; then + # If Release or Network mode, Local is passed (Already copied) + if [ "${leptonInstallType}" != "Local" ]; then + for profilePath in "${firefoxProfilePaths[@]}"; do + for customFile in "${localCustomFiles[@]}"; do + if [ "${customFile}" == "user-overrides.js" ]; then + autocp "${customFile}" "${profilePath}/${customFile}" + else + autocp "${customFile}" "${profilePath}/chrome/${customFile}" + fi + done + done + fi + + lepton_ok_message "End custom file copy" + fi +} + +customMethod="" +customReset="" +customAppend="" +set_custom_method() { + local menuAppend="Append - Maintain changes in existing files and apply custom" + local menuOverwrite="Overwrite - After initializing the change, apply only custom" + local menuNone="None - Maintain changes in existing files" + local menuReset="Reset- Reset to pure lepton theme without custom" + + echo "Select custom method" + select applyMethod in "${menuAppend}" "${menuOverwrite}" "${menuNone}" "${menuReset}"; do + case "${applyMethod}" in + "${menuAppend}") + customMethod="Append" + customAppend="true" + break;; + "${menuOverwrite}") + customMethod="Overwrite" + customReset="true" + customAppend="true" + break;; + "${menuNone}") + customMethod="None" + break;; + "${menuReset}") + customMethod="Reset" + customReset="true" + break;; + *) + echo "Invalid option, reselect please.";; + esac + done + + lepton_ok_message "Selected ${customMethod}" +} + +customFileApplied="" +apply_custom_file() { + local profilePath=$1 + local targetPath=$2 + local customPath=$3 + local otherCustomPath=$4 + + local leptonDir="${profilePath}/chrome" + local gitDir="${leptonDir}/.git" + if [ -f "${customPath}" ]; then + customPathApplied="true" + + if [ -z "${customMethod}" ]; then + set_custom_method + fi + + if [ "${customReset}" == "true" ]; then + if [[ "${targetPath}" == *"user.js" ]]; then + \cp -f "${leptonDir}/user.js" "${targetPath}" + else + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout HEAD -- "${targetPath}" + fi + fi + if [ "${customAppend}" == "true" ]; then + # Apply without duplication + if ! grep -Fq "$(echo $(cat "${customPath}"))" <(echo "$(echo $(cat "${targetPath}"))"); then + cat "${customPath}" >> "${targetPath}" + fi + fi + elif [ -n "${otherCustomPath}" ]; then + apply_custom_file "${profilePath}" "${targetPath}" "${otherCustomPath}" + fi +} + +apply_custom_files() { + for profilePath in "${firefoxProfilePaths[@]}"; do + for customFile in "${customFiles[@]}"; do + local targetFile="${customFile//-overrides/}" + if [ "${customFile}" == "user-overrides.js" ]; then + local targetPath="${profilePath}/${targetFile}" + local customPath="${profilePath}/user-overrides.js" + local otherCustomPath="${profilePath}/chrome/user-overrides.js" + apply_custom_file "${profilePath}" "${targetPath}" "${customPath}" "${otherCustomPath}" + else + apply_custom_file "${profilePath}" "${profilePath}/chrome/${targetFile}" "${profilePath}/chrome/${customFile}" + fi + done + done + + if [ "${customFileApplied}" == "true" ]; then + lepton_ok_message "End custom file applied" + fi +} + #== Install Helpers ============================================================ chromeDuplicate="" check_chrome_exist() { @@ -673,10 +804,16 @@ copy_lepton() { #== Each Install =============================================================== install_local() { copy_lepton "${currentDir}" "user.js" + copy_custom_files + + apply_custom_files } install_release() { copy_lepton "chrome" "user.js" + copy_custom_files + + apply_custom_files } install_network() { @@ -685,9 +822,11 @@ install_network() { clone_lepton copy_lepton + copy_custom_files clean_lepton check_chrome_restore + apply_custom_files } install_profile() { @@ -703,6 +842,22 @@ install_profile() { } #** Update ********************************************************************* +file_stash() { + local leptonDir=$1 + local gitDir=$2 + if [[ $(git --git-dir "${gitDir}" --work-tree "${leptonDir}" diff --stat) != '' ]]; then + git --git-dir "${gitDir}" --work-tree "${leptonDir}" stash + fi +} +file_restore() { + local leptonDir=$1 + local gitDir=$2 + local gitDirty=$3 + if [ -n "${gitDirty}" ]; then + git --git-dir "${gitDir}" --work-tree "${leptonDir}" stash pop --quiet + fi +} + update_profile() { check_git for profileDir in "${firefoxProfileDirPaths[@]}"; do @@ -714,10 +869,15 @@ update_profile() { local Branch=$(get_ini_value "${LEPTONINFOPATH}" "Branch" "${section}") local Path=$( get_ini_value "${LEPTONINFOPATH}" "Path" "${section}") - local LEPTONGITPATH="${Path}/chrome/.git" + local leptonDir="${Path}/chrome" + local gitDir="${leptonDir}/.git" if [ "${Type}" == "Git" ]; then - git --git-dir "${LEPTONGITPATH}" checkout "${Branch}" - git --git-dir "${LEPTONGITPATH}" pull --no-edit + local gitDirty=$(file_stash "${leptonDir}" "${gitDir}") + + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}" + git --git-dir "${gitDir}" --work-tree "${leptonDir}" pull --no-edit + + file_restore "${leptonDir}" "${gitDir}" "${gitDirty}" elif [ "${Type}" == "Local" ] || [ "${Type}" == "Release" ]; then check_chrome_exist clone_lepton @@ -728,20 +888,23 @@ update_profile() { if [ -z "${Branch}" ]; then Branch="${leptonBranch}" fi - git --git-dir "${LEPTONGITPATH}" checkout "${Branch}" + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "${Branch}" if [ "${Type}" == "Release" ]; then local Ver=$(git --git-dir "${LEPTONINFOFILE}" describe --tags --abbrev=0) - git --git-dir "${LEPTONGITPATH}" checkout "tags/${Ver}" + git --git-dir "${gitDir}" --work-tree "${leptonDir}" checkout "tags/${Ver}" fi + + clean_lepton + check_chrome_restore else lepton_error_message "Unable to find update type, ${Type} at ${section}" fi done fi done - clean_lepton - check_chrome_restore + + apply_custom_files } #** Main *********************************************************************** @@ -773,6 +936,8 @@ install_lepton() { update_profile_paths write_lepton_info + check_custom_files + # Install Mode if [ "${updateMode}" == true ]; then update_profile diff --git a/package.json b/package.json index 7279baa..1b53499 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,10 @@ }, "homepage": "https://github.com/black7375/Firefox-UI-Fix#readme", "scripts": { - "build": "sass --no-source-map src/userChrome.scss ./userChrome.css && sass --no-source-map src/userContent.scss ./userContent.css && prettier --write userChrome.css userContent.css", + "build": "sass --no-source-map src/leptonChrome.scss css/leptonChrome.css && sass --no-source-map src/leptonContent.scss css/leptonContent.css && prettier --write css/leptonChrome.css css/leptonContent.css", "format": "prettier --write .", "test": "jest", - "validate": "csstree-validator userChrome.css; csstree-validator userContent.css" + "validate": "csstree-validator css/leptonChrome.css; csstree-validator css/leptonContent.css" }, "devDependencies": { "csstree-validator": "^3.0.0", diff --git a/src/contents/_error_page.scss b/src/contents/_error_page.scss index 40e4871..b17bc95 100644 --- a/src/contents/_error_page.scss +++ b/src/contents/_error_page.scss @@ -40,12 +40,12 @@ url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { #errorPageContainer { - background-image: url("./icons/error-connection-failure.svg"); + background-image: url("../icons/error-connection-failure.svg"); } } @-moz-document url-prefix("about:neterror?e=dnsNotFound") { #errorPageContainer { - background-image: url("./icons/error-server-not-found.svg"); + background-image: url("../icons/error-server-not-found.svg"); } } @-moz-document url-prefix("about:neterror?e=malformedURI") { @@ -56,7 +56,7 @@ @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { #errorPageContainer { - background-image: url("./icons/blue-berror.svg"); + background-image: url("../icons/blue-berror.svg"); background-size: 18.5em; } } @@ -64,7 +64,7 @@ @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") { .description-wrapper { - background-image: url("./icons/error-session-restore.svg"); + background-image: url("../icons/error-session-restore.svg"); } } @@ -98,7 +98,7 @@ { @media (min-width: 970px) { .title { - background-image: url("./icons/welcome-back.svg") !important; + background-image: url("../icons/welcome-back.svg") !important; } } } diff --git a/src/contents/_video_player.scss b/src/contents/_video_player.scss index 29604e4..c6c60cd 100644 --- a/src/contents/_video_player.scss +++ b/src/contents/_video_player.scss @@ -173,10 +173,10 @@ @include Option("userContent.player.icon") { #controlsContainer .fullscreenButton { - background-image: url("./icons/enter-fullscreen.svg") !important; + background-image: url("../icons/enter-fullscreen.svg") !important; } #controlsContainer .fullscreenButton[fullscreened] { - background-image: url("./icons/exit-fullscreen.svg") !important; + background-image: url("../icons/exit-fullscreen.svg") !important; } } diff --git a/src/icons/_global_menu.scss b/src/icons/_global_menu.scss index 3068db4..99b12c1 100644 --- a/src/icons/_global_menu.scss +++ b/src/icons/_global_menu.scss @@ -45,7 +45,7 @@ #goOfflineMenuitem { } #menu_FileQuitItem { - --menuitem-image: url("./icons/quit.svg"); + --menuitem-image: url("../icons/quit.svg"); } /* Mange Containers */ @@ -55,7 +55,7 @@ /*= menu_EditPopup ===========================================================*/ #menu_undo { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #menu_redo { } @@ -64,7 +64,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #menu_copy { - --menuitem-image: url("./icons/edit-copy.svg"); + --menuitem-image: url("../icons/edit-copy.svg"); } #menu_paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -74,7 +74,7 @@ } #menu_selectAll { - --menuitem-image: url("./icons/select-all-on.svg"); + --menuitem-image: url("../icons/select-all-on.svg"); } #menu_find { @@ -92,17 +92,17 @@ /*= menu_viewPopup ===========================================================*/ #viewToolbarsMenu { - --menuitem-image: url("./icons/toolbar.svg"); + --menuitem-image: url("../icons/toolbar.svg"); } #viewSidebarMenuMenu { --menuitem-image: url("chrome://browser/skin/sidebars.svg"); } #viewFullZoomMenu { - --menuitem-image: url("./icons/screenshot.svg"); + --menuitem-image: url("../icons/screenshot.svg"); } #pageStyleMenu { - --menuitem-image: url("./icons/document-css.svg"); + --menuitem-image: url("../icons/document-css.svg"); } #repair-text-encoding { --menuitem-image: url("chrome://browser/skin/characterEncoding.svg"); @@ -118,7 +118,7 @@ } #documentDirection-swap { - --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg"); + --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg"); } /* view-menu-popup sub menu */ @@ -134,7 +134,7 @@ --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg"); } #menu_zoomReset { - --menuitem-image: url("./icons/resize.svg"); + --menuitem-image: url("../icons/resize.svg"); } /*= goPopup ==================================================================*/ @@ -149,7 +149,7 @@ --menuitem-image: url("chrome://browser/skin/sync.svg"); } #historyRestoreLastSession { - --menuitem-image: url("./icons/restore-session.svg"); + --menuitem-image: url("../icons/restore-session.svg"); } #hiddenTabsMenu { } @@ -162,10 +162,10 @@ /* sub menu */ #historyUndoPopup .restoreallitem { - --menuitem-image: url("./icons/movetowindow-16.svg"); + --menuitem-image: url("../icons/movetowindow-16.svg"); } #historyUndoWindowPopup .restoreallitem { - --menuitem-image: url("./icons/restore-session.svg"); + --menuitem-image: url("../icons/restore-session.svg"); } /*= bookmarksMenuPopup =======================================================*/ @@ -210,10 +210,10 @@ #webDeveloperMenu, /* Legacy */ #browserToolsMenu { - --menuitem-image: url("./icons/developer.svg"); + --menuitem-image: url("../icons/developer.svg"); } #menu_pageInfo { - --menuitem-image: url("./icons/document-endnote.svg"); + --menuitem-image: url("../icons/document-endnote.svg"); } /* menuWebDeveloperPopup sub menu */ @@ -222,16 +222,16 @@ #menu_devToolbox { } #menu_taskManager { - --menuitem-image: url("./icons/performance.svg"); + --menuitem-image: url("../icons/performance.svg"); } #menu_devtools_remotedebugging { - --menuitem-image: url("./icons/bug.svg"); + --menuitem-image: url("../icons/bug.svg"); } #menu_browserToolbox { - --menuitem-image: url("./icons/window-dev-tools.svg"); + --menuitem-image: url("../icons/window-dev-tools.svg"); } #menu_browserContentToolbox { - --menuitem-image: url("./icons/command-frames.svg"); + --menuitem-image: url("../icons/command-frames.svg"); } #menu_browserConsole { --menuitem-image: url("chrome://devtools/skin/images/command-console.svg"); @@ -241,7 +241,7 @@ #menu_eyedropper { } #menu_pageSource { - --menuitem-image: url("./icons/document-search.svg"); + --menuitem-image: url("../icons/document-search.svg"); } #extensionsForDevelopers { --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg"); @@ -252,7 +252,7 @@ --menuitem-image: url("chrome://global/skin/icons/help.svg"); } #feedbackPage { - --menuitem-image: url("./icons/send.svg"); + --menuitem-image: url("../icons/send.svg"); } #helpSafeMode { --menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg"); diff --git a/src/icons/_library.scss b/src/icons/_library.scss index 136d2e2..fc2b57b 100644 --- a/src/icons/_library.scss +++ b/src/icons/_library.scss @@ -5,15 +5,15 @@ #newfolder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); @include Option("userChrome.icon.library") { - --menuitem-image: url("./icons/folder.svg"); + --menuitem-image: url("../icons/folder.svg"); } } #newseparator { - --menuitem-image: url("./icons/vertical-line.svg"); + --menuitem-image: url("../icons/vertical-line.svg"); } #orgUndo { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #orgRedo { } @@ -22,7 +22,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #orgCopy { - --menuitem-image: url("./icons/edit-copy.svg"); + --menuitem-image: url("../icons/edit-copy.svg"); } #orgPaste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -32,7 +32,7 @@ } #orgSelectAll { - --menuitem-image: url("./icons/select-all-on.svg"); + --menuitem-image: url("../icons/select-all-on.svg"); } #orgClose { @@ -44,7 +44,7 @@ --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); } #viewSort { - --menuitem-image: url("./icons/text-sort-ascending.svg"); + --menuitem-image: url("../icons/text-sort-ascending.svg"); } /*= maintenanceButtonPopup ===================================================*/ diff --git a/src/icons/_main_menubar.scss b/src/icons/_main_menubar.scss index ff5e21c..33b26c7 100644 --- a/src/icons/_main_menubar.scss +++ b/src/icons/_main_menubar.scss @@ -1,12 +1,12 @@ /*= main-menubar =============================================================*/ #file-menu { - --menuitem-image: url("./icons/mail-inbox-all.svg"); + --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"); + --menuitem-image: url("../icons/content-view.svg"); } #history-menu { --menuitem-image: url("chrome://browser/skin/history.svg"); @@ -15,7 +15,7 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #tools-menu { - --menuitem-image: url("./icons/toolbox.svg"); + --menuitem-image: url("../icons/toolbox.svg"); } #helpMenu { --menuitem-image: url("chrome://global/skin/icons/help.svg"); diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss index a26dae0..a299aa4 100644 --- a/src/icons/_panel.scss +++ b/src/icons/_panel.scss @@ -6,7 +6,7 @@ } #appMenu-proton-update-banner::before { - content: url("./icons/whatsnew.svg"); + content: url("../icons/whatsnew.svg"); } #appMenu-fxa-status2::before { /* Don't exist img tag */ @@ -92,7 +92,7 @@ list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } #appMenu-zoom-controls2::before { - content: url("./icons/screenshot.svg"); + content: url("../icons/screenshot.svg"); } } @@ -110,7 +110,7 @@ } #appMenu-quit-button2 { - list-style-image: url("./icons/quit.svg"); + list-style-image: url("../icons/quit.svg"); } } @@ -155,13 +155,13 @@ 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"); + 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"); + list-style-image: url("../icons/sign-out.svg"); } #PanelUI-remotetabs-view-managedevices::before { /* Box */ @@ -202,7 +202,7 @@ } .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], /* Legacy */ .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] { - list-style-image: url("./icons/send-to-device.svg"); + list-style-image: url("../icons/send-to-device.svg"); } .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */ .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) { @@ -236,7 +236,7 @@ panelMenuBookmarkThisPage[starred] { list-style-image: url("chrome://browser/skin/window.svg"); } #appMenuRestoreSession { - list-style-image: url("./icons/restore-session.svg"); + list-style-image: url("../icons/restore-session.svg"); } #appMenuClearRecentHistory { list-style-image: url("chrome://browser/skin/forget.svg"); @@ -247,10 +247,10 @@ panelMenuBookmarkThisPage[starred] { } #appMenu-library-recentlyClosedTabs { - list-style-image: url("./icons/movetowindow-16.svg"); + list-style-image: url("../icons/movetowindow-16.svg"); } #appMenu-library-recentlyClosedWindows { - list-style-image: url("./icons/restore-session.svg"); + list-style-image: url("../icons/restore-session.svg"); } /*= Panel - More tools =======================================================*/ @@ -261,27 +261,27 @@ panelMenuBookmarkThisPage[starred] { /* 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"); + 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"); + 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"); + 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"); + 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"); + list-style-image: url("../icons/command-frames.svg"); } /* Browser Console */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(5), @@ -291,7 +291,7 @@ panelMenuBookmarkThisPage[starred] { /* 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"); + list-style-image: url("../icons/command-responsivemode.svg"); } /* Eyedropper */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(3), @@ -301,7 +301,7 @@ panelMenuBookmarkThisPage[starred] { /* 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"); + list-style-image: url("../icons/document-search.svg"); } /* Extensions for Devel */ #appmenu-developer-tools-view .subviewbutton:nth-last-child(1), @@ -317,7 +317,7 @@ panelMenuBookmarkThisPage[starred] { list-style-image: url("chrome://global/skin/icons/help.svg"); } #appMenu_feedbackPage { - list-style-image: url("./icons/send.svg"); + list-style-image: url("../icons/send.svg"); } #appMenu_helpSafeMode { list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg"); @@ -361,17 +361,17 @@ panelMenuBookmarkThisPage[starred] { /*= Tabbar - All Tab Menu ====================================================*/ #allTabsMenu-undoCloseTab { - list-style-image: url("./icons/undo.svg"); + list-style-image: url("../icons/undo.svg"); } #allTabsMenu-searchTabs { list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } #allTabsMenu-containerTabsButton { - list-style-image: url("./icons/container-openin-16.svg"); + list-style-image: url("../icons/container-openin-16.svg"); } #allTabsMenu-hiddenTabsButton { - list-style-image: url("./icons/password-hide.svg"); + list-style-image: url("../icons/password-hide.svg"); } #allTabsMenu-containerTabsView .subviewbutton:last-child { @@ -413,7 +413,7 @@ panelMenuBookmarkThisPage[starred] { #protections-popup-show-report-button > .protections-popup-show-report-icon { /* chrome://browser/skin/controlcenter/dashboard.svg */ - list-style-image: url("icons/dashboard.svg"); + list-style-image: url("../icons/dashboard.svg"); } /*= identity-popup ===========================================================*/ @@ -427,7 +427,7 @@ panelMenuBookmarkThisPage[starred] { } #identity-popup-clear-sitedata-button { - list-style-image: url("./icons/broom.svg"); + list-style-image: url("../icons/broom.svg"); } /*= sidebarMenu-popup ========================================================*/ diff --git a/src/icons/_waterfox.scss b/src/icons/_waterfox.scss index 6ab6aaf..f1bbee1 100644 --- a/src/icons/_waterfox.scss +++ b/src/icons/_waterfox.scss @@ -1,14 +1,14 @@ @include Option("userChrome.icon.panel") { #appMenu-restart-button { - list-style-image: url("./icons/refresh-cw.svg") !important; + list-style-image: url("../icons/refresh-cw.svg") !important; } } @include Option("userChrome.icon.menu") { #menu_FileRestartItem { - --menuitem-image: url("./icons/refresh-cw.svg"); + --menuitem-image: url("../icons/refresh-cw.svg"); } menuitem.privatetab-icon { - --menuitem-image: url("./icons/private-favicon.svg"); + --menuitem-image: url("../icons/private-favicon.svg"); } } diff --git a/src/icons/context_menu/_content_area.scss b/src/icons/context_menu/_content_area.scss index 208db9c..903bc43 100644 --- a/src/icons/context_menu/_content_area.scss +++ b/src/icons/context_menu/_content_area.scss @@ -1,29 +1,29 @@ /*= contentAreaContextMenu ===================================================*/ #context-viewsource-goToLine { - --menuitem-image: url("./icons/text-number-format.svg"); + --menuitem-image: url("../icons/text-number-format.svg"); } #context-viewsource-wrapLongLines { /* checkbox */ - /* --menuitem-image: url("./icons/arrow-sort-down-lines.svg"); */ + /* --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); */ } #context-viewsource-highlightSyntax { /* checkbox */ - /* --menuitem-image: url("./icons/code.svg"); */ + /* --menuitem-image: url("../icons/code.svg"); */ } #spell-no-suggestions { - --menuitem-image: url("./icons/text-proofing-tools.svg"); + --menuitem-image: url("../icons/text-proofing-tools.svg"); } #spell-add-to-dictionary { - --menuitem-image: url("./icons/book-add.svg"); + --menuitem-image: url("../icons/book-add.svg"); } #spell-undo-add-to-dictionary { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #context-openlinkincurrent { - --menuitem-image: url("./icons/link-square.svg"); + --menuitem-image: url("../icons/link-square.svg"); } #context-openlinkincontainertab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); @@ -32,7 +32,7 @@ --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #context-openlinkinusercontext-menu { - --menuitem-image: url("./icons/container-openin-16.svg"); + --menuitem-image: url("../icons/container-openin-16.svg"); } #context-openlink { --menuitem-image: url("chrome://browser/skin/window.svg"); @@ -48,16 +48,16 @@ --menuitem-image: url("chrome://browser/skin/save.svg"); } #context-savelinktopocket { - --menuitem-image: url("./icons/pocket-outline.svg"); + --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"); + --menuitem-image: url("../icons/link.svg"); } #context-sendlinktodevice { - --menuitem-image: url("./icons/send-to-device.svg"); + --menuitem-image: url("../icons/send-to-device.svg"); } #context-media-play { @@ -73,11 +73,11 @@ --menuitem-image: url("chrome://global/skin/media/audio.svg"); } #context-media-playbackrate { - --menuitem-image: url("./icons/time-picker.svg"); + --menuitem-image: url("../icons/time-picker.svg"); } #context-media-loop { /* checkbox */ - /* --menuitem-image: url("./icons/arrow-repeat-all.svg"); */ + /* --menuitem-image: url("../icons/arrow-repeat-all.svg"); */ } #context-leave-dom-fullscreen { --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg"); @@ -86,14 +86,14 @@ --menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg"); } #context-media-hidecontrols { - --menuitem-image: url("./icons/eye-hide.svg"); + --menuitem-image: url("../icons/eye-hide.svg"); } #context-media-showcontrols { - --menuitem-image: url("./icons/eye-show.svg"); + --menuitem-image: url("../icons/eye-show.svg"); } #context-viewvideo { - --menuitem-image: url("./icons/video.svg"); + --menuitem-image: url("../icons/video.svg"); } #context-video-pictureinpicture { /* checkbox */ @@ -101,30 +101,30 @@ } #context-reloadimage { - --menuitem-image: url("./icons/image-arrow-counterclockwise.svg"); + --menuitem-image: url("../icons/image-arrow-counterclockwise.svg"); } #context-viewimage { - --menuitem-image: url("./icons/image-add.svg"); + --menuitem-image: url("../icons/image-add.svg"); } #context-saveimage { - --menuitem-image: url("./icons/image.svg"); + --menuitem-image: url("../icons/image.svg"); } #context-video-saveimage { - --menuitem-image: url("./icons/video-snapshot.svg"); + --menuitem-image: url("../icons/video-snapshot.svg"); } #context-savevideo { - --menuitem-image: url("./icons/video.svg"); + --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"); + --menuitem-image: url("../icons/image-copy.svg"); } #context-copyimage, #context-copyvideourl, #context-copyaudiourl { - --menuitem-image: url("./icons/link.svg"); + --menuitem-image: url("../icons/link.svg"); } #context-sendimage, #context-sendvideo, @@ -135,10 +135,10 @@ --menuitem-image: url("chrome://global/skin/icons/info.svg"); } #context-viewimagedesc { - --menuitem-image: url("./icons/image-alt-text.svg"); + --menuitem-image: url("../icons/image-alt-text.svg"); } #context-setDesktopBackground { - --menuitem-image: url("./icons/resize-image.svg"); + --menuitem-image: url("../icons/resize-image.svg"); } #context-ctp-play { --menuitem-image: url("chrome://global/skin/icons/plugin.svg"); @@ -151,23 +151,23 @@ --menuitem-image: url("chrome://browser/skin/save.svg"); } #context-pocket { - --menuitem-image: url("./icons/pocket-outline.svg"); + --menuitem-image: url("../icons/pocket-outline.svg"); } #context-sendpagetodevice { - --menuitem-image: url("./icons/send-to-device.svg"); + --menuitem-image: url("../icons/send-to-device.svg"); } #fill-login { - --menuitem-image: url("./icons/password.svg"); + --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"); + --menuitem-image: url("../icons/key-multiple.svg"); } #context-undo { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #context-redo { } @@ -176,7 +176,7 @@ --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #context-copy { - --menuitem-image: url("./icons/edit-copy.svg"); + --menuitem-image: url("../icons/edit-copy.svg"); } #context-paste { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -185,7 +185,7 @@ --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #context-selectall { - --menuitem-image: url("./icons/select-all-on.svg"); + --menuitem-image: url("../icons/select-all-on.svg"); } #context-print-selection { --menuitem-image: url("chrome://global/skin/icons/print.svg"); @@ -204,35 +204,35 @@ } #frame { - --menuitem-image: url("./icons/command-frames.svg"); + --menuitem-image: url("../icons/command-frames.svg"); } #spell-check-enabled { /* checkbox */ } #spell-add-dictionaries-main { - --menuitem-image: url("./icons/book-add.svg"); + --menuitem-image: url("../icons/book-add.svg"); } #spell-dictionaries { - --menuitem-image: url("./icons/book.svg"); + --menuitem-image: url("../icons/book.svg"); } #context-bidi-text-direction-toggle { - --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg"); + --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg"); } #context-bidi-page-direction-toggle { - --menuitem-image: url("./icons/document-landscape-split-hint.svg"); + --menuitem-image: url("../icons/document-landscape-split-hint.svg"); } #context-viewpartialsource-selection, #context-viewsource { - --menuitem-image: url("./icons/document-search.svg"); + --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"); + --menuitem-image: url("../icons/command-pick.svg"); } #context-media-eme-learnmore { @@ -247,7 +247,7 @@ --menuitem-image: url("chrome://browser/skin/forward.svg"); } #context-reload { - --menuitem-image: url("./icons/reload.svg"); + --menuitem-image: url("../icons/reload.svg"); } #context-stop { --menuitem-image: url("chrome://global/skin/icons/close.svg"); diff --git a/src/icons/context_menu/_others.scss b/src/icons/context_menu/_others.scss index 55a2e32..36973e7 100644 --- a/src/icons/context_menu/_others.scss +++ b/src/icons/context_menu/_others.scss @@ -21,7 +21,7 @@ /*= pictureInPictureToggleContextMenu ========================================*/ #pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] { - --menuitem-image: url("./icons/eye-hide.svg"); + --menuitem-image: url("../icons/eye-hide.svg"); } /*= pageActionContextMenu ====================================================*/ @@ -34,7 +34,7 @@ /*= customizationPanelItemContextMenu ========================================*/ #customizationPanelItemContextMenuUnpin { - --menuitem-image: url("./icons/unpin-tab.svg"); + --menuitem-image: url("../icons/unpin-tab.svg"); } .customize-context-removeFromPanel { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); @@ -66,7 +66,7 @@ --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); } .downloadUnblockMenuItem { - --menuitem-image: url("./icons/checkmark-circle.svg"); + --menuitem-image: url("../icons/checkmark-circle.svg"); } .downloadUseSystemDefaultMenuItem { --menuitem-image: url("chrome://browser/skin/open.svg"); @@ -77,31 +77,31 @@ .downloadShowMenuItem { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); @include Option("userChrome.icon.library") { - --menuitem-image: url("./icons/folder.svg"); + --menuitem-image: url("../icons/folder.svg"); } } #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { - --menuitem-image: url("./icons/link-square.svg"); + --menuitem-image: url("../icons/link-square.svg"); } #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { - --menuitem-image: url("./icons/link.svg"); + --menuitem-image: url("../icons/link.svg"); } .downloadDeleteFileMenuItem { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } .downloadRemoveFromHistoryMenuItem { - --menuitem-image: url("./icons/eraser.svg"); + --menuitem-image: url("../icons/eraser.svg"); } #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { - --menuitem-image: url("./icons/broom.svg"); + --menuitem-image: url("../icons/broom.svg"); } /*= SyncedTabsSidebarContext =================================================*/ #syncedTabsOpenSelected { - --menuitem-image: url("./icons/link-square.svg"); + --menuitem-image: url("../icons/link-square.svg"); } #syncedTabsOpenSelectedInTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); @@ -117,11 +117,11 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #syncedTabsCopySelected { - --menuitem-image: url("./icons/link.svg"); + --menuitem-image: url("../icons/link.svg"); } #syncedTabsOpenAllInTabs { - --menuitem-image: url("./icons/movetowindow-16.svg"); + --menuitem-image: url("../icons/movetowindow-16.svg"); } #syncedTabsManageDevices { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); @@ -132,13 +132,13 @@ /*= SyncedTabsSidebarTabsFilterContext =======================================*/ #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { - --menuitem-image: url("./icons/edit-copy.svg"); + --menuitem-image: url("../icons/edit-copy.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -148,7 +148,7 @@ } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { - --menuitem-image: url("./icons/select-all-on.svg"); + --menuitem-image: url("../icons/select-all-on.svg"); } #syncedTabsRefreshFilter { @@ -157,7 +157,7 @@ /*= urlbar-input-container ===================================================*/ #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { } @@ -166,7 +166,7 @@ --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"); + --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"); @@ -177,13 +177,13 @@ --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"); + --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("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] { } @@ -192,7 +192,7 @@ --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"); + --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"); @@ -201,7 +201,7 @@ --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"); + --menuitem-image: url("../icons/select-all-on.svg"); } /* Only searchbar */ @@ -239,7 +239,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > .sync-menuitem.sendtab-target[clientType=""] { - --menuitem-image: url("./icons/send-to-device.svg"); + --menuitem-image: url("../icons/send-to-device.svg"); } menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) diff --git a/src/icons/context_menu/_place.scss b/src/icons/context_menu/_place.scss index 2ff1f1d..6310fa2 100644 --- a/src/icons/context_menu/_place.scss +++ b/src/icons/context_menu/_place.scss @@ -1,10 +1,10 @@ /*= placeContext =============================================================*/ #placesContext_open { - --menuitem-image: url("./icons/link-square.svg"); + --menuitem-image: url("../icons/link-square.svg"); } #placesContext_openBookmarkContainer\:tabs, #placesContext_openBookmarkLinks\:tabs { - --menuitem-image: url("./icons/movetowindow-16.svg"); + --menuitem-image: url("../icons/movetowindow-16.svg"); } #placesContext_open\:newtab, #placesContext_openContainer\:tabs, @@ -30,17 +30,17 @@ --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #placesContext_deleteHost { - --menuitem-image: url("./icons/eye-hide.svg"); + --menuitem-image: url("../icons/eye-hide.svg"); } #placesContext_sortBy\:name { - --menuitem-image: url("./icons/text-sort-ascending.svg"); + --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"); + --menuitem-image: url("../icons/edit-copy.svg"); } #placesContext_paste_group { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); @@ -52,11 +52,11 @@ #placesContext_new\:folder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); @include Option("userChrome.icon.library") { - --menuitem-image: url("./icons/folder.svg"); + --menuitem-image: url("../icons/folder.svg"); } } #placesContext_new\:separator { - --menuitem-image: url("./icons/vertical-line.svg"); + --menuitem-image: url("../icons/vertical-line.svg"); } #placesContext_paste { @@ -68,12 +68,12 @@ } #show-other-bookmarks_PersonalToolbar { /* checkbox */ - /* --menuitem-image: url("./icons/star-line-horizontal.svg"); */ + /* --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"); + --menuitem-image: url("../icons/movetowindow-16.svg"); } diff --git a/src/icons/context_menu/_tab_toolbar.scss b/src/icons/context_menu/_tab_toolbar.scss index 54ab5da..112584f 100644 --- a/src/icons/context_menu/_tab_toolbar.scss +++ b/src/icons/context_menu/_tab_toolbar.scss @@ -5,7 +5,7 @@ #context_reloadTab, #context_reloadSelectedTabs { - --menuitem-image: url("./icons/reload.svg"); + --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, #context_toggleMuteSelectedTabs { @@ -17,15 +17,15 @@ } #context_pinTab, #context_pinSelectedTabs { - --menuitem-image: url("./icons/pin-tab.svg"); + --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, #context_unpinSelectedTabs { - --menuitem-image: url("./icons/unpin-tab.svg"); + --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, #context_duplicateTabs { - --menuitem-image: url("./icons/notebook-subsection.svg"); + --menuitem-image: url("../icons/notebook-subsection.svg"); } #context_bookmarkTab, @@ -33,22 +33,22 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context_moveTabOptions { - --menuitem-image: url("./icons/arrow-swap.svg"); + --menuitem-image: url("../icons/arrow-swap.svg"); } #context_sendTabToDevice { - --menuitem-image: url("./icons/send-to-device.svg"); + --menuitem-image: url("../icons/send-to-device.svg"); } #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { /* At windows */ - --menuitem-image: url("./icons/share.svg"); + --menuitem-image: url("../icons/share.svg"); } #context_reopenInContainer { - --menuitem-image: url("./icons/container-openin-16.svg"); + --menuitem-image: url("../icons/container-openin-16.svg"); } #context_selectAllTabs { - --menuitem-image: url("./icons/tab-multiple.svg"); + --menuitem-image: url("../icons/tab-multiple.svg"); } #context_closeTab { @@ -57,13 +57,13 @@ #context_closeTabOptions { } #context_undoCloseTab { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } /*= new-tab-button-popup =====================================================*/ #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { - --menuitem-image: url("./icons/container-openin-16.svg"); + --menuitem-image: url("../icons/container-openin-16.svg"); } #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"], @@ -79,14 +79,14 @@ --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } .customize-context-reportExtension { - --menuitem-image: url("./icons/send.svg"); + --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"); + --menuitem-image: url("../icons/password-hide.svg"); } .customize-context-removeFromToolbar { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); @@ -97,22 +97,22 @@ #toolbar-context-reloadSelectedTab, #toolbar-context-reloadSelectedTabs { - --menuitem-image: url("./icons/reload.svg"); + --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"); + --menuitem-image: url("../icons/tab-multiple.svg"); } #toolbar-context-undoCloseTab { - --menuitem-image: url("./icons/undo.svg"); + --menuitem-image: url("../icons/undo.svg"); } #toggle_toolbar-menubar { /* checkbox */ - /* --menuitem-image: url("./icons/calendar-agenda.svg"); */ + /* --menuitem-image: url("../icons/calendar-agenda.svg"); */ } #toggle_PersonalToolbar { /* Also placeContext */ diff --git a/src/userChrome.scss b/src/leptonChrome.scss similarity index 100% rename from src/userChrome.scss rename to src/leptonChrome.scss diff --git a/src/userContent.scss b/src/leptonContent.scss similarity index 100% rename from src/userContent.scss rename to src/leptonContent.scss diff --git a/src/library/_default_open.scss b/src/library/_default_open.scss index 5e383a0..5fb2e31 100644 --- a/src/library/_default_open.scss +++ b/src/library/_default_open.scss @@ -11,7 +11,7 @@ :-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; + list-style-image: url("../icons/history-reverse.svg") !important; } /* Tag */ @@ -19,7 +19,7 @@ .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; + list-style-image: url("../icons/tag-open.svg") !important; } /* Boomark */ @@ -32,11 +32,11 @@ #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; + 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" */ + list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ } diff --git a/src/library/_inbox.scss b/src/library/_inbox.scss index 0673889..7bd8040 100644 --- a/src/library/_inbox.scss +++ b/src/library/_inbox.scss @@ -8,7 +8,7 @@ :-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; + list-style-image: url("../icons/mail-inbox-all.svg") !important; } /* Other Folder - Open */ @@ -19,5 +19,5 @@ 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; + list-style-image: url("../icons/mail-inbox.svg") !important; } diff --git a/src/library/_menubar.scss b/src/library/_menubar.scss index 37885fc..c9624a5 100644 --- a/src/library/_menubar.scss +++ b/src/library/_menubar.scss @@ -14,10 +14,10 @@ list-style-image: url("chrome://global/skin/icons/settings.svg") !important; } #viewMenu { - list-style-image: url("./icons/sort.svg") !important; + list-style-image: url("../icons/sort.svg") !important; } #maintenanceButton { - list-style-image: url("./icons/import-export.svg") !important; + list-style-image: url("../icons/import-export.svg") !important; } #clearDownloadsButton { diff --git a/src/library/_standard_folder.scss b/src/library/_standard_folder.scss index 6e9fa6b..87b88f0 100644 --- a/src/library/_standard_folder.scss +++ b/src/library/_standard_folder.scss @@ -9,7 +9,7 @@ #editBMPanel_folderMenuList .folder-icon:not([id]), /* Download Popup */ .downloadIconShow > .button-box > .button-icon { - list-style-image: url("./icons/folder.svg") !important; + list-style-image: url("../icons/folder.svg") !important; } /* Standard Folder - Open */ @@ -17,5 +17,5 @@ .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; + list-style-image: url("../icons/folder-open.svg") !important; } diff --git a/src/menu/_icons_layout.scss b/src/menu/_icons_layout.scss index 0091527..ba14f04 100644 --- a/src/menu/_icons_layout.scss +++ b/src/menu/_icons_layout.scss @@ -39,7 +39,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { - list-style-image: var(--menuitem-image, url("./icons/blank.svg")) !important; + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } @@ -197,7 +197,7 @@ menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) 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"]) { - list-style-image: var(--menuitem-image, url("./icons/blank.svg")); + list-style-image: var(--menuitem-image, url("../icons/blank.svg")); } */ } diff --git a/src/tabbar/clipped_tab/_show_close_button_at_hover.scss b/src/tabbar/clipped_tab/_show_close_button_at_hover.scss index b634958..8751528 100644 --- a/src/tabbar/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tabbar/clipped_tab/_show_close_button_at_hover.scss @@ -53,7 +53,7 @@ /* Closed Button's icon thicker */ .tabbrowser-tab .tab-content > .close-icon { - list-style-image: url("./icons/dismiss-filled.svg") !important; + list-style-image: url("../icons/dismiss-filled.svg") !important; } /* Closed Button's icon larger */ diff --git a/src/tabbar/newtab_button/_looks_like_tab.scss b/src/tabbar/newtab_button/_looks_like_tab.scss index 50a2e28..94a0f8e 100644 --- a/src/tabbar/newtab_button/_looks_like_tab.scss +++ b/src/tabbar/newtab_button/_looks_like_tab.scss @@ -13,7 +13,7 @@ /* 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-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); diff --git a/src/tabbar/selected_tab/_bottom_rounded_corner.scss b/src/tabbar/selected_tab/_bottom_rounded_corner.scss index 1aa2ee4..0bfecc6 100644 --- a/src/tabbar/selected_tab/_bottom_rounded_corner.scss +++ b/src/tabbar/selected_tab/_bottom_rounded_corner.scss @@ -46,12 +46,12 @@ tab[visuallyselected] > stack::before { left: var(--tab-corner-position) !important; - background-image: url("./icons/tab-bottom-corner-left.svg"); + 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"); + background-image: url("../icons/tab-bottom-corner-right.svg"); } @include OS($linux) { diff --git a/userChrome.css b/userChrome.css index b1cbef2..1836c86 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,7468 +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) */ - } +/** Import Lepton stylesheet (Chrome) *****************************************/ +@import url("css/leptonChrome.css"); - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { - background-color: var(--lwt-accent-color) !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { - background-color: var(--lwt-accent-color) !important; - } - } - /*= Darkmode - Color lighter =================================================*/ - :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { - --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; - /* Original: rgba(43, 42, 51, 1) */ - } -} -/** Compatibility Fixes *******************************************************/ -/*= Theme - Compatibility ====================================================*/ -@supports -moz-bool-pref("userChrome.compatibility.theme") { - /*= Hotfix #98 ===============================================================*/ - /* Hidden Tab Panel Padding */ - #allTabsMenu-hiddenTabsView .all-tabs-item { - margin-inline: 8px; - border-radius: 4px; - } - /*= Remote Tabs Panel's Bottom Padding =======================================*/ - #PanelUI-remotetabs #PanelUI-remotetabs-main { - margin-bottom: 6px; - } +/** Add your custom styles below **********************************************/ - /*= 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; - } - @supports -moz-bool-pref("userChrome.compatibility.covered_header_image") { - :root[lwtheme-image] { - background-size: cover; - } - } - } - :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { - background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; - background-repeat: var(--lwt-background-tiling) !important; - background-position: var(--lwt-background-alignment) !important; - background-color: unset !important; - /* Original: var(--lwt-accent-color) */ - } - - /* Navbar Border */ - #navigator-toolbox:-moz-lwtheme { - --tabs-border-color: rgba(0, 0, 0, 0.3); - /* Legacy: v96 */ - --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); - } -} -/*= OS - Compatibility =======================================================*/ -@supports -moz-bool-pref("userChrome.compatibility.os") { - /*= Windows 10 - Top border of accent color at ESR #358 ======================*/ - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { - border-top: 0.5px solid #2f2f2f !important; - } - - :root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { - border-top-color: #393939 !important; - } - - @media (-moz-windows-accent-color-in-titlebar) { - :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { - border-top-color: -moz-accent-color !important; - } - } - } - /*= Windows 7, 8 - Tab Bar Background *****************************************/ - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8) { - /* Header Color */ - :root:not([lwtheme-image]):-moz-lwtheme { - background-color: var(--lwt-accent-color) !important; - } - } - @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - #TabsToolbar:-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 =====================================*/ - @supports not -moz-bool-pref("userChrome.compatiblity.os.linux_non_native_titlebar_button") { - .titlebar-button:-moz-lwtheme { - appearance: auto !important; - } - - .titlebar-min:-moz-lwtheme, - .titlebar-max:-moz-lwtheme, - .titlebar-restore:-moz-lwtheme, - .titlebar-close:-moz-lwtheme { - list-style-image: none !important; - } - - .titlebar-button:-moz-lwtheme:hover, - .titlebar-button:-moz-lwtheme:hover:active { - background-color: unset !important; - color: unset !important; - } - } - } - /*= Linux - Light System Default Theme's Selected Tab ========================*/ - @media (-moz-gtk-csd-available) { - @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) { - /* Because of - #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background { - border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); - box-shadow: 0 0 4px rgba(128,128,142,0.5); - } - */ - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:not(:-moz-lwtheme) { - box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important; - } - - #TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:not(:-moz-lwtheme) { - box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important; - } - } - } -} -/*= Others - Compatibility ===================================================*/ -@supports -moz-bool-pref("userChrome.compatibility.panel_cutoff") { - #appMenu-popup panelview { - width: 24.5em !important; - /* can modify panel width, Original: 22.5em */ - } -} -@supports -moz-bool-pref("userChrome.compatibility.navbar_top_border") { - #nav-bar { - box-shadow: none !important; - } -} -/** 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); - --toolbarseparator-color: transparent; - } - - #TabsToolbar:not(:-moz-lwtheme) - .tabbrowser-tab - > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { - color: var(--background-color); - background-color: color-mix(in srgb, currentColor 60%, transparent); - } - - #TabsToolbar:not(:-moz-lwtheme) - .tabbrowser-tab:hover - > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { - background-color: color-mix(in srgb, currentColor 85%, transparent) !important; - /* Original: color-mix(in srgb, currentColor 11%, transparent) */ - } - - #scrollbutton-up:not(:-moz-lwtheme), - #scrollbutton-down:not(:-moz-lwtheme), - #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack, - #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon { - color: var(--background-color) !important; - background-color: color-mix(in srgb, currentColor 50%, transparent); - } - } - /*= Windows10 - UWP like color ===============================================*/ - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root:not(:-moz-lwtheme) { - --win-text-color: rgba(0, 0, 0); - --win-bgcolor: rgb(204, 204, 204); - --win-disabled-color: rgb(145, 145, 145); - --win-disabled-bgcolor: transparent; - --win-hover-bgcolor: rgb(218, 218, 218); - /* also button-bgcolor */ - --win-hover-active-bgcolor: #c2c2c2; - /* also button-hover-bgcolor */ - --win-button-hover-bgcolor: rgba(218, 218, 218, 0.66); - --win-button-active-bgcolor: #aaaaaa; - --win-field-bgcolor: #ffffff; - --win-component-bgcolor: #f2f2f2; - --win-border-color: #8a8a8a; - --win-tab-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; - } - - @supports -moz-bool-pref("userChrome.theme.system_default") { - @media (-moz-windows-accent-color-in-titlebar) { - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { - --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; - /* As default */ - } - } - } - /*- Proton Tab Selected ----------------------------------------------------*/ - @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root:not(:-moz-lwtheme), - :root[lwt-default-theme-in-dark-mode] { - --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); - } - - :root:not(:-moz-lwtheme) { - --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; - } - - :root[lwt-default-theme-in-dark-mode] { - --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; - } - } - /*- Menu -------------------------------------------------------------------*/ - html#main-window menupopup:not(:-moz-lwtheme) { - --menu-color: var(--win-text-color) !important; - --menu-background-color: var(--win-component-bgcolor) !important; - --menu-border-color: var(--win-bgcolor) !important; - --menuitem-hover-background-color: var(--win-hover-bgcolor) !important; - --menu-disabled-color: var(--win-disabled-color) !important; - --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important; - } - - /*- Toolbar ----------------------------------------------------------------*/ - :root:not(:-moz-lwtheme) #titlebar, - :root[lwt-default-theme-in-dark-mode] #titlebar { - --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor); - --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor); - --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor); - --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor); - } - - /*- Sidebar ----------------------------------------------------------------*/ - #sidebar-box:not([lwt-sidebar]) { - appearance: none !important; - } - - :root:not(:-moz-lwtheme) #sidebar-box, - :root[lwt-default-theme-in-dark-mode] #sidebar-box { - --sidebar-background-color: var(--win-sidebar-bgcolor) !important; - --sidebar-text-color: var(--win-text-color) !important; - --sidebar-border-color: var(--win-border-color) !important; - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], - body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], - .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], - body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { - /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ - --lwt-sidebar-background-color: 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 not -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root:not(:-moz-lwtheme), - :root[lwt-default-theme-in-dark-mode] { - --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); - } - - :root:not(:-moz-lwtheme) { - --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; - } - - :root[lwt-default-theme-in-dark-mode] { - --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; - } - } - /*- Toolbar ----------------------------------------------------------------*/ - :root:not(:-moz-lwtheme) #navigator-toolbox, - :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { - background-color: var(--mac-bgcolor) !important; - } - - :root:not(:-moz-lwtheme) #titlebar { - --mac-hover-bgcolor: ButtonFace; - } - - :root:not(:-moz-lwtheme) #titlebar, - :root[lwt-default-theme-in-dark-mode] #titlebar { - --button-hover-bgcolor: var(--mac-hover-bgcolor); - --button-active-bgcolor: var(--mac-hover-bgcolor); - --toolbarbutton-hover-background: var(--mac-hover-bgcolor); - --toolbarbutton-active-background: var(--mac-hover-bgcolor); - /* Prevent transparent tabbar at fullscreen hover #312 */ - background: var(--mac-bgcolor); - } - - :root[lwt-default-theme-in-dark-mode] #urlbar { - --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important; - --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important; - } - - /*- Sidebar ----------------------------------------------------------------*/ - #sidebar-box:not([lwt-sidebar]) { - appearance: none !important; - } - - :root:not(:-moz-lwtheme) #sidebar-box, - :root[lwt-default-theme-in-dark-mode] #sidebar-box { - --sidebar-background-color: var(--mac-sidebar-bgcolor) !important; - --sidebar-text-color: var(--mac-text-color) !important; - /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */ - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], - body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], - .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], - body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] { - /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */ - --lwt-sidebar-background-color: transparent !important; - --lwt-sidebar-text-color: var(--mac-text-color) !important; - } - } - :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup { - --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor); - --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor); - } - - /*- Others -----------------------------------------------------------------*/ - /* For Overwrite */ - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] { - --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - } - } - /* Hard Coded */ - @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] - #tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[selected="true"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] - #tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[selected="true"] { - background: color-mix(in srgb, white 15%, -moz-dialog) !important; - } - } - :root:not(:-moz-lwtheme):not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not(:-moz-lwtheme):not([customizing="true"]) tab[visuallyselected] > stack::after, - :root[lwt-default-theme-in-dark-mode]:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root[lwt-default-theme-in-dark-mode]:not([customizing="true"]) tab[visuallyselected] > stack::after { - fill: color-mix(in srgb, 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-border-dark-color: var(--in-content-table-border-color); - --in-content-table-header-background: var(--in-content-primary-button-background); - /* Legacy: #0a84ff; rgb(5, 64, 150); */ - --in-content-table-header-color: var(--in-content-primary-button-text-color); - /* Legacy: #ffffff; var(--in-content-page-color); */ - --in-content-sidebar-width: 240px; - --dialog-warning-text-color: var(--red-60); - --checkbox-border-color: var(--in-content-box-border-color); - --checkbox-unchecked-bgcolor: var(--in-content-button-background); - --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); - --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); - --checkbox-checked-bgcolor: var(--in-content-primary-button-background); - --checkbox-checked-color: var(--in-content-primary-button-text-color); - --checkbox-checked-border-color: transparent; - --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); - --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); - --blue-40: #45a1ff; - --blue-50: #0a84ff; - --blue-60: #0060df; - --blue-70: #003eaa; - --blue-80: #002275; - --grey-30: #d7d7db; - --grey-60: #4a4a4f; - --grey-90-a10: rgba(12, 12, 13, 0.1); - --grey-90-a20: rgba(12, 12, 13, 0.2); - --grey-90-a30: rgba(12, 12, 13, 0.3); - --grey-90-a50: rgba(12, 12, 13, 0.5); - --grey-90-a60: rgba(12, 12, 13, 0.6); - --green-50: #30e60b; - --green-60: #12bc00; - --green-70: #058b00; - --green-80: #006504; - --green-90: #003706; - --orange-50: #ff9400; - --red-40: #ff4f5e; - --red-50: #ff0039; - --red-60: #d70022; - --red-70: #a4000f; - --red-80: #5a0002; - --red-90: #3e0200; - --yellow-50: #ffe900; - --yellow-60: #d7b600; - --yellow-60-a30: rgba(215, 182, 0, 0.3); - --yellow-70: #a47f00; - --yellow-80: #715100; - --yellow-90: #3e2800; - --shadow-10: 0 1px 4px var(--grey-90-a10); - --shadow-30: 0 4px 16px var(--grey-90-a10); - --card-padding: 16px; - --card-shadow: var(--shadow-10); - --card-outline-color: var(--grey-30); - --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); - } - - @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.proton_color.dark_blue_accent") { - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - :host, - :root { - /* Color Memo - Just refer - Photon's dark color - --button-primary-bgcolor: #0060DF; - --button-primary-hover-bgcolor: #003EAA; - --button-primary-active-bgcolor: #002275; - --lwt-brighttext-url-color: #74c0ff; - --lwt-toolbarbutton-icon-fill-attention: #45a1ff; - - Just refer - Proton's light color - --in-content-accent-color: #0a84ff; - --in-content-accent-color-active: #0060df; - --in-content-primary-button-background: #0061e0; - --in-content-primary-button-background-hover: #0250bb; - --in-content-primary-button-background-active: #053e94; - - --blue-40: #45a1ff; rgb(69, 161, 255) - --blue-50: #0a84ff; rgb(10, 132, 255) - --blue-60: #0060df; rgb(0, 96, 223) - --blue-70: #003eaa; rgb(0, 62, 170) - --blue-80: #002275; rgb(0, 34, 117) - - Relation - lighten(#0060df, 29%): #74b0ff; - lighten(#0060df, 19.8%): #4595ff - lighten(#0060df, 8.3%): #0a74ff - #0060df - darken(#0060df, 15.5%): #003e90; - darken(#0060df, 28.1%): #002250; - */ - --blue-20: #b6d6ff; - /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/ - --blue-30: #74c0ff; - /* rgb(116, 192, 255), Add for active color */ - } - - :host, - :root, - dialog { - --in-content-primary-button-text-color: var(--in-content-page-color) !important; - --in-content-primary-button-background: var(--blue-60) !important; - --in-content-primary-button-background-hover: var(--blue-50) !important; - --in-content-primary-button-background-active: var(--blue-40) !important; - --in-content-focus-outline-color: var(--blue-40) !important; - --in-content-accent-color: var(--blue-40) !important; - --in-content-accent-color-active: var(--blue-30) !important; - --in-content-table-background: rgb(35, 34, 43) !important; - --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important; - --in-content-table-header-background: rgb(5, 64, 150) !important; - --in-content-table-header-color: var(--in-content-page-color) !important; - --in-content-link-color: var(--blue-40) !important; - --in-content-link-color-hover: var(--blue-30) !important; - --in-content-link-color-active: var(--blue-20) !important; - --in-content-link-color-visited: var(--blue-40) !important; - } - - :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { - --button-primary-color: var(--in-content-page-color) !important; - --button-primary-bgcolor: var(--blue-60) !important; - --button-primary-hover-bgcolor: var(--blue-50) !important; - --button-primary-active-bgcolor: var(--blue-40) !important; - --focus-outline-color: var(--blue-40) !important; - --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important; - --download-progress-fill-color: var(--blue-40) !important; - --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important; - --lwt-brighttext-url-color: var(--blue-30) !important; - /* Original: as primary bgcolor */ - } - - @supports -moz-bool-pref("userChrome.decoration.download_panel") { - :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { - --button-primary-bgcolor: var(--blue-30); - --button-primary-hover-bgcolor: var(--blue-20); - } - } - } - } -} -@supports -moz-bool-pref("userChrome.theme.fully_color") { - /*== Menu Color ==============================================================*/ - html#main-window menupopup { - /* 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; - } - - @media (prefers-contrast) { - xul|button[default]:not([disabled="true"]):hover { - border-color: currentColor !important; - } - - button:focus { - color: var(--in-content-button-text-color) !important; - } - - xul|button[default]:focus, - button.primary:focus { - color: var(--in-content-primary-button-text-color) !important; - } - } - /*- 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 6px !important; - } - - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #viewGroup > radio > .radio-label-box { - padding-top: 32px !important; - /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */ - } - } - #mainDeck input { - color: var(--in-content-page-color) !important; - } - - #permList { - -moz-appearance: none !important; - color: var(--in-content-page-color) !important; - background-color: var(--in-content-box-background) !important; - } - - .permission:hover { - color: var(--in-content-text-color) !important; - background-color: var(--in-content-button-background-hover) !important; - } - - .permission radio[disabled] { - color: var(--in-content-deemphasized-text) !important; - } - - treecols { - -moz-appearance: none !important; - background: var(--in-content-table-header-background) !important; - color: var(--in-content-table-header-color) !important; - } - - treecols > treecol, - treecols > treecolpicker.treecol-image { - -moz-appearance: none !important; - color: var(--in-content-table-header-color) !important; - background: var(--in-content-table-header-background) !important; - border: 1px solid var(--in-content-table-border-color) !important; - padding: 4px !important; - border-spacing: 0; - text-align: center !important; - } - - tree, - treechildren::-moz-tree-row { - -moz-appearance: none !important; - color: var(--in-content-text-color) !important; - background-color: var(--in-content-table-background) !important; - border: 1px solid var(--in-content-table-border-color) !important; - } - - treechildren::-moz-tree-row(odd) { - background-color: var(--in-content-box-background-odd) !important; - } - - treechildren::-moz-tree-row(hover) { - color: var(--in-content-item-hover-text) !important; - background-color: var(--in-content-item-hover) !important; - } - - treechildren::-moz-tree-row(selected) { - background-color: var(--in-content-item-selected) !important; - } - - treechildren::-moz-tree-cell { - border-inline: 1px solid var(--in-content-table-border-color) !important; - border-spacing: 0 !important; - padding: 4px !important; - margin: 0 !important; - } - - treechildren::-moz-tree-cell-text(hover) { - color: var(--in-content-item-hover-text) !important; - } - - treechildren::-moz-tree-cell-text(selected) { - font-weight: 600 !important; - color: var(--in-content-item-selected-text) !important; - } - - #imagecontainerbox { - background-color: var(--in-content-box-background) !important; - } - - #metatree, - #imagetree, - #imagecontainerbox, - #permList { - border-radius: 4px !important; - } - - #metatree, - #imagetree { - overflow: hidden !important; - } - - #topBar, - #imagecontainerbox, - #permList { - border-color: var(--in-content-table-border-color) !important; - } - } - /*= Library Popup ============================================================*/ - @-moz-document url("chrome://browser/content/places/places.xhtml") - { - @media (-moz-gtk-csd-available) { - :root { - --organizer-color: -moz-DialogText; - --organizer-deemphasized-color: GrayText; - --organizer-toolbar-background: -moz-Dialog; - --organizer-pane-background: -moz-Dialog; - --organizer-content-background: -moz-Dialog; - --organizer-hover-background: SelectedItem; - --organizer-hover-color: SelectedItemText; - --organizer-selected-background: SelectedItem; - --organizer-selected-color: SelectedItemText; - --organizer-outline-color: SelectedItem; - --organizer-separator-color: ThreeDDarkShadow; - --organizer-border-color: ThreeDShadow; - --organizer-toolbar-field-background: Field; - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: ThreeDShadow; - --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); - --organizer-toolbar-field-focus-box-shadow: unset; - --organizer-pane-field-border-color: ThreeDShadow; - } - - @media not all and (prefers-contrast) { - :root { - --organizer-color: var(--in-content-page-color); - --organizer-deemphasized-color: var(--in-content-deemphasized-text); - --organizer-toolbar-background: rgb(249, 249, 251); - /* --toolbar-bgcolor */ - --organizer-pane-background: rgb(229, 229, 235); - /* --lwt-accent-color */ - --organizer-content-background: var(--in-content-page-background); - --organizer-hover-background: var(--in-content-button-background-hover); - --organizer-hover-color: var(--organizer-color); - --organizer-selected-background: var(--in-content-button-background-active); - --organizer-selected-color: var(--organizer-color); - --organizer-outline-color: var(--in-content-focus-outline-color); - --organizer-separator-color: var(--organizer-pane-field-border-color); - --organizer-border-color: var(--in-content-border-color); - --organizer-toolbar-field-background: rgb(240, 240, 244); - /* --lwt-accent-color */ - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: transparent; - --organizer-toolbar-field-focus-border-color: color-mix( - in srgb, - var(--organizer-outline-color) 50%, - transparent - ); - --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); - --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - :root { - --organizer-color: rgb(251, 251, 254); - --organizer-deemphasized-color: rgb(191, 191, 201); - --organizer-toolbar-background: rgb(43, 42, 51); - --organizer-pane-background: rgb(35, 34, 43); - --organizer-content-background: rgb(28, 27, 34); - --organizer-hover-background: rgb(82, 82, 94); - --organizer-selected-background: rgb(91, 91, 102); - --organizer-toolbar-field-background: var(--in-content-page-background); - --organizer-toolbar-field-background-focused: rgb(66, 65, 77); - scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); - } - } - } - /*- Toolbar & Menus ------------------------------------------------------*/ - #placesToolbar { - appearance: none !important; - background-color: var(--organizer-toolbar-background) !important; - color: var(--organizer-color) !important; - border-bottom: 1px solid var(--organizer-border-color) !important; - padding: 4px !important; - padding-inline-end: 6px !important; - } - - #placesToolbar > toolbarbutton { - appearance: none !important; - padding: 5px !important; - border-radius: 4px !important; - } - - #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, - #downloadsListBox { - color: var(--organizer-color) !important; - background-color: var(--organizer-content-background) !important; - } - - #clearDownloadsButton:focus-visible { - outline: 2px solid var(--organizer-outline-color) !important; - } - - richlistitem[selected="true"], - richlistitem:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-color) !important; - } - - richlistbox:where(:focus) > richlistitem[selected="true"] { - background-color: var(--organizer-selected-background) !important; - } - - /*- Tree -----------------------------------------------------------------*/ - #contentView treecol { - /* Use box-shadow to draw a bottom border instead of border-bottom - * because otherwise the items on contentView won't be perfectly - * aligned with the items on the sidebar. */ - box-shadow: inset 0 -1px var(--organizer-border-color) !important; - } - - tree { - background-color: var(--organizer-content-background) !important; - color: var(--organizer-color) !important; - } - - treecol:not([hideheader="true"]), - treecolpicker { - appearance: none !important; - border: none !important; - background-color: var(--in-content-button-background) !important; - color: var(--organizer-color, inherit) !important; - padding: 5px 10px !important; - } - - treecol:not([hideheader="true"], [sortable="false"]):hover, - treecolpicker:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-color) !important; - } - - treecol:not([hideheader="true"], [sortable="false"]):hover:active, - treecolpicker:hover:active { - background-color: var(--organizer-selected-background) !important; - } - - treecol:not([hideheader="true"], :first-child), - treecolpicker { - padding-left: 10px !important; - border-inline-start-width: 1px !important; - border-inline-start-style: solid !important; - border-image: linear-gradient( - transparent 0%, - transparent 20%, - var(--organizer-border-color) 20%, - var(--organizer-border-color) 80%, - transparent 80%, - transparent 100% - ) - 1 1 !important; - } - - treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { - fill: currentColor !important; - width: 18px !important; - height: 18px !important; - } - - treechildren::-moz-tree-row { - background-color: transparent !important; - } - - treechildren::-moz-tree-row(hover) { - background-color: var(--organizer-hover-background) !important; - } - - treechildren::-moz-tree-row(selected) { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; - border: 1px solid transparent !important; - } - - treechildren::-moz-tree-image(hover), - treechildren::-moz-tree-twisty(hover), - treechildren::-moz-tree-cell-text(hover) { - color: var(--organizer-hover-color) !important; - } - - treechildren::-moz-tree-image(selected), - treechildren::-moz-tree-twisty(selected), - treechildren::-moz-tree-cell-text(selected) { - color: var(--organizer-selected-color) !important; - } - - treechildren::-moz-tree-separator { - height: 1px !important; - border-color: var(--organizer-separator-color) !important; - } - - treechildren::-moz-tree-separator(hover) { - border-color: var(--organizer-hover-color) !important; - } - - treechildren::-moz-tree-separator(selected) { - border-color: var(--organizer-selected-color) !important; - } - - /*- 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 ----------------------------------------------------------------*/ - @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { - #sidebar-box { - /* like #sidebar-box > #sidebar */ - min-width: 14em; - width: 18em; - max-width: 36em; - /* Animation */ - transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, - visibility 0s linear !important; - } - - #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); - } - } - @supports -moz-bool-pref("userChrome.decoration.disable_panel_animate") { - :root { - --panelui-subview-transition-duration: 1ms !important; - /* Disable top right corner menu sliding animation (0ms will not work!) */ - } - } -} -/** Rounding ******************************************************************/ -/** Rounding ******************************************************************/ -@supports -moz-bool-pref("userChrome.rounding.square_tab") { - :root { - --tab-border-radius: 0 !important; - /* Original: 4px */ - } -} -@supports -moz-bool-pref("userChrome.rounding.square_button") { - :root { - --toolbarbutton-border-radius: 0 !important; - /* Original: 4px */ - } - - button { - border-radius: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.round.square_button") { - /* Fix Tab bar button radious */ - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack, - .tab-close-button { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_panel") { - :root { - --arrowpanel-border-radius: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_panelitem") { - :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_menupopup") { - xul|menupopup { - border-radius: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_menuitem") { - xul|menulist:not([native]), - xul|menulist > xul|menupopup xul|menu, - xul|menulist > xul|menupopup xul|menuitem { - border-radius: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_field") { - html|select[size][multiple], - xul|listheader, - xul|richlistbox, - html|input { - border-radius: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.rounding.square_checklabel") { - .checkbox-check, - xul|*.radio-check { - border-radius: 0 !important; - } -} +/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */ /* ---toolbarbutton-border-radius: 4px; + * #editBMPanel_locationRow { + * visibility: visible !important; + * } */ -/** Reduce Padding ************************************************************/ -/*= Tab Bar - Distribution padding, radius ===================================*/ -@supports -moz-bool-pref("userChrome.tab.lepton_like_padding") or -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root { - --proton-tab-block-margin: var(--tab-block-margin) !important; - /* Original: 4px, Legacy */ - } - :root[uidensity="touch"] { - /* Like Original */ - --tab-block-margin: 4px !important; - } -} -@supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { - :root { - --tab-block-margin: 2px !important; - /* New version of --proton-tab-block-margin */ - } -} -@supports -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root { - --tab-block-margin: 0px !important; - } -} -/*= Tab Bar - Reduce Width, Show more tabs ===================================*/ -@supports -moz-bool-pref("userChrome.padding.first_tab") { - /* for First Tab Space */ - :root { - --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") { - @supports -moz-bool-pref("userChrome.tab.lepton_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.lepton_like_padding") { - @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; - /* 38px -> 36px */ - } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; - /* 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 */ - } -} -/*= 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; - } -} -@supports -moz-bool-pref("userChrome.padding.urlView_expanding") { - #urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; - } - - #urlbar[breakout][breakout-extend] > #urlbar-input-container { - height: var(--urlbar-height) !important; - padding-block: 0 !important; - padding-inline: 0 !important; - } - - #urlbar[breakout][breakout-extend] > #urlbar-background { - animation-name: none !important; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; - } -} -@supports -moz-bool-pref("userChrome.padding.urlView_result") { - .urlbarView { - margin-inline: 0 !important; - width: 100% !important; - } - - .urlbarView-row { - padding-block: 0 !important; - } -} -/*= BookMark Bar - Reduce Height =============================================*/ -@supports -moz-bool-pref("userChrome.padding.bookmarkbar") { - :root[uidensity="compact"] #PersonalToolbar toolbarbutton { - margin-top: 0px; - /* 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; - } - - @supports -moz-bool-pref("userChrome.padding.menu_compact") { - :root { - --menu-padding: 2px; - } - - :root[uidensity="compact"] { - --menu-padding: 0px; - } - } - menupopup:not(.in-menulist) > menuitem, - menupopup > menu { - /* Original: 0.5em */ - padding-block: var(--menu-padding) !important; - } - - #ContentSelectDropdown > menupopup > menucaption, - #ContentSelectDropdown > menupopup > menuitem { - padding-block: 0 !important; - } - - @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_menubar") { - /* 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-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; - /* Original: 0 8px */ - --arrowpanel-menuitem-padding-block: 5px !important; - /* Original: 8px */ - --arrowpanel-menuitem-padding-inline: 5px !important; - /* Original: 8px */ - --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; - /* Compatibility */ - --arrowpanel-padding: 0.8em !important; - /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ - } - - :root[uidensity="compact"] { - --arrowpanel-menuitem-padding-block: 3px !important; - --arrowpanel-menuitem-padding-inline: 3px !important; - } - - :root[uidensity="touch"] { - --arrowpanel-menuitem-padding-block: 8px !important; - /* Original: 8px */ - --arrowpanel-menuitem-padding-inline: 8px !important; - /* Original: 8px */ - } -} -@supports -moz-bool-pref("userChrome.padding.panel_header") { - .panel-header { - padding: unset !important; - padding-top: 4px !important; - } -} -/*= Popup Panel - Reduce padding =============================================*/ -@supports -moz-bool-pref("userChrome.padding.popup_panel") { - #protections-popup-main-header-label { - height: unset !important; - /* Original: 37.6px */ - } - - #identity-popup, - #permission-popup, - #protections-popup { - --vertical-section-padding: 0.8em; - /* Original: 0.9em */ - } - - .protections-popup-footer-button, - .protections-popup-category { - min-height: 24px; - /* Original: 32px */ - height: unset !important; - } - - /** Popup panel - Compact mode */ - /* 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 ****************************************************************/ -/*= Tabs on Bottom ===========================================================*/ -@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { - #navigator-toolbox { - display: flex !important; - /* Needed for content to take up entire height, compatibility with tabs on bottom */ - flex-wrap: wrap; - } - - #titlebar, - #nav-bar, - #PersonalToolbar, - #tab-notification-deck, - #tab-notification-deck-template { - flex-basis: 100%; - } -} -@supports -moz-bool-pref("userChrome.tab.on_bottom") { - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - /*= Tabbar - Move to bottom ==================================================*/ - #titlebar { - order: 2; - -moz-appearance: none !important; - --tabs-navbar-shadow-size: 0px; - } - - #tab-notification-deck { - order: 2; - } - - #TabsToolbar .titlebar-spacer { - display: none; - } - - @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { - #PersonalToolbar { - order: 2; - } - } - @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { - @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { - #navigator-toolbox { - border-bottom-color: var(--toolbar-bgcolor) !important; - /* Original: 1px solid var(--chrome-content-separator-color); */ - } - } - } - } - /*= Windows Control - Move to toolbar ========================================*/ - :root { - --uc-titlebar-padding: 0px; - } - - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: var(--uc-titlebar-padding); - right: 0; - height: 40px; - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - } - - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } - } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - - /*= Navbar - Padding for window controls =====================================*/ - /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ - :root { - --uc-window-control-width: 0px; - /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ - --uc-window-drag-space-pre: 0px; - /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ - --uc-window-drag-space-post: 0px; - /* Same as .titlebar-spacer[type="post-tabs"] */ - } - - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 84px; - /* 84px is default value of linux */ - --uc-window-drag-space-pre: 30px; - --uc-window-drag-space-post: 25px; - } - - :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; - /* Remove pre space */ - } - - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); - } - - /* Windows */ - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 105px; - } - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 138px; - } - } - /* Use this pref to check Mac OS where window controls are on left */ - /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 72px; - } - - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; - } - } - /*= Menubar - Always on top ==================================================*/ - @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - :root { - /* height if native titlebar is enabled, assumes empty menubar */ - --uc-menubar-height: 20px; - --uc-menubar-padding: 1px; - /* FF's menubar padding */ - --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); - } - - :root[tabsintitlebar] { - /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ - --uc-menubar-height: 30px; - } - - /* Menubar on top patch - use with tabs_on_bottom.css */ - /* Only really useful if menubar is ALWAYS visible */ - :root:not([sizemode="fullscreen"]) { - --uc-window-control-width: 0px !important; - } - - /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ - :root:not([sizemode="fullscreen"]) #nav-bar { - border-inline-width: 0; - } - - #navigator-toolbox { - -moz-window-dragging: drag; - padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; - } - - :root[sizemode="fullscreen"] #navigator-toolbox { - padding-top: 0px !important; - } - - #toolbar-menubar { - position: fixed; - display: flex; - top: var(--uc-titlebar-padding); - height: var(--uc-menubar-height); - width: 100%; - overflow: hidden; - } - - :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { - height: var(--uc-menubar-height) !important; - /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ - } - - #toolbar-menubar > .titlebar-buttonbox-container { - height: 100%; - order: 100; - } - - #toolbar-menubar > [flex] { - flex-grow: 100; - } - - #toolbar-menubar > spacer[flex] { - order: 99; - flex-grow: 1; - min-width: var(--uc-window-drag-space-post); - } - - #toolbar-menubar .toolbarbutton-1 { - --toolbarbutton-inner-padding: 3px; - } - - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - height: var(--uc-menubar-container-height); - } - - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - visibility: collapse !important; - } - - :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - .titlebar-buttonbox-container { - visibility: visible; - } - } -} -/*= Tab Bar - 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.color_like_toolbar") { - :root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */ - --tab-selected-bgcolor: unset !important; - /* Original: rgb(255,255,255); */ - --tab-selected-bgimage: unset !important; - /* Nightly 101 */ - } - - #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; - } - - @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - .tab-background[multiselected="true"] { - outline: none !important; - } - } - @supports not -moz-bool-pref("userChrome.tab.connect_to_window") { - /* Backport from FF 99 */ - .tab-background[multiselected="true"] { - outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); - outline-offset: -1px; - } - - .tab-background[multiselected="true"][selected="true"] { - outline-width: 2px; - outline-offset: -2px; - } - } -} -/*= Selected Tab - Box Shadow ================================================*/ -@supports -moz-bool-pref("userChrome.tab.box_shadow") { - #TabsToolbar[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; - } -} -/*= Selected Tab - Photon like contextline ===================================*/ -@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -4px !important; - /* (24px - 16px) / 2 */ - } - - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { - display: none !important; - } -} -/*= 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 -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-background::before, - #tabs-newtab-button::before { - background-color: var(--tabs-border-color); - } - } - } - @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); - } - @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-background::before, - #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { - background-color: var(--tabs-border-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") { - #tabbrowser-tabs[closebuttons="activetab"] { - --inline-tab-padding: 7px !important; - /* Original: 8px */ - } - - #tabbrowser-tabs[overflow="true"] { - --inline-tab-padding: 6px !important; - /* Original: 8px */ - } - - .tab-content[pinned] { - --inline-tab-padding: 10px; - /* Prevent overflow pinned tab's divide line not aligned */ - padding-inline: var(--inline-tab-padding) !important; - } - - :root[uidensity="compact"] .tab-content[pinned] { - --inline-tab-padding: 8px; - } - - #tabbrowser-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; - } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - visibility: collapse !important; - opacity: 0; - } - - .tabbrowser-tab:hover .tab-close-button { - visibility: visible !important; - opacity: 1; - } - } - /* 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; - } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { - /* Fade out */ - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - transition: opacity 0.1s var(--animation-easing-function) !important; - } - - /* Fade in */ - .tabbrowser-tab:hover .tab-close-button { - transition: opacity 0.25s var(--animation-easing-function) !important; - } - } - } - /* Closed Button's icon thicker */ - .tabbrowser-tab .tab-content > .close-icon { - list-style-image: url("./icons/dismiss-filled.svg") !important; - } - - /* Closed Button's icon larger */ - .tab-close-button { - padding: 6px !important; - /* Original: 7px */ - } - - .tabbrowser-tab:not(:hover, [pinned]) > .tab-stack > .tab-content > .tab-close-button { - padding-inline-start: 1px !important; - /* Original: 0px */ - width: 19px !important; - /* Original: 17px */ - } - - /* Closed Button's padding reduce */ - #tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { - margin-inline-end: calc(var(--inline-tab-padding) / -2 + 2px) !important; - /* Original: calc(var(--inline-tab-padding) / -2)*/ - padding: 4px !important; - /* Original: 7px */ - width: 20px !important; - /* Original: 24px */ - height: 20px !important; - /* Original: 24px */ - } - - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not(:hover) - > .tab-stack - > .tab-content - > .tab-close-button { - padding-inline-start: 3px !important; - /* Original: 0px */ - width: 19px !important; - /* Redefine from 19px !important, Original: 17px = (width - padding) */ - } -} -/** Clipped tabs - Always show tab icon ***************************************/ -@supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") { - .tab-icon-image:not([src], [pinned], [crashed], [busy]) { - display: -moz-inline-box !important; - } -} -/*= 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 Label ===================================================*/ -@supports -moz-bool-pref("userChrome.tab.sound_show_label") { - .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { - display: -moz-box !important; - } -} -/*= Sound Tab - Show with Favicons ===========================================*/ -@supports -moz-bool-pref("userChrome.tab.sound_with_favicons") { - /* Makes the favicons always visible (also on hover) */ - .tab-icon-image:not([pinned]) { - opacity: 1 !important; - } - - /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ - .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 */ - @supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") { - .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; - } - } - .tabbrowser-tab { - --container-position-y: 11px; - } - - :root[uidensity="compact"] .tabbrowser-tab { - --container-position-y: 10px; - } - - :root[uidensity="touch"] .tabbrowser-tab { - --container-position-y: 12px; - } - - .tab-content:not([titlechanged])::before { - /* Box Model */ - content: ""; - display: block; - position: absolute !important; - transform: translate(9px, var(--container-position-y)) !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(var(--container-position-y)) !important; - width: 16px; - } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { - opacity: 0; - } - } - /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - --dotted-identity-image: radial-gradient( - circle, - var(--identity-icon-color), - var(--identity-icon-color) 2px, - transparent 2px - ); - background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; - background-position-x: 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; - } - - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ - background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important; - } - - /* Pinned Tab - Titlechanged & soundplaying */ - .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - 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; - } -} -/*= Tab Label - Make to Center ===============================================*/ -@supports -moz-bool-pref("userChrome.tab.centered_label") { - /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ - .tab-label-container { - display: grid; - justify-content: safe center; - align-items: safe center; - } - - .tab-label, - .tab-secondary-label { - overflow: hidden; - } - - .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), - .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { - margin-inline-end: 5px; - } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not(:hover, [pinned]) - .tab-label-container:not([textoverflow]) { - margin-inline-end: 1px; - } - - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not([selected]):not(:hover, [pinned]) - .tab-label-container:not([textoverflow]) { - margin-inline-end: 19px; - } - } -} -/** Url View UI ***************************************************************/ -/*= Url View - Move icon to left =============================================*/ -@supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { - .urlbarView-type-icon { - min-width: 16px !important; - height: 16px !important; - margin-bottom: 0 !important; - margin-inline-start: 0 !important; - } - - .urlbarView-favicon { - margin-inline-start: 20px !important; - } -} -/*= Url View - Go button when typing =========================================*/ -@supports -moz-bool-pref("userChrome.urlView.go_button_when_typing") { - #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { - display: block !important; - } -} -/*= Url View - Always show page actions ======================================*/ -@supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { - #pageActionButton { - display: block !important; - } -} -/** Panel UI ******************************************************************/ -@supports -moz-bool-pref("userChrome.panel.remove_strip") { - #appMenu-fxa-separator { - --panel-separator-zap-gradient: none; - /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */ - } -} -@supports -moz-bool-pref("userChrome.panel.full_width_separator") { - /* Full width separators */ - :root { - /* Original - --panel-separator-margin-vertical: 4px; - --panel-separator-margin-horizontal: 8px; - --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); - */ - --panel-separator-margin-horizontal: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.panel.full_width_padding") { - /* Original - --arrowpanel-menuitem-margin: 0 8px; - --arrowpanel-menuitem-padding-block: 8px; - --arrowpanel-menuitem-padding-inline: 8px; - --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); - */ - :root, - :root:is([uidensity="compact"], [uidensity="touch"]) { - --arrowpanel-menuitem-margin: 0 !important; - --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; - } -} -/** Fullscreen - Overlap toolbar **********************************************/ -@supports -moz-bool-pref("userChrome.fullscreen.overlap") { - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox { - position: fixed !important; - /* Needed for content to take up entire height */ - z-index: 1000 !important; - /* Puts the UI above the content */ - } - - :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { - width: 100%; - /* Makes the UI take up the entire width */ - } - - :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-menuicon-padding: 8px; - --arrowpanel-menublank-padding: calc( - var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline)) - ) !important; - --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; - --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important; - } - - .subviewbutton > .toolbarbutton-icon { - width: 16px; - } - - @supports -moz-bool-pref("userChrome.icon.panel_photon") or -moz-bool-pref("userChrome.icon.panel_sparse") { - :root { - /* Global */ - --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); - /* General Panel */ - --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; - --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; - /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc( - var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline) - ); - --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px); - } - } - #downloadsHistory .button-text, - .subviewbutton > .toolbarbutton-text { - padding-inline-start: var(--arrowpanel-menuicon-padding) !important; - } - - .toolbaritem-combined-buttons > .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-inline) !important; - } - - #appMenu-fxa-status2, - #appMenu-zoom-controls2 { - align-items: center; - padding-top: var(--arrowpanel-menuimageblank-padding-block) !important; - padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important; - } - - #appMenu-zoom-controls2::before { - margin-inline-end: 0 !important; - } - - #appMenu-zoomReduce-button2, - #appMenu-zoomReset-button2, - #appMenu-zoomEnlarge-button2, - #appMenu-fullscreen-button2 { - --arrowpanel-menuitem-padding-block: 0px; - } - - .subviewbutton[type="checkbox"]:not([checked="true"]) > .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") or -moz-bool-pref("userChrome.icon.panel_photon") { - #appMenu-new-tab-button2 { - list-style-image: url("chrome://browser/skin/new-tab.svg"); - } - } - @supports -moz-bool-pref("userChrome.icon.panel_photon") { - #appMenu-save-file-button2, - #appMenu-find-button2, - #appMenu-more-button2 { - padding-top: var(--arrowpanel-menuitemblank-padding) !important; - padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; - } - - #appMenu-zoom-controls2 { - padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; - } - } - @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-block) !important; - padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !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") or -moz-bool-pref("userChrome.icon.panel_photon") { - #appMenu-passwords-button { - list-style-image: url("chrome://browser/skin/login.svg"); - } - - #appMenu-extensions-themes-button { - list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); - } - } - #appMenu-print-button2 { - list-style-image: url("chrome://global/skin/icons/print.svg"); - } - - @supports -moz-bool-pref("userChrome.icon.panel_full") { - #appMenu-save-file-button2 { - list-style-image: url("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"); - } - } - @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") { - #appMenu-help-button2 { - list-style-image: url("chrome://global/skin/icons/help.svg"); - } - - #appMenu-quit-button2 { - list-style-image: url("./icons/quit.svg"); - } - } - /*= Panel - Account ==========================================================*/ - #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, - #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon { - width: 16px !important; - height: 16px !important; - } - - /* Default */ - #fxa-manage-account-button::before { - content: ""; - display: -moz-inline-box; - width: 32px !important; - height: 32px !important; - border-radius: 50%; - background-size: 32px; - background-image: var(--avatar-image-url); - margin-inline-end: var(--arrowpanel-menuicon-padding); - } - @supports -moz-bool-pref("userChrome.icon.account_image_to_right") { - #fxa-manage-account-button::before { - -moz-box-ordinal-group: 2 !important; - } - } - - @supports -moz-bool-pref("userChrome.icon.account_label_to_right") { - #fxa-menu-header-title, - #fxa-menu-header-description { - text-align: right; - } - } - .syncNowBtn { - visibility: visible !important; - -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-inline) - ) !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("./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, - .openintabs-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, url("./icons/blank.svg")) !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, - .openintabs-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_menubar") { - #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, - .openintabs-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, - .openintabs-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; - } - - /* Global Menu */ - /* Disabled. some icons not appear - 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"]) { - list-style-image: var(--menuitem-image, url("./icons/blank.svg")); - } - */ - } - /*= 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-inline); - } - - /* 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-inline) !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-inline) !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-inline) + 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-inline)) !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-inline) + 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("./icons/undo.svg"); - } - - /*= new-tab-button-popup =====================================================*/ - #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], - .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { - --menuitem-image: url("./icons/container-openin-16.svg"); - } - - #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"], - .new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] { - --menuitem-image: url("chrome://global/skin/icons/settings.svg"); - } - - /*= toolbar-context-menu =====================================================*/ - .customize-context-manageExtension { - --menuitem-image: url("chrome://global/skin/icons/settings.svg"); - } - - .customize-context-removeExtension { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - .customize-context-reportExtension { - --menuitem-image: url("./icons/send.svg"); - } - - .customize-context-moveToPanel { - --menuitem-image: url("chrome://browser/skin/pin-12.svg"); - } - - .toolbar-context-autohide-downloads-button { - --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("./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("./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("./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("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #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("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - .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("./icons/undo.svg"); - } - - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { - --menuitem-image: url("./icons/edit-copy.svg"); - } - - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { - --menuitem-image: url("./icons/select-all-on.svg"); - } - - #syncedTabsRefreshFilter { - --menuitem-image: url("chrome://browser/skin/sync.svg"); - } - - /*= urlbar-input-container ===================================================*/ - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { - --menuitem-image: url("./icons/undo.svg"); - } - - #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("./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_menubar") { - /*= main-menubar =============================================================*/ - #file-menu { - --menuitem-image: url("./icons/mail-inbox-all.svg"); - } - - #edit-menu { - --menuitem-image: url("chrome://global/skin/icons/edit.svg"); - } - - #view-menu { - --menuitem-image: url("./icons/content-view.svg"); - } - - #history-menu { - --menuitem-image: url("chrome://browser/skin/history.svg"); - } - - #bookmarksMenu { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #tools-menu { - --menuitem-image: url("./icons/toolbox.svg"); - } - - #helpMenu { - --menuitem-image: url("chrome://global/skin/icons/help.svg"); - } - } - @supports -moz-bool-pref("userChrome.icon.global_menu") { - /** Global Menu ***************************************************************/ - /*= menu_FilePopup ===========================================================*/ - #menu_newNavigatorTab { - --menuitem-image: url("chrome://browser/skin/new-tab.svg"); - } - - #menu_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("./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"); - } - - #sync-syncnowitem { - --menuitem-image: url("chrome://browser/skin/sync.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("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #newfolder { - --menuitem-image: url("./icons/folder.svg"); - } - } - - #newseparator { - --menuitem-image: url("./icons/vertical-line.svg"); - } - - #orgUndo { - --menuitem-image: url("./icons/undo.svg"); - } - - #orgCut { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #orgCopy { - --menuitem-image: url("./icons/edit-copy.svg"); - } - - #orgPaste { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #orgDelete { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #orgSelectAll { - --menuitem-image: url("./icons/select-all-on.svg"); - } - - #orgClose { - --menuitem-image: url("chrome://global/skin/icons/close.svg"); - } - - /*= viewMenuPopup ============================================================*/ - #viewColumns { - --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); - } - - #viewSort { - --menuitem-image: url("./icons/text-sort-ascending.svg"); - } - - /*= maintenanceButtonPopup ===================================================*/ - #backupBookmarks { - --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); - } - - #fileImport { - --menuitem-image: url("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 { - --menuitem-image: url("./icons/private-favicon.svg"); - } -} -@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"); - } -} +/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */ +/* + * #context-sendimage, + * #context-sendvideo, + * #context-sendaudio, + * #context-setDesktopBackground { + * display: none !important; + * } +*/ diff --git a/userContent.css b/userContent.css index 32ac480..2fe02a6 100644 --- a/userContent.css +++ b/userContent.css @@ -1,2898 +1,4 @@ -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); -/** Video player **************************************************************/ -/* Control Bar Size */ -@supports -moz-bool-pref("userContent.player.size") { - #controlsContainer { - --button-size: 32px !important; - /* Original: 30px */ - --controlBar-height: 40px; - /* Original: 40px, Replace to this value */ - } +/** Import Lepton stylesheet (Content) ****************************************/ +@import url("css/leptonContent.css"); - #controlsContainer .touch { - --button-size: 48px !important; - /* Original: 40px */ - --controlBar-height: 52px; - /* Original: 52px */ - } - - .videocontrols[inDOMFullscreen] #controlsContainer { - --button-size: 64px !important; - /* Original: 30px */ - --track-size: 6px !important; - /* Original: 5px, Touch: 7px */ - --thumb-size: 15px !important; - /* Original: 13px, Touch: 16px */ - --controlBar-height: 64px; - /* Original: 40px */ - } - - .videocontrols[inDOMFullscreen] #controlsContainer .touch { - --button-size: 72px !important; - /* Original: 40px */ - --controlBar-height: 64px; - /* Original: 52px */ - } - - #controlsContainer .controlBar { - height: var(--controlBar-height) !important; - /* Original: 40px */ - } - - .videocontrols[inDOMFullscreen] #controlsContainer .controlBar { - padding-bottom: 8px !important; - } -} -/* Control Bar UI */ -@supports -moz-bool-pref("userContent.player.ui") { - audio { - --duration-color: #929292; - /* Like Original */ - --media-background: rgba(26, 26, 26, 0.8); - /* Like Original */ - border-radius: 8px; - --box-shadow1: rgba(14, 13, 26, 0.12); - --box-shadow2: rgba(7, 48, 114, 0.12); - --box-shadow3: rgba(34, 0, 51, 0.04); - box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3); - /* Or: 0 2px 15px rgba(0,0,0,.1); */ - } - - video { - --duration-color: #eee; - --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85)); - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - audio { - --box-shadow1: rgba(249, 249, 250, 0.12); - --box-shadow2: rgba(91, 91, 102, 0.12); - --box-shadow3: rgba(82, 82, 94, 0.04); - } - } - @media (prefers-contrast) { - video { - --duration-color: #929292; - /* Like Original */ - --media-background: rgba(26, 26, 26, 0.8); - /* Like Original */ - } - } - #controlsContainer .controlBar { - background: var(--media-background) !important; - } - - #controlsContainer .duration { - color: var(--duration-color) !important; - /* Original: #929292 */ - } - - @supports -moz-bool-pref("userContent.player.ui.twoline") { - audio { - /* #controlsContainer .controlBar */ - --controlBar-flex-wrap: unset; - --controlBar-justify-content: center; - --controlBar-align-content: unset; - --controlBar-twoline-more-height: 0px; - --controlBar-padding-inline: 9px; - /* #controlsContainer .scrubberStack */ - /* .scrubberStack - Vertical */ - --scrubberStack-order: unset; - --scrubberStack-height: 100%; - --scrubberStack-transform: none; - /* .scrubberStack - Horizontal */ - --scrubberStack-margin-inline: 9px; - /* #controlsContainer .positionDurationBox */ - --positionDurationBox-flex-grow: unset; - --positionDurationBox-margin-left: unset; - --positionDurationBox-text-align: center; - /* Others */ - --button-outside-margin: 0; - } - - video { - /* #scrubber .scrubber::-moz-range-thumb */ - --scrubber-thumb-scale: 0; - --scrubber-thumb-color: #48a0f7; - /* Color as hover, Prevent flashing */ - /* .progressBar::-moz-progress-bar */ - --progressBar-scale: 0.65; - /* #controlsContainer .controlBar */ - --controlBar-flex-wrap: wrap; - --controlBar-justify-content: space-between; - --controlBar-align-content: space-around; - --controlBar-padding-inline: 0 !important; - /* Original: 9px */ - /* #controlsContainer .scrubberStack */ - /* .scrubberStack - Vertical */ - --scrubberStack-order: -1; - /* .scrubberStack - Horizontal */ - --scrubberStack-flex-basis: auto; - --scrubberStack-twoline-width: 100%; - --scrubberStack-margin-inline: 0; - /* #controlsContainer .positionDurationBox */ - --positionDurationBox-flex-grow: 2; - --positionDurationBox-margin-left: 15px; - --positionDurationBox-text-align: left; - /* Others */ - --duration-color: #dadada; - --button-outside-margin: 9px; - } - - .scrubber:not(:hover)::-moz-range-thumb { - transform: scale(var(--scrubber-thumb-scale, 1)); - background-color: var(--scrubber-thumb-color, currentColor) !important; - } - - .progressStack { - transform-origin: bottom; - transform: scaleY(var(--progressBar-scale, 1)); - } - - .scrubber:hover::-moz-range-thumb, - .progressContainer:hover .progressStack { - transform: scale(1); - } - - #controlsContainer .controlBar { - flex-wrap: var(--controlBar-flex-wrap); - justify-content: var(--controlBar-justify-content); - align-content: var(--controlBar-align-content); - height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important; - padding-inline: var(--controlBar-padding-inline) !important; - /* Original: 9px */ - } - - #controlsContainer .scrubberStack { - /* Vertical */ - order: var(--scrubberStack-order); - height: var(--scrubberStack-height, var(--thumb-size)) !important; - transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2))); - /* Horizontal */ - flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important; - width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); - margin-inline: var(--scrubberStack-margin-inline) !important; - } - - #controlsContainer .positionDurationBox { - flex-grow: var(--positionDurationBox-flex-grow); - margin-left: var(--positionDurationBox-margin-left); - text-align: var(--positionDurationBox-text-align) !important; - } - - #playButton { - margin-left: var(--button-outside-margin) !important; - } - - #fullscreenButton { - margin-right: var(--button-outside-margin) !important; - } - } -} -@supports -moz-bool-pref("userContent.player.icon") { - #controlsContainer .fullscreenButton { - background-image: url("./icons/enter-fullscreen.svg") !important; - } - - #controlsContainer .fullscreenButton[fullscreened] { - background-image: url("./icons/exit-fullscreen.svg") !important; - } -} -@supports -moz-bool-pref("userContent.player.noaudio") { - #controlsContainer .muteButton[noAudio] { - /* Remove volume button at noAudio */ - display: none !important; - } -} -/* Click to play UI */ -@supports -moz-bool-pref("userContent.player.click_to_play") { - #controlsContainer .clickToPlay { - cursor: pointer; - opacity: 0.65 !important; - } - - #controlsContainer .controlsSpacerStack:hover > .clickToPlay { - opacity: 0.85 !important; - } - - #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover { - opacity: 1 !important; - fill: #48a0f7 !important; - /* color as .scrubber */ - } -} -/* Animation */ -@supports -moz-bool-pref("userContent.player.animate") { - @media (prefers-reduced-motion: no-preference) { - /* Control Bar */ - #controlsContainer .controlBar { - transition: transform 350ms ease; - opacity: 1 !important; - } - - #controlsContainer .controlBar[hidden] { - transform: translateY(100%); - transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important; - opacity: 0 !important; - } - - #controlsContainer .controlBar[hidden] .progressBar, - #controlsContainer .controlBar[hidden] .bufferBar { - display: unset !important; - opacity: 0.55; - transition: opacity 150ms ease 50ms; - } - - /* Two line Control Bar */ - .scrubber::-moz-range-thumb, - .progressStack { - transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1); - } - - /* Click to play */ - #controlsContainer .clickToPlay { - transition: opacity 150ms ease-in-out, fill 150ms ease-in-out; - } - } -} -/** Activity Stream ***********************************************************/ -@-moz-document url("about:home"), url("about:newtab") { - /** Activity Stream - Search Focus Border: like URL *************************/ - @supports -moz-bool-pref("userContent.page.field_border") { - /* At DarkMode, Color */ - body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], - body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"], - body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"], - body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"], - body[style*="--newtab-background-color: rgb(43, 42, 51);"] { - /* inner */ - --newtab-focus-border: rgba(0, 221, 255, 0.5) !important; - /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ - --newtab-focus-border-selected: var(--newtab-focus-border) !important; - /* Original: #B5D3FF */ - /* For Nightly */ - --newtab-primary-action-background: var(--newtab-focus-border) !important; - } - @supports -moz-bool-pref("userContent.page.proton_color") { - @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") { - body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"], - body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"], - body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"], - body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"], - body[style*="--newtab-background-color: rgb(43, 42, 51);"] { - --newtab-focus-border: var(--in-content-focus-outline-color) !important; - } - } - } - } - /** Activity Stream - Web Site Icon: full size ******************************/ - @supports -moz-bool-pref("userContent.newTab.full_icon") { - .top-site-outer .tile { - overflow: hidden; - } - - .top-site-outer .tile .icon-wrapper { - width: 100% !important; - /* Original: 48px */ - height: 100% !important; - /* Original: 48px */ - } - } - /** Activity Stream - Animate ***********************************************/ - @supports -moz-bool-pref("userContent.newTab.animate") { - @media (prefers-reduced-motion: no-preference) { - :root { - --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); - } - - /* Background */ - .top-site-outer, - #searchSubmit, - button.icon, - button.close-button { - transition: background 1.5s var(--animation-easing-function); - } - - .top-site-outer:hover, - #searchSubmit:hover, - button.icon:hover, - button.close-button:hover { - transition: background 0.5s var(--animation-easing-function); - } - - /* Search Bar */ - .search-inner-wrapper input { - transition: 1s var(--animation-easing-function); - transition-property: border-color, box-shadow; - } - - .search-wrapper .search-inner-wrapper:active input, - .search-wrapper input:focus { - transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); - } - - @supports -moz-bool-pref("userContent.page.field_border") { - .search-wrapper .search-inner-wrapper:hover input { - border-color: var(--newtab-primary-action-background) !important; - transition: border-color 0.5s var(--animation-easing-function); - } - } - } - } - /** Activity Stream - Pocket order to last **********************************/ - @supports -moz-bool-pref("userContent.newTab.pocket_to_last") { - .body-wrapper.on { - display: flex; - flex-wrap: wrap; - } - - .body-wrapper.on > .discovery-stream.ds-layout { - flex-basis: 100%; - } - - .body-wrapper.on > .collapsible-section[data-section-id="topstories"], - .home-section > #pocket-section, - .home-section > .divider, - .home-section > div:not(.section) { - order: 2; - } - } - /** Activity Stream - Home Search Bar looks like proton *********************/ - @supports -moz-bool-pref("userContent.newTab.animate") { - /* Dropdown Colors */ - #root { - --newtab-search-background-color: rgba(255, 255, 255, 1); - /* Same as light theme's --panel-background */ - /* Set search dropdown background */ - --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important; - --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; - --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - #root { - /* Default Dark Mode */ - --newtab-search-background-color: rgba(66, 65, 77, 1); - /* Same as dark theme's --panel-background */ - } - } - .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root { - /* Light weight theme */ - --newtab-search-background-color: var(--lwt-sidebar-background-color); - } - - /* Padding */ - #searchSuggestionTable { - border-radius: 4px !important; - -moz-window-shadow: cliprounded; - } - - .contentSearchSuggestionTable .contentSearchOneOffItem { - width: 32px !important; - height: 32px !important; - /* Margin */ - margin-block: 5px !important; - margin-inline-start: 5px !important; - margin-inline-end: 8px !important; - /* Border */ - border-radius: 4px !important; - border-image: none !important; - /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */ - border-inline-end: none !important; - /* Original: 1px solid; */ - } - - #contentSearchSettingsButton::before { - content: url("chrome://global/skin/icons/settings.svg") !important; - display: -moz-inline-box; - /* Color */ - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - /* Align */ - margin-inline-end: 5px; - vertical-align: -25%; - } - - /* Pointer */ - .contentSearchSuggestionTable .contentSearchOneOffItem, - #contentSearchSettingsButton { - cursor: pointer; - } - - /*- Fix Color For Nightly ------------------------------------------------*/ - .contentSearchSuggestionTable, - .contentSearchHeaderRow, - .contentSearchHeader, - .contentSearchSuggestionsContainer { - color: var(--newtab-text-primary-color) !important; - background: var(--newtab-search-background-color) !important; - } - - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, - .contentSearchSuggestionTable .contentSearchSettingsButton:hover { - color: var(--newtab-text-primary-color) !important; - } - - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, - .contentSearchSuggestionTable .contentSearchSettingsButton:hover, - .contentSearchSuggestionTable .contentSearchOneOffItem.selected { - background: var(--newtab-element-hover-color) !important; - } - - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, - .contentSearchSuggestionTable .contentSearchOneOffItem:active { - background: var(--newtab-element-active-color) !important; - } - - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { - fill: var(--newtab-icon-secondary-color) !important; - } - } -} -/** Error Page - Restore illustrations ****************************************/ -@supports -moz-bool-pref("userContent.page.illustration") { - @-moz-document url-prefix("about:neterror"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") - { - /* Illustrations Position */ - #errorPageContainer, - .description-wrapper { - min-height: 300px; - background-position: left center; - background-repeat: no-repeat; - background-size: 38%; - } - - #errorPageContainer { - display: flex; - flex-direction: column; - } - - .description-wrapper { - padding-inline-start: 38%; - } - - /* Container */ - .container { - min-width: var(--in-content-container-min-width); - /* 13em */ - max-width: var(--in-content-container-max-width); - /* 52em */ - } - - /* Text Position */ - #text-container { - margin: auto; - padding-inline-start: 38%; - } - } - @-moz-document url-prefix("about:neterror?e=connectionFailure"), - url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netTimeout"), - url-prefix("about:neterror?e=netReset"), - url-prefix("about:neterror?e=netOffline"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") - { - #errorPageContainer { - background-image: url("./icons/error-connection-failure.svg"); - } - } - @-moz-document url-prefix("about:neterror?e=dnsNotFound") { - #errorPageContainer { - background-image: url("./icons/error-server-not-found.svg"); - } - } - @-moz-document url-prefix("about:neterror?e=malformedURI") { - #errorPageContainer { - background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg"); - } - } - @-moz-document url-prefix("about:neterror?e=clockSkewError"), - url-prefix("about:neterror?e=nssFailure") { - #errorPageContainer { - background-image: url("./icons/blue-berror.svg"); - background-size: 18.5em; - } - } - @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") - { - .description-wrapper { - background-image: url("./icons/error-session-restore.svg"); - } - } - @-moz-document url-prefix("about:neterror?e=fileNotFound") { - @media (min-width: 970px) { - .title { - background-image: url("chrome://global/skin/icons/info.svg") !important; - } - } - #text-container { - padding-inline-start: 0; - } - } - @-moz-document url-prefix("about:tabcrashed") { - @media (min-width: 970px) { - .title { - background-image: url("chrome://browser/skin/tab-crashed.svg") !important; - } - } - } - @-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") - { - @media (min-width: 970px) { - .title { - background-image: url("chrome://browser/content/aboutRobots-icon.png") !important; - } - } - } - @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") - { - @media (min-width: 970px) { - .title { - background-image: url("./icons/welcome-back.svg") !important; - } - } - } -} -/** Fully Dark Mode ***********************************************************/ -/*= Fully Dark Mode - Dark Mode Colors =======================================*/ -@supports -moz-bool-pref("userContent.page.proton_color") { - @-moz-document url-prefix("about:"), - url-prefix("https://addons.mozilla.org"), - url-prefix("https://support.mozilla.org"), - url-prefix("https://accounts.firefox.com"), - url-prefix("view-source"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") - { - /*= 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-border-dark-color: var(--in-content-table-border-color); - --in-content-table-header-background: var(--in-content-primary-button-background); - /* Legacy: #0a84ff; rgb(5, 64, 150); */ - --in-content-table-header-color: var(--in-content-primary-button-text-color); - /* Legacy: #ffffff; var(--in-content-page-color); */ - --in-content-sidebar-width: 240px; - --dialog-warning-text-color: var(--red-60); - --checkbox-border-color: var(--in-content-box-border-color); - --checkbox-unchecked-bgcolor: var(--in-content-button-background); - --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); - --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); - --checkbox-checked-bgcolor: var(--in-content-primary-button-background); - --checkbox-checked-color: var(--in-content-primary-button-text-color); - --checkbox-checked-border-color: transparent; - --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); - --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); - --blue-40: #45a1ff; - --blue-50: #0a84ff; - --blue-60: #0060df; - --blue-70: #003eaa; - --blue-80: #002275; - --grey-30: #d7d7db; - --grey-60: #4a4a4f; - --grey-90-a10: rgba(12, 12, 13, 0.1); - --grey-90-a20: rgba(12, 12, 13, 0.2); - --grey-90-a30: rgba(12, 12, 13, 0.3); - --grey-90-a50: rgba(12, 12, 13, 0.5); - --grey-90-a60: rgba(12, 12, 13, 0.6); - --green-50: #30e60b; - --green-60: #12bc00; - --green-70: #058b00; - --green-80: #006504; - --green-90: #003706; - --orange-50: #ff9400; - --red-40: #ff4f5e; - --red-50: #ff0039; - --red-60: #d70022; - --red-70: #a4000f; - --red-80: #5a0002; - --red-90: #3e0200; - --yellow-50: #ffe900; - --yellow-60: #d7b600; - --yellow-60-a30: rgba(215, 182, 0, 0.3); - --yellow-70: #a47f00; - --yellow-80: #715100; - --yellow-90: #3e2800; - --shadow-10: 0 1px 4px var(--grey-90-a10); - --shadow-30: 0 4px 16px var(--grey-90-a10); - --card-padding: 16px; - --card-shadow: var(--shadow-10); - --card-outline-color: var(--grey-30); - --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); - } - - @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("userContent.page.proton_color.dark_blue_accent") { - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - :host, - :root { - /* Color Memo - Just refer - Photon's dark color - --button-primary-bgcolor: #0060DF; - --button-primary-hover-bgcolor: #003EAA; - --button-primary-active-bgcolor: #002275; - --lwt-brighttext-url-color: #74c0ff; - --lwt-toolbarbutton-icon-fill-attention: #45a1ff; - - Just refer - Proton's light color - --in-content-accent-color: #0a84ff; - --in-content-accent-color-active: #0060df; - --in-content-primary-button-background: #0061e0; - --in-content-primary-button-background-hover: #0250bb; - --in-content-primary-button-background-active: #053e94; - - --blue-40: #45a1ff; rgb(69, 161, 255) - --blue-50: #0a84ff; rgb(10, 132, 255) - --blue-60: #0060df; rgb(0, 96, 223) - --blue-70: #003eaa; rgb(0, 62, 170) - --blue-80: #002275; rgb(0, 34, 117) - - Relation - lighten(#0060df, 29%): #74b0ff; - lighten(#0060df, 19.8%): #4595ff - lighten(#0060df, 8.3%): #0a74ff - #0060df - darken(#0060df, 15.5%): #003e90; - darken(#0060df, 28.1%): #002250; - */ - --blue-20: #b6d6ff; - /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/ - --blue-30: #74c0ff; - /* rgb(116, 192, 255), Add for active color */ - } - - :host, - :root { - --in-content-primary-button-text-color: var(--in-content-page-color) !important; - --in-content-primary-button-background: var(--blue-60) !important; - --in-content-primary-button-background-hover: var(--blue-50) !important; - --in-content-primary-button-background-active: var(--blue-40) !important; - --in-content-focus-outline-color: var(--blue-40) !important; - --in-content-accent-color: var(--blue-40) !important; - --in-content-accent-color-active: var(--blue-30) !important; - --in-content-table-background: rgb(35, 34, 43) !important; - --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important; - --in-content-table-header-background: rgb(5, 64, 150) !important; - --in-content-table-header-color: var(--in-content-page-color) !important; - --in-content-link-color: var(--blue-40) !important; - --in-content-link-color-hover: var(--blue-30) !important; - --in-content-link-color-active: var(--blue-20) !important; - --in-content-link-color-visited: var(--blue-40) !important; - } - } - } - @supports -moz-bool-pref("userContent.page.proton_color.system_accent") { - :host, - :root { - --in-content-primary-button-text-color: -moz-accent-color-foreground !important; - --in-content-primary-button-background: Highlight !important; - --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important; - --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important; - } - } - } -} -@supports -moz-bool-pref("userContent.page.dark_mode") { - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - /*= Addons.org =============================================================*/ - @-moz-document url-prefix("https://addons.mozilla.org") - { - /* Basic */ - .Page-content, - .SecondaryHero, - body, - main[aria-label="Content"] { - color: var(--in-content-page-color) !important; - background: var(--in-content-page-background) !important; - } - - /* Text */ - .AutoSearchInput-query, - .AutoSearchInput-suggestions-list, - .Page-content h1, - .Page-content h2, - .SearchResult-link, - .Home-SubjectShelf-link:link, - .Home-SubjectShelf-link:visited, - .DropdownMenuItem-link a, - .Select, - .Badge, - .Notice-generic, - .Notice-genericWarning, - .Notice-button, - .Paginate .Button.Paginate-item:first-child, - .Paginate .Button.Paginate-item:last-child, - .Paginate .Button.Paginate-item--current-page, - .Button--neutral, - .blog-entry-title, - .blogpost-nav * { - color: var(--in-content-text-color) !important; - } - - .AutoSearchInput-suggestions-item:is(:active, :focus, :hover), - .AutoSearchInput-suggestions-item--highlighted, - .SecondaryHero-message-link, - .SecondaryHero-module-link, - .Card-contents a:not(.Button), - .Card-footer-link a, - .Card-shelf-footer-in-header a, - .SearchResult-link:is(:active, :focus, :hover), - .SearchResult:hover .SearchResult-link, - .Home-SubjectShelf-link:is(:active, :focus, :hover), - .DropdownMenuItem-link a:is(:active, :focus, :hover), - .AddonMeta .MetadataCard-title a:is(:active, :hover), - .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover), - .AddonMeta .MetadataCard-content a:is(:active, :hover), - .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover), - .Addon-summary a, - .RatingsByStar-count a:hover, - .RatingsByStar-star a:hover, - .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page), - .AddonTitle-author a, - .PermissionsCard-learn-more, - .DefinitionList a, - .ShowMoreCard-contents a, - .AddonDescription-contents a, - .AddonTitle a, - .TooltipMenu-opener, - .LanguageTools .Card-contents a, - .blog-entry-read-more-link, - .blogpost-nav-next.blogpost-nav-no-prev:hover p, - .blogpost-content-wrapper p a, - .blogpost-nav-prev:hover p, - .blogpost-nav-next:hover p { - color: var(--in-content-link-color) !important; - } - - .SearchResult--meta-section, - .MetadataCard-title, - .MetadataCard-title a, - .MetadataCard-content a, - .CollectionSort-label, - .SearchResult-summary, - .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, - .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, - .PermissionsCard-subhead--optional, - .PermissionsCard-subhead--required, - .Definition-dt, - .RatingsByStar-count a, - .RatingsByStar-star a, - .Paginate-page-number, - .AddonSummaryCard-addonAverage, - .AddonReviewCard-authorByLine, - .UserReview-byLine, - .UserReview-reply-header, - .Home-heroHeader-subtitle, - .blog-entry-date, - .blogpost-breadcrumb *, - .AddonTitle-author, - .ExpandableCard-ToggleLink, - .SearchFilters-label, - .PromotedBadge-label--line { - color: var(--in-content-deemphasized-text) !important; - } - - .PromotedBadge-label--recommended { - color: color-mix(in srgb, #712b00 15%, #ff9400) !important; - } - - /* Background */ - .Button--action { - color: var(--in-content-primary-button-text-color) !important; - background: var(--in-content-primary-button-background) !important; - } - - .Select, - .Button--neutral, - .Button--neutral:link, - .Notice-button, - .AMInstallButton .AMInstallButton-loading-button { - background-color: var(--in-content-button-background) !important; - } - - .Button--neutral.Button--micro:not(.Button--disabled):hover, - .Button--neutral:not(.Button--disabled):hover, - .Notice-button:hover { - background: var(--in-content-button-background-hover) !important; - } - - .Button--action.Button--micro:not(.Button--disabled):hover, - .Button--action:not(.Button--disabled):hover { - background: var(--in-content-primary-button-background-hover) !important; - } - - .ShowMoreCard-contents::after { - background: linear-gradient(rgba(255, 255, 255, 0), var(--in-content-table-background)) !important; - } - - .AutoSearchInput-query, - .AutoSearchInput-suggestions-list, - .SecondaryHero-module, - .Card-header, - .Card-contents, - .CardList ul > li, - .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), - .Paginate, - .LandingPage-header, - .DropdownMenu-items, - .DropdownMenu-items::after, - .MetadataCard, - .AddonsCard-list, - .Card-footer, - .StaticAddonCard, - .blogpost-nav, - .blogpost-nav * { - background: var(--in-content-table-background) !important; - } - - .Paginate .Button.Paginate-item:is(:active, :hover) { - background: var(--in-content-button-background-hover) !important; - } - - .Notice-generic, - .Notice-genericWarning { - background: color-mix( - in srgb, - var(--in-content-page-background) 40%, - var(--in-content-table-background) - ) !important; - } - - .LanguageTools-header-row { - color: var(--in-content-table-header-color) !important; - background: var(--in-content-table-header-background) !important; - } - - .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { - background-color: var(--in-content-box-background-odd) !important; - } - - /* Fill */ - .Icon-arrow-blue.SearchSuggestion-icon-arrow { - filter: hue-rotate(330deg) brightness(1.3) !important; - } - - .SecondaryHero-module-icon { - filter: invert(85%) !important; - } - - .Icon-magnifying-glass, - .Notice-icon { - filter: invert(65%) !important; - } - - .PermissionsCard-learn-more .Icon, - .Permission .Icon { - filter: invert(100%) !important; - } - - .Icon-heart { - filter: brightness(0) !important; - } - - /* Others */ - .DropdownMenu-items { - box-shadow: 0 0 2px var(--in-content-border-color) !important; - } - - .AutoSearchInput-query { - border: 1px solid var(--in-content-table-background) !important; - } - - .AutoSearchInput-query:is(:hover, :focus) { - border-color: var(--in-content-primary-button-background) !important; - } - - .AutoSearchInput-query:focus { - box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), - 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; - } - - .PromotedBadge-link--line { - border-color: var(--in-content-deemphasized-text) !important; - } - - .PromotedBadge-link--line:hover { - border-color: var(--in-content-button-background-hover) !important; - } - - .blog-entry-read-more-link { - border-color: var(--in-content-link-color) !important; - } - - .blogpost-nav-arrow-left .cls-1, - .blogpost-nav-arrow-right .cls-1 { - stroke: var(--in-content-text-color) !important; - } - - /* /developers/ */ - .DevHub-Navigation { - background: var(--in-content-page-background) !important; - } - - .DevHub-Navigation.scheme-light ul li a, - .DevHub-content-copy h2, - .content p { - color: var(--in-content-page-color) !important; - } - - .DevHub-callout-box { - background: var(--in-content-box-background) !important; - color: var(--in-content-page-color) !important; - } - } - /*= Support.org ============================================================*/ - @-moz-document url-prefix("https://support.mozilla.org") - { - /* Basic */ - :root { - --color-blue-06: var(--in-content-link-color) !important; - --color-blue-07: var(--in-content-link-color-hover) !important; - --color-blue-09: var(--in-content-link-color-active) !important; - --page-bg: var(--in-content-page-background) !important; - --color-white: var(--in-content-page-background) !important; - --color-shade-bg: var(--in-content-page-background) !important; - --color-marketing-gray-02: var(--card-outline-color) !important; - --color-inverse-bg: var(--in-content-page-color) !important; - --color-inverse: var(--in-content-page-background) !important; - --color-text: var(--in-content-page-color) !important; - --color-moz-text: var(--in-content-page-color) !important; - --color-moz-heading: var(--in-content-page-color) !important; - --color-text-light: var(--in-content-deemphasized-text) !important; - --color-link: var(--in-content-link-color) !important; - --color-success: var(--green-70) !important; - --color-warning: var(--yellow-80) !important; - --color-error: var(--red-60) !important; - --color-error-hover: var(--red-50) !important; - --color-moz-heading: #fff; - --color-moz-inverse-bg: var(red) !important; - --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent), - 0 0 0 2px var(--in-content-primary-button-background-active); - } - - .warning { - --color-link: rgb(55, 255, 255) !important; - } - - body, - #main-content, - #instant-search-content, - #mzp-c-menu-panel-help, - .mzp-c-navigation, - .kbox-container { - color: var(--in-content-page-color) !important; - background: var(--in-content-page-background) !important; - } - - #editor { - border: 2px solid var(--in-content-border-color) !important; - } - - .CodeMirror-linenumbers { - background: var(--in-content-table-background); - } - - .CodeMirror-lines { - color: var(--in-content-deemphasized-text) !important; - background: var(--in-content-page-background) !important; - } - - .CodeMirror-scroll { - background: var(--in-content-page-background) !important; - } - - /* Text */ - .mzp-c-menu-category .mzp-c-menu-title, - .mzp-c-menu-item .mzp-c-menu-item-link, - .mzp-c-menu-item .mzp-c-menu-item-link > *, - .mzp-c-menu-item .mzp-c-menu-item-list a, - #doc-content .menu, - .document--content .menu, - .forum--entry-content .menu, - .tag-name a { - color: var(--in-content-page-color) !important; - } - - .ts-select-trigger, - input[type="date"], - input[type="email"], - input[type="number"], - input[type="password"], - input[type="search"], - input[type="tel"], - input[type="text"], - input[type="time"], - input[type="url"], - select, - textarea, - #doc-content .button, - #doc-content .key, - .document--content .button, - .document--content .key, - .forum--entry-content .button, - .forum--entry-content .key { - color: var(--in-content-deemphasized-text) !important; - } - - .tag-list a { - color: var(--color-marketing-gray-10) !important; - } - - .tag-list a:hover, - .sidebar-nav a:hover { - color: var(--color-link) !important; - } - - .tag-list li { - background: var(--in-content-page-color) !important; - } - - .tag-list li:hover { - background: var(--in-content-deemphasized-text) !important; - } - - #remaining-characters { - color: var(--in-content-page-color) !important; - } - - /* Background */ - .sidebar-nav.topics, - .sidebar-nav.topics > li { - background: var(--in-content-page-background) !important; - } - - .mzp-c-menu-panel { - color: var(--in-content-page-color) !important; - background: var(--in-content-page-background) !important; - } - - .mzp-c-menu-list-list, - .mzp-c-menu-list-list:hover { - color: var(--in-content-page-color) !important; - background: var(--in-content-box-background) !important; - } - - .mzp-c-menu-list-item:focus, - .mzp-c-menu-list-item:hover { - background: var(--in-content-button-background-hover) !important; - } - - .cm-bold { - color: var(--in-content-page-color) !important; - } - - /* Fill */ - .sumo-nav--logo, - .sumo-nav--search-button, - .sumo-nav--toggle-button, - .card:not(.is-inverse) .card--icon-sm, - .mzp-c-menu-item-icon, - .mzp-c-menu-button-close, - .topic-article--icon, - .card--topic > .card--icon, - .mzp-c-details .is-summary button::before, - details .is-summary button::before, - summary::before, - .icon-button > button, - .search-button { - filter: invert(95%) !important; - } - - button.markup-toolbar-button { - /*using 0.5 because in middle*/ - filter: invert(0.5) !important; - } - - /* Others */ - .support-callouts > .card.is-inverse { - background: #20133a !important; - } - - .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) { - color: var(--in-content-page-color) !important; - } - - .sumo-button.secondary-button { - border-color: transparent !important; - } - - .mzp-c-menu-panel { - border-color: var(--in-content-button-background-hover) !important; - } - - .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title { - border-color: var(--in-content-page-color) !important; - } - - @media screen and (-moz-toolbar-prefers-color-scheme: dark) and (min-width: 768px), - screen and (prefers-color-scheme: dark) and (min-width: 768px) { - .mzp-c-menu-panel { - box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important; - } - } - .card--product, - .card--topic, - .card--article { - box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12), - 0 8px 12px 1px rgba(82, 82, 94, 0.04) !important; - } - } - /*= Accounts.com ===========================================================*/ - @-moz-document url-prefix("https://accounts.firefox.com") - { - /* Basic */ - body { - color: var(--in-content-page-color) !important; - background: var(--in-content-page-background) !important; - } - - .button.primary-button, - .button[type="submit"]:not(.secondary-button), - .settings-button.primary-button, - .settings-button[type="submit"]:not(.secondary-button), - button.primary-button, - button[type="submit"]:not(.secondary-button) { - color: var(--in-content-primary-button-text-color) !important; - background: var(--in-content-primary-button-background) !important; - } - - /* Text */ - header h1, - .info, - .info a, - .prefillEmail, - .faint a:hover, - .cta-neutral:hover { - color: var(--in-content-page-color) !important; - } - - #main-content.panel a, - .links a, - .link-blue, - .text-blue-500 { - color: var(--in-content-link-color) !important; - } - - .link-blue:hover { - color: var(--in-content-link-color-hover) !important; - } - - .signed-in-email-message, - .verification-email-message, - .verification-message, - .verification-recovery-code-message, - .verification-totp-message, - .input-row input[type="email"], - .input-row input[type="number"], - .input-row input[type="password"], - .input-row input[type="tel"], - .input-row input[type="text"], - .input-row input::placeholder, - .firefox-family-services > ul > .firefox-service, - .faint, - .faint a, - .text-grey-400 { - color: var(--in-content-deemphasized-text) !important; - } - - /* Background */ - .flex .flex-wrap { - background: var(--in-content-page-background); - } - - .password-row .show-password-label { - background-color: unset !important; - } - - #main-content, - .modal, - .firefox-family-services, - .input-row input[type="email"], - .input-row input[type="number"], - .input-row input[type="password"], - .input-row input[type="tel"], - .input-row input[type="text"], - header, - .bg-white:not(nav) { - background: var(--in-content-box-background) !important; - } - - #suggest-sync, - .cta-neutral { - background: var(--in-content-button-background) !important; - } - - .cta-neutral:hover, - .bg-grey-50:hover, - .hover\:bg-grey-100:hover { - background: var(--in-content-button-background-hover) !important; - } - - .text-blue-500 .cta-neutral, - .text-blue-500 .bg-grey-50, - .text-blue-500 .hover\:bg-grey-100 { - background: var(--in-content-button-background) !important; - } - - .hover\:bg-grey-200:hover { - background: var(--in-content-button-background-active) !important; - } - - .button.primary-button:hover:enabled, - .button[type="submit"]:not(.secondary-button):hover:enabled, - .settings-button.primary-button:hover:enabled, - .settings-button[type="submit"]:not(.secondary-button):hover:enabled, - button.primary-button:hover:enabled, - button[type="submit"]:not(.secondary-button):hover:enabled { - background: var(--in-content-primary-button-background-hover) !important; - } - - .tooltip, - .tooltip::before { - background: var(--in-content-danger-button-background) !important; - } - - /* Fill */ - .dismiss, - #about-mozilla, - .show-password-label, - footer a[data-testid="link-mozilla"] { - filter: invert(95%) !important; - } - - header button svg, - header .rounded svg, - #service svg { - filter: brightness(15) !important; - } - - button.relative, - #fxa-settings nav svg { - filter: brightness(2) !important; - } - - /* Others */ - .input-row input[type="email"], - .input-row input[type="number"], - .input-row input[type="password"], - .input-row input[type="tel"], - .input-row input[type="text"], - .unit-row-hr .border-grey-100 { - border-color: var(--in-content-border-color) !important; - } - - .input-row input[type="email"]:hover, - .input-row input[type="number"]:hover, - .input-row input[type="password"]:hover, - .input-row input[type="tel"]:hover, - .input-row input[type="text"]:hover { - border-color: var(--in-content-border-hover) !important; - } - - #main-content { - box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12), - 0 6px 10px -4px rgba(82, 82, 94, 0.04) !important; - } - - .input-row input[type="email"]:focus, - .input-row input[type="number"]:focus, - .input-row input[type="password"]:focus, - .input-row input[type="tel"]:focus, - .input-row input[type="text"]:focus { - box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important; - } - } - } -} -/** Fully Proton Mode *********************************************************/ -@supports -moz-bool-pref("userContent.page.proton") { - /*= Common contents ==========================================================*/ - /*= abouts' common ===========================================================*/ - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard"), - url-prefix("about:sync-log"), - url-prefix("about:memory"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") - { - /* Base */ - html, - body { - font: message-box !important; - appearance: none !important; - background-color: var(--in-content-page-background) !important; - color: var(--in-content-page-color) !important; - } - - body { - font-size: 15px !important; - font-weight: normal !important; - margin: 0 !important; - } - - h1 { - line-height: 1.2 !important; - } - - h2 { - line-height: 1.4em !important; - } - - /* Link */ - a { - color: var(--in-content-link-color) !important; - } - - a:hover, - .text-link:hover { - color: var(--in-content-link-color-hover) !important; - text-decoration: underline !important; - } - - a:visited { - color: var(--in-content-link-color-visited) !important; - } - - a:hover:active, - .text-link:hover:active { - color: var(--in-content-link-color-active) !important; - } - - a:-moz-focusring, - .text-link:-moz-focusring { - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: 1px !important; - border-radius: 4px !important; - } - - /* Button */ - button { - font: inherit; - } - - button, - select, - input[type="color"] { - appearance: none !important; - min-height: 32px !important; - color: var(--in-content-button-text-color, inherit) !important; - border: 1px solid transparent !important; - /* shows up in high-contrast mode */ - border-radius: var(--in-content-button-border-radius) !important; - background-color: var(--in-content-button-background) !important; - font-weight: 400 !important; - padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; - text-decoration: none !important; - margin: 4px 8px !important; - /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ - font-size: 1em !important; - } - - button { - font-weight: 600 !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 { - --in-content-button-vertical-padding: 6px; - --in-content-button-horizontal-padding: 13px; - min-height: 28px !important; - font-size: 0.95em !important; - } - - button.small { - --in-content-button-vertical-padding: 5px; - --in-content-button-horizontal-padding: 11px; - min-height: 24px !important; - font-size: 0.9em !important; - } - - ::-moz-focus-inner { - border: none !important; - } - - button:-moz-focusring { - box-shadow: none !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: 2px !important; - } - - button:enabled:hover, - input[type="color"]:hover { - background-color: var(--in-content-button-background-hover) !important; - color: var(--in-content-button-text-color-hover) !important; - border-color: transparent !important; - } - - button:enabled:hover:active, - input[type="color"]:enabled:hover:active { - background-color: var(--in-content-button-background-active) !important; - } - - button:disabled, - input[type="color"]:disabled { - opacity: 0.4 !important; - } - - button[autofocus], - button[type="submit"], - button.primary { - background-color: var(--in-content-primary-button-background) !important; - color: var(--in-content-primary-button-text-color) !important; - } - - button[autofocus]:enabled:hover, - button[type="submit"]:enabled:hover, - button.primary:enabled:hover { - background-color: var(--in-content-primary-button-background-hover) !important; - color: var(--in-content-primary-button-text-color-hover) !important; - } - - button[autofocus]:enabled:hover:active, - button[type="submit"]:enabled:hover:active, - button.primary:enabled:hover:active { - background-color: var(--in-content-primary-button-background-active) !important; - } - - /* Checkbox */ - input[type="checkbox"] { - margin-block: 2px !important; - } - - input[type="checkbox"] { - appearance: none !important; - height: 16px !important; - width: 16px !important; - border: 1px solid var(--checkbox-border-color) !important; - background-color: var(--checkbox-unchecked-bgcolor) !important; - border-radius: 2px !important; - margin-inline: 0 6px !important; - flex-shrink: 0 !important; - /* avoid shrinking inside flex container */ - } - - input[type="checkbox"]:enabled:hover { - background-color: var(--checkbox-unchecked-hover-bgcolor) !important; - } - - input[type="checkbox"]:enabled:hover:active { - background-color: var(--checkbox-unchecked-active-bgcolor) !important; - } - - input[type="checkbox"]:checked { - border-color: var(--checkbox-checked-border-color) !important; - background-color: var(--checkbox-checked-bgcolor) !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) !important; - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; - } - - input[type="checkbox"]:enabled:checked:hover { - background-color: var(--checkbox-checked-hover-bgcolor) !important; - } - - input[type="checkbox"]:enabled:checked:hover:active { - background-color: var(--checkbox-checked-active-bgcolor) !important; - } - - /* Textarea */ - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), - textarea { - 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; - } - - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), - textarea { - font-family: inherit !important; - font-size: inherit !important; - padding: 8px !important; - margin: 2px 4px !important; - } - - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, - textarea:focus, - search-textbox[focused], - tree:focus-visible, - richlistbox:focus-visible { - border-color: transparent !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: -1px !important; - /* Prevents antialising around the corners */ - } - - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, - textarea:-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 */ - } - - input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, - textarea:disabled, - search-textbox[disabled="true"] { - opacity: 0.4 !important; - } - - /* Table */ - table { - width: 100% !important; - } - } - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard") { - table { - border: 1px solid var(--in-content-table-border-color) !important; - border-radius: 0 !important; - } - } - @-moz-document url-prefix("about:cache"), - url-prefix("about:checkerboard") { - th, - td { - border: 1px solid var(--in-content-table-border-color) !important; - } - - th { - background-color: var(--in-content-table-header-background) !important; - color: var(--in-content-table-header-color) !important; - } - } - /*= Field Border =============================================================*/ - @supports -moz-bool-pref("userContent.page.field_border") { - @media (prefers-reduced-motion: no-preference) { - @-moz-document url-prefix("about:") { - xul|search-textbox:hover { - border-color: var(--in-content-focus-outline-color) !important; - transition: border-color 0.5s var(--animation-easing-function); - } - } - @-moz-document url-prefix("about:config") { - #about-config-search:hover { - border-color: var(--in-content-focus-outline-color) !important; - transition: border-color 0.5s var(--animation-easing-function); - } - } - } - } - /*= View Source ==============================================================*/ - @-moz-document url-prefix("view-source") { - :root { - background-color: var(--in-content-page-background) !important; - /* Original: white */ - color: var(--in-content-page-color) !important; - /* Original: black */ - /* Colors */ - --view-source-green: var(--green-80); - --view-source-purple: #800080; - /* Like alphenglow */ - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - :root { - --view-source-green: var(--green-60); - --view-source-purple: #c68aff; - } - } - pre[id]::before, - span[id]::before { - color: color-mix(in srgb, var(--in-content-page-color) 70%, var(--in-content-page-background)) !important; - /* Original: #ccc */ - } - - .highlight .start-tag, - .highlight .end-tag { - color: var(--view-source-purple) !important; - /* Original: purple */ - } - - .highlight .comment { - color: var(--view-source-green) !important; - /* Original: green */ - } - - .highlight .cdata { - color: var(--in-content-border-invalid) !important; - /* Original: #CC0066 */ - } - - .highlight .doctype { - color: #4682b4 !important; - /* Original: steelblue */ - } - - .highlight .pi { - color: orchid !important; - /* Original: orchid */ - } - - .highlight .entity { - color: #ff4500 !important; - /* Original: #FF4500 */ - } - - .highlight .attribute-name { - color: var(--view-source-green) !important; - /* Original: black */ - } - - .highlight .attribute-value { - color: var(--in-content-link-color) !important; - /* Original: blue */ - } - - .highlight .markupdeclaration { - color: #4682b4 !important; - /* Original: steelblue */ - } - - .highlight .error, - .highlight - .error - > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) { - color: var(--in-content-error-text-color) !important; - /* Original: red */ - } - } - /*= Directory View ===========================================================*/ - @-moz-document url-prefix("about:sync-log"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") - { - body { - background-color: var(--in-content-box-background) !important; - margin: 4em auto !important; - /* Override to default */ - } - - thead a { - color: var(--in-content-page-color) !important; - } - - td ::before { - vertical-align: top !important; - } - } - /*= about:plugins ============================================================*/ - @-moz-document url-prefix("about:plugins") { - .notice { - background: var(--in-content-box-background) !important; - border: 1px solid var(--in-content-border-color) !important; - } - } - /*= about:cache ==============================================================*/ - @-moz-document url-prefix("about:cache") { - table { - padding: 0 !important; - } - - th, - td { - padding: 4px !important; - text-align: match-parent !important; - } - } - /*= about:checkerboard =======================================================*/ - @-moz-document url-prefix("about:checkerboard") { - #canvas { - border: 1px solid var(--in-content-border-color) !important; - } - - #excludePageFromZoom { - vertical-align: bottom !important; - } - } - /*= about:memory =============================================================*/ - @-moz-document url-prefix("about:memory") { - .opsRow, - .section { - background-color: var(--in-content-box-background) !important; - color: var(--in-content-page-color) !important; - } - - .opsRowLabel input { - vertical-align: bottom !important; - } - } - /*= chrome://browser/content/places/places.xhtml =============================*/ - @-moz-document url("chrome://browser/content/places/places.xhtml") - { - /** 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" */ - } - - /*= 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; - } - } - /*= Context Menu ===========================================================*/ - @supports -moz-bool-pref("userChrome.icon.context_menu") { - menupopup menuitem:not([type="checkbox"], [type="radio"]), - menupopup menu:not([type="checkbox"], [type="radio"]), - #main-menubar > menu { - -moz-appearance: none !important; - /* Linux: menulist */ - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - /* 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); - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; - } - - /* Padding - Windows */ - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - /* 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) { - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - 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) - ); - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - 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; - } - } - /* 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 */ - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { - padding-inline-end: var(--context-menu-background-padding) !important; - } - - /* text position */ - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text, - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text { - padding-inline-start: var(--context-menu-mac-padding) !important; - } - - /* Checkbox menuitem, None iconic menu */ - #placesContext menuitem[type="checkbox"], - #placesContext menu:not(.menu-iconic) { - padding-inline-start: calc( - var(--context-menu-background-padding) + var(--context-menu-mac-padding) - ) !important; - } - } - /* Icon lists */ - /*= 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("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #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"); - } - - /*= organizeButtonPopup ======================================================*/ - #newbookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #newfolder { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #newfolder { - --menuitem-image: url("./icons/folder.svg"); - } - } - - #newseparator { - --menuitem-image: url("./icons/vertical-line.svg"); - } - - #orgUndo { - --menuitem-image: url("./icons/undo.svg"); - } - - #orgCut { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #orgCopy { - --menuitem-image: url("./icons/edit-copy.svg"); - } - - #orgPaste { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #orgDelete { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #orgSelectAll { - --menuitem-image: url("./icons/select-all-on.svg"); - } - - #orgClose { - --menuitem-image: url("chrome://global/skin/icons/close.svg"); - } - - /*= viewMenuPopup ============================================================*/ - #viewColumns { - --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); - } - - #viewSort { - --menuitem-image: url("./icons/text-sort-ascending.svg"); - } - - /*= maintenanceButtonPopup ===================================================*/ - #backupBookmarks { - --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); - } - - #fileImport { - --menuitem-image: url("chrome://browser/skin/save.svg"); - } - - #fileExport { - --menuitem-image: url("chrome://browser/skin/open.svg"); - } - - #browserImport { - --menuitem-image: url("chrome://browser/skin/import.svg"); - } - } - @media (-moz-gtk-csd-available) { - /*= Layout Fixes =========================================================*/ - menupopup menu { - padding-block: 4px; - } - - .menu-right { - width: 16px !important; - /* Original: 1ex */ - background-image: url("chrome://global/skin/icons/arrow-right.svg"); - background-position: right center; - } - - /*= Proton ===============================================================*/ - @supports -moz-bool-pref("userContent.page.proton") { - :root { - --organizer-color: -moz-DialogText; - --organizer-deemphasized-color: GrayText; - --organizer-toolbar-background: -moz-Dialog; - --organizer-pane-background: -moz-Dialog; - --organizer-content-background: -moz-Dialog; - --organizer-hover-background: SelectedItem; - --organizer-hover-color: SelectedItemText; - --organizer-selected-background: SelectedItem; - --organizer-selected-color: SelectedItemText; - --organizer-outline-color: SelectedItem; - --organizer-separator-color: ThreeDDarkShadow; - --organizer-border-color: ThreeDShadow; - --organizer-toolbar-field-background: Field; - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: ThreeDShadow; - --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); - --organizer-toolbar-field-focus-box-shadow: unset; - --organizer-pane-field-border-color: ThreeDShadow; - } - - @media not all and (prefers-contrast) { - :root { - --organizer-color: var(--in-content-page-color); - --organizer-deemphasized-color: var(--in-content-deemphasized-text); - --organizer-toolbar-background: rgb(249, 249, 251); - /* --toolbar-bgcolor */ - --organizer-pane-background: rgb(229, 229, 235); - /* --lwt-accent-color */ - --organizer-content-background: var(--in-content-page-background); - --organizer-hover-background: var(--in-content-button-background-hover); - --organizer-hover-color: var(--organizer-color); - --organizer-selected-background: var(--in-content-button-background-active); - --organizer-selected-color: var(--organizer-color); - --organizer-outline-color: var(--in-content-focus-outline-color); - --organizer-separator-color: var(--organizer-pane-field-border-color); - --organizer-border-color: var(--in-content-border-color); - --organizer-toolbar-field-background: rgb(240, 240, 244); - /* --lwt-accent-color */ - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: transparent; - --organizer-toolbar-field-focus-border-color: color-mix( - in srgb, - var(--organizer-outline-color) 50%, - transparent - ); - --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); - --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); - } - - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { - :root { - --organizer-color: rgb(251, 251, 254); - --organizer-deemphasized-color: rgb(191, 191, 201); - --organizer-toolbar-background: rgb(43, 42, 51); - --organizer-pane-background: rgb(35, 34, 43); - --organizer-content-background: rgb(28, 27, 34); - --organizer-hover-background: rgb(82, 82, 94); - --organizer-selected-background: rgb(91, 91, 102); - --organizer-toolbar-field-background: var(--in-content-page-background); - --organizer-toolbar-field-background-focused: rgb(66, 65, 77); - scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); - } - } - } - /*- Toolbar & Menus ------------------------------------------------------*/ - #placesToolbar { - appearance: none !important; - background-color: var(--organizer-toolbar-background) !important; - color: var(--organizer-color) !important; - border-bottom: 1px solid var(--organizer-border-color) !important; - padding: 4px !important; - padding-inline-end: 6px !important; - } - - #placesToolbar > toolbarbutton { - appearance: none !important; - padding: 5px !important; - border-radius: 4px !important; - } - - #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, - #downloadsListBox { - color: var(--organizer-color) !important; - background-color: var(--organizer-content-background) !important; - } - - #clearDownloadsButton:focus-visible { - outline: 2px solid var(--organizer-outline-color) !important; - } - - richlistitem[selected="true"], - richlistitem:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-color) !important; - } - - richlistbox:where(:focus) > richlistitem[selected="true"] { - background-color: var(--organizer-selected-background) !important; - } - - /*- Tree -----------------------------------------------------------------*/ - #contentView treecol { - /* Use box-shadow to draw a bottom border instead of border-bottom - * because otherwise the items on contentView won't be perfectly - * aligned with the items on the sidebar. */ - box-shadow: inset 0 -1px var(--organizer-border-color) !important; - } - - tree { - background-color: var(--organizer-content-background) !important; - color: var(--organizer-color) !important; - } - - treecol:not([hideheader="true"]), - treecolpicker { - appearance: none !important; - border: none !important; - background-color: var(--in-content-button-background) !important; - color: var(--organizer-color, inherit) !important; - padding: 5px 10px !important; - } - - treecol:not([hideheader="true"], [sortable="false"]):hover, - treecolpicker:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-color) !important; - } - - treecol:not([hideheader="true"], [sortable="false"]):hover:active, - treecolpicker:hover:active { - background-color: var(--organizer-selected-background) !important; - } - - treecol:not([hideheader="true"], :first-child), - treecolpicker { - padding-left: 10px !important; - border-inline-start-width: 1px !important; - border-inline-start-style: solid !important; - border-image: linear-gradient( - transparent 0%, - transparent 20%, - var(--organizer-border-color) 20%, - var(--organizer-border-color) 80%, - transparent 80%, - transparent 100% - ) - 1 1 !important; - } - - treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { - fill: currentColor !important; - width: 18px !important; - height: 18px !important; - } - - treechildren::-moz-tree-row { - background-color: transparent !important; - } - - treechildren::-moz-tree-row(hover) { - background-color: var(--organizer-hover-background) !important; - } - - treechildren::-moz-tree-row(selected) { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; - border: 1px solid transparent !important; - } - - treechildren::-moz-tree-image(hover), - treechildren::-moz-tree-twisty(hover), - treechildren::-moz-tree-cell-text(hover) { - color: var(--organizer-hover-color) !important; - } - - treechildren::-moz-tree-image(selected), - treechildren::-moz-tree-twisty(selected), - treechildren::-moz-tree-cell-text(selected) { - color: var(--organizer-selected-color) !important; - } - - treechildren::-moz-tree-separator { - height: 1px !important; - border-color: var(--organizer-separator-color) !important; - } - - treechildren::-moz-tree-separator(hover) { - border-color: var(--organizer-hover-color) !important; - } - - treechildren::-moz-tree-separator(selected) { - border-color: var(--organizer-selected-color) !important; - } - - /*- 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; - } - - /*- Radio Button ---------------------------------------------------------*/ - menuitem[type="radio"] { - /* margin-inline-start: 0 !important; */ - appearance: none !important; - } - - menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon { - 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 */ - } - - menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-hover) !important; - color: var(--in-content-button-text-color-hover) !important; - } - - menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-active) !important; - } - - menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - -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; - } - - menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-primary-button-background-hover) !important; - color: var(--in-content-primary-button-text-color-hover) !important; - } - - menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active - > .menu-iconic-left - > .menu-iconic-icon { - background-color: var(--in-content-primary-button-background-active) !important; - } - - menuitem[type="radio"] > .menu-iconic-text { - margin-inline: 0 8px !important; - padding-inline-start: 0 !important; - } - - /* Disabled checkboxes, radios and labels */ - menuitem[type="radio"][disabled="true"], - menuitem[type="checkbox"][disabled="true"] { - color: inherit !important; - } - - menuitem[type="radio"][disabled="true"], - menuitem[type="checkbox"][disabled="true"] { - opacity: 0.5 !important; - } - - /*- Check Box ------------------------------------------------------------*/ - /* From checkbox.css */ - menuitem[type="checkbox"] { - appearance: none !important; - -moz-box-align: center !important; - margin: 0px 2px !important; - } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-inline-end: 2px !important; - } - - menuitem[type="checkbox"] > .menu-iconic-text { - margin: 1px 0 !important; - } - - menuitem[type="checkbox"][disabled="true"] { - opacity: 0.4 !important; - } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - 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; - } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - height: 16px !important; - width: 16px !important; - } - - menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var( - --checkbox-unchecked-hover-bgcolor, - color-mix(in srgb, -moz-accent-color 4%, Field) - ) !important; - } - - menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var( - --checkbox-unchecked-active-bgcolor, - color-mix(in srgb, -moz-accent-color 8%, Field) - ) !important; - } - - menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - 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; - } - - menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - background-color: var( - --checkbox-checked-hover-bgcolor, - color-mix(in srgb, currentColor 12.5%, -moz-accent-color) - ) !important; - } - - menuitem[type="checkbox"]:not([disabled="true"]):hover:active - > .menu-iconic-left[checked="true"] - > .menu-iconic-icon { - background-color: var( - --checkbox-checked-active-bgcolor, - color-mix(in srgb, currentColor 25%, -moz-accent-color) - ) !important; - } - - menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { - outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; - outline-offset: var(--focus-outline-offset, 2px) !important; - } - - @media (prefers-contrast) { - menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { - /* 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; - } - - menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { - color: var(--checkbox-checked-border-color, currentColor) !important; - fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; - } - - menuitem[type="checkbox"]:not([disabled="true"]):hover:active - > .menu-iconic-left[checked="true"] - > .menu-iconic-icon, - menuitem[type="checkbox"]:not([disabled="true"]):hover - > .menu-iconic-left[checked="true"] - > .menu-iconic-icon { - 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 */ - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-block: 2px !important; - } - - /*- Menu Separtor --------------------------------------------------------*/ - menuseparator { - appearance: none !important; - min-width: 2px; - min-height: 0; - border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); - border-bottom: none; - margin: var(--panel-separator-margin, 6px); - padding: 0; - } - } - } - } -} +/** Add your custom styles below **********************************************/ diff --git a/waterfox.sh b/waterfox.sh index cad57a6..b9f7929 100755 --- a/waterfox.sh +++ b/waterfox.sh @@ -5,7 +5,7 @@ # `./icons/` to `chrome://browser/skin/lepton/` replace_icon_path() { file=$1 - sed -i "s/\.\/icons\//chrome:\/\/browser\/skin\/lepton\//g" "${file}" + sed -i "s/\.\.\/icons\//chrome:\/\/browser\/skin\/lepton\//g" "${file}" } -replace_icon_path userChrome.css -replace_icon_path userContent.css +replace_icon_path css/leptonChrome.css +replace_icon_path css/leptonContent.css