From 13c156533431f309ef5f0974416963f6ca000c65 Mon Sep 17 00:00:00 2001 From: RealStickman Date: Thu, 7 Oct 2021 16:33:31 +0200 Subject: [PATCH] Merge hide "X" with new firefox UI fix --- .../default-release/chrome/userChrome.css | 3107 +++++++++++++---- .../default-release/chrome/userContent.css | 1030 +++++- 2 files changed, 3500 insertions(+), 637 deletions(-) diff --git a/arch-config/.mozilla/firefox/default-release/chrome/userChrome.css b/arch-config/.mozilla/firefox/default-release/chrome/userChrome.css index b252d566..9eec3d81 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/userChrome.css +++ b/arch-config/.mozilla/firefox/default-release/chrome/userChrome.css @@ -1,54 +1,231 @@ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +@namespace html "http://www.w3.org/1999/xhtml"; #tabbrowser-tabs .tabbrowser-tab .tab-close-button { display:none!important; } @media (-moz-proton) { - /** Darkmode - Color lighter ************************************************/ + /** Default Thme - Contrast *************************************************/ + /*= Lightmode - Color darker ===============================================*/ + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) { + --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ + } + @media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8) or (-moz-gtk-csd-available)) { + /* Level 4 */ + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox { + background-color: var(--lwt-accent-color) !important; + } + } + + /*= Darkmode - Color lighter ===============================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } - /* Theme - Compatibility ****************************************************/ - /* 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; - } - :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { - background-image: var(--lwt-additional-images) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ - 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,.3); - } - + /** Theme - Compatibility ***************************************************/ + /*= Hotfix #98 =============================================================*/ /* Hidden Tab Panel Padding */ #allTabsMenu-hiddenTabsView .all-tabs-item { margin-inline: 8px; border-radius: 4px; } - /** Windows 7 - Compatibility ***********************************************/ - @media (-moz-os-version: windows-win7) { + /*= Identity Poup 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)); + } + + /*= Light Weight Theme =====================================================*/ + /* Header Image */ + :root[lwtheme-image] { + background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ + background-repeat: no-repeat !important; + background-position: right top !important; + } + @media (min-width: 2500px) { + :root[lwtheme-image] { + background-size: contain; + } + } + :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { + background-image: var( + --lwt-additional-images + ) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ + 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); + } + + /** OS - Compatibility ******************************************************/ + /*= Windows 7, 8 - Tab Bar Background ***************************************/ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { /* Header Color */ :root:not([lwtheme-image]) #navigator-toolbox:-moz-lwtheme { background-color: var(--lwt-accent-color) !important; } + } + @media (-moz-os-version: windows-win7) { #TabsToolbar:-moz-lwtheme { color: var(--lwt-text-color) !important; + } - /* Remove Aero */ + /* 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; } } - /** Windows System Default Theme - Use acccent color ************************/ + /*= Windows 7, 8 - Menu Active Color =======================================*/ + @media (-moz-os-version: windows-win7), (-moz-os-version: 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 */ + } + + #PlacesToolbar menu, + #PlacesToolbar menuitem, + #BMB_bookmarksPopup menu, + #BMB_bookmarksPopup menuitem { + border: none !important; /* Remove border */ + } + #PlacesToolbar menu:not([disabed], :active)[_moz-menuactive="true"], + #PlacesToolbar menuitem:not([disabed], :active)[_moz-menuactive="true"], + #BMB_bookmarksPopup menu:not([disabed], :active)[_moz-menuactive="true"], + #BMB_bookmarksPopup menuitem:not([disabed], :active)[_moz-menuactive="true"] { + background-color: var(--button-hover-bgcolor) !important; + } + } + + @media (-moz-os-version: 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) { + 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; + } + } + + /*= Linux- Global Menubar Active Color =====================================*/ + @media (-moz-gtk-csd-available) { + #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 */ + } + } + + /** System Default Theme ****************************************************/ + /*= 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) { + #TabsToolbar:not(:-moz-lwtheme) { + --background-color: rgb(229, 229, 235); + } + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + color: var(--background-color); + background-color: color-mix(in srgb, currentColor 60%, transparent); + } + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab:hover + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + background-color: color-mix( + in srgb, + currentColor 85%, + transparent + ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ + } + #scrollbutton-up:not(:-moz-lwtheme), + #scrollbutton-down:not(:-moz-lwtheme), + #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack, + #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon { + color: var(--background-color) !important; + background-color: color-mix(in srgb, currentColor 50%, transparent); + } + } + + /*= Windows10 - Titlebar accent color ======================================*/ @media (-moz-windows-accent-color-in-titlebar) { /* Tab Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, @@ -59,54 +236,884 @@ :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: -moz-accent-color-foreground; + --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); } + } - /* 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; + /*= GTK - URL View url accent color ========================================*/ + @media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) .urlbarView-url { + --urlbar-popup-url-color: -moz-accent-color; } - :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 */ + /* 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 */ } } + /** 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 + */ + + /*= Default Colors - Hardcorded ============================================*/ + /* 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-dark-color: #d1d1d1; + --in-content-table-header-background: #0a84ff; + --in-content-table-header-color: #ffffff; + --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) { + :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: rgba(249, 249, 250, 0.2); + --in-content-table-header-background: rgb(5, 64, 150); + --in-content-table-header-color: var(--in-content-page-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); + } + } + + /*== 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, #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, /* Default Light Mode */ + 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; + } + } + + /* Fully Dark Mode **********************************************************/ + /*= 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) { + :root { + --menu-border-color: rgba(107, 107, 107, 0.3); + --menu-color: #fbfbfe; + --menu-background-color: #2b2a33; + --menuitem-hover-background-color: #52525e; + } + #alertSourceLabel { + color: rgb(5, 209, 241) !important; + } + } + + /* line below removes background from the notification "window" on linux */ + #alertNotification { + background: transparent !important; + } + + #alertBox { + color: var(--menu-color) !important; + background-color: var(--menu-background-color) !important; + border-color: var(--menu-border-color) !important; + border-radius: 6px !important; + -moz-window-shadow: cliprounded !important; + } + #alertSettings { + fill: currentColor !important; + color: inherit !important; + border-radius: 0 !important; + margin-inline: 0 !important; + margin-bottom: -4px !important; + } + .close-icon, + #alertSettings { + background: transparent !important; + } + .close-icon:hover > .toolbarbutton-icon, + #alertSettings:is(:hover, [open]) > .button-box > .box-inherit { + background-color: var(--menuitem-hover-background-color, #e0e0e6) !important; + } + + /* Shape */ + .close-icon > .toolbarbutton-icon, + #alertSettings > .button-box > .box-inherit { + border-radius: 4px !important; + padding: 2px !important; + margin: 2px 2px -2px 0 !important; + } + #alertSettings > .button-box > .box-inherit { + margin: -4px 4px 3px 0 !important; + } + #alertSettings > .button-box > .box-inherit > .button-icon { + padding: 1px; + } + } + + /*= Downloads ==============================================================*/ + @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml") + { + @media (-moz-toolbar-prefers-color-scheme: dark) { + :root { + --in-content-page-background: #42414d; + } + } + #unknownContentType { + -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, /* :not([native]) to win specificity over checkbox.css */ + xul|radio[focused="true"] { + 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) { + 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; + } + + label { + 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; + } + + /*- Each OS --------------------------------------------------------------*/ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: 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; + } + } + } + + /** Decoration **************************************************************/ + /*= Downloads 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; + } + + /*= Cursor Types ===========================================================*/ + #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 { + 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; + } + */ + /** Reduce Padding **********************************************************/ /*= Root - Reduce Padding ==================================================*/ :root { /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px */ - --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ - --inline-tab-padding: 6px !important; /* Original: 8px */ + --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ --arrowpanel-menuicon-padding: 8px; --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */ --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */ - --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ + --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ } - :root[uidensity=compact] { + :root[uidensity="compact"] { /* Tool Bar */ --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ /* Panel */ - --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */ + --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */ } - :root[uidensity=touch] { + :root[uidensity="touch"] { /* Tab Bar - Like Original */ --proton-tab-block-margin: 4px !important; /* Original: 4px */ - --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */ - --inline-tab-padding: 8px !important; /* Original: 8px */ + --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */ + --inline-tab-padding: 8px !important; /* Original: 8px */ /* Panel - Like Original */ - --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ + --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ } /*= Tab Bar - Reduce Width, Show more tabs =================================*/ @@ -121,34 +1128,37 @@ --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 { + #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-left: var(--newtab-button-width-padding) !important; padding-right: var(--newtab-button-width-padding) !important; } - #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 1px !important; } - :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox { + :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-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-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 { + :root:not([uidensity="touch"]) #new-tab-button, + #alltabs-button { --toolbarbutton-outer-padding: 1px; /* Original: 2px*/ } @@ -163,110 +1173,259 @@ } .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -.5px !important; + margin-inline-end: -0.5px !important; } /*= Tab Bar - Reduce Height, Show more contents ============================*/ + /* for Extra Drag Space */ + :root { + --space-above-tabbar: 0px; /* If you want drag space, set to 8px */ + } + :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; + } + /* Toolbar Height */ - :root:not([uidensity=touch]) #TabsToolbar { + :root:not([uidensity="touch"]) #TabsToolbar { --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ } - .toolbar-items, .tabbrowser-tab { - max-height: 38px; + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ } - :root[uidensity=compact] .toolbar-items, .tabbrowser-tab { - max-height: 36px; - } - :root[uidensity=touch] .toolbar-items, .tabbrowser-tab { - max-height: 45px; + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ } /* Scroll Button - Size Fix */ :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; - --scrollbtn-vertical-border: 2px; - --scrollbtn-border-radius: 7px; + --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-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-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 */ + :root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] { + height: calc( + var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px + ); /* Compact: 28px, Normal: 33px, Touch: 38px */ } /* Pinned Tab - Titlechanged Indicator position fix */ - :root:not([uidensity=touch]) .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - :root:not([uidensity=touch]) .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important; + } + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important; + } + :root[uidensity="touch"] + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="touch"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; } - :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - :root[uidensity=compact] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ - background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important; - } /*= URL Bar - Reduce Padding ===============================================*/ - :root:not([uidensity=touch]) #urlbar-container, #search-container { - padding-block: 2px; /* Original: 4px */ - margin-inline: 5px; /* Original: 5px */ + :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[uidensity=compact] .urlbarView-row:not([type=tip], [type=dynamic]) { - padding-block: 1px; /* [Compact, General]: 2px, Touch: 11px */ + :root:not([uidensity]) .urlbarView-row { + padding-block: 1px !important; /* Original: 2px */ } - :root[uidensity=compact] #urlbar .search-one-offs:not([hidden]) { - padding-block: 2px; /* [Compact, General]: 4px, Touch 11px */ + :root[uidensity="compact"] .urlbarView-row { + padding-block: 0px !important; + } + + :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px !important; /* Original: 10px */ + } + :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { + padding-block: 2px !important; } /*= BookMark Bar - Reduce Height ===========================================*/ - :root[uidensity=compact] #PersonalToolbar toolbarbutton { - margin-top: 0px; /* Original: 2px */ + :root[uidensity="compact"] #PersonalToolbar toolbarbutton { + margin-top: 0px; /* Original: 2px */ + } + + /*= Info Bar - Reduce Padding ==============================================*/ + :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 ==================================================*/ :root { - --menu-padding: 0.35em; + --menu-padding: 0.35em; /* Win7, 8: 0px */ } - :root[uidensity=compact] { + :root[uidensity="compact"] { --menu-padding: 0.25em; } - :root[uidensity=touch] { + :root[uidensity="touch"] { --menu-padding: 0.5em; } - menupopup > menuitem, menupopup > menu { + menupopup > menuitem, + menupopup > menu { /* Original: 0.5em */ padding-block: var(--menu-padding) !important; } + menupopup > menu { + padding-inline-start: 0.5em; + } @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root:not([uidensity=touch]) .menu-text, .menu-iconic-text { + :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"]) .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"]) #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 */ + :root:not([uidensity="touch"]) .menu-right { + margin-right: 6px !important; /* Original: 12px */ } } + @media (-moz-os-version: windows-win7), (-moz-os-version: 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; + } + } + + /* Arrow Icon Align to Right */ + .bookmark-item.subviewbutton > .menu-right { + margin-inline-end: 0 !important; + } + + /*= Bookmark Menu - Reduce Padding =========================================*/ + :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 ==============================================*/ + /* 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; + } + /*= Poup Panel - Reduce padding ============================================*/ #protections-popup-main-header-label { height: unset !important; /* Original: 37.6px */ @@ -286,181 +1445,109 @@ /** Popup panel - Compact mode */ /* Footer Button Height */ - :root[uidensity=compact] .panel-footer.panel-footer-menulike > button { + :root[uidensity="compact"] .panel-footer.panel-footer-menulike > button { padding: 3px 8px !important; } /* Footer Button Height */ - :root[uidensity=compact] #protections-popup-trackersView-settings-button { + :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 { + :root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer { padding: 3px 0 20px !important; } /* Button and disabed category in Protection popup */ - :root[uidensity=compact] #protections-popup-multiView .protections-popup-footer-button, - :root[uidensity=compact] #protections-popup-multiView .protections-popup-category { + :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 { + :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 { + :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 { + :root[uidensity="compact"] #protections-popup-no-trackers-found-description { margin: 2em 4em !important; } /* Download Item margin */ - :root[uidensity=compact] #downloadsListBox { + :root[uidensity="compact"] #downloadsListBox { margin: 0 !important; } - - /** Tab Bar - 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; - } - #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { - overflow: hidden; - } - - /** Selected Tab - Color like toolbar ***************************************/ - :root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ - --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ - } -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme { - /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) - */ - background-image: linear-gradient(transparent, transparent), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), - var(--lwt-header-image, none) !important; - } - - /* Multi Selected Color */ - #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme { + /** Multi Selected Color - More Contrast ************************************/ + #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; + 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: .3; + opacity: 0.3; } - #TabsToolbar[brighttext] .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - opacity: .15; - } - - /** Selected 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; - } - - /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - z-index: 0 !important; - } - - /** Selected Tab - Bottom Rounded Corner ************************************/ - #tabbrowser-tabs { - --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 1px; - } - - :root[lwtheme="true"] tab[visuallyselected] > stack::before, - :root[lwtheme="true"] tab[visuallyselected] > stack::after { - /* Box */ - content: "" !important; - 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(--tabs-border-color, transparent) !important; - -moz-context-properties: fill, stroke !important; - - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - - :root[lwtheme="true"] tab[visuallyselected] > stack::before { - left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important; - background-image: url(./icons/tab-bottom-corner-left.svg); - } - :root[lwtheme="true"] tab[visuallyselected] > stack::after { - left: auto; - right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - background-image: url(./icons/tab-bottom-corner-right.svg); + #TabsToolbar[brighttext] + .tab-background[multiselected="true"]:not([selected="true"]) + > .tab-loading-burst:not([bursting]) { + opacity: 0.15; } /** Unselected Tab - Divide line ********************************************/ - #tabbrowser-arrowscrollbox { - position: absolute; - } - + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before, - #tabs-newtab-button:not(:hover, [open])::before { + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { /* Box Model */ - content: ""; + content: ""; display: block; position: absolute; - - /* Position */ - top: 50%; - transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + top: 50%; /* Bar shape */ - width: 1px; - height: 20px; + width: 1px; + height: 20px; /* Bar Color */ opacity: var(--tab-separator-opacity); - transition: opacity .2s var(--ease-basic); - background-color: color-mix(in srgb, currentColor 20%, transparent); /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + background-color: color-mix( + in srgb, + currentColor 20%, + transparent + ) !important; /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ + } + + .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; } #tabs-newtab-button:is(:hover, [open])::before { content: ""; position: absolute; } - #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, - #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 { + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab:not([visuallyselected]) + .tab-background::before, + #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; } @@ -469,78 +1556,101 @@ margin-inline-end: 1px !important; } - /* New tab button - Looks 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; - - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; + /* New tab button - Smaller button ******************************************/ + :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); } - #tabs-newtab-button > .toolbarbutton-icon { - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ + :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 2px; } - - /* Coner Rounding */ - #tabs-newtab-button:hover { - /* Color */ - fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Replace var(--toolbarbutton-hover-background) - Hard coded for compatibility */ - -moz-context-properties: fill !important; - - /* Corner 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); - } - - #tabs-newtab-button .toolbarbutton-icon { - 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); + :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; } /** Clipped tabs - Letters cleary *******************************************/ - #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { + #tabbrowser-tabs[closebuttons="activetab"] .tab-content:not([pinned]) { padding-inline-start: 8px !important; } - #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]) { + #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]) { + #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 *******************************/ - #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { + #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], :hover) .tab-close-button { + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; + opacity: 0; + + /* Animation - Fade out */ + transition: opacity 0.1s var(--animation-easing-function) !important; + } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + + /* Animation - Fade in */ + transition: opacity 0.25s var(--animation-easing-function) !important; + } + + /* Closed Button's icon thicker */ + .tabbrowser-tab .tab-content > .close-icon { + list-style-image: url("./icons/dismiss-filled.svg") !important; + } + + /* Closed Button's icon larger */ + .tab-close-button { + padding: 6px !important; /* Original: 7px */ + } + .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 1px !important; /* Original: 0px */ + width: 19px !important; /* Original: 17px */ + } + + /* Closed Button's padding reduce */ + #tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { + margin-inline-end: calc( + (var(--inline-tab-padding) / -2) + 2px + ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/ + padding: 4px !important; /* Original: 7px */ + width: 20px !important; /* Original: 24px */ + height: 20px !important; /* Original: 24px */ + } + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not(:hover) + > .tab-stack + > .tab-content + > .tab-close-button { + padding-inline-start: 3px !important; /* Original: 0px */ + width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } /** Sound Tab - Hide Label **************************************************/ - .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ + .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { display: none !important; } /** Sound Tab - Show with Favicons ******************************************/ /* Makes the favicons always visible (also on hover) */ - .tab-icon-image:not([pinned]){ - opacity: 1 !important + .tab-icon-image:not([pinned]) { + opacity: 1 !important; } /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ @@ -554,12 +1664,15 @@ /* Shape */ padding: 1.5px !important; border-radius: 10px !important; - width: 17px !important; + width: 17px !important; height: 17px !important; + + /* Animation */ + transition: 0.1s var(--animation-easing-function); } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ - color: currentColor !important; + color: currentColor !important; stroke: transparent !important; background: transparent !important; fill-opacity: 0.8 !important; @@ -569,24 +1682,28 @@ margin-inline-end: 9.5px !important; } - /* None exist favicon */ - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]) { + /* None exist favicon - Size bigger */ + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { top: 0 !important; inset-inline-end: 0 !important; margin-inline-end: 5.5px !important; - padding: 2px 0 !important; + padding: 0 !important; + } + .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; /* Favicon hidden */ } /* Busy - Show */ - .tab-throbber[busy], .tab-icon-pending[busy] { + .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(-.5px) translateY(-2.5px); + transform: translateX(-0.5px) translateY(-2.5px); } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed])[busy] { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] { top: -3.5px !important; inset-inline-end: -9px !important; margin-inline-end: 9.5px !important; @@ -597,7 +1714,7 @@ .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; + 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; @@ -609,17 +1726,24 @@ color: var(--toolbar-bgcolor, black) !important; } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]):hover { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover { padding: 0 !important; } /** PictureInPicture Tab - Show PIP Icon ************************************/ - .tab-icon-sound[pictureinpicture]:not([pinned]) { + #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; + width: 14px; height: 14px; - -moz-box-ordinal-group: 2 !important; + background-size: 14px; + -moz-box-ordinal-group: 1 !important; /* Color */ fill: currentColor; @@ -627,19 +1751,23 @@ -moz-context-properties: fill; /* Icon */ - list-style-image: url(chrome://global/skin/media/picture-in-picture-open.svg); + background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); } - .tab-icon-sound[pictureinpicture]:not([pinned])[selected] { + .tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after { opacity: 0.95; } /* Close Button's position */ .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { - margin-left: 7px !important; -moz-box-ordinal-group: 2 !important; } - .tabbrowser-tab[pictureinpicture]:not([pinned]):hover .tab-close-button { - margin-left: 0px !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 *****************************/ @@ -647,56 +1775,75 @@ display: none; } - .tab-icon-image { - box-sizing: content-box; - padding: 3px 0; + .tab-content:not([titlechanged])::before { + /* Box Model */ + content: ""; + display: block; + position: absolute !important; + /* Shape */ border-bottom: 2px solid var(--identity-icon-color); + width: 25%; + + /* Animate */ + transition: 0.15s var(--animation-easing-function) !important; + transform: translate(9px, 12px) !important; + } + .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 30px); + } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 33px); } - /* None exist favicon - With Sound */ - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { - box-sizing: content-box; - padding: 3px 0; - - border-radius: 0 !important; - border-bottom: 2px solid var(--identity-icon-color); - } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover { - padding: 0; - - border-radius: 10px !important; - border-bottom: none; + /* Pinned Tab */ + .tabbrowser-tab[pinned] .tab-content::before { + width: 16px; + transform: translateY(12px) !important; } /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]) .tab-icon-image, - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) .tab-icon-image { - border-bottom: 2px solid transparent !important; - } - .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); + --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"]) { + :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); */ - var(--dotted-identity-image) !important; background-position-x: 30%, 50%, 70% !important; } /* Pinned Tab - Titlechanged & soundplaying */ - .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .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"]) { - var(--dotted-identity-image) !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; } @@ -705,6 +1852,140 @@ display: none !important; } + /** Library - Icons Replace *************************************************/ + /*= Standard Folder - More Visible =========================================*/ + /* on Toolbar and Menus */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]), + /* in Sidebar, Library, Add/Edit Bookmark dialog */ + /* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */ + /* Need to overide!!, can not use :not() */ + :-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]), + /* Download Popup */ + .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, + /* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */ + :-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-big.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-big.svg") !important; + } + + /*= Default Icon - Overide =================================================*/ + /* 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, /* Original: Default folder icon */ + #bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */ + :-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" */ + } + /** Panel - Icons ***********************************************************/ /*= Padding ================================================================*/ :root { @@ -719,8 +2000,8 @@ .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 { + #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 { @@ -731,8 +2012,8 @@ #appMenu-proton-update-banner::before { display: -moz-inline-box; margin-inline-end: var(--arrowpanel-menuicon-padding); - width: 16px !important; - height: 16px !important; + width: 16px; + height: 16px; } #appMenu-proton-update-banner { margin-bottom: 2px !important; @@ -743,13 +2024,17 @@ #appMenu-fxa-status2, #appMenu-zoom-controls2 { align-items: center; - padding-top: var(--arrowpanel-menuimageblank-padding) !important; + padding-top: var(--arrowpanel-menuimageblank-padding) !important; padding-bottom: var(--arrowpanel-menuimageblank-padding) !important; } #appMenu-zoom-controls2::before { margin-inline-end: 0 !important; } + .subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text { + margin-left: 16px !important; + } + /* Icons Color */ #appMenu-multiView .subviewbutton::before, #appMenu-proton-update-banner::before, @@ -764,11 +2049,12 @@ 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 { + #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 { + .subviewbutton[disabled="true"] > image { /* Ghost icons when disabled */ opacity: 0.4; } @@ -781,85 +2067,93 @@ } #appMenu-proton-update-banner::before { - content: url(chrome://browser/skin/whatsnew.svg); + content: url("chrome://browser/skin/whatsnew.svg"); } - #appMenu-fxa-status2::before { /* Don't exist img tag */ - content: url(chrome://browser/skin/fxa/avatar-empty.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 { + #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 { + #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: ''; + content: ""; border-radius: 50% !important; background-size: 16px !important; background-image: var(--avatar-image-url) !important; } #appMenu-new-tab-button2 { - list-style-image: url(chrome://browser/skin/new-tab.svg); + list-style-image: url("chrome://browser/skin/new-tab.svg"); } #appMenu-new-window-button2 { - list-style-image: url(chrome://browser/skin/window.svg); + list-style-image: url("chrome://browser/skin/window.svg"); } #appMenu-new-private-window-button2 { - list-style-image: url(chrome://browser/skin/privateBrowsing.svg); + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); } - #appMenu-bookmarks-button{ - list-style-image: url(chrome://browser/skin/bookmark.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); + list-style-image: url("chrome://browser/skin/history.svg"); } #appMenu-downloads-button { - list-style-image: url(chrome://browser/skin/downloads/downloads.svg); + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } #appMenu-passwords-button { - list-style-image: url(chrome://browser/skin/login.svg); + list-style-image: url("chrome://browser/skin/login.svg"); } #appMenu-extensions-themes-button { - list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); } #appMenu-print-button2 { - list-style-image: url(chrome://global/skin/icons/print.svg); + list-style-image: url("chrome://global/skin/icons/print.svg"); } #appMenu-save-file-button2 { - list-style-image: url(chrome://browser/skin/save.svg); + list-style-image: url("chrome://browser/skin/save.svg"); } #appMenu-find-button2 { - list-style-image: url(chrome://global/skin/icons/search-glass.svg); + 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"); } #appMenu-settings-button { - list-style-image: url(chrome://global/skin/icons/settings.svg); + list-style-image: url("chrome://global/skin/icons/settings.svg"); } #appMenu-more-button2 { - list-style-image: url(chrome://browser/skin/ion.svg); + list-style-image: url("chrome://browser/skin/ion.svg"); } #appMenu-help-button2 { - list-style-image: url(chrome://global/skin/icons/help.svg); + list-style-image: url("chrome://global/skin/icons/help.svg"); } #appMenu-quit-button2 { - list-style-image: url(./icons/quit.svg); + list-style-image: url("./icons/quit.svg"); } /*= Panel - Account ========================================================*/ - #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, + #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon { - width: 16px !important; + width: 16px !important; height: 16px !important; } /* Default */ - #fxa-menu-avatar { - display: -moz-inline-box !important; + #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); } @@ -869,21 +2163,21 @@ margin-inline-end: var(--arrowpanel-menuicon-padding); } #PanelUI-fxa-menu-setup-sync-button { - list-style-image: url(chrome://browser/skin/sync.svg); + 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); + 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, #PanelUI-remotetabs-view-managedevices { - list-style-image: url(chrome://global/skin/icons/settings.svg); + 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-notabsforclient-label { @@ -892,104 +2186,126 @@ } /* Change Separator */ - #PanelUI-fxa-menu::before{ + #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{ + #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=""] { - list-style-image: url(./icons/send-to-device.svg); + .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"); } - .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) { - list-style-image: url(chrome://global/skin/icons/settings.svg); + .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */ + .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); + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); } panelMenuBookmarkThisPage[starred] { - list-style-image: url(chrome://browser/skin/bookmark.svg); + list-style-image: url("chrome://browser/skin/bookmark.svg"); } #panelMenu_searchBookmarks { - list-style-image: url(chrome://global/skin/icons/search-glass.svg); + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); } #panelMenu_viewBookmarksToolbar { - list-style-image: url(chrome://browser/skin/bookmarks-toolbar.svg); + list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } #panelMenu_showAllBookmarks { - list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg); + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); } /*= Panel - History ========================================================*/ #appMenuRecentlyClosedTabs { - list-style-image: url(chrome://browser/skin/tab.svg); + list-style-image: url("chrome://browser/skin/tab.svg"); } #appMenuRecentlyClosedWindows { - list-style-image: url(chrome://browser/skin/window.svg); + 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); + list-style-image: url("chrome://browser/skin/forget.svg"); } #PanelUI-historyMore { - list-style-image: url(chrome://browser/skin/history.svg); + list-style-image: url("chrome://browser/skin/history.svg"); } #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 =====================================================*/ #appmenu-moreTools-button { - list-style-image: url(chrome://browser/skin/customize.svg); + list-style-image: url("chrome://browser/skin/customize.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(1) { /* Web Developer Tools */ - list-style-image: url(chrome://browser/skin/developer.svg); + /* Web Developer Tools */ + #appmenu-developer-tools-view .subviewbutton:nth-child(1), + #PanelUI-developer-tools-view .subviewbutton:nth-child(1) { + list-style-image: url("chrome://browser/skin/developer.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(2) { /* Task Manager */ - list-style-image: url(./icons/performance.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"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(3) { /* Remote Debugging - Edge bug.svg */ - list-style-image: url(./icons/bug.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"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(4) { /* Browser Toolbox - Edge webdeveloper.svg */ - list-style-image: url(./icons/webdeveloper.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/webdeveloper.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(5) { /* Browser Content Toolbaox - */ - list-style-image: url(./icons/command-frames.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"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) { /* Browser Console */ - list-style-image: url(chrome://devtools/skin/images/command-console.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"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) { /* Responsive Design Mode */ - list-style-image: url(./icons/command-responsivemode.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"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) { /* Eyedropper */ - list-style-image: url(chrome://devtools/skin/images/command-eyedropper.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"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) { /* Page Source - Edge file-search.svg */ - list-style-image: url(./icons/search-file.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/search-file.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) { /* Extensions for Devel */ - list-style-image: url(chrome://devtools/skin/images/debugging-addons.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; @@ -997,41 +2313,41 @@ /*= Panel - Help ===========================================================*/ #appMenu_menu_openHelp { - list-style-image: url(chrome://global/skin/icons/help.svg); + 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); + list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg"); } #appMenu_troubleShooting { - list-style-image: url(chrome://global/skin/icons/more.svg); + list-style-image: url("chrome://global/skin/icons/more.svg"); } #appMenu_help_reportSiteIssue { - list-style-image: url(chrome://global/skin/icons/lightbulb.svg); + list-style-image: url("chrome://global/skin/icons/lightbulb.svg"); } #appMenu_menu_HelpPopup_reportPhishingtoolmenu { - list-style-image: url(chrome://global/skin/icons/warning.svg); + list-style-image: url("chrome://global/skin/icons/warning.svg"); } - #appMenu_aboutName{ - list-style-image: url(chrome://global/skin/icons/info.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); + list-style-image: url("chrome://browser/skin/bookmark.svg"); } #appMenu-library-history-button { - list-style-image: url(chrome://browser/skin/history.svg); + list-style-image: url("chrome://browser/skin/history.svg"); } - #appMenu-library-downloads-button{ - list-style-image: url(chrome://browser/skin/downloads/downloads.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); + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } #downloadsHistory .box-inherit.button-box { display: -moz-inline-box !important; @@ -1039,38 +2355,85 @@ /*= Toolbar - Overflow Menu ================================================*/ #overflowMenu-customize-button { - list-style-image: url(chrome://browser/skin/customize.svg); + list-style-image: url("chrome://browser/skin/customize.svg"); } /*= Tabbar - All Tab Menu ==================================================*/ #allTabsMenu-undoCloseTab { - list-style-image: url(chrome://global/skin/icons/undo.svg); + list-style-image: url("chrome://global/skin/icons/undo.svg"); } #allTabsMenu-searchTabs { - list-style-image: url(chrome://global/skin/icons/search-glass.svg); + 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 { - list-style-image: url(chrome://global/skin/icons/settings.svg); + list-style-image: url("chrome://global/skin/icons/settings.svg"); } - /** Context Menu - Icons ****************************************************/ - /*= Layout =================================================================*/ - menupopup menuitem:not([type="checkbox"]), - menupopup menu:not([type="checkbox"]) { - -moz-appearance: none !important; /* Linux: menulist */ + /*= BMB_bookmarksPopup =====================================================*/ + #BMB_viewBookmarksSidebar { + } + #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-conic-left { + display: -moz-box !important; + } + } + + /*= 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"); + } + + #identity-popup-more-info { + list-style-image: url("chrome://global/skin/icons/info.svg"); + } + + /** Menu - Icons Layout *****************************************************/ + 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, [type="checkbox"], .in-menulist), - :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], .in-menulist), + :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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { /* Color */ -moz-context-properties: fill, fill-opacity !important; @@ -1084,8 +2447,12 @@ /* 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"], .in-menulist), - :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], .in-menulist) { + :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; } } @@ -1095,35 +2462,104 @@ --context-menu-background-padding-default: 5px; --context-menu-background-padding: var(--context-menu-background-padding-default); } - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem, - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu, + :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, #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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; } + /* 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-os-version: windows-win8 ), - (-moz-os-version: windows-win10) { + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { + /* Checkbox */ :root { - --context-menu-background-padding: 1em; --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); } - - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], .in-menulist), - #blockedPopupDontShowMessage { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)) !important; - } - - /* Checkbox */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"][checked="false"] > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem[type="checkbox"][checked="false"] + > .menu-iconic-left { + padding-inline-start: var(--context-menu-text-padding); } } - /* Padding Mac */ + @media (-moz-os-version: windows-win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @media (-moz-os-version: windows-win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } + @media (-moz-os-version: windows-win7), (-moz-os-version: 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, #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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #blockedPopupDontShowMessage { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; + } + } + @media (-moz-os-version: 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, #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, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + #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; + } + } + + /* Padding - Mac */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root { --context-menu-background-padding-default: 10px; @@ -1131,8 +2567,12 @@ } /* context menu width */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], .in-menulist), + :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; } @@ -1150,118 +2590,220 @@ } } + /*= Bookmark Menu - Layout =================================================*/ + /* #goPoup, #bookmarksMenuPopup: looks like global menu + * #BMB_bookmarksPopup: looks like arrow panel + */ + + /* Empty Menu */ + menupopup menupopup[emptyplacesresult] .menu-text, + #PersonalToolbar menupopup[emptyplacesresult] .menu-text { + margin-inline-start: 0 !important; + } + + /* Bookmark Popup - As Arrow Panel */ + #BMB_bookmarksPopup, + #PersonalToolbar { + --context-menu-background-padding: var(--arrowpanel-menuitem-padding); + } + + /* Windows 7, 8 */ + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { + /* Global Menu */ + menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: 0 !important; + } + + /* Bookmark Popup - None icon menu */ + #BMB_bookmarksPopup, + #PersonalToolbar { + --arrowpanel-menuicon-padding: 9px; + } + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + margin-inline: var(--arrowpanel-menuitem-padding) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + padding-inline-start: calc( + var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px + ) !important; + } + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; + } + } + + /* Windows */ + @media (-moz-os-version: windows-win10) { + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + margin-inline: var(--arrowpanel-menuitem-padding) !important; + padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } + } + + /* Linux */ + @media (-moz-gtk-csd-available) { + /* Global Menu */ + menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Bookmark Popup - Iconic menu */ + #BMB_bookmarksPopup .menu-iconic-text, + #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text { + padding-inline-start: 1px !important; + } + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic), + #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]), + #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important; + } + } + + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + /* Bookmark Popup - As Arrow Panel */ + #PersonalToolbar menupopup menuitem, + #PersonalToolbar menupopup menu { + padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important; + } + + /* Bookmark Popup - None icon menu */ + menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), + menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; + } + } + + /** Context Menu - Icons ****************************************************/ /*= tabContextMenu =========================================================*/ #context_openANewTab { - --menuitem-image: url(chrome://browser/skin/new-tab.svg); + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #context_reloadTab, #context_reloadSelectedTabs { - --menuitem-image: url(chrome://browser/skin/reload.svg); + /* --menuitem-image: url("chrome://global/skin/icons/reload.svg"); */ } #context_toggleMuteTab, #context_toggleMuteSelectedTabs { - --menuitem-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg); + --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); + --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #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/tab-copy.svg); + --menuitem-image: url("./icons/tab-copy.svg"); } #context_bookmarkTab, #context_bookmarkSelectedTabs { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --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_shareTabURL { /* At windows */ - --menuitem-image: url(./icons/share.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"); } #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 { - --menuitem-image: url(chrome://global/skin/icons/close.svg); + --menuitem-image: url("chrome://global/skin/icons/close.svg"); } #context_closeTabOptions { } #context_undoCloseTab { - --menuitem-image: url(chrome://global/skin/icons/undo.svg); + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } /*= new-tab-button-popup ===================================================*/ #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"] { - --menuitem-image: url(chrome://global/skin/icons/settings.svg); + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } /*= toolbar-context-menu ===================================================*/ .customize-context-manageExtension { - --menuitem-image: url(chrome://global/skin/icons/settings.svg); + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } .customize-context-removeExtension { - --menuitem-image: url(chrome://global/skin/icons/delete.svg); + --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); + --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); + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } #toolbar-context-openANewTab { - --menuitem-image: url(chrome://browser/skin/new-tab.svg); + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #toolbar-context-reloadSelectedTab, #toolbar-context-reloadSelectedTabs { - --menuitem-image: url(chrome://browser/skin/reload.svg); + --menuitem-image: url("chrome://browser/skin/reload.svg"); } #toolbar-context-bookmarkSelectedTab, #toolbar-context-bookmarkSelectedTabs { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --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(chrome://global/skin/icons/undo.svg); + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } - #toggle_toolbar-menubar { /* checkbox */ - /* --menuitem-image: url(./icons/calendar-agenda.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); + #toggle_PersonalToolbar { + /* Also placeContext */ + --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } menuitem.viewCustomizeToolbar { - --menuitem-image: url(chrome://browser/skin/customize.svg); + --menuitem-image: url("chrome://browser/skin/customize.svg"); } /*= blockedPopupOptions ====================================================*/ @@ -1271,498 +2813,811 @@ #blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] { --menuitem-image: url("chrome://global/skin/icons/edit.svg"); } - #blockedPopupDontShowMessage { /* checkbox */ + #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-autohide"] { + /* checkbox */ } #autohide-context > menuitem[data-l10n-id="full-screen-exit"] { - --menuitem-image: url(chrome://browser/skin/fullscreen-exit.svg); + --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); } /*= 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); */ + #context-viewsource-wrapLongLines { + /* checkbox */ + /* --menuitem-image: url("./icons/arrow-sort-down-lines.svg"); */ } - #context-viewsource-highlightSyntax { /* checkbox */ - /* --menuitem-image: url(./icons/code.svg); */ + #context-viewsource-highlightSyntax { + /* checkbox */ + /* --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(chrome://global/skin/icons/undo.svg); + --menuitem-image: url("chrome://global/skin/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); + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #context-openlinkintab { - --menuitem-image: url(chrome://browser/skin/new-tab.svg); + --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); + --menuitem-image: url("chrome://browser/skin/window.svg"); } #context-openlinkprivate { - --menuitem-image: url(chrome://browser/skin/privateBrowsing.svg); + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #context-bookmarklink { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context-savelink { - --menuitem-image: url(chrome://browser/skin/save.svg); + --menuitem-image: url("chrome://browser/skin/save.svg"); } #context-savelinktopocket { - --menuitem-image: url(chrome://browser/skin/pocket-outline.svg); + --menuitem-image: url("chrome://browser/skin/pocket-outline.svg"); } #context-copyemail { - --menuitem-image: url(chrome://browser/skin/mail.svg); + --menuitem-image: url("chrome://browser/skin/mail.svg"); } #context-copylink { - --menuitem-image: url(chrome://browser/skin/link.svg); + --menuitem-image: url("chrome://browser/skin/link.svg"); } #context-sendlinktodevice { - --menuitem-image: url(./icons/send-to-device.svg); + --menuitem-image: url("./icons/send-to-device.svg"); } #context-media-play { - --menuitem-image: url(chrome://global/skin/media/play-fill.svg); + --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); } #context-media-pause { - --menuitem-image: url(chrome://global/skin/media/pause-fill.svg); + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); } #context-media-mute { - --menuitem-image: url(chrome://global/skin/media/audio-muted.svg); + --menuitem-image: url("chrome://global/skin/media/audio-muted.svg"); } #context-media-unmute { - --menuitem-image: url(chrome://global/skin/media/audio.svg); + --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); */ + #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); + --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg"); } #context-video-fullscreen { - --menuitem-image: url(chrome://global/skin/media/fullscreenEnterButton.svg); + --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 */ - /* --menuitem-image: url(chrome://global/skin/media/picture-in-picture-open.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); + --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); + --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(chrome://browser/skin/link.svg); + --menuitem-image: url("chrome://browser/skin/link.svg"); } #context-sendimage, #context-sendvideo, #context-sendaudio { - --menuitem-image: url(chrome://browser/skin/mail.svg); + --menuitem-image: url("chrome://browser/skin/mail.svg"); } #context-viewimageinfo { - --menuitem-image: url(chrome://global/skin/icons/info.svg); + --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); + --menuitem-image: url("chrome://global/skin/icons/plugin.svg"); } #context-ctp-hide { - --menuitem-image: url(chrome://global/skin/icons/plugin-blocked.svg); + --menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg"); } #context-savepage { - --menuitem-image: url(chrome://browser/skin/save.svg); + --menuitem-image: url("chrome://browser/skin/save.svg"); } #context-pocket { - --menuitem-image: url(chrome://browser/skin/pocket-outline.svg); + --menuitem-image: url("chrome://browser/skin/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); + --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(chrome://global/skin/icons/undo.svg); + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } #context-redo { } #context-cut { - --menuitem-image: url(chrome://browser/skin/edit-cut.svg); + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #context-copy { - --menuitem-image: url(chrome://browser/skin/edit-copy.svg); + --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); } #context-paste { - --menuitem-image: url(chrome://browser/skin/edit-paste.svg); + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #context-delete { - --menuitem-image: url(chrome://global/skin/icons/delete.svg); + --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); + --menuitem-image: url("chrome://global/skin/icons/print.svg"); } #context-take-screenshot { - --menuitem-image: url(chrome://browser/skin/screenshot.svg); + --menuitem-image: url("chrome://browser/skin/screenshot.svg"); } #context-keywordfield { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context-searchselect, #context-searchselect-private { - --menuitem-image: url(chrome://global/skin/icons/search-glass.svg); + --menuitem-image: url("chrome://global/skin/icons/search-glass.svg"); } #frame { - --menuitem-image: url(./icons/command-frames.svg); + --menuitem-image: url("./icons/command-frames.svg"); } - #spell-check-enabled { /* checkbox */ + #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/search-file.svg); + --menuitem-image: url("./icons/search-file.svg"); } #context-inspect-a11y { - --menuitem-image: url(chrome://devtools/skin/images/tool-accessibility.svg); + --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg"); } #context-inspect { - --menuitem-image: url(chrome://devtools/skin/images/command-pick.svg) + --menuitem-image: url("chrome://devtools/skin/images/command-pick.svg"); } - #context-media-eme-learnmore { /* iconic */ + #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); + --menuitem-image: url("chrome://browser/skin/back.svg"); } #context-forward { - --menuitem-image: url(chrome://browser/skin/forward.svg); + --menuitem-image: url("chrome://browser/skin/forward.svg"); } + #context_reloadTab, + #context_reloadSelectedTabs, #context-reload { - --menuitem-image: url(chrome://browser/skin/reload.svg); + --menuitem-image: url("chrome://browser/skin/reload.svg"); } #context-stop { - --menuitem-image: url(chrome://global/skin/icons/close.svg); + --menuitem-image: url("chrome://global/skin/icons/close.svg"); } #context-bookmarkpage { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } } /*= pictureInPictureToggleContextMenu ======================================*/ #pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] { - --menuitem-image: url(./icons/eye-hide.svg); + --menuitem-image: url("./icons/eye-hide.svg"); } /*= 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); + #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); + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #placesContext_open\:newwindow { - --menuitem-image: url(chrome://browser/skin/window.svg); + --menuitem-image: url("chrome://browser/skin/window.svg"); } #placesContext_open\:newprivatewindow { - --menuitem-image: url(chrome://browser/skin/privateBrowsing.svg); + --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); + --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); + --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); + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } #placesContext_copy { - --menuitem-image: url(chrome://browser/skin/edit-copy.svg); + --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); } #placesContext_paste_group { - --menuitem-image: url(chrome://browser/skin/edit-paste.svg); + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #placesContext_new\:bookmark { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #placesContext_new\:folder { - --menuitem-image: url(chrome://global/skin/icons/folder.svg); + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); } #placesContext_new\:separator { - --menuitem-image: url(./icons/vertical-line.svg); + --menuitem-image: url("./icons/vertical-line.svg"); } #placesContext_paste { - --menuitem-image: url(chrome://browser/skin/edit-paste.svg); + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #placesContext_createBookmark { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } - #show-other-bookmarks_PersonalToolbar { /* checkbox */ - /* --menuitem-image: url(./icons/star-line-horizontal.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); + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); } - menupopup[context="placesContext"] > .openintabs-menuitem { - --menuitem-image: url(./icons/movetowindow-16.svg); + menupopup[context="placesContext"] > .openintabs-menuitem, + menuitem.openintabs-menuitem.subviewbutton { + --menuitem-image: url("./icons/movetowindow-16.svg"); } /*= pageActionContextMenu ==================================================*/ .pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem { - --menuitem-image: url(chrome://global/skin/icons/settings.svg); + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } .pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem { - --menuitem-image: url(chrome://global/skin/icons/delete.svg); + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } /*= 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); + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } /*= customizationPaletteItemContextMenu ====================================*/ .customize-context-addToToolbar { - --menuitem-image: url(chrome://devtools/skin/images/dock-bottom.svg); + --menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg"); } .customize-context-addToPanel { - --menuitem-image: url(chrome://browser/skin/menu.svg); + --menuitem-image: url("chrome://browser/skin/menu.svg"); } /*= customizationPanelContextMenu ==========================================*/ #customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] { - --menuitem-image: url(chrome://browser/skin/customize.svg); + --menuitem-image: url("chrome://browser/skin/customize.svg"); } /*= downloads-button-autohide-panel ========================================*/ - #downloads-button-autohide-checkbox { /* checkbox */ + #downloads-button-autohide-checkbox { + /* checkbox */ } /*= downloadsContextMenu ===================================================*/ .downloadPauseMenuItem { - --menuitem-image: url(chrome://global/skin/media/pause-fill.svg); + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); } .downloadResumeMenuItem { - --menuitem-image: url(chrome://global/skin/media/play-fill.svg); + --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); + --menuitem-image: url("chrome://browser/skin/open.svg"); } - .downloadAlwaysUseSystemDefaultMenuItem { /* checkbox */ + .downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ } .downloadShowMenuItem { - --menuitem-image: url(chrome://global/skin/icons/folder.svg); + --menuitem-image: url("chrome://global/skin/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(chrome://browser/skin/link.svg); + --menuitem-image: url("chrome://browser/skin/link.svg"); } .downloadRemoveFromHistoryMenuItem { - --menuitem-image: url(chrome://global/skin/icons/delete.svg); + --menuitem-image: url("chrome://global/skin/icons/delete.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); + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #syncedTabsOpenSelectedInWindow { - --menuitem-image: url(chrome://browser/skin/window.svg); + --menuitem-image: url("chrome://browser/skin/window.svg"); } #syncedTabsOpenSelectedInPrivateWindow { - --menuitem-image: url(chrome://browser/skin/privateBrowsing.svg); + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); } #syncedTabsBookmarkSelected { - --menuitem-image: url(chrome://browser/skin/bookmark.svg); + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #syncedTabsCopySelected { - --menuitem-image: url(chrome://browser/skin/link.svg); + --menuitem-image: url("chrome://browser/skin/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); + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } #syncedTabsRefresh { - --menuitem-image: url(chrome://browser/skin/sync.svg); + --menuitem-image: url("chrome://browser/skin/sync.svg"); } /*= SyncedTabsSidebarTabsFilterContext =====================================*/ #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] { - --menuitem-image: url(chrome://global/skin/icons/undo.svg); + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { - --menuitem-image: url(chrome://browser/skin/edit-cut.svg); + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"]{ - --menuitem-image: url(chrome://browser/skin/edit-copy.svg); + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { + --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"]{ - --menuitem-image: url(chrome://browser/skin/edit-paste.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_delete"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"]{ - --menuitem-image: url(./icons/select-all-on.svg); + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { + --menuitem-image: url("./icons/select-all-on.svg"); } #syncedTabsRefreshFilter { - --menuitem-image: url(chrome://browser/skin/sync.svg); + --menuitem-image: url("chrome://browser/skin/sync.svg"); } /*= urlbar-input-container =================================================*/ - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { - --menuitem-image: url(chrome://global/skin/icons/undo.svg); + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { } - #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_cut"] { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { - --menuitem-image: url(chrome://browser/skin/edit-copy.svg); + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { + --menuitem-image: url("chrome://browser/skin/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_paste"] { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #paste-and-go { } - #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_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); + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] { + --menuitem-image: url("./icons/select-all-on.svg"); + } + + /** Global Menu *************************************************************/ + /*= main-menubar ===========================================================*/ + #file-menu { + --menuitem-image: url("./icons/mail-inbox-all.svg"); + } + #edit-menu { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); + } + #view-menu { + --menuitem-image: url("./icons/content-view.svg"); + } + #history-menu { + --menuitem-image: url("chrome://browser/skin/history.svg"); + } + #bookmarksMenu { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #tools-menu { + --menuitem-image: url("./icons/toolbox.svg"); + } + #helpMenu { + --menuitem-image: url("chrome://global/skin/icons/help.svg"); + } + + /*= menu_FilePopup =========================================================*/ + #menu_newNavigatorTab { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); + } + #menu_newUserContext { + } + #menu_newNavigator { + --menuitem-image: url("chrome://browser/skin/window.svg"); + } + #menu_newPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + #menu_newFissionWindow { + } + #menu_newNonFissionWindow { + } + #menu_openLocation { + } + #menu_openFile { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + #menu_close { + } + #menu_closeWindow { + } + + #menu_savePage { + --menuitem-image: url("chrome://browser/skin/save.svg"); + } + #menu_sendLink { + --menuitem-image: url(chrome://browser/skin/mail.svg); + } + + #menu_printPreview { + } + #menu_print { + --menuitem-image: url(chrome://global/skin/icons/print.svg); + } + + #menu_importFromAnotherBrowser { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + + #goOfflineMenuitem { + } + #menu_FileQuitItem { + --menuitem-image: url("./icons/quit.svg"); + } + + /* Mange Containers */ + #menu_newUserContext menupopup menuitem:last-child { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } + + /*= menu_EditPopup =========================================================*/ + #menu_undo { + --menuitem-image: url("chrome://global/skin/icons/undo.svg"); + } + #menu_redo { + } + + #menu_cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + #menu_copy { + --menuitem-image: url("chrome://browser/skin/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_findAgain { + } + + #textfieldDirection-swap { + } + + #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"); + } + #menu_showAllTabs { + } + + #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"); + } + #hiddenTabsMenu { + } + #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"); + } + + #bookmarksToolbarFolderMenu { + } + #menu_unsortedBookmarks { + } + #menu_mobileBookmarks { + } + + /*= 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-enable { + } + #sync-unverifieditem { + } + #sync-syncnowitem { + } + #sync-reauthitem { + } + + #webDeveloperMenu { + --menuitem-image: url("chrome://browser/skin/developer.svg"); + } + #menu_pageInfo { + --menuitem-image: url("./icons/document-endnote.svg"); + } + + /* menuWebDeveloperPopup sub menu */ + #enableDeveloperTools { + } + #menu_devToolbox { + } + #menu_taskManager { + --menuitem-image: url("./icons/performance.svg"); + } + #menu_devtools_remotedebugging { + --menuitem-image: url("./icons/bug.svg"); + } + #menu_browserToolbox { + --menuitem-image: url("./icons/webdeveloper.svg"); + } + #menu_browserContentToolbox { + --menuitem-image: url("./icons/command-frames.svg"); + } + #menu_browserConsole { + --menuitem-image: url("chrome://devtools/skin/images/command-console.svg"); + } + #menu_responsiveUI { + } + #menu_eyedropper { + } + #menu_pageSource { + --menuitem-image: url("./icons/search-file.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"); + } + #menu_HelpPopup_reportPhishingErrortoolmenu { + } + + #aboutName { + --menuitem-image: url("chrome://global/skin/icons/info.svg"); + } + + #helpPolicySupport { } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/userContent.css b/arch-config/.mozilla/firefox/default-release/chrome/userContent.css index a3a5e0bb..c137f81c 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/userContent.css +++ b/arch-config/.mozilla/firefox/default-release/chrome/userContent.css @@ -4,25 +4,99 @@ /* 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(42, 42, 46, 1);"], + body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] { /* inner */ - --newtab-focus-border: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ + --newtab-focus-border: rgba( + 0, + 221, + 255, + 0.5 + ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */ } /** Activity Stream - Web Site Icon: full size ****************************/ + .top-site-outer .tile { + overflow: hidden; + } + .top-site-outer .tile .icon-wrapper { - width: 100% !important; /* Original: 48px */ + width: 100% !important; /* Original: 48px */ height: 100% !important; /* Original: 48px */ } + + /** Activity Stream - Home Search Bar looks like proton *******************/ + /* 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) { + #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; + } } /** Error Page - Restore illustrations **************************************/ @-moz-document url-prefix("about:neterror"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) { + url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) + { /* Illustrations Position */ - #errorPageContainer, .description-wrapper { + #errorPageContainer, + .description-wrapper { min-height: 300px; background-position: left center; background-repeat: no-repeat; @@ -55,7 +129,8 @@ 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") { + url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + { #errorPageContainer { background-image: url("./icons/error-connection-failure.svg"); } @@ -78,7 +153,8 @@ } } - @-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) { + @-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) + { .description-wrapper { background-image: url("./icons/error-session-restore.svg"); } @@ -87,8 +163,7 @@ @-moz-document url-prefix("about:neterror?e=fileNotFound") { @media (min-width: 970px) { .title { - background-image: - url("chrome://global/skin/icons/info.svg") !important; + background-image: url("chrome://global/skin/icons/info.svg") !important; } } @@ -103,18 +178,951 @@ } } } - @-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") { + @-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") { + @-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 =====================================*/ + /* 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-dark-color: #d1d1d1; + --in-content-table-header-background: #0a84ff; + --in-content-table-header-color: #ffffff; + --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) { + :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: rgba(249, 249, 250, 0.2); + --in-content-table-header-background: rgb(5, 64, 150); + --in-content-table-header-color: var(--in-content-page-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); + } + + /*= 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(hsla(0, 0%, 100%, 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 { + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !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; + } + + .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; + } + } + + /*= 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 { + color: var(--in-content-page-color) !important; + 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 { + 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; + } + + /* Background */ + .sidebar-nav.topics, + .sidebar-nav.topics > li { + background: var(--in-content-page-background) !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; + } + + /* 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: none !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 (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, + .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 */ + .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; + } + .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 *******************************************************/ + /*= 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("^((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-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-border-color) !important; + } + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + } + + /*= Directory View =========================================================*/ + @-moz-document url-prefix("about:sync-log"), + regexp("^((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; + } + } }