From df2e9583f019cfbdf8a92a8cc8578eae9efd9c7d Mon Sep 17 00:00:00 2001 From: RealStickman Date: Wed, 29 Jun 2022 20:07:26 +0200 Subject: [PATCH] Update to latest lepton --- .../firefox/default-release/chrome/LEPTON | 2 +- .../chrome/__tests__/native_menu.test.scss | 20 + .../chrome/css/leptonChrome.css | 659 +++++---- .../chrome/css/leptonContent.css | 1244 +++++++++++------ .../chrome/icons/addons-logo.svg | 1 + .../chrome/icons/drawer-arrow-download.svg | 3 + .../chrome/icons/eye-tracking-off.svg | 3 + .../default-release/chrome/icons/fluid.svg | 3 + .../chrome/icons/folder-globe.svg | 3 + .../chrome/icons/plug-disconnected.svg | 3 + .../default-release/chrome/icons/redo.svg | 4 + .../chrome/src/compatibility/_os.scss | 35 +- .../chrome/src/contents/_activity_stream.scss | 60 +- .../chrome/src/contents/_context_menu.scss | 14 + .../chrome/src/contents/_downloads.scss | 7 + .../chrome/src/contents/_error_page.scss | 78 +- .../chrome/src/contents/_proton_color.scss | 1 + .../chrome/src/contents/_video_player.scss | 165 +-- .../src/contents/dark_mode/_addons_org.scss | 319 ++++- .../proton_contents/_field_border.scss | 8 +- .../chrome/src/decoration/_animate.scss | 4 + .../chrome/src/fullscreen/_overlap.scss | 15 + .../src/fullscreen/_show_bookmarkbar.css | 4 + .../chrome/src/icons/_context_menu.scss | 1 + .../chrome/src/icons/_global_menu.scss | 17 +- .../src/icons/_layout_bookmark_menu.scss | 61 +- .../chrome/src/icons/_layout_menu.scss | 231 +-- .../chrome/src/icons/_layout_menu_common.scss | 140 ++ .../src/icons/_layout_menu_contents.scss | 90 ++ .../chrome/src/icons/_panel.scss | 15 +- .../src/icons/context_menu/_content_area.scss | 14 +- .../src/icons/context_menu/_downloads.scss | 51 + .../src/icons/context_menu/_others.scss | 116 +- .../chrome/src/icons/context_menu/_place.scss | 6 +- .../src/icons/context_menu/_tab_toolbar.scss | 28 +- .../chrome/src/leptonChrome.scss | 2 + .../chrome/src/leptonContent.scss | 11 + .../chrome/src/library/_chrome.scss | 5 +- .../chrome/src/library/_contents.scss | 10 +- .../chrome/src/library/_folder_icons.scss | 131 ++ .../chrome/src/library/_proton.scss | 249 ++-- .../chrome/src/library/_proton_contents.scss | 227 ++- .../chrome/src/padding/_drag_space.scss | 15 +- .../clipped_tab/_pinned_close_button.scss | 3 + .../unselected_tab/_dynamic_separator.scss | 9 +- .../chrome/src/theme/_fully_color.scss | 71 +- .../chrome/src/theme/_fully_dark.scss | 7 +- .../chrome/src/theme/_waterfox.scss | 13 +- .../chrome/src/theme/proton_chrome/_cert.scss | 53 +- .../src/theme/proton_chrome/_page_info.scss | 94 +- .../theme/proton_chrome/_proton_commons.scss | 331 ++--- .../_urlbar_focus_color.scss | 11 +- .../theme/system_default_theme/_win10.scss | 21 +- .../chrome/src/utils/_native_menu.scss | 7 + .../chrome/src/utils/_proton_elements.scss | 157 +++ .../firefox/default-release/chrome/yarn.lock | 6 +- .../.mozilla/firefox/default-release/user.js | 2 + 57 files changed, 3045 insertions(+), 1815 deletions(-) create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/__tests__/native_menu.test.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/addons-logo.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/drawer-arrow-download.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/eye-tracking-off.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/fluid.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/folder-globe.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/plug-disconnected.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/icons/redo.svg create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/contents/_downloads.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_overlap.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_show_bookmarkbar.css create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_common.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_contents.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_downloads.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/library/_folder_icons.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/utils/_native_menu.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/utils/_proton_elements.scss diff --git a/arch-config/.mozilla/firefox/default-release/chrome/LEPTON b/arch-config/.mozilla/firefox/default-release/chrome/LEPTON index 9541d392..5e79670c 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/LEPTON +++ b/arch-config/.mozilla/firefox/default-release/chrome/LEPTON @@ -1,3 +1,3 @@ [Info] -Ver=v5.2.0 +Ver=v5.2.1 Branch=photon-style diff --git a/arch-config/.mozilla/firefox/default-release/chrome/__tests__/native_menu.test.scss b/arch-config/.mozilla/firefox/default-release/chrome/__tests__/native_menu.test.scss new file mode 100644 index 00000000..aeefbe73 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/__tests__/native_menu.test.scss @@ -0,0 +1,20 @@ +@use 'true' as *; +@use "example" as *; +@use "../src/utils/native_menu"; + +@include test-module("Native Menu Option [mix]") { + @include test("simple") { + @include assert { + @include output { + @include native_menu.NativeMenu { + @include example; + } + } + @include expect { + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { + @include example; + } + } + } + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css index 6b1082d5..4e9a9792 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css +++ b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css @@ -229,8 +229,7 @@ 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"], + menu[_moz-menuactive="true"][disabled="true"], menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 5%, transparent) !important; border-color: color-mix(in srgb, currentColor 60%, transparent) !important; @@ -256,8 +255,7 @@ 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"], + menu[_moz-menuactive="true"][disabled="true"], menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 17%, transparent) !important; border-color: color-mix(in srgb, currentColor 80%, transparent) !important; @@ -318,6 +316,21 @@ } } } + /*= Titlebar Container Size at maximized #384 ================================*/ + @supports -moz-bool-pref("userChrome.compatibility.os.windows_maximized") { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[tabsintitlebar][sizemode="maximized"] #titlebar { + /* -moz-default-appearance: -moz-window-titlebar */ + appearance: none !important; + padding-top: 8px; + } + } + } } /*= Others - Compatibility ===================================================*/ @supports -moz-bool-pref("userChrome.compatibility.panel_cutoff") { @@ -694,7 +707,6 @@ color: -moz-accent-color-foreground; background-color: -moz-accent-color; } - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { --toolbarbutton-icon-fill: currentColor; @@ -1225,10 +1237,11 @@ */ } - /* Fallback background */ + /* Fallback background - Set to Legacy. It will be removed Next update menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) { background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important; } + */ } /* Default theme color preservation */ :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), @@ -1250,6 +1263,29 @@ --panel-background: var(--menu-background-color) !important; } } + /*== Info Bar Color ==========================================================*/ + .container.infobar { + background-color: var(--urlbar-box-bgcolor); + } + + .notification-button { + background-color: var(--button-bgcolor); + } + .notification-button:hover { + background-color: var(--button-hover-bgcolor); + } + .notification-button:hover:active { + background-color: var(--button-active-bgcolor); + } + + html|button.ghost-button:not(.semi-transparent):enabled:hover { + background-color: var(--button-hover-bgcolor) !important; + } + + html|button.ghost-button:not(.semi-transparent):enabled:hover:active { + background-color: var(--in-content-button-background-active) !important; + } + /*== Bookmark Popup Color ====================================================*/ #editBMPanel_folderTree:-moz-lwtheme, #editBMPanel_tagsSelector:-moz-lwtheme { @@ -1338,7 +1374,6 @@ border: none !important; clip-path: inset(0 round var(--panel-border-radius)); } - #PopupAutoComplete > richlistbox { border-radius: var(--panel-border-radius) !important; background-color: var(--panel-bgcolor) !important; @@ -1356,7 +1391,6 @@ #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { fill: GrayText !important; } - #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { --panel-border-color: var(--panel-bgcolor); color: var(--arrowpanel-color, var(--in-content-page-color)) !important; @@ -1366,7 +1400,6 @@ border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ } - #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { background-color: var(--arrowpanel-dimmed-further, rgba(204, 204, 204, 0.5)) !important; @@ -1448,7 +1481,6 @@ #alertSettings > .button-box > .box-inherit { margin: -4px 4px 3px 0 !important; } - #alertSettings > .button-box > .box-inherit > .button-icon { padding: 1px; } @@ -1516,15 +1548,13 @@ 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 { + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ padding: 6px 13px !important; min-height: 28px !important; font-size: 0.95em !important; } - button.small { padding: 5px 11px !important; min-height: 24px !important; @@ -1536,15 +1566,6 @@ margin: 0 !important; } - button:-moz-focusring, - xul|menulist:-moz-focusring, - xul|checkbox:-moz-focusring > .checkbox-check, - xul|radio[focused="true"]:-moz-focusring { - box-shadow: none !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: 2px !important; - } - button:not([disabled="true"]):hover { background-color: var(--in-content-button-background-hover) !important; color: var(--in-content-button-text-color-hover) !important; @@ -1598,6 +1619,15 @@ color: var(--in-content-primary-button-text-color) !important; } } + button:-moz-focusring, + xul|menulist:-moz-focusring, + xul|checkbox:-moz-focusring > .checkbox-check, + xul|radio[focused="true"]:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + /*- Radio Button -----------------------------------------------------------*/ xul|radio { /* margin-inline-start: 0 !important; */ @@ -1608,27 +1638,18 @@ 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; + padding: 0 !important; + margin-inline: 0 6px !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; @@ -1640,11 +1661,18 @@ color-adjust: exact !important; } + xul|radio:not([disabled="true"]):hover > xul|*.radio-check { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check { + background-color: var(--in-content-button-background-active) !important; + } + xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check { background-color: var(--in-content-primary-button-background-hover) !important; color: var(--in-content-primary-button-text-color-hover) !important; } - xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check { background-color: var(--in-content-primary-button-background-active) !important; } @@ -1659,11 +1687,6 @@ 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; } @@ -1675,30 +1698,31 @@ 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; + width: 16px !important; + height: 16px !important; border: 1px solid currentColor !important; border-radius: 2px !important; + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; margin-inline-end: 6px !important; + /* or 2px */ + margin-block: 2px !important; + /* From common.css */ } - .checkbox-check { - height: 16px !important; - width: 16px !important; + .checkbox-check[checked] { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + 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; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; } checkbox:not([disabled="true"]):hover > .checkbox-check { @@ -1707,34 +1731,18 @@ 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, @@ -1758,17 +1766,25 @@ 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] { + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] { color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; } } - /* From common.css */ - xul|*.checkbox-check { - margin-block: 2px !important; + .checkbox-icon[src] { + margin-inline-end: 2px !important; } + .checkbox-label { + margin: 1px 0 !important; + } + + checkbox[disabled="true"] { + opacity: 0.4 !important; + } + + /* From common.css */ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px !important; } @@ -1784,25 +1800,20 @@ 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; @@ -1820,11 +1831,10 @@ width: 12px !important; height: 12px !important; } - - /* dropmarker::part(icon) - * ::part is not apply chrome - */ dropmarker[exportparts="icon: dropmarker-icon"] { + /* dropmarker::part(icon) + * ::part is not apply chrome + */ list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; -moz-context-properties: fill !important; fill: currentColor !important; @@ -1865,13 +1875,11 @@ 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; @@ -2079,21 +2087,18 @@ padding: 8px !important; margin: 2px 4px !important; } - #locationTextBox:focus { border-color: transparent !important; outline: 2px solid var(--in-content-focus-outline-color) !important; outline-offset: -1px !important; /* Prevents antialising around the corners */ } - #locationTextBox:-moz-ui-invalid { border-color: transparent !important; outline: 2px solid var(--in-content-border-invalid) !important; outline-offset: -1px !important; /* Prevents antialising around the corners */ } - #locationTextBox:disabled { opacity: 0.4 !important; } @@ -2107,7 +2112,6 @@ -moz-context-properties: fill !important; fill: currentColor !important; } - #exceptiondialog:first-child > hbox > vbox > image { display: none !important; } @@ -2123,26 +2127,6 @@ border-radius: 8px !important; padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; margin: 4px !important; - } - - #viewGroup > radio:hover { - background-color: var(--in-content-button-background-hover) !important; - /* #E0E8F6; */ - } - - #viewGroup > radio[selected="true"] { - color: var(--in-content-button-text-color) !important; - /* SelectedItemText */ - background-color: var(--in-content-button-background-active) !important; - /* #C1D2EE; */ - } - - #viewGroup > radio { - color: var(--in-content-deemphasized-text) !important; - /* FieldText */ - } - - #viewGroup > radio { list-style-image: none !important; background-image: var(--viewgroup-image) !important; background-repeat: no-repeat; @@ -2150,6 +2134,18 @@ background-size: 32px !important; -moz-context-properties: fill !important; fill: currentColor !important; + color: var(--in-content-deemphasized-text) !important; + /* FieldText */ + } + #viewGroup > radio:hover { + background-color: var(--in-content-button-background-hover) !important; + /* #E0E8F6; */ + } + #viewGroup > radio[selected="true"] { + color: var(--in-content-button-text-color) !important; + /* SelectedItemText */ + background-color: var(--in-content-button-background-active) !important; + /* #C1D2EE; */ } #generalTab { @@ -2173,13 +2169,13 @@ margin: 0 !important; padding: 0 6px !important; } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { #viewGroup > radio > .radio-label-box { padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */ } } + #mainDeck input { color: var(--in-content-page-color) !important; } @@ -2204,7 +2200,6 @@ background: var(--in-content-table-header-background) !important; color: var(--in-content-table-header-color) !important; } - treecols > treecol, treecols > treecolpicker.treecol-image { -moz-appearance: none !important; @@ -2227,27 +2222,22 @@ treechildren::-moz-tree-row(odd) { background-color: var(--in-content-box-background-odd) !important; } - treechildren::-moz-tree-row(hover) { color: var(--in-content-item-hover-text) !important; background-color: var(--in-content-item-hover) !important; } - treechildren::-moz-tree-row(selected) { background-color: var(--in-content-item-selected) !important; } - treechildren::-moz-tree-cell { border-inline: 1px solid var(--in-content-table-border-color) !important; border-spacing: 0 !important; padding: 4px !important; margin: 0 !important; } - treechildren::-moz-tree-cell-text(hover) { color: var(--in-content-item-hover-text) !important; } - treechildren::-moz-tree-cell-text(selected) { font-weight: 600 !important; color: var(--in-content-item-selected-text) !important; @@ -2299,7 +2289,6 @@ --organizer-toolbar-field-focus-box-shadow: unset; --organizer-pane-field-border-color: ThreeDShadow; } - @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); @@ -2328,7 +2317,6 @@ --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --organizer-color: rgb(251, 251, 254); @@ -2344,6 +2332,7 @@ } } } + /*- Toolbar & Menus ------------------------------------------------------*/ #placesToolbar { appearance: none !important; @@ -2353,22 +2342,18 @@ padding: 4px !important; padding-inline-end: 6px !important; } - #placesToolbar > toolbarbutton { appearance: none !important; padding: 5px !important; border-radius: 4px !important; } - #placesToolbar > toolbarbutton[disabled] { opacity: 0.6 !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover:active { background-color: var(--organizer-selected-background) !important; } @@ -2383,7 +2368,6 @@ #placesMenu { margin-inline-start: 6px !important; } - #placesMenu > menu { appearance: none !important; color: var(--organizer-color) !important; @@ -2392,19 +2376,16 @@ padding-inline-start: 5px !important; margin-inline-end: 2px !important; } - #placesMenu > menu[_moz-menuactive="true"], #placesMenu > menu:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesMenu > menu:hover:active, #placesMenu > menu[open] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #placesMenu > menu > .menubar-text { margin-block: 0 !important; /* override menu.css */ @@ -2495,7 +2476,6 @@ background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; } - treecol:not([hideheader="true"], [sortable="false"]):hover:active, treecolpicker:hover:active { background-color: var(--organizer-selected-background) !important; @@ -2526,38 +2506,31 @@ treechildren::-moz-tree-row { background-color: transparent !important; } - treechildren::-moz-tree-row(hover) { background-color: var(--organizer-hover-background) !important; } - treechildren::-moz-tree-row(selected) { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; border: 1px solid transparent !important; } - treechildren::-moz-tree-image(hover), treechildren::-moz-tree-twisty(hover), treechildren::-moz-tree-cell-text(hover) { color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-image(selected), treechildren::-moz-tree-twisty(selected), treechildren::-moz-tree-cell-text(selected) { color: var(--organizer-selected-color) !important; } - treechildren::-moz-tree-separator { height: 1px !important; border-color: var(--organizer-separator-color) !important; } - treechildren::-moz-tree-separator(hover) { border-color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-separator(selected) { border-color: var(--organizer-selected-color) !important; } @@ -2581,36 +2554,34 @@ border-radius: 4px !important; color: var(--organizer-color) !important; background-color: var(--organizer-content-background) !important; - list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); -moz-context-properties: fill !important; fill: currentColor !important; } - #editBookmarkPanelRows .expander-up:hover, #editBookmarkPanelRows .expander-down:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBookmarkPanelRows .expander-up:hover:active, #editBookmarkPanelRows .expander-down:hover:active { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #editBookmarkPanelRows .expander-up:focus-visible, #editBookmarkPanelRows .expander-down:focus-visible { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } + #editBookmarkPanelRows .expander-up > .button-box, + #editBookmarkPanelRows .expander-down > .button-box { + padding: 0 !important; + } #editBookmarkPanelRows .expander-up { list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); } - - #editBookmarkPanelRows .expander-up > .button-box, - #editBookmarkPanelRows .expander-down > .button-box { - padding: 0 !important; + #editBookmarkPanelRows .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); } #places input { @@ -2621,12 +2592,10 @@ min-height: 20px !important; padding-inline: 4px !important; } - #places input:focus { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } - #places input:not(:read-write):focus { outline: none !important; } @@ -2643,16 +2612,13 @@ border: 1px solid var(--organizer-border-color) !important; border-radius: 4px !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { border: 1px solid transparent !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; @@ -5844,7 +5810,7 @@ list-style-image: url("../icons/window-dev-tools.svg"); } - /* Browser Content Toolbaox - */ + /* Browser Content Toolbox */ #appmenu-developer-tools-view .subviewbutton:nth-child(5), #PanelUI-developer-tools-view .subviewbutton:nth-child(5) { list-style-image: url("../icons/command-frames.svg"); @@ -5954,7 +5920,7 @@ } #allTabsMenu-hiddenTabsButton { - list-style-image: url("../icons/password-hide.svg"); + list-style-image: url("../icons/eye-hide.svg"); } #allTabsMenu-containerTabsView .subviewbutton:last-child { @@ -5980,6 +5946,14 @@ display: -moz-box !important; } } + /* BMB_bookmarksToolbarPopup */ + #BMB_viewBookmarksToolbar[data-l10n-args='{"isVisible":true}'] { + --menuitem-image: url("../icons/eye-hide.svg"); + } + #BMB_viewBookmarksToolbar[data-l10n-args='{"isVisible":false}'] { + --menuitem-image: url("../icons/eye-show.svg"); + } + /*= protections-popup ========================================================*/ #protections-popup-settings-button > .protections-popup-settings-icon, #protections-popup-show-report-button > .protections-popup-show-report-icon { @@ -6045,30 +6019,31 @@ } /** Menu - Icons Layout *******************************************************/ @supports -moz-bool-pref("userChrome.icon.menu") { - menupopup menuitem:not([type="checkbox"], [type="radio"]), - menupopup menu:not([type="checkbox"], [type="radio"]), + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]), #main-menubar > menu { -moz-appearance: none !important; /* Linux: menulist */ } /* Icon */ - :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, + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) + > menuitem, .openintabs-menuitem, - #blockedPopupDontShowMessage { + #blockedPopupDontShowMessage, + #BMB_viewBookmarksToolbar { /* Color */ -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; @@ -6078,17 +6053,16 @@ background-image: var(--menuitem-image); } - /* For native context menus on macOS */ - @supports -moz-bool-pref("widget.macos.native-context-menus") { + /* For native context menus */ + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { :not(menu, #ContentSelectDropdown) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } + /* Padding */ :root { --context-menu-background-padding-default: 5px; @@ -6097,15 +6071,24 @@ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) + > menuitem, .openintabs-menuitem, - #blockedPopupDontShowMessage { + #blockedPopupDontShowMessage, + #BMB_viewBookmarksToolbar { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; } @@ -6117,17 +6100,14 @@ 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 */ } - @supports not -moz-bool-pref("userChrome.padding.global_menubar") { #main-menubar > menu { padding-block: 2px !important; @@ -6135,24 +6115,6 @@ } } /* Padding - Windows */ - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - /* Checkbox */ - :root { - --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); - } - - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem[type="checkbox"]:not([checked="true"]) - > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); - } - } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { :root { --context-menu-background-padding-default: 2px; @@ -6169,19 +6131,22 @@ (-moz-platform: windows-win8) { :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) + > menuitem, .openintabs-menuitem, - #blockedPopupDontShowMessage { + #blockedPopupDontShowMessage, + #BMB_viewBookmarksToolbar { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: 0 !important; } @@ -6198,19 +6163,22 @@ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) + > menuitem, .openintabs-menuitem, - #blockedPopupDontShowMessage { + #blockedPopupDontShowMessage, + #BMB_viewBookmarksToolbar { padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } @@ -6235,32 +6203,29 @@ /* context menu width */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menu:not(.menu-iconic, .in-menulist, [checked="true"]), #blockedPopupDontShowMessage { padding-inline-end: var(--context-menu-background-padding) !important; } /* text position */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text, - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text { + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > .menu-text { padding-inline-start: var(--context-menu-mac-padding) !important; } /* Checkbox menuitem, None iconic menu */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"], + :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[checked="true"], :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) { padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; } /* Global Menu */ /* Disabled. some icons not appear - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked=true]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked=true]) { list-style-image: var(--menuitem-image, url("../icons/blank.svg")); } */ @@ -6419,6 +6384,12 @@ --menuitem-image: url("../icons/share.svg"); } + @supports -moz-bool-pref("userChrome.icon.menu.full") { + #context_shareTabURL, + menuitem.share-tab-url-item { + --menuitem-image: url("../icons/share.svg"); + } + } #context_reopenInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } @@ -6463,14 +6434,20 @@ --menuitem-image: url("chrome://browser/skin/pin-12.svg"); } - .toolbar-context-autohide-downloads-button { - --menuitem-image: url("../icons/password-hide.svg"); + #toolbar-context-autohide-downloads-button { + /* checkbox */ + --menuitem-image: url("../icons/eye-tracking-off.svg"); } .customize-context-removeFromToolbar { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } + #toolbar-context-always-open-downloads-panel { + /* checkbox */ + --menuitem-image: url("../icons/drawer-arrow-download.svg"); + } + #toolbar-context-openANewTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } @@ -6495,7 +6472,7 @@ #toggle_toolbar-menubar { /* checkbox */ - /* --menuitem-image: url("../icons/calendar-agenda.svg"); */ + --menuitem-image: url("../icons/calendar-agenda.svg"); } #toggle_PersonalToolbar { @@ -6507,6 +6484,15 @@ --menuitem-image: url("chrome://browser/skin/customize.svg"); } + .fullscreen-context-autohide { + /* checkbox */ + --menuitem-image: url("../icons/eye-tracking-off.svg"); + } + + #toolbar-context-menu > menuitem[data-l10n-id="full-screen-exit"] { + --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); + } + /*= contentAreaContextMenu ===================================================*/ #context-viewsource-goToLine { --menuitem-image: url("../icons/text-number-format.svg"); @@ -6514,12 +6500,12 @@ #context-viewsource-wrapLongLines { /* checkbox */ - /* --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); */ + --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); } #context-viewsource-highlightSyntax { /* checkbox */ - /* --menuitem-image: url("../icons/code.svg"); */ + --menuitem-image: url("../icons/code.svg"); } #spell-no-suggestions { @@ -6604,7 +6590,7 @@ #context-media-loop { /* checkbox */ - /* --menuitem-image: url("../icons/arrow-repeat-all.svg"); */ + --menuitem-image: url("../icons/arrow-repeat-all.svg"); } #context-leave-dom-fullscreen { @@ -6629,7 +6615,7 @@ #context-video-pictureinpicture { /* checkbox */ - /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */ + --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); } #context-reloadimage { @@ -6720,6 +6706,12 @@ --menuitem-image: url("../icons/undo.svg"); } + @supports -moz-bool-pref("userChrome.icon.menu.full") { + #context-redo { + --menuitem-image: url("../icons/redo.svg"); + } + } + #context-cut { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } @@ -6763,6 +6755,7 @@ #spell-check-enabled { /* checkbox */ + --menuitem-image: url("../icons/text-proofing-tools.svg"); } #spell-add-dictionaries-main { @@ -6798,7 +6791,7 @@ /* iconic */ } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { #context-back { --menuitem-image: url("chrome://browser/skin/back.svg"); } @@ -6819,6 +6812,64 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } } + /*= downloadsContextMenu =====================================================*/ + .downloadPauseMenuItem { + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); + } + + .downloadResumeMenuItem { + --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); + } + + .downloadUnblockMenuItem { + --menuitem-image: url("../icons/checkmark-circle.svg"); + } + + .downloadUseSystemDefaultMenuItem { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + .downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/folder-globe.svg"); + } + + .downloadAlwaysOpenSimilarFilesMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/fluid.svg"); + } + + .downloadShowMenuItem { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + .downloadShowMenuItem { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem, + #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { + --menuitem-image: url("../icons/link-square.svg"); + } + #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem, + #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { + --menuitem-image: url("../icons/link.svg"); + } + + .downloadDeleteFileMenuItem { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + .downloadRemoveFromHistoryMenuItem { + --menuitem-image: url("../icons/eraser.svg"); + } + + #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], + #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { + --menuitem-image: url("../icons/broom.svg"); + } + /*= placeContext =============================================================*/ #placesContext_open { --menuitem-image: url("../icons/link-square.svg"); @@ -6835,6 +6886,10 @@ --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } + #placesContext_open\:newcontainertab { + --menuitem-image: url("../icons/container-openin-16.svg"); + } + #placesContext_open\:newwindow { --menuitem-image: url("chrome://browser/skin/window.svg"); } @@ -6880,10 +6935,12 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } + #placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); } @supports -moz-bool-pref("userChrome.icon.library") { + #placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("../icons/folder.svg"); } @@ -6903,7 +6960,7 @@ #show-other-bookmarks_PersonalToolbar { /* checkbox */ - /* --menuitem-image: url("../icons/star-line-horizontal.svg"); */ + --menuitem-image: url("../icons/star-line-horizontal.svg"); } #placesContext_showAllBookmarks { @@ -6931,6 +6988,7 @@ /*= autohide-context =========================================================*/ #autohide-context > menuitem[data-l10n-id="full-screen-autohide"] { /* checkbox */ + --menuitem-image: url("../icons/eye-tracking-off.svg"); } #autohide-context > menuitem[data-l10n-id="full-screen-exit"] { @@ -6946,8 +7004,7 @@ .pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } - - .pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem { + .pageActionContextMenuItem.extensionPinned.extensionUnpinned .removeExtensionItem { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } @@ -6977,57 +7034,7 @@ /*= downloads-button-autohide-panel ==========================================*/ #downloads-button-autohide-checkbox { /* checkbox */ - } - - /*= downloadsContextMenu =====================================================*/ - .downloadPauseMenuItem { - --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); - } - - .downloadResumeMenuItem { - --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); - } - - .downloadUnblockMenuItem { - --menuitem-image: url("../icons/checkmark-circle.svg"); - } - - .downloadUseSystemDefaultMenuItem { - --menuitem-image: url("chrome://browser/skin/open.svg"); - } - - .downloadAlwaysUseSystemDefaultMenuItem { - /* checkbox */ - } - - .downloadShowMenuItem { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - .downloadShowMenuItem { - --menuitem-image: url("../icons/folder.svg"); - } - } - - #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { - --menuitem-image: url("../icons/link-square.svg"); - } - - #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { - --menuitem-image: url("../icons/link.svg"); - } - - .downloadDeleteFileMenuItem { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - .downloadRemoveFromHistoryMenuItem { - --menuitem-image: url("../icons/eraser.svg"); - } - - #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], - #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { - --menuitem-image: url("../icons/broom.svg"); + --menuitem-image: url("../icons/eye-tracking-off.svg"); } /*= SyncedTabsSidebarContext =================================================*/ @@ -7101,6 +7108,12 @@ --menuitem-image: url("../icons/undo.svg"); } + @supports -moz-bool-pref("userChrome.icon.menu.full") { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { + --menuitem-image: url("../icons/redo.svg"); + } + } + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } @@ -7127,6 +7140,12 @@ --menuitem-image: url("../icons/undo.svg"); } + @supports -moz-bool-pref("userChrome.icon.menu.full") { + .textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] { + --menuitem-image: url("../icons/redo.svg"); + } + } + .textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } @@ -7153,38 +7172,25 @@ } /*= context_sendTabToDevicePopupMenu =========================================*/ - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="phone"] { + .sync-menuitem.sendtab-target[clientType="phone"] { --menuitem-image: url("chrome://browser/skin/device-phone.svg"); } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="tablet"] { + .sync-menuitem.sendtab-target[clientType="tablet"] { --menuitem-image: url("chrome://browser/skin/device-tablet.svg"); } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="desktop"] { + .sync-menuitem.sendtab-target[clientType="desktop"] { --menuitem-image: url("chrome://browser/skin/device-desktop.svg"); } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="tv"] { + .sync-menuitem.sendtab-target[clientType="tv"] { --menuitem-image: url("chrome://browser/skin/device-tv.svg"); } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="vr"] { + .sync-menuitem.sendtab-target[clientType="vr"] { --menuitem-image: url("chrome://browser/skin/device-vr.svg"); } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType=""] { + .sync-menuitem.sendtab-target[clientType=""] { --menuitem-image: url("../icons/send-to-device.svg"); } - - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target:not([clientType]) { + .sync-menuitem.sendtab-target:not([clientType]) { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } } @@ -7225,6 +7231,10 @@ --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } + #menu_newUserContext { + --menuitem-image: url("../icons/container-openin-16.svg"); + } + #menu_newNavigator { --menuitem-image: url("chrome://browser/skin/window.svg"); } @@ -7253,6 +7263,11 @@ --menuitem-image: url("chrome://browser/skin/import.svg"); } + #goOfflineMenuitem { + /* checkbox */ + --menuitem-image: url("../icons/plug-disconnected.svg"); + } + #menu_FileQuitItem { --menuitem-image: url("../icons/quit.svg"); } @@ -7267,6 +7282,12 @@ --menuitem-image: url("../icons/undo.svg"); } + @supports -moz-bool-pref("userChrome.icon.menu.full") { + #menu_redo { + --menuitem-image: url("../icons/redo.svg"); + } + } + #menu_cut { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } @@ -7317,6 +7338,7 @@ } #fullScreenItem { + /* checkbox */ --menuitem-image: url("chrome://browser/skin/fullscreen.svg"); } @@ -7324,6 +7346,10 @@ --menuitem-image: url("chrome://browser/skin/reader-mode.svg"); } + #menu_showAllTabs { + --menuitem-image: url("../icons/tab.svg"); + } + #documentDirection-swap { --menuitem-image: url("../icons/text-direction-horizontal-ltr.svg"); } @@ -7363,6 +7389,10 @@ --menuitem-image: url("../icons/restore-session.svg"); } + #hiddenTabsMenu { + --menuitem-image: url("../icons/eye-hide.svg"); + } + #historyUndoMenu { --menuitem-image: url("chrome://browser/skin/tab.svg"); } @@ -7421,6 +7451,11 @@ } /* menuWebDeveloperPopup sub menu */ + #menu_devToolbox { + /* checkbox */ + --menuitem-image: url("../icons/developer.svg"); + } + #menu_taskManager { --menuitem-image: url("../icons/performance.svg"); } @@ -7441,6 +7476,16 @@ --menuitem-image: url("chrome://devtools/skin/images/command-console.svg"); } + #menu_responsiveUI { + /* checkbox */ + --menuitem-image: url("../icons/command-responsivemode.svg"); + } + + #menu_eyedropper { + /* checkbox */ + --menuitem-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); + } + #menu_pageSource { --menuitem-image: url("../icons/document-search.svg"); } @@ -7587,11 +7632,9 @@ /* This button needs to align with the tree above it. */ margin-inline-start: 4px; } - #editBMPanel_newFolderButton:hover { background-color: var(--button-hover-bgcolor); } - #editBMPanel_newFolderButton:hover:active { background-color: var(--button-active-bgcolor); } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css index 371e4458..b346bde5 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css +++ b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css @@ -4,18 +4,19 @@ /* Control Bar Size */ @supports -moz-bool-pref("userContent.player.size") { #controlsContainer { - --button-size: 32px !important; - /* Original: 30px */ --controlBar-height: 40px; /* Original: 40px, Replace to this value */ } - #controlsContainer .touch { --button-size: 48px !important; /* Original: 40px */ --controlBar-height: 52px; /* Original: 52px */ } + #controlsContainer .controlBar { + height: var(--controlBar-height) !important; + /* Original: 40px */ + } .videocontrols[inDOMFullscreen] #controlsContainer { --button-size: 64px !important; @@ -27,19 +28,12 @@ --controlBar-height: 64px; /* Original: 40px */ } - .videocontrols[inDOMFullscreen] #controlsContainer .touch { --button-size: 72px !important; /* Original: 40px */ --controlBar-height: 64px; /* Original: 52px */ } - - #controlsContainer .controlBar { - height: var(--controlBar-height) !important; - /* Original: 40px */ - } - .videocontrols[inDOMFullscreen] #controlsContainer .controlBar { padding-bottom: 8px !important; } @@ -58,12 +52,6 @@ box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3); /* Or: 0 2px 15px rgba(0,0,0,.1); */ } - - video { - --duration-color: #eee; - --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85)); - } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { audio { --box-shadow1: rgba(249, 249, 250, 0.12); @@ -71,6 +59,11 @@ --box-shadow3: rgba(82, 82, 94, 0.04); } } + + video { + --duration-color: #eee; + --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85)); + } @media (prefers-contrast) { video { --duration-color: #929292; @@ -79,10 +72,10 @@ /* Like Original */ } } + #controlsContainer .controlBar { background: var(--media-background) !important; } - #controlsContainer .duration { color: var(--duration-color) !important; /* Original: #929292 */ @@ -163,7 +156,6 @@ padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */ } - #controlsContainer .scrubberStack { /* Vertical */ order: var(--scrubberStack-order); @@ -174,7 +166,6 @@ width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); margin-inline: var(--scrubberStack-margin-inline) !important; } - #controlsContainer .positionDurationBox { flex-grow: var(--positionDurationBox-flex-grow); margin-left: var(--positionDurationBox-margin-left); @@ -194,7 +185,6 @@ #controlsContainer .fullscreenButton { background-image: url("../icons/enter-fullscreen.svg") !important; } - #controlsContainer .fullscreenButton[fullscreened] { background-image: url("../icons/exit-fullscreen.svg") !important; } @@ -211,11 +201,9 @@ cursor: pointer; opacity: 0.65 !important; } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay { opacity: 0.85 !important; } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover { opacity: 1 !important; fill: #48a0f7 !important; @@ -230,13 +218,11 @@ transition: transform 350ms ease; opacity: 1 !important; } - #controlsContainer .controlBar[hidden] { transform: translateY(100%); transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important; opacity: 0 !important; } - #controlsContainer .controlBar[hidden] .progressBar, #controlsContainer .controlBar[hidden] .bufferBar { display: unset !important; @@ -291,7 +277,6 @@ .top-site-outer .tile { overflow: hidden; } - .top-site-outer .tile .icon-wrapper { width: 100% !important; /* Original: 48px */ @@ -313,7 +298,6 @@ button.close-button { transition: background 1.5s var(--animation-easing-function); } - .top-site-outer:hover, #searchSubmit:hover, button.icon:hover, @@ -346,7 +330,6 @@ display: flex; flex-wrap: wrap; } - .body-wrapper.on > .discovery-stream.ds-layout { flex-basis: 100%; } @@ -369,7 +352,6 @@ --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { #root { /* Default Dark Mode */ @@ -377,6 +359,7 @@ /* 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); @@ -433,18 +416,15 @@ .contentSearchSuggestionTable .contentSearchSettingsButton:hover { color: var(--newtab-text-primary-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, .contentSearchSuggestionTable .contentSearchSettingsButton:hover, .contentSearchSuggestionTable .contentSearchOneOffItem.selected { background: var(--newtab-element-hover-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, .contentSearchSuggestionTable .contentSearchOneOffItem:active { background: var(--newtab-element-active-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { fill: var(--newtab-icon-secondary-color) !important; } @@ -560,6 +540,7 @@ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @supports -moz-bool-pref("userContent.page.proton_color") { @-moz-document url-prefix("about:"), + url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("https://addons.mozilla.org"), url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), @@ -786,13 +767,16 @@ /* Basic */ .Page-content, .SecondaryHero, - body:not(.developer-hub):not(.statistics), + body, main[aria-label="Content"] { color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; } /* Text */ + input, + textarea, + select, .AutoSearchInput-query, .AutoSearchInput-suggestions-list, .Page-content h1, @@ -801,6 +785,7 @@ .Home-SubjectShelf-link:link, .Home-SubjectShelf-link:visited, .DropdownMenuItem-link a, + .DropdownMenuItem-link button, .Select, .Badge, .Notice-generic, @@ -826,6 +811,7 @@ .SearchResult:hover .SearchResult-link, .Home-SubjectShelf-link:is(:active, :focus, :hover), .DropdownMenuItem-link a:is(:active, :focus, :hover), + .DropdownMenuItem-link button: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), @@ -842,6 +828,7 @@ .AddonTitle a, .TooltipMenu-opener, .LanguageTools .Card-contents a, + .Button--primary, .blog-entry-read-more-link, .blogpost-nav-next.blogpost-nav-no-prev:hover p, .blogpost-content-wrapper p a, @@ -883,12 +870,16 @@ } /* Background */ - .Button--action { + .Button--action, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button, + .DevHub-MyAddons-item-buttons-submit .Button { color: var(--in-content-primary-button-text-color) !important; background: var(--in-content-primary-button-background) !important; } + select, .Select, + .Button--primary, .Button--neutral, .Button--neutral:link, .Notice-button, @@ -896,6 +887,7 @@ background-color: var(--in-content-button-background) !important; } + .Button--primary:hover, .Button--neutral.Button--micro:not(.Button--disabled):hover, .Button--neutral:not(.Button--disabled):hover, .Notice-button:hover { @@ -903,7 +895,9 @@ } .Button--action.Button--micro:not(.Button--disabled):hover, - .Button--action:not(.Button--disabled):hover { + .Button--action:not(.Button--disabled):hover, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button:hover, + .DevHub-MyAddons-item-buttons-submit .Button:hover { background: var(--in-content-primary-button-background-hover) !important; } @@ -911,6 +905,8 @@ background: linear-gradient(rgba(255, 255, 255, 0), var(--in-content-table-background)) !important; } + input, + textarea, .AutoSearchInput-query, .AutoSearchInput-suggestions-list, .SecondaryHero-module, @@ -981,15 +977,30 @@ box-shadow: 0 0 2px var(--in-content-border-color) !important; } + input, + textarea, + select { + border-color: var(--in-content-box-border-color) !important; + } + + .UserProfileEdit input:disabled, + .UserProfileEdit textarea:disabled { + background-color: var(--in-content-box-background-odd) !important; + } + .AutoSearchInput-query { border: 1px solid var(--in-content-table-background) !important; } - .AutoSearchInput-query:is(:hover, :focus) { + .AutoSearchInput-query:is(:hover, :focus), + .UserProfileEditNotifications .UserProfileEditNotification-input:checked ~ .UserProfileEditNotification-checkbox { border-color: var(--in-content-primary-button-background) !important; } - .AutoSearchInput-query:focus { + .UserProfileEdit input:focus, + .UserProfileEdit textarea:focus, + .AutoSearchInput-query:focus, + .UserProfileEditNotifications .UserProfileEditNotification-input:focus ~ .UserProfileEditNotification-checkbox { box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; } @@ -1012,6 +1023,12 @@ } /* /developers/ */ + .DevHub-Navigation-Logo > .Logo::before { + -moz-context-properties: fill !important; + fill: var(--in-content-primary-button-background) !important; + background-image: url("../icons/addons-logo.svg") !important; + } + .DevHub-Navigation, .DevHub-submit-addon, .DevHub-get-involved, @@ -1020,12 +1037,16 @@ color: var(--in-content-page-color) !important; } - .DevHub-Footer, - .DevHub-callout-box { + .DevHub-Footer { background: var(--in-content-box-background) !important; color: var(--in-content-page-color) !important; } + .DevHub-callout-box { + background: var(--in-content-box-background-odd) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-Navigation.scheme-light ul li a, .DevHub-Footer-sections-header, .DevHub-Footer-section h4, @@ -1034,12 +1055,291 @@ color: var(--in-content-page-color) !important; } + .DevHub-content-copy p, + .DevHub-callout-box p { + color: var(--in-content-deemphasized-text) !important; + } + .DevHub-Banner a, .DevHub-Footer a, .DevHub-MyAddons-list a, - .DevHub-MyAddons-item-buttons-all { + .DevHub-MyAddons-item-buttons-all, + .DevHub-content-copy a, + .DevHub-callout-box a { color: var(--in-content-link-color) !important; } + + body:is(.developer-hub, .statistics) { + /* Elements */ + /* .developer-hub */ + /* Text */ + /* .developer-hub */ + /* Background */ + /* Border */ + /* Othres */ + } + body:is(.developer-hub, .statistics) #main-wrapper, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li:hover::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a, + body:is(.developer-hub, .statistics) .menu-nav em, + body:is(.developer-hub, .statistics) .primary, + body:is(.developer-hub, .statistics) .secondary, + body:is(.developer-hub, .statistics) .dashboard .listing .item { + background: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a:hover, + body:is(.developer-hub, .statistics) .install-note, + body:is(.developer-hub, .statistics) .modal, + body:is(.developer-hub, .statistics) .popup { + background: var(--in-content-box-background-odd) !important; + } + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul { + box-shadow: 0 0 3px var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #footer { + background: linear-gradient( + to bottom, + var(--in-content-page-background) 0, + var(--in-content-page-background) 123px, + #0c99d5 123px, + #0c99d5 200px, + var(--in-content-page-background) 200px, + rgba(12, 153, 213, 0) 400px + ) !important; + } + body:is(.developer-hub, .statistics) #homepage h2, + body:is(.developer-hub, .statistics) header h2, + body:is(.developer-hub, .statistics) .primary h2, + body:is(.developer-hub, .statistics) h1, + body:is(.developer-hub, .statistics) hgroup h2.addon, + body:is(.developer-hub, .statistics) hgroup h2.collection, + body:is(.developer-hub, .statistics) h3, + body:is(.developer-hub, .statistics) .results h4, + body:is(.developer-hub, .statistics) .dashboard .listing .item, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover h5, + body:is(.developer-hub, .statistics) .secondary .addon-status, + body:is(.developer-hub, .statistics) .secondary .addon-status .addon-details li.addon-listed-status, + body:is(.developer-hub, .statistics) #refine-results h5, + body:is(.developer-hub, .statistics) .island.criteria li, + body:is(.developer-hub, .statistics) .two-up div { + color: var(--in-content-page-color) !important; + } + body:is(.developer-hub, .statistics) .item-actions h5, + body:is(.developer-hub, .statistics) .item-actions > ul, + body:is(.developer-hub, .statistics) .item-actions > ul > li, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-actions a, + body:is(.developer-hub, .statistics) .edit-media-details, + body:is(.developer-hub, .statistics) .devhub-form table th, + body:is(.developer-hub, .statistics) #recent-activity .listing .item .timestamp, + body:is(.developer-hub, .statistics) #upload-file .upload-status #uploadstatus, + body:is(.developer-hub, .statistics) #addon-validator-suite, + body:is(.developer-hub, .statistics) #addon-validator-suite .msg > *, + body:is(.developer-hub, .statistics) .island.criteria li a.inactive { + color: var(--in-content-deemphasized-text) !important; + } + body:is(.developer-hub, .statistics) section[role="main"] a, + body:is(.developer-hub, .statistics) header a, + body:is(.developer-hub, .statistics) .more-info, + body:is(.developer-hub, .statistics) .primary a, + body:is(.developer-hub, .statistics) .secondary a, + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) .popup a, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover .item-actions a, + body:is(.developer-hub, .statistics) #upload-status-results.status-pass strong, + body:is(.developer-hub, .statistics) #addon-validator-suite a, + body:is(.developer-hub, .statistics) #create-addon a, + body:is(.developer-hub, .statistics) .html-support { + color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a { + color: var(--in-content-link-color-hover) !important; + } + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .downloads, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .price, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .users { + color: var(--green-60) !important; + } + body:is(.developer-hub, .statistics) .status-admin-disabled b, + body:is(.developer-hub, .statistics) .status-disabled b, + body:is(.developer-hub, .statistics) .status-incomplete b, + body:is(.developer-hub, .statistics) .status-purgatory b { + color: var(--red-60) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a.active, + body:is(.developer-hub, .statistics) .island.criteria li.selected a { + color: var(--orange-50) !important; + } + body:is(.developer-hub, .statistics) .secondary .addon-status, + body:is(.developer-hub, .statistics) .devhub-form .item, + body:is(.developer-hub, .statistics) #icons_default, + body:is(.developer-hub, .statistics) .listing .item, + body:is(.developer-hub, .statistics) .object-lead, + body:is(.developer-hub, .statistics) #addon-validator-suite .results .tier-results, + body:is(.developer-hub, .statistics) #addon-validator-suite .suite, + body:is(.developer-hub, .statistics) #addon-validator-suite .suite-container { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-box-background) !important; + } + body:is(.developer-hub, .statistics) .highlight, + body:is(.developer-hub, .statistics) .listing-footer, + body:is(.developer-hub, .statistics) .tab-wrapper .fm-control { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-info-background) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) #head-chart { + background: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) #head-chart rect { + fill: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) #head-chart text { + fill: var(--in-content-deemphasized-text) !important; + } + body:is(.developer-hub, .statistics) #head-chart .highcharts-legend .highcharts-legend-item:hover text { + fill: var(--in-content-page-color) !important; + paint-order: stroke !important; + stroke: var(--in-content-page-color) !important; + stroke-width: 0.4px !important; + stroke-linecap: butt !important; + stroke-linejoin: miter !important; + } + body:is(.developer-hub, .statistics) + #head-chart + .highcharts-legend + .highcharts-legend-item + path[stroke="#CCC"] + ~ text { + fill: #ccc !important; + } + body:is(.developer-hub, .statistics) #icons_default li a:hover, + body:is(.developer-hub, .statistics) #side-nav .active a, + body:is(.developer-hub, .statistics) span.tip, + body:is(.developer-hub, .statistics) .addon-submission-process .tip, + body:is(.developer-hub, .statistics) .devhub-form .tip, + body:is(.developer-hub, .statistics) a.remove, + body:is(.developer-hub, .statistics) span.remove, + body:is(.developer-hub, .statistics) ul.errorlist li span.tip { + background-color: var(--in-content-box-info-background) !important; + } + body:is(.developer-hub, .statistics) a.remove:hover, + body:is(.developer-hub, .statistics) span.tip:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) .devhub-sidebar, + body:is(.developer-hub, .statistics) .devhub-sidebar div.item, + body:is(.developer-hub, .statistics) .devhub-form .listing-footer { + border-color: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #background-wrapper, + body:is(.developer-hub, .statistics) #main-wrapper { + border-color: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) .item-actions a.more-actions:hover:after, + body:is(.developer-hub, .statistics) .item-actions button.link.more-actions:hover:after, + body:is(.developer-hub, .statistics) #change-locale::after { + border-top-color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) install-note::after, + body:is(.developer-hub, .statistics) .popup::after { + border-bottom-color: var(--in-content-box-background) !important; + } + body:is(.developer-hub, .statistics) .install-note::before, + body:is(.developer-hub, .statistics) .popup::before { + border-bottom-color: grey !important; + } + body:is(.developer-hub, .statistics) #refine-results, + body:is(.developer-hub, .statistics) .other-categories, + body:is(.developer-hub, .statistics) .versions .primary > .warning { + border-color: transparent !important; + } + body:is(.developer-hub, .statistics) .results { + border-color: var(--in-content-box-background-odd) !important; + background: transparent !important; + } + body:is(.developer-hub, .statistics) .results-inner { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #promos .view-button a, + body:is(.developer-hub, .statistics) #upload-file-finish.button, + body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent, + body:is(.developer-hub, .statistics) .button, + body:is(.developer-hub, .statistics) .cta a.button:link, + body:is(.developer-hub, .statistics) .cta a.button:visited, + body:is(.developer-hub, .statistics) .linux .button.linux, + body:is(.developer-hub, .statistics) .mac .button.mac, + body:is(.developer-hub, .statistics) .other .button.bsd, + body:is(.developer-hub, .statistics) .other .button.solaris, + body:is(.developer-hub, .statistics) .sidebar a.button, + body:is(.developer-hub, .statistics) .sidebar button, + body:is(.developer-hub, .statistics) .theme .choices button, + body:is(.developer-hub, .statistics) .theme-queue a.button, + body:is(.developer-hub, .statistics) .theme-queue button, + body:is(.developer-hub, .statistics) .windows .button.windows, + body:is(.developer-hub, .statistics) a.button:link, + body:is(.developer-hub, .statistics) a.button:visited, + body:is(.developer-hub, .statistics) a.delete-button.delete-addon, + body:is(.developer-hub, .statistics) button, + body:is(.developer-hub, .statistics) button.button, + body:is(.developer-hub, .statistics) input:not(.upvotes):not(.downvotes)[type="submit"] { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + body:is(.developer-hub, .statistics) #promos .view-button a:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) #upload-file-finish.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .cta a.button:link:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .cta a.button:visited:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .linux .button.linux:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .mac .button.mac:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .other .button.bsd:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .other .button.solaris:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .sidebar a.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .sidebar button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme .choices button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme-queue a.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme-queue button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .windows .button.windows:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.button:link:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.button:visited:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.delete-button.delete-addon:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) button.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) + input:not(.upvotes):not(.downvotes)[type="submit"]:is(.selected, :focus, :hover) { + background: var(--in-content-primary-button-background-hover) !important; + } + body:is(.developer-hub, .statistics) .edit_with_prefix span, + body:is(.developer-hub, .statistics) .edit_with_suffix span { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-box-background-odd) !important; + color: var(--in-content-deemphasized-text) !important; + padding-block: 3px !important; + cursor: not-allowed; + } + body:is(.developer-hub, .statistics) .devhub-form .item_wrapper input[type="email"] { + appearance: none !important; + padding: 2px 5px; + border: 1px solid; + } + body:is(.developer-hub, .statistics) #addon-validator-suite .suite-summary { + color: var(--in-content-deemphasized-text) !important; + background: var(--in-content-button-background) !important; + border-top-color: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #addon-validator-suite .context { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-button-background) !important; + background: var(--in-content-table-background) !important; + } } /*= Support.org ============================================================*/ @-moz-document url-prefix("https://support.mozilla.org") @@ -1676,17 +1976,13 @@ @supports -moz-bool-pref("userContent.page.field_border") { @media (prefers-reduced-motion: no-preference) { @-moz-document url-prefix("about:") { + html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover, + html|textarea:hover, xul|search-textbox:hover { border-color: var(--in-content-focus-outline-color) !important; transition: border-color 0.5s var(--animation-easing-function); } } - @-moz-document url-prefix("about:config") { - #about-config-search:hover { - border-color: var(--in-content-focus-outline-color) !important; - transition: border-color 0.5s var(--animation-easing-function); - } - } } } /*= View Source ==============================================================*/ @@ -2016,315 +2312,6 @@ transform: scaleX(-1) !important; } } - /*= Context Menu ===========================================================*/ - @supports -moz-bool-pref("userChrome.icon.context_menu") { - menupopup menuitem:not([type="checkbox"], [type="radio"]), - menupopup menu:not([type="checkbox"], [type="radio"]), - #main-menubar > menu { - -moz-appearance: none !important; - /* Linux: menulist */ - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - /* Color */ - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - /* Layout */ - background-size: 16px !important; - background-repeat: no-repeat !important; - background-image: var(--menuitem-image); - } - - /* For native context menus on macOS */ - @supports -moz-bool-pref("widget.macos.native-context-menus") { - :not(menu, #ContentSelectDropdown) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { - list-style-image: var(--menuitem-image) !important; - } - } - /* Padding */ - :root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; - } - - /* Padding - Windows */ - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - /* Checkbox */ - :root { - --context-menu-text-padding: calc( - var(--menu-padding) + var(--context-menu-background-padding-default) + 16px - ); - } - - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem[type="checkbox"][checked="false"] - > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); - } - } - @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - :root { - --context-menu-background-padding-default: 2px; - } - } - @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - :root { - --context-menu-background-padding-default: 3px; - } - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8) { - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; - } - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root { - --context-menu-background-padding: 1em; - --context-menu-text-padding: 24px; - /* 16px + 8px */ - --menu-background-padding-default: calc( - var(--context-menu-background-padding) + var(--context-menu-text-padding) - ); - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; - } - } - /* Padding - Linux */ - @media (-moz-gtk-csd-available) { - :root { - --context-menu-background-padding-default: 6px; - } - } - /* Padding - Mac */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --context-menu-background-padding-default: 10px; - --context-menu-mac-padding: 21px; - } - - /* context menu width */ - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { - padding-inline-end: var(--context-menu-background-padding) !important; - } - - /* text position */ - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text, - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text { - padding-inline-start: var(--context-menu-mac-padding) !important; - } - - /* Checkbox menuitem, None iconic menu */ - #placesContext menuitem[type="checkbox"], - #placesContext menu:not(.menu-iconic) { - padding-inline-start: calc( - var(--context-menu-background-padding) + var(--context-menu-mac-padding) - ) !important; - } - } - /* Icon lists */ - /*= placeContext =============================================================*/ - #placesContext_open { - --menuitem-image: url("../icons/link-square.svg"); - } - - #placesContext_openBookmarkContainer\:tabs, - #placesContext_openBookmarkLinks\:tabs { - --menuitem-image: url("../icons/movetowindow-16.svg"); - } - - #placesContext_open\:newtab, - #placesContext_openContainer\:tabs, - #placesContext_openLinks\:tabs { - --menuitem-image: url("chrome://browser/skin/new-tab.svg"); - } - - #placesContext_open\:newwindow { - --menuitem-image: url("chrome://browser/skin/window.svg"); - } - - #placesContext_open\:newprivatewindow { - --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); - } - - #placesContext_show_bookmark\:info, - #placesContext_show\:info, - #placesContext_show_folder\:info { - --menuitem-image: url("chrome://global/skin/icons/edit.svg"); - } - - #placesContext_deleteBookmark, - #placesContext_deleteFolder, - #placesContext_delete, - #placesContext_delete_history { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #placesContext_deleteHost { - --menuitem-image: url("../icons/eye-hide.svg"); - } - - #placesContext_sortBy\:name { - --menuitem-image: url("../icons/text-sort-ascending.svg"); - } - - #placesContext_cut { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #placesContext_copy { - --menuitem-image: url("../icons/edit-copy.svg"); - } - - #placesContext_paste_group { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #placesContext_new\:bookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #placesContext_new\:folder { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #placesContext_new\:folder { - --menuitem-image: url("../icons/folder.svg"); - } - } - - #placesContext_new\:separator { - --menuitem-image: url("../icons/vertical-line.svg"); - } - - #placesContext_paste { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #placesContext_createBookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #show-other-bookmarks_PersonalToolbar { - /* checkbox */ - /* --menuitem-image: url("../icons/star-line-horizontal.svg"); */ - } - - #placesContext_showAllBookmarks { - --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); - } - - .openintabs-menuitem { - --menuitem-image: url("../icons/movetowindow-16.svg"); - } - - /*= organizeButtonPopup ======================================================*/ - #newbookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #newfolder { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #newfolder { - --menuitem-image: url("../icons/folder.svg"); - } - } - - #newseparator { - --menuitem-image: url("../icons/vertical-line.svg"); - } - - #orgUndo { - --menuitem-image: url("../icons/undo.svg"); - } - - #orgCut { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #orgCopy { - --menuitem-image: url("../icons/edit-copy.svg"); - } - - #orgPaste { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #orgDelete { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #orgSelectAll { - --menuitem-image: url("../icons/select-all-on.svg"); - } - - #orgClose { - --menuitem-image: url("chrome://global/skin/icons/close.svg"); - } - - /*= viewMenuPopup ============================================================*/ - #viewColumns { - --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); - } - - #viewSort { - --menuitem-image: url("../icons/text-sort-ascending.svg"); - } - - /*= maintenanceButtonPopup ===================================================*/ - #backupBookmarks { - --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); - } - - #fileImport { - --menuitem-image: url("chrome://browser/skin/save.svg"); - } - - #fileExport { - --menuitem-image: url("chrome://browser/skin/open.svg"); - } - - #browserImport { - --menuitem-image: url("chrome://browser/skin/import.svg"); - } - } @media (-moz-gtk-csd-available) { /*= Layout Fixes =========================================================*/ menupopup menu { @@ -2360,7 +2347,6 @@ --organizer-toolbar-field-focus-box-shadow: unset; --organizer-pane-field-border-color: ThreeDShadow; } - @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); @@ -2389,7 +2375,6 @@ --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --organizer-color: rgb(251, 251, 254); @@ -2405,6 +2390,7 @@ } } } + /*- Toolbar & Menus ------------------------------------------------------*/ #placesToolbar { appearance: none !important; @@ -2414,22 +2400,18 @@ padding: 4px !important; padding-inline-end: 6px !important; } - #placesToolbar > toolbarbutton { appearance: none !important; padding: 5px !important; border-radius: 4px !important; } - #placesToolbar > toolbarbutton[disabled] { opacity: 0.6 !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover:active { background-color: var(--organizer-selected-background) !important; } @@ -2444,7 +2426,6 @@ #placesMenu { margin-inline-start: 6px !important; } - #placesMenu > menu { appearance: none !important; color: var(--organizer-color) !important; @@ -2453,19 +2434,16 @@ padding-inline-start: 5px !important; margin-inline-end: 2px !important; } - #placesMenu > menu[_moz-menuactive="true"], #placesMenu > menu:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesMenu > menu:hover:active, #placesMenu > menu[open] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #placesMenu > menu > .menubar-text { margin-block: 0 !important; /* override menu.css */ @@ -2556,7 +2534,6 @@ background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; } - treecol:not([hideheader="true"], [sortable="false"]):hover:active, treecolpicker:hover:active { background-color: var(--organizer-selected-background) !important; @@ -2587,38 +2564,31 @@ treechildren::-moz-tree-row { background-color: transparent !important; } - treechildren::-moz-tree-row(hover) { background-color: var(--organizer-hover-background) !important; } - treechildren::-moz-tree-row(selected) { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; border: 1px solid transparent !important; } - treechildren::-moz-tree-image(hover), treechildren::-moz-tree-twisty(hover), treechildren::-moz-tree-cell-text(hover) { color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-image(selected), treechildren::-moz-tree-twisty(selected), treechildren::-moz-tree-cell-text(selected) { color: var(--organizer-selected-color) !important; } - treechildren::-moz-tree-separator { height: 1px !important; border-color: var(--organizer-separator-color) !important; } - treechildren::-moz-tree-separator(hover) { border-color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-separator(selected) { border-color: var(--organizer-selected-color) !important; } @@ -2642,36 +2612,34 @@ border-radius: 4px !important; color: var(--organizer-color) !important; background-color: var(--organizer-content-background) !important; - list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); -moz-context-properties: fill !important; fill: currentColor !important; } - #editBookmarkPanelRows .expander-up:hover, #editBookmarkPanelRows .expander-down:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBookmarkPanelRows .expander-up:hover:active, #editBookmarkPanelRows .expander-down:hover:active { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #editBookmarkPanelRows .expander-up:focus-visible, #editBookmarkPanelRows .expander-down:focus-visible { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } + #editBookmarkPanelRows .expander-up > .button-box, + #editBookmarkPanelRows .expander-down > .button-box { + padding: 0 !important; + } #editBookmarkPanelRows .expander-up { list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); } - - #editBookmarkPanelRows .expander-up > .button-box, - #editBookmarkPanelRows .expander-down > .button-box { - padding: 0 !important; + #editBookmarkPanelRows .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); } #places input { @@ -2682,12 +2650,10 @@ min-height: 20px !important; padding-inline: 4px !important; } - #places input:focus { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } - #places input:not(:read-write):focus { outline: none !important; } @@ -2704,16 +2670,13 @@ border: 1px solid var(--organizer-border-color) !important; border-radius: 4px !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { border: 1px solid transparent !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; @@ -2724,32 +2687,21 @@ /* margin-inline-start: 0 !important; */ appearance: none !important; } - menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon { appearance: none !important; width: 16px !important; height: 16px !important; - padding: 0 !important; border: 1px solid var(--in-content-box-border-color) !important; border-radius: 100% !important; + padding: 0 !important; + margin-inline: 0 6px !important; margin-block: 2px !important; /* extend the vertical clicktarget */ - margin-inline: 0 6px !important; background-color: var(--in-content-button-background) !important; background-position: center !important; flex-shrink: 0 !important; /* avoid shrinking inside flex container */ } - - menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-hover) !important; - color: var(--in-content-button-text-color-hover) !important; - } - - menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-active) !important; - } - menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { -moz-context-properties: fill !important; fill: currentColor !important; @@ -2760,18 +2712,22 @@ /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; } - + menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-active) !important; + } menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon { background-color: var(--in-content-primary-button-background-hover) !important; color: var(--in-content-primary-button-text-color-hover) !important; } - menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon { background-color: var(--in-content-primary-button-background-active) !important; } - menuitem[type="radio"] > .menu-iconic-text { margin-inline: 0 8px !important; padding-inline-start: 0 !important; @@ -2781,10 +2737,6 @@ menuitem[type="radio"][disabled="true"], menuitem[type="checkbox"][disabled="true"] { color: inherit !important; - } - - menuitem[type="radio"][disabled="true"], - menuitem[type="checkbox"][disabled="true"] { opacity: 0.5 !important; } @@ -2795,67 +2747,49 @@ -moz-box-align: center !important; margin: 0px 2px !important; } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-inline-end: 2px !important; - } - - menuitem[type="checkbox"] > .menu-iconic-text { - margin: 1px 0 !important; - } - - menuitem[type="checkbox"][disabled="true"] { - opacity: 0.4 !important; - } - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { appearance: none !important; - color: var(--checkbox-border-color, ThreeDDarkShadow) !important; - background-color: var(--checkbox-unchecked-bgcolor, Field) !important; + width: 16px !important; + height: 16px !important; border: 1px solid currentColor !important; border-radius: 2px !important; + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; margin-inline-end: 6px !important; + /* or 2px */ + margin-block: 2px !important; + /* From common.css */ } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - height: 16px !important; - width: 16px !important; + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + 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; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; } - menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { background-color: var( --checkbox-unchecked-hover-bgcolor, color-mix(in srgb, -moz-accent-color 4%, Field) ) !important; } - menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { background-color: var( --checkbox-unchecked-active-bgcolor, color-mix(in srgb, -moz-accent-color 8%, Field) ) !important; } - - menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - border-color: var(--checkbox-checked-border-color, transparent) !important; - background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; - background-image: url("chrome://global/skin/icons/check.svg") !important; - background-position: center !important; - background-repeat: no-repeat !important; - -moz-context-properties: fill !important; - fill: currentColor !important; - color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; - } - menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { background-color: var( --checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, -moz-accent-color) ) !important; } - menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"] > .menu-iconic-icon { @@ -2864,23 +2798,19 @@ color-mix(in srgb, currentColor 25%, -moz-accent-color) ) !important; } - menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; outline-offset: var(--focus-outline-offset, 2px) !important; } - @media (prefers-contrast) { menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { /* color will set the border-color on the check due to how HCM works for in-content pages. */ color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; } - menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { color: var(--checkbox-checked-border-color, currentColor) !important; fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; } - menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"] > .menu-iconic-icon, @@ -2891,9 +2821,11 @@ fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; } } - /* From common.css */ - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-block: 2px !important; + menuitem[type="checkbox"] > .menu-iconic-text { + margin: 1px 0 !important; + } + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.4 !important; } /*- Menu Separtor --------------------------------------------------------*/ @@ -2903,10 +2835,424 @@ min-height: 0; border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); border-bottom: none; - margin: var(--panel-separator-margin, 6px); padding: 0; + margin: var(--panel-separator-margin, 6px); } } } } } +/** Menu - Icons Layout *******************************************************/ +@supports -moz-bool-pref("userChrome.icon.menu") { + @-moz-document url("chrome://browser/content/places/places.xhtml"), + url("about:downloads") { + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) { + -moz-appearance: none !important; + /* Linux: menulist */ + } + + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); + } + + /* For native context menus */ + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } + } + + /* Padding */ + :root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } + + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Padding - Windows */ + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; + } + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding: 24px; + /* 16px + 8px */ + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); + } + + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + 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; + } + + /* Contextmenu Checkbox Unset */ + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] { + margin-inline: 0 !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"] + > .menu-iconic-left + > .menu-iconic-icon { + margin-inline-end: 0 !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"]:not([checked="true"]) + > .menu-iconic-left + > .menu-iconic-icon { + border: none !important; + background-color: unset !important; + } + } + /* Padding - Mac */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } + + /* context menu width */ + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + padding-inline-end: var(--context-menu-background-padding) !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-text, + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-text { + /* text position */ + padding-inline-start: var(--context-menu-mac-padding) !important; + } + + /* Checkbox menuitem, None iconic menu */ + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[checked="true"], + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menu:not(.menu-iconic) { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + } + } + /*= Context Menu ===========================================================*/ + @supports -moz-bool-pref("userChrome.icon.context_menu") { + /* Icon lists */ + /*= downloadsContextMenu =====================================================*/ + .downloadPauseMenuItem { + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); + } + + .downloadResumeMenuItem { + --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); + } + + .downloadUnblockMenuItem { + --menuitem-image: url("../icons/checkmark-circle.svg"); + } + + .downloadUseSystemDefaultMenuItem { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + .downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/folder-globe.svg"); + } + + .downloadAlwaysOpenSimilarFilesMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/fluid.svg"); + } + + .downloadShowMenuItem { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + .downloadShowMenuItem { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem, + #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { + --menuitem-image: url("../icons/link-square.svg"); + } + #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem, + #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { + --menuitem-image: url("../icons/link.svg"); + } + + .downloadDeleteFileMenuItem { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + .downloadRemoveFromHistoryMenuItem { + --menuitem-image: url("../icons/eraser.svg"); + } + + #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], + #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { + --menuitem-image: url("../icons/broom.svg"); + } + + /*= placeContext =============================================================*/ + #placesContext_open { + --menuitem-image: url("../icons/link-square.svg"); + } + + #placesContext_openBookmarkContainer\:tabs, + #placesContext_openBookmarkLinks\:tabs { + --menuitem-image: url("../icons/movetowindow-16.svg"); + } + + #placesContext_open\:newtab, + #placesContext_openContainer\:tabs, + #placesContext_openLinks\:tabs { + --menuitem-image: url("chrome://browser/skin/new-tab.svg"); + } + + #placesContext_open\:newcontainertab { + --menuitem-image: url("../icons/container-openin-16.svg"); + } + + #placesContext_open\:newwindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); + } + + #placesContext_open\:newprivatewindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + + #placesContext_show_bookmark\:info, + #placesContext_show\:info, + #placesContext_show_folder\:info { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); + } + + #placesContext_deleteBookmark, + #placesContext_deleteFolder, + #placesContext_delete, + #placesContext_delete_history { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #placesContext_deleteHost { + --menuitem-image: url("../icons/eye-hide.svg"); + } + + #placesContext_sortBy\:name { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + + #placesContext_cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #placesContext_copy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #placesContext_paste_group { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #placesContext_new\:bookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #placesContext_showInFolder, + #placesContext_new\:folder { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #placesContext_showInFolder, + #placesContext_new\:folder { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #placesContext_new\:separator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + + #placesContext_paste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #placesContext_createBookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #show-other-bookmarks_PersonalToolbar { + /* checkbox */ + --menuitem-image: url("../icons/star-line-horizontal.svg"); + } + + #placesContext_showAllBookmarks { + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); + } + + .openintabs-menuitem { + --menuitem-image: url("../icons/movetowindow-16.svg"); + } + } + @supports -moz-bool-pref("userChrome.icon.global_menu") { + /*= organizeButtonPopup ======================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #newfolder { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #newfolder { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #newseparator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + + #orgUndo { + --menuitem-image: url("../icons/undo.svg"); + } + + #orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #orgCopy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #orgSelectAll { + --menuitem-image: url("../icons/select-all-on.svg"); + } + + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + /*= viewMenuPopup ============================================================*/ + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + + #viewSort { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + + /*= maintenanceButtonPopup ===================================================*/ + #backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); + } + + #fileImport { + --menuitem-image: url("chrome://browser/skin/save.svg"); + } + + #fileExport { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + } + } +} +/** Download Panel ************************************************************/ +@-moz-document url-prefix("about:downloads") { + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.decoration.download_panel") { + /* Accent Color for downloaded item */ + #downloadsListBox .download-state[exists] .downloadDetails { + color: var(--button-primary-bgcolor); + } + #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover { + color: var(--button-primary-hover-bgcolor); + } + + /* File moved or missing */ + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget { + text-decoration: line-through; + text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); + } + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { + filter: grayscale(100%) !important; + } + } + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/addons-logo.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/addons-logo.svg new file mode 100644 index 00000000..4c643af6 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/addons-logo.svg @@ -0,0 +1 @@ + diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/drawer-arrow-download.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/drawer-arrow-download.svg new file mode 100644 index 00000000..50060f13 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/drawer-arrow-download.svg @@ -0,0 +1,3 @@ + + + diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/eye-tracking-off.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/eye-tracking-off.svg new file mode 100644 index 00000000..9ce8bbf9 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/eye-tracking-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/fluid.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/fluid.svg new file mode 100644 index 00000000..2cffb706 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/fluid.svg @@ -0,0 +1,3 @@ + + + diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/folder-globe.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/folder-globe.svg new file mode 100644 index 00000000..65eb7e09 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/folder-globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/plug-disconnected.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/plug-disconnected.svg new file mode 100644 index 00000000..4d978ab7 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/plug-disconnected.svg @@ -0,0 +1,3 @@ + + + diff --git a/arch-config/.mozilla/firefox/default-release/chrome/icons/redo.svg b/arch-config/.mozilla/firefox/default-release/chrome/icons/redo.svg new file mode 100644 index 00000000..63a43453 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/icons/redo.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_os.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_os.scss index cfe2c385..26d8e87a 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_os.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_os.scss @@ -24,10 +24,14 @@ } } +//-- Mixin --------------------------------------------------------------------- @mixin _os_winTabBarTextColor { /* background textcolor */ color: var(--lwt-text-color) !important; } + +//------------------------------------------------------------------------------ + @include OS($win7) { #TabsToolbar { &:-moz-lwtheme { @@ -81,18 +85,22 @@ } } +//-- Mixin --------------------------------------------------------------------- @mixin _os_menuEmulate($bgRate, $bdRate) { menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important; - } - menu[_moz-menuactive="true"][disabled="disabled"], - menuitem[_moz-menuactive="true"][disabled="true"] { - background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important; - border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important; + + &[disabled="true"] { + background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important; + border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important; + } } } + +//------------------------------------------------------------------------------ + @include OS($win7) { @include _os_menuEmulate(5%, 60%); @@ -140,6 +148,7 @@ } /*= Linux - Light System Default Theme's Selected Tab ========================*/ +//-- Mixin --------------------------------------------------------------------- $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5); @mixin _os_linuxDefaultThemeSelectedTab { #tabbrowser-tabs:not([noshadowfortests]) @@ -149,6 +158,9 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5); @content; } } + +//------------------------------------------------------------------------------ + @include OS($linux) { @include Light { /* Because of @@ -167,3 +179,16 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5); } } } + +/*= Titlebar Container Size at maximized #384 ================================*/ +@include Option("userChrome.compatibility.os.windows_maximized") { + @include OS($win) { + :root[tabsintitlebar][sizemode="maximized"] #titlebar { + /* -moz-default-appearance: -moz-window-titlebar */ + appearance: none !important; + + // Prevent sideeffect #370 + padding-top: 8px; // Don't use margin-top for reserved fullscreen animation + } + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss index 6593ce1d..3a0acf32 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss @@ -31,11 +31,11 @@ @include Option("userContent.newTab.full_icon") { .top-site-outer .tile { overflow: hidden; - } - .top-site-outer .tile .icon-wrapper { - width: 100% !important; /* Original: 48px */ - height: 100% !important; /* Original: 48px */ + .icon-wrapper { + width: 100% !important; /* Original: 48px */ + height: 100% !important; /* Original: 48px */ + } } } @@ -52,12 +52,9 @@ button.icon, button.close-button { transition: background 1.5s var(--animation-easing-function); - } - .top-site-outer:hover, - #searchSubmit:hover, - button.icon:hover, - button.close-button:hover { - transition: background 0.5s var(--animation-easing-function); + &:hover { + transition: background 0.5s var(--animation-easing-function); + } } /* Search Bar */ @@ -83,10 +80,10 @@ .body-wrapper.on { display: flex; flex-wrap: wrap; - } - .body-wrapper.on > .discovery-stream.ds-layout { - flex-basis: 100%; + > .discovery-stream.ds-layout { + flex-basis: 100%; + } } .body-wrapper.on > .collapsible-section[data-section-id="topstories"], @@ -107,14 +104,13 @@ --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; - } - @include Dark { - #root { + @include Dark { /* 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); @@ -169,24 +165,26 @@ background: var(--newtab-search-background-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, - .contentSearchSuggestionTable .contentSearchSettingsButton:hover { - color: var(--newtab-text-primary-color) !important; - } + .contentSearchSuggestionTable { + .contentSearchSuggestionRow.selected, + .contentSearchSettingsButton:hover { + color: var(--newtab-text-primary-color) !important; + } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, - .contentSearchSuggestionTable .contentSearchSettingsButton:hover, - .contentSearchSuggestionTable .contentSearchOneOffItem.selected { - background: var(--newtab-element-hover-color) !important; - } + .contentSearchSuggestionRow.selected, + .contentSearchSettingsButton:hover, + .contentSearchOneOffItem.selected { + background: var(--newtab-element-hover-color) !important; + } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, - .contentSearchSuggestionTable .contentSearchOneOffItem:active { - background: var(--newtab-element-active-color) !important; - } + .contentSearchSuggestionRow.selected:active, + .contentSearchOneOffItem:active { + background: var(--newtab-element-active-color) !important; + } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { - fill: var(--newtab-icon-secondary-color) !important; + .contentSearchSuggestionRow.selected .historyIcon { + fill: var(--newtab-icon-secondary-color) !important; + } } } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss new file mode 100644 index 00000000..63b5e164 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss @@ -0,0 +1,14 @@ +@-moz-document url("chrome://browser/content/places/places.xhtml"), + url("about:downloads") { + @import "../icons/layout_menu_contents"; + + /*= Context Menu ===========================================================*/ + @include Option("userChrome.icon.context_menu") { + /* Icon lists */ + @import "../icons/context_menu/downloads"; + @import "../icons/context_menu/place"; + } + @include Option("userChrome.icon.global_menu") { + @import "../icons/library"; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_downloads.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_downloads.scss new file mode 100644 index 00000000..8f12cce4 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_downloads.scss @@ -0,0 +1,7 @@ +@-moz-document url-prefix("about:downloads") { + @include Animate { + @include Option("userChrome.decoration.download_panel") { + @import "../decoration/download_panel"; + } + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_error_page.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_error_page.scss index b17bc957..aac860c4 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_error_page.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_error_page.scss @@ -32,6 +32,41 @@ } } + +//-- Mixin --------------------------------------------------------------------- +@mixin _backgroundImage($imgURL, $important: false) { + background-image: url($imgURL) if($important, !important, null); + @content; +} + +@mixin _errorContainerImage($imgURL) { + #errorPageContainer { + @include _backgroundImage($imgURL) { + @content; + } + } +} + +@mixin _errorDescriptionImage($imgURL) { + .description-wrapper { + @include _backgroundImage($imgURL) { + @content; + } + } +} + +@mixin _errorTitleImage($imgURL) { + @media (min-width: 970px) { + .title { + @include _backgroundImage($imgURL, true) { + @content; + } + } + } +} + +//------------------------------------------------------------------------------ + @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netTimeout"), @@ -39,66 +74,41 @@ url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { - #errorPageContainer { - background-image: url("../icons/error-connection-failure.svg"); - } + @include _errorContainerImage("../icons/error-connection-failure.svg"); } @-moz-document url-prefix("about:neterror?e=dnsNotFound") { - #errorPageContainer { - background-image: url("../icons/error-server-not-found.svg"); - } + @include _errorContainerImage("../icons/error-server-not-found.svg"); } @-moz-document url-prefix("about:neterror?e=malformedURI") { - #errorPageContainer { - background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg"); - } + @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg"); } @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { - #errorPageContainer { - background-image: url("../icons/blue-berror.svg"); + @include _errorContainerImage("../icons/blue-berror.svg") { background-size: 18.5em; } } @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") { - .description-wrapper { - background-image: url("../icons/error-session-restore.svg"); - } + @include _errorDescriptionImage("../icons/error-session-restore.svg"); } @-moz-document url-prefix("about:neterror?e=fileNotFound") { - @media (min-width: 970px) { - .title { - background-image: url("chrome://global/skin/icons/info.svg") !important; - } - } + @include _errorTitleImage("chrome://global/skin/icons/info.svg"); #text-container { padding-inline-start: 0; } } @-moz-document url-prefix("about:tabcrashed") { - @media (min-width: 970px) { - .title { - background-image: url("chrome://browser/skin/tab-crashed.svg") !important; - } - } + @include _errorTitleImage("chrome://browser/skin/tab-crashed.svg"); } @-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; - } - } + @include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png"); } @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") { - @media (min-width: 970px) { - .title { - background-image: url("../icons/welcome-back.svg") !important; - } - } + @include _errorTitleImage("../icons/welcome-back.svg"); } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_proton_color.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_proton_color.scss index c7dfaa89..8db37ae3 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_proton_color.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_proton_color.scss @@ -1,4 +1,5 @@ @-moz-document url-prefix("about:"), + url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("https://addons.mozilla.org"), url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_video_player.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_video_player.scss index c6c60cd4..01cbd68d 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_video_player.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_video_player.scss @@ -1,28 +1,30 @@ /* Control Bar Size */ @include Option("userContent.player.size") { #controlsContainer { - --button-size: 32px !important; /* Original: 30px */ + // --button-size: 32px !important; /* Original: 30px */ Disabled for issue #404 --controlBar-height: 40px; /* Original: 40px, Replace to this value */ + .touch { + --button-size: 48px !important; /* Original: 40px */ + --controlBar-height: 52px; /* Original: 52px */ + } + .controlBar { + height: var(--controlBar-height) !important; /* Original: 40px */ + } } - #controlsContainer .touch { - --button-size: 48px !important; /* Original: 40px */ - --controlBar-height: 52px; /* Original: 52px */ - } - .videocontrols[inDOMFullscreen] #controlsContainer { - --button-size: 64px !important; /* Original: 30px */ - --track-size: 6px !important; /* Original: 5px, Touch: 7px */ - --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */ - --controlBar-height: 64px; /* Original: 40px */ - } - .videocontrols[inDOMFullscreen] #controlsContainer .touch { - --button-size: 72px !important; /* Original: 40px */ - --controlBar-height: 64px; /* Original: 52px */ - } - #controlsContainer .controlBar { - height: var(--controlBar-height) !important; /* Original: 40px */ - } - .videocontrols[inDOMFullscreen] #controlsContainer .controlBar { - padding-bottom: 8px !important; + .videocontrols[inDOMFullscreen] { + #controlsContainer { + --button-size: 64px !important; /* Original: 30px */ + --track-size: 6px !important; /* Original: 5px, Touch: 7px */ + --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */ + --controlBar-height: 64px; /* Original: 40px */ + .touch { + --button-size: 72px !important; /* Original: 40px */ + --controlBar-height: 64px; /* Original: 52px */ + } + .controlBar { + padding-bottom: 8px !important; + } + } } } @@ -39,30 +41,30 @@ box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3); /* Or: 0 2px 15px rgba(0,0,0,.1); */ - } - video { - --duration-color: #eee; - --media-background: linear-gradient(transparent, rgba(26,26,26,.85)); - } - @include Dark { - audio { + @include Dark { --box-shadow1: rgba(249, 249, 250, 0.12); --box-shadow2: rgba(91, 91, 102, 0.12); --box-shadow3: rgba(82, 82, 94, 0.04); } } - @include Contrast { - video { + video { + --duration-color: #eee; + --media-background: linear-gradient(transparent, rgba(26,26,26,.85)); + + @include Contrast { --duration-color: #929292; /* Like Original */ --media-background: rgba(26,26,26,.8); /* Like Original */ } } - #controlsContainer .controlBar { - background: var(--media-background) !important; - } - #controlsContainer .duration { - color: var(--duration-color) !important; /* Original: #929292 */ + + #controlsContainer { + .controlBar { + background: var(--media-background) !important; + } + .duration { + color: var(--duration-color) !important; /* Original: #929292 */ + } } @include Option("userContent.player.ui.twoline") { @@ -138,28 +140,30 @@ transform:scale(1); } - #controlsContainer .controlBar { - flex-wrap: var(--controlBar-flex-wrap); - justify-content: var(--controlBar-justify-content); - align-content: var(--controlBar-align-content); - height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important; - padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */ - } - #controlsContainer .scrubberStack { - /* Vertical */ - order: var(--scrubberStack-order); - height: var(--scrubberStack-height, var(--thumb-size)) !important; - transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2))); + #controlsContainer { + .controlBar { + flex-wrap: var(--controlBar-flex-wrap); + justify-content: var(--controlBar-justify-content); + align-content: var(--controlBar-align-content); + height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important; + padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */ + } + .scrubberStack { + /* Vertical */ + order: var(--scrubberStack-order); + height: var(--scrubberStack-height, var(--thumb-size)) !important; + transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2))); - /* Horizontal */ - flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important; - width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); - margin-inline: var(--scrubberStack-margin-inline) !important; - } - #controlsContainer .positionDurationBox { - flex-grow: var(--positionDurationBox-flex-grow); - margin-left: var(--positionDurationBox-margin-left); - text-align: var(--positionDurationBox-text-align) !important; + /* Horizontal */ + flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important; + width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); + margin-inline: var(--scrubberStack-margin-inline) !important; + } + .positionDurationBox { + flex-grow: var(--positionDurationBox-flex-grow); + margin-left: var(--positionDurationBox-margin-left); + text-align: var(--positionDurationBox-text-align) !important; + } } #playButton { @@ -174,9 +178,9 @@ @include Option("userContent.player.icon") { #controlsContainer .fullscreenButton { background-image: url("../icons/enter-fullscreen.svg") !important; - } - #controlsContainer .fullscreenButton[fullscreened] { - background-image: url("../icons/exit-fullscreen.svg") !important; + &[fullscreened] { + background-image: url("../icons/exit-fullscreen.svg") !important; + } } } @@ -189,16 +193,18 @@ /* Click to play UI */ @include Option("userContent.player.click_to_play") { - #controlsContainer .clickToPlay { - cursor: pointer; - opacity: 0.65 !important; - } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay { - opacity: 0.85 !important; - } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover { - opacity: 1 !important; - fill: #48a0f7 !important; /* color as .scrubber */ + #controlsContainer { + .clickToPlay { + cursor: pointer; + opacity: 0.65 !important; + } + .controlsSpacerStack:hover > .clickToPlay { + opacity: 0.85 !important; + &:hover { + opacity: 1 !important; + fill: #48a0f7 !important; /* color as .scrubber */ + } + } } } @@ -209,17 +215,18 @@ #controlsContainer .controlBar { transition: transform 350ms ease; opacity: 1 !important; - } - #controlsContainer .controlBar[hidden] { - transform: translateY(100%); - transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important; - opacity: 0 !important; - } - #controlsContainer .controlBar[hidden] .progressBar, - #controlsContainer .controlBar[hidden] .bufferBar { - display: unset !important; - opacity: 0.55; - transition: opacity 150ms ease 50ms; + &[hidden] { + transform: translateY(100%); + transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important; + opacity: 0 !important; + + .progressBar, + .bufferBar { + display: unset !important; + opacity: 0.55; + transition: opacity 150ms ease 50ms; + } + } } /* Two line Control Bar */ diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_addons_org.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_addons_org.scss index 6f48de55..39e8ec5b 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_addons_org.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/dark_mode/_addons_org.scss @@ -4,13 +4,16 @@ /* Basic */ .Page-content, .SecondaryHero, - body:not(.developer-hub):not(.statistics), + body, main[aria-label="Content"] { color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; } /* Text */ + input, + textarea, + select, .AutoSearchInput-query, .AutoSearchInput-suggestions-list, .Page-content h1, @@ -19,6 +22,7 @@ .Home-SubjectShelf-link:link, .Home-SubjectShelf-link:visited, .DropdownMenuItem-link a, + .DropdownMenuItem-link button, .Select, .Badge, .Notice-generic, @@ -43,6 +47,7 @@ .SearchResult:hover .SearchResult-link, .Home-SubjectShelf-link:is(:active, :focus, :hover), .DropdownMenuItem-link a:is(:active, :focus, :hover), + .DropdownMenuItem-link button: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), @@ -59,6 +64,7 @@ .AddonTitle a, .TooltipMenu-opener, .LanguageTools .Card-contents a, + .Button--primary, .blog-entry-read-more-link, .blogpost-nav-next.blogpost-nav-no-prev:hover p, .blogpost-content-wrapper p a, @@ -98,29 +104,38 @@ } /* Background */ - .Button--action { + .Button--action, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button, + .DevHub-MyAddons-item-buttons-submit .Button { color: var(--in-content-primary-button-text-color) !important; background: var(--in-content-primary-button-background) !important; } + select, .Select, + .Button--primary, .Button--neutral, .Button--neutral:link, .Notice-button, .AMInstallButton .AMInstallButton-loading-button { background-color: var(--in-content-button-background) !important; } + .Button--primary:hover, .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 { + .Button--action:not(.Button--disabled):hover, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button:hover, + .DevHub-MyAddons-item-buttons-submit .Button: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; } + input, + textarea, .AutoSearchInput-query, .AutoSearchInput-suggestions-list, .SecondaryHero-module, @@ -185,13 +200,27 @@ box-shadow: 0 0 2px var(--in-content-border-color) !important; } + input, + textarea, + select { + border-color: var(--in-content-box-border-color) !important; + } + .UserProfileEdit input:disabled, + .UserProfileEdit textarea:disabled { + background-color: var(--in-content-box-background-odd) !important; + } + .AutoSearchInput-query { border: 1px solid var(--in-content-table-background) !important; } - .AutoSearchInput-query:is(:hover, :focus) { + .AutoSearchInput-query:is(:hover, :focus), + .UserProfileEditNotifications .UserProfileEditNotification-input:checked ~ .UserProfileEditNotification-checkbox { border-color: var(--in-content-primary-button-background) !important; } - .AutoSearchInput-query:focus { + .UserProfileEdit input:focus, + .UserProfileEdit textarea:focus, + .AutoSearchInput-query:focus, + .UserProfileEditNotifications .UserProfileEditNotification-input:focus ~ .UserProfileEditNotification-checkbox { box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; } @@ -213,6 +242,12 @@ } /* /developers/ */ + .DevHub-Navigation-Logo > .Logo::before { + -moz-context-properties: fill !important; + fill: var(--in-content-primary-button-background) !important; + background-image: url("../icons/addons-logo.svg") !important; + } + .DevHub-Navigation, .DevHub-submit-addon, .DevHub-get-involved, @@ -220,11 +255,14 @@ background: var(--in-content-page-background) !important; color: var(--in-content-page-color) !important; } - .DevHub-Footer, - .DevHub-callout-box { + .DevHub-Footer { background: var(--in-content-box-background) !important; color: var(--in-content-page-color) !important; } + .DevHub-callout-box { + background: var(--in-content-box-background-odd) !important; + color: var(--in-content-page-color) !important; + } .DevHub-Navigation.scheme-light ul li a, .DevHub-Footer-sections-header, @@ -233,10 +271,275 @@ .DevHub-content-copy h2 { color: var(--in-content-page-color) !important; } + .DevHub-content-copy p, + .DevHub-callout-box p { + color: var(--in-content-deemphasized-text) !important; + } .DevHub-Banner a, .DevHub-Footer a, .DevHub-MyAddons-list a, - .DevHub-MyAddons-item-buttons-all { + .DevHub-MyAddons-item-buttons-all, + .DevHub-content-copy a, + .DevHub-callout-box a { color: var(--in-content-link-color) !important; } + + body:is(.developer-hub, .statistics) { + #main-wrapper, + .menu-nav > ul > li > ul::after, + .menu-nav > ul > li:hover::after, + .menu-nav > ul > li > ul, + .menu-nav > ul > li > ul a, + .menu-nav em, + .primary, .secondary, + .dashboard .listing .item { + background: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + + /* Elements */ + .menu-nav > ul > li > ul a:hover, + .install-note, + .modal, + .popup { + background: var(--in-content-box-background-odd) !important; + } + + .menu-nav > ul > li > ul::after, + .menu-nav > ul > li > ul { + box-shadow: 0 0 3px var(--in-content-border-color) !important; + } + + /* .developer-hub */ + #footer { + background: linear-gradient( + to bottom,var(--in-content-page-background) 0, + var(--in-content-page-background) 123px, + #0c99d5 123px, + #0c99d5 200px, + var(--in-content-page-background) 200px, + rgba(12,153,213,0) 400px + ) !important; + } + + /* Text */ + /* .developer-hub */ #homepage h2, + /* .developer-hub */ header h2, + .primary h2, + h1, + hgroup h2.addon, + hgroup h2.collection, + h3, + .results h4, + .dashboard .listing .item, + .dashboard .listing .item:hover h5, + .secondary .addon-status, + .secondary .addon-status .addon-details li.addon-listed-status, + #refine-results h5, + .island.criteria li, + .two-up div { + color: var(--in-content-page-color) !important; + } + .item-actions h5, .item-actions > ul, .item-actions > ul > li, + .dashboard .listing .item .item-actions a, + .edit-media-details, + .devhub-form table th, + #recent-activity .listing .item .timestamp, + #upload-file .upload-status #uploadstatus, + #addon-validator-suite, + #addon-validator-suite .msg > *, + .island.criteria li a.inactive { + color: var(--in-content-deemphasized-text) !important; + } + + section[role="main"] a, + header a, + .more-info, + .primary a, + .secondary a, + .submission-type-tabs a, + .popup a, + .dashboard .listing .item:hover a, + .dashboard .listing .item:hover .item-actions a, + #upload-status-results.status-pass strong, + #addon-validator-suite a, + #create-addon a, + .html-support { + color: var(--in-content-link-color) !important; + } + .dashboard .listing .item:hover a { + color: var(--in-content-link-color-hover) !important; + } + + .dashboard .listing .item .item-info .downloads, + .dashboard .listing .item .item-info .price, + .dashboard .listing .item .item-info .users { + color: var(--green-60) !important; + } + + .status-admin-disabled b, + .status-disabled b, + .status-incomplete b, + .status-purgatory b { + color: var(--red-60) !important; + } + + .submission-type-tabs a.active, + .island.criteria li.selected a { + color: var(--orange-50) !important; + } + + /* Background */ + .secondary .addon-status, + .devhub-form .item, + #icons_default, + .listing .item, + .object-lead, + #addon-validator-suite .results .tier-results, + #addon-validator-suite .suite, + #addon-validator-suite .suite-container { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-box-background) !important; + } + + .highlight, + .listing-footer, .tab-wrapper .fm-control { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-info-background) !important; + } + + .submission-type-tabs a, + #head-chart { + background: var(--in-content-page-background) !important; + } + #head-chart { + rect { + fill: var(--in-content-page-background) !important; + } + text{ + fill: var(--in-content-deemphasized-text) !important; + } + .highcharts-legend .highcharts-legend-item:hover text { + fill: var(--in-content-page-color) !important; + paint-order: stroke !important; + stroke: var(--in-content-page-color) !important; + stroke-width: 0.4px !important; + stroke-linecap: butt !important; + stroke-linejoin: miter !important; + } + .highcharts-legend .highcharts-legend-item path[stroke="#CCC"] ~ text { + fill: #CCC !important; + } + } + + #icons_default li a:hover, + #side-nav .active a, + span.tip, + .addon-submission-process .tip, + .devhub-form .tip, + a.remove, + span.remove, + ul.errorlist li span.tip { + background-color: var(--in-content-box-info-background) !important; + } + a.remove:hover, span.tip:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + } + + /* Border */ + .submission-type-tabs a, + .devhub-sidebar, + .devhub-sidebar div.item, + .devhub-form .listing-footer { + border-color: var(--in-content-border-color) !important; + } + + #background-wrapper, + #main-wrapper { + border-color: var(--in-content-page-background) !important; + } + + .item-actions a.more-actions:hover:after, + .item-actions button.link.more-actions:hover:after, + #change-locale::after { + border-top-color: var(--in-content-link-color) !important; + } + + install-note::after, .popup::after { + border-bottom-color: var(--in-content-box-background) !important; + } + .install-note::before, .popup::before { + border-bottom-color: grey !important; + } + + #refine-results, .other-categories, + .versions .primary > .warning { + border-color: transparent !important; + } + + .results { + border-color: var(--in-content-box-background-odd) !important; + background: transparent !important; + } + .results-inner { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-border-color) !important; + } + + /* Othres */ + #promos .view-button a, + #upload-file-finish.button, + #upload-file-widget .button.prominent, + .button, + .cta a.button:link, + .cta a.button:visited, + .linux .button.linux, + .mac .button.mac, + .other .button.bsd, + .other .button.solaris, + .sidebar a.button, + .sidebar button, + .theme .choices button, + .theme-queue a.button, + .theme-queue button, + .windows .button.windows, + a.button:link, + a.button:visited, + a.delete-button.delete-addon, + button, + button.button, + input:not(.upvotes):not(.downvotes)[type="submit"] { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + &:is(.selected, :focus, :hover) { + background: var(--in-content-primary-button-background-hover) !important; + } + } + + .edit_with_prefix span, + .edit_with_suffix span { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-box-background-odd) !important; + color: var(--in-content-deemphasized-text) !important; + padding-block: 3px !important; + cursor: not-allowed; + } + + .devhub-form .item_wrapper input[type="email"] { + appearance: none !important; + padding: 2px 5px; + border: 1px solid; + } + + #addon-validator-suite .suite-summary { + color: var(--in-content-deemphasized-text) !important; + background: var(--in-content-button-background) !important; + border-top-color: var(--in-content-border-color) !important;; + } + #addon-validator-suite .context { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-button-background) !important; + background: var(--in-content-table-background) !important; + } + } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_field_border.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_field_border.scss index 65877e0b..3b60cc42 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_field_border.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/proton_contents/_field_border.scss @@ -1,12 +1,8 @@ @-moz-document url-prefix("about:") { + html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover, + html|textarea:hover, xul|search-textbox:hover { border-color: var(--in-content-focus-outline-color) !important; transition: border-color 0.5s var(--animation-easing-function); } } -@-moz-document url-prefix("about:config") { - #about-config-search:hover { - border-color: var(--in-content-focus-outline-color) !important; - transition: border-color 0.5s var(--animation-easing-function); - } -} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss index 8c7035a9..25997a70 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss @@ -1,4 +1,5 @@ /*- Background Color -------------------------------------------------------*/ +//-- Mixin --------------------------------------------------------------------- @mixin _animate_bgColor($duration, $presudo: "") { button#{$presudo}, toolbarbutton#{$presudo}, @@ -9,6 +10,9 @@ transition: background-color $duration var(--animation-easing-function) !important; } } + +//------------------------------------------------------------------------------ + @include _animate_bgColor(1s); @include _animate_bgColor(0.25s, ":hover"); @include OS($linux) { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_overlap.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_overlap.scss new file mode 100644 index 00000000..387c057c --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_overlap.scss @@ -0,0 +1,15 @@ +:root[sizemode="fullscreen"] #navigator-toolbox { + position: fixed !important; /* Needed for content to take up entire height */ + z-index: 1000 !important; /* Puts the UI above the content */ +} + +:root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { + width: 100%; /* Makes the UI take up the entire width */ +} + +@include OS($linux) { + /* Fix transparent backgorund */ + :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { + appearance: auto !important; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_show_bookmarkbar.css b/arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_show_bookmarkbar.css new file mode 100644 index 00000000..a91348ee --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/fullscreen/_show_bookmarkbar.css @@ -0,0 +1,4 @@ +:root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]), +:root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { + visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_context_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_context_menu.scss index 4fb60ca2..df54e0ff 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_context_menu.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_context_menu.scss @@ -1,5 +1,6 @@ /** Context Menu - Icons ******************************************************/ @import "context_menu/tab_toolbar.scss"; @import "context_menu/content_area.scss"; +@import "context_menu/downloads"; @import "context_menu/place"; @import "context_menu/others"; diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_global_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_global_menu.scss index 99b12c1e..00aa9f5e 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_global_menu.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_global_menu.scss @@ -4,6 +4,7 @@ --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #menu_newUserContext { + --menuitem-image: url("../icons/container-openin-16.svg"); } #menu_newNavigator { --menuitem-image: url("chrome://browser/skin/window.svg"); @@ -43,6 +44,8 @@ } #goOfflineMenuitem { + /* checkbox */ + --menuitem-image: url("../icons/plug-disconnected.svg"); } #menu_FileQuitItem { --menuitem-image: url("../icons/quit.svg"); @@ -58,6 +61,9 @@ --menuitem-image: url("../icons/undo.svg"); } #menu_redo { + @include Option("userChrome.icon.menu.full") { + --menuitem-image: url("../icons/redo.svg"); + } } #menu_cut { @@ -109,12 +115,14 @@ } #fullScreenItem { + /* checkbox */ --menuitem-image: url("chrome://browser/skin/fullscreen.svg"); } #menu_readerModeItem { --menuitem-image: url("chrome://browser/skin/reader-mode.svg"); } #menu_showAllTabs { + --menuitem-image: url("../icons/tab.svg"); } #documentDirection-swap { @@ -152,6 +160,7 @@ --menuitem-image: url("../icons/restore-session.svg"); } #hiddenTabsMenu { + --menuitem-image: url("../icons/eye-hide.svg") } #historyUndoMenu { --menuitem-image: url("chrome://browser/skin/tab.svg"); @@ -209,7 +218,7 @@ } #webDeveloperMenu, /* Legacy */ - #browserToolsMenu { +#browserToolsMenu { --menuitem-image: url("../icons/developer.svg"); } #menu_pageInfo { @@ -220,6 +229,8 @@ #enableDeveloperTools { } #menu_devToolbox { + /* checkbox */ + --menuitem-image: url("../icons/developer.svg"); } #menu_taskManager { --menuitem-image: url("../icons/performance.svg"); @@ -237,8 +248,12 @@ --menuitem-image: url("chrome://devtools/skin/images/command-console.svg"); } #menu_responsiveUI { + /* checkbox */ + --menuitem-image: url("../icons/command-responsivemode.svg"); } #menu_eyedropper { + /* checkbox */ + --menuitem-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); } #menu_pageSource { --menuitem-image: url("../icons/document-search.svg"); diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_bookmark_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_bookmark_menu.scss index 4faa1999..5b555286 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_bookmark_menu.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_bookmark_menu.scss @@ -15,6 +15,43 @@ menupopup menupopup[emptyplacesresult] .menu-text, --context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline); } +//-- Mixin --------------------------------------------------------------------- +// Items +$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"])"; +$_bookmarkMenu: "menu:not(.menu-iconic)"; + +// Components +$_bookmarkPopup: "menupopup:is(#BMB_bookmarksPopup)"; +$_bookmarkToolbar: "#PersonalToolbar menupopup[placespopup=\"true\"]"; + +$_bookmarkPopupMenus: selector.nest( + $_bookmarkPopup, + "#{$_bookmarkMenuitem}, #{$_bookmarkMenu}" +); +$_bookmarkToolbarMenus: selector.nest( + $_bookmarkToolbar, + "#{$_bookmarkMenuitem}, #{$_bookmarkMenu}" +); + +@mixin _layoutBookmarkMenu() { + #{$_bookmarkPopupMenus}, + #{$_bookmarkToolbarMenus} { + @content; + } +} +@mixin _layoutBookmarkPopup() { + #{$_bookmarkPopupMenus} { + @content; + } +} +@mixin _layoutBookmarkToolbar() { + #{$_bookmarkToolbarMenus} { + @content; + } +} + +//------------------------------------------------------------------------------ + /* Windows 7, 8 */ @include OS($win7, $win8) { /* Global Menu */ @@ -27,19 +64,14 @@ menupopup menupopup[emptyplacesresult] .menu-text, #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) { + @include _layoutBookmarkMenu() { margin-inline: var(--arrowpanel-menuitem-padding-inline) !important; background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; } - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + @include _layoutBookmarkPopup() { 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) { + @include _layoutBookmarkToolbar() { padding-inline-start: var(--arrowpanel-menuicon-padding) !important; } } @@ -47,10 +79,7 @@ menupopup menupopup[emptyplacesresult] .menu-text, /* Windows */ @include OS($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) { + @include _layoutBookmarkMenu() { margin-inline: var(--arrowpanel-menuitem-padding-inline) !important; padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important; background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; @@ -70,10 +99,7 @@ menupopup menupopup[emptyplacesresult] .menu-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) { + @include _layoutBookmarkMenu() { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important; } } @@ -86,8 +112,7 @@ menupopup menupopup[emptyplacesresult] .menu-text, } /* Bookmark Popup - None icon menu */ - menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), - menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { + @include _layoutBookmarkPopup() { padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important; } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu.scss index 026e88f3..fb0be852 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu.scss @@ -1,208 +1,125 @@ -menupopup menuitem:not([type="checkbox"], [type="radio"]), -menupopup menu:not([type="checkbox"], [type="radio"]), -#main-menubar > menu { - -moz-appearance: none !important; /* Linux: menulist */ +@import "./layout_menu_common"; + +//-- Mixin --------------------------------------------------------------------- +// Components +$_layoutCommonMenus: ( + $_iconMenuPopupMenus, + $_libraryMenuitem, + $_libraryMenu, + $_sendTabMenuitem, + $_otherIconMenu +); +@mixin _layoutInitIconMenus() { + #{$_globalMenus}, + #{$_nestedPopupIconMenus}, + #{$_layoutCommonMenus} { + @content; + } } - -/* Icon */ -:not(menu, #ContentSelectDropdown) - > menupopup - > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -:not(menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -#main-menubar > menu, -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -.openintabs-menuitem, -#blockedPopupDontShowMessage { - /* Color */ - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - - /* Layout */ - background-size: 16px !important; - background-repeat: no-repeat !important; - background-image: var(--menuitem-image); +@mixin _layoutInitPaddingMenus() { + #{selector.nest($_nestedPopupPadding, "menuitem:not(.menuitem-iconic), menu:not(.menu-iconic)")}, + #{$_nestedPopupPaddingMenus}, + #{$_layoutCommonMenus} { + @content; + } } - -/* For native context menus on macOS */ -@supports -moz-bool-pref("widget.macos.native-context-menus") { - :not(menu, #ContentSelectDropdown) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { - list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; +@mixin _layoutIconMenus() { + #{$_nestedPopupPaddingMenus}, + #{$_layoutCommonMenus} { + @content; } } -/* Padding */ -:root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); +//------------------------------------------------------------------------------ + +#{$_initialMenus}, +#{$_globalMenus} { + @include _initial_menus; } -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), -:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), -menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), -menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, -menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, -.openintabs-menuitem, -#blockedPopupDontShowMessage { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; + +/* Icon */ +@include _layoutInitIconMenus { + @include _layout_icon_menus; +} + +/* For native context menus */ +#{$_nestedPopupIconMenus} { + @include _layout_icon_native_menus; +} + +/* Padding */ +@include _layout_root_padding; +@include _layoutInitPaddingMenus { + @include _layout_init_padding; } /* Menubar */ @include Option("userChrome.icon.global_menubar") { - #main-menubar > menu { + #{$_globalMenus} { 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 */ - } - @include NotOption("userChrome.padding.global_menubar") { - #main-menubar > menu { - padding-block: 2px !important;; + &: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; + } + > menupopup { + --menuitem-image: none; /* Prevent Image Inheritance */ + } + @include NotOption("userChrome.padding.global_menubar") { + padding-block: 2px !important; } } } /* Padding - Windows */ -@include OS($win) { - /* Checkbox */ - :root { - --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); - } - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem[type="checkbox"]:not([checked="true"]) - > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); - } -} - -@include OS($win7) { - :root { - --context-menu-background-padding-default: 2px; - } -} -@include OS($win8) { - :root { - --context-menu-background-padding-default: 3px; - } -} +@include _layout_root_win7_8; @include OS($win7, $win8) { - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, - .openintabs-menuitem, - #blockedPopupDontShowMessage { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; + @include _layoutIconMenus { + @include _layout_init_win7_8(); } } @include OS($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)); - } + @include _layout_root_win10; - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, - menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem, - .openintabs-menuitem, - #blockedPopupDontShowMessage { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; + @include _layoutIconMenus { + @include _layout_init_win10; } } /* Padding - Linux */ @include OS($linux) { - :root { - --context-menu-background-padding-default: 6px; - } + @include _layout_root_linux; - #main-menubar > menu > .menubar-text { - padding-inline-start: 3px; + #{$_globalMenus} > .menubar-text { + @include _layout_init_linux; } } /* Padding - Mac */ @include OS($mac) { - :root { - --context-menu-background-padding-default: 10px; - --context-menu-mac-padding: 21px; - } + @include _layout_root_mac; /* context menu width */ - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + #{$_nestedPopupPaddingMenus}, #blockedPopupDontShowMessage { - padding-inline-end: var(--context-menu-background-padding) !important; + @include _layout_init_mac_width; } /* text position */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text, - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text { - padding-inline-start: var(--context-menu-mac-padding) !important; + #{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} { + @include _layout_init_mac_text; } /* Checkbox menuitem, None iconic menu */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"], - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + #{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} { + @include _layout_init_mac_others; } /* Global Menu */ /* Disabled. some icons not appear - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) - menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { + #{$_iconMenuPopupMenus} { list-style-image: var(--menuitem-image, url("../icons/blank.svg")); } */ diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_common.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_common.scss new file mode 100644 index 00000000..3d3a92c5 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_common.scss @@ -0,0 +1,140 @@ +//-- Variables ----------------------------------------------------------------- +// Items +// .menu-iconic, .menuitem-iconic: Alreay exist, not target. +// .in-menulist: Not a range because it is a select menu of web content. +// [checked="true"]: There should be a check mark instead of an icon. +$_iconNoneCommon: ".in-menulist, [checked=\"true\"]"; +$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})"; +$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})"; + +// Components +$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >"; +$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >"; +$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)"; + +$_nestedPopupIconMenus: selector.nest( + $_nestedPopupIcon, + "#{$_iconMenuitem}, #{$_iconMenu}" +); +$_nestedPopupPaddingMenus: selector.nest( + $_nestedPopupPadding, + "#{$_iconMenuitem}, #{$_iconMenu}" +); +$_iconMenuPopupMenus: selector.nest( + $_iconMenuPopup, + "#{$_iconMenuitem}, #{$_iconMenu}" +); + +$_globalMenus: "#main-menubar > menu"; +$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > #{$_iconMenuitem}"; +$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > #{$_iconMenu}"; +$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem"; +$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar"; + +//-- Mixin --------------------------------------------------------------------- +// Init Menu +$_initialMenus: selector.append( + "menupopup menuitem, menupopup menu", + ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])" +); +@mixin _initial_menus() { + -moz-appearance: none !important; /* Linux: menulist */ +} + +// Icon +@mixin _layout_icon_menus() { + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); +} + +@mixin _layout_icon_native_menus() { + @include NativeMenu { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } +} + +// Padding +@mixin _layout_root_padding() { + :root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } +} +@mixin _layout_init_padding() { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; +} + +@mixin _layout_root_win7_8() { + @include OS($win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @include OS($win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } +} +@mixin _layout_init_win7_8() { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; +} + +@mixin _layout_root_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)); + } +} +@mixin _layout_init_win10() { + padding-inline-start: var(--menu-background-padding-default) !important; + margin-left: 0 !important; +} + +@mixin _layout_root_linux() { + :root { + --context-menu-background-padding-default: 6px; + } +} +@mixin _layout_init_linux() { + padding-inline-start: 3px; +} + +@mixin _layout_root_mac() { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } +} +@mixin _layout_init_mac_width() { + padding-inline-end: var(--context-menu-background-padding) !important; +} +@mixin _layout_init_mac_text() { + padding-inline-start: var(--context-menu-mac-padding) !important; +} +@mixin _layout_init_mac_others() { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; +} + +// Checkbox +// @include OS($win) { +// /* Checkbox */ +// :root { +// --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); +// } +// :not(menu, #ContentSelectDropdown, #context-navigation) +// > menupopup +// > menuitem[type="checkbox"]:not([checked="true"]) +// > .menu-iconic-left { +// padding-inline-start: var(--context-menu-text-padding); +// } +// } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_contents.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_contents.scss new file mode 100644 index 00000000..4c383a07 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_layout_menu_contents.scss @@ -0,0 +1,90 @@ +@import "../icons/layout_menu_common"; + +//-- Mixin --------------------------------------------------------------------- +$_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)"; +$_placesPopupSetMenus: selector.nest( + $_placesPopupSet, + "#{$_iconMenuitem}, #{$_iconMenu}" +); + +@mixin _library_contextMenu { + #{$_placesPopupSetMenus}, + #{$_libraryMenuitem}, + #{$_libraryMenu} { + @content; + } +} + +//------------------------------------------------------------------------------ + +#{$_initialMenus} { + @include _initial_menus; +} + +@include _library_contextMenu { + @include _layout_icon_menus; +} + +/* For native context menus */ +#{$_nestedPopupIconMenus} { + @include _layout_icon_native_menus; +} + +/* Padding */ +@include _layout_root_padding; +@include _library_contextMenu { + @include _layout_init_padding; +} + +/* Padding - Windows */ +@include _layout_root_win7_8; +@include OS($win7, $win8) { + @include _library_contextMenu { + @include _layout_init_win7_8(); + } +} +@include OS($win10) { + @include _layout_root_win10; + + @include _library_contextMenu { + @include _layout_init_win10; + } +} + +/* Padding - Linux */ +@include OS($linux) { + @include _layout_root_linux; + + /* Contextmenu Checkbox Unset */ + #{$_placesPopupSet} menuitem[type="checkbox"] { + margin-inline: 0 !important; + > .menu-iconic-left > .menu-iconic-icon { + margin-inline-end: 0 !important; + } + &:not([checked="true"]) > .menu-iconic-left > .menu-iconic-icon { + border: none !important; + background-color: unset !important; + } + } +} + +/* Padding - Mac */ +@include OS($mac) { + @include _layout_root_mac; + + /* context menu width */ + #{$_placesPopupSetMenus} { + @include _layout_init_mac_width; + + > .menu-text { + /* text position */ + @include _layout_init_mac_text; + } + } + + /* Checkbox menuitem, None iconic menu */ + #{$_placesPopupSet} menuitem[checked="true"], + #{$_placesPopupSet} menu:not(.menu-iconic) { + @include _layout_init_mac_others; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss index a299aa49..2fcb4e68 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss @@ -278,7 +278,7 @@ panelMenuBookmarkThisPage[starred] { #PanelUI-developer-tools-view .subviewbutton:nth-child(4) { list-style-image: url("../icons/window-dev-tools.svg"); } -/* Browser Content Toolbaox - */ +/* Browser Content Toolbox */ #appmenu-developer-tools-view .subviewbutton:nth-child(5), #PanelUI-developer-tools-view .subviewbutton:nth-child(5) { list-style-image: url("../icons/command-frames.svg"); @@ -371,7 +371,7 @@ panelMenuBookmarkThisPage[starred] { } #allTabsMenu-hiddenTabsButton { - list-style-image: url("../icons/password-hide.svg"); + list-style-image: url("../icons/eye-hide.svg") } #allTabsMenu-containerTabsView .subviewbutton:last-child { @@ -398,6 +398,17 @@ panelMenuBookmarkThisPage[starred] { } } + +/* BMB_bookmarksToolbarPopup */ +#BMB_viewBookmarksToolbar { + &[data-l10n-args='{"isVisible":true}'] { + --menuitem-image: url("../icons/eye-hide.svg") + } + &[data-l10n-args='{"isVisible":false}'] { + --menuitem-image: url("../icons/eye-show.svg") + } +} + /*= protections-popup ========================================================*/ #protections-popup-settings-button > .protections-popup-settings-icon, #protections-popup-show-report-button > .protections-popup-show-report-icon { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_content_area.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_content_area.scss index 903bc436..416a09e3 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_content_area.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_content_area.scss @@ -4,12 +4,12 @@ } #context-viewsource-wrapLongLines { /* checkbox */ - /* --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); */ + --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); } #context-viewsource-highlightSyntax { /* checkbox */ - /* --menuitem-image: url("../icons/code.svg"); */ + --menuitem-image: url("../icons/code.svg"); } #spell-no-suggestions { @@ -77,7 +77,7 @@ } #context-media-loop { /* checkbox */ - /* --menuitem-image: url("../icons/arrow-repeat-all.svg"); */ + --menuitem-image: url("../icons/arrow-repeat-all.svg"); } #context-leave-dom-fullscreen { --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg"); @@ -97,7 +97,7 @@ } #context-video-pictureinpicture { /* checkbox */ - /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */ + --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); } #context-reloadimage { @@ -170,6 +170,9 @@ --menuitem-image: url("../icons/undo.svg"); } #context-redo { + @include Option("userChrome.icon.menu.full") { + --menuitem-image: url("../icons/redo.svg"); + } } #context-cut { @@ -209,6 +212,7 @@ #spell-check-enabled { /* checkbox */ + --menuitem-image: url("../icons/text-proofing-tools.svg"); } #spell-add-dictionaries-main { --menuitem-image: url("../icons/book-add.svg"); @@ -239,7 +243,7 @@ /* iconic */ } -@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { +@include NativeMenu { #context-back { --menuitem-image: url("chrome://browser/skin/back.svg"); } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_downloads.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_downloads.scss new file mode 100644 index 00000000..957853db --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_downloads.scss @@ -0,0 +1,51 @@ +/*= downloadsContextMenu =====================================================*/ +.downloadPauseMenuItem { + --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); +} +.downloadResumeMenuItem { + --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); +} +.downloadUnblockMenuItem { + --menuitem-image: url("../icons/checkmark-circle.svg"); +} +.downloadUseSystemDefaultMenuItem { + --menuitem-image: url("chrome://browser/skin/open.svg"); +} +.downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/folder-globe.svg"); +} +.downloadAlwaysOpenSimilarFilesMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/fluid.svg"); +} +.downloadShowMenuItem { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + @include Option("userChrome.icon.library") { + --menuitem-image: url("../icons/folder.svg"); + } +} + +#downloadsContextMenu > menuitem { + &.downloadOpenReferrerMenuItem, + &[command="downloadsCmd_openReferrer"] { + --menuitem-image: url("../icons/link-square.svg"); + } + &.downloadCopyLocationMenuItem, + &[command="downloadsCmd_copyLocation"] { + --menuitem-image: url("../icons/link.svg"); + } +} + +.downloadDeleteFileMenuItem { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +} +.downloadRemoveFromHistoryMenuItem { + --menuitem-image: url("../icons/eraser.svg"); +} +#downloadsContextMenu > menuitem { + &[command="downloadsCmd_clearList"], + &[command="downloadsCmd_clearDownloads"] { + --menuitem-image: url("../icons/broom.svg"); + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss index 36973e72..2f55da56 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss @@ -13,6 +13,7 @@ /*= autohide-context =========================================================*/ #autohide-context > menuitem[data-l10n-id="full-screen-autohide"] { /* checkbox */ + --menuitem-image: url("../icons/eye-tracking-off.svg"); } #autohide-context > menuitem[data-l10n-id="full-screen-exit"] { @@ -25,11 +26,13 @@ } /*= pageActionContextMenu ====================================================*/ -.pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem { - --menuitem-image: url("chrome://global/skin/icons/settings.svg"); -} -.pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); +.pageActionContextMenuItem.extensionPinned.extensionUnpinned { + &.manageExtensionItem { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } + .removeExtensionItem { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } } /*= customizationPanelItemContextMenu ========================================*/ @@ -56,47 +59,7 @@ /*= downloads-button-autohide-panel ==========================================*/ #downloads-button-autohide-checkbox { /* checkbox */ -} - -/*= downloadsContextMenu =====================================================*/ -.downloadPauseMenuItem { - --menuitem-image: url("chrome://global/skin/media/pause-fill.svg"); -} -.downloadResumeMenuItem { - --menuitem-image: url("chrome://global/skin/media/play-fill.svg"); -} -.downloadUnblockMenuItem { - --menuitem-image: url("../icons/checkmark-circle.svg"); -} -.downloadUseSystemDefaultMenuItem { - --menuitem-image: url("chrome://browser/skin/open.svg"); -} -.downloadAlwaysUseSystemDefaultMenuItem { - /* checkbox */ -} -.downloadShowMenuItem { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - @include Option("userChrome.icon.library") { - --menuitem-image: url("../icons/folder.svg"); - } -} - -#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { - --menuitem-image: url("../icons/link-square.svg"); -} -#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] { - --menuitem-image: url("../icons/link.svg"); -} - -.downloadDeleteFileMenuItem { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); -} -.downloadRemoveFromHistoryMenuItem { - --menuitem-image: url("../icons/eraser.svg"); -} -#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"], -#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] { - --menuitem-image: url("../icons/broom.svg"); + --menuitem-image: url("../icons/eye-tracking-off.svg"); } /*= SyncedTabsSidebarContext =================================================*/ @@ -160,6 +123,9 @@ --menuitem-image: url("../icons/undo.svg"); } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { + @include Option("userChrome.icon.menu.full") { + --menuitem-image: url("../icons/redo.svg"); + } } #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] { @@ -186,6 +152,9 @@ --menuitem-image: url("../icons/undo.svg"); } .textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] { + @include Option("userChrome.icon.menu.full") { + --menuitem-image: url("../icons/redo.svg"); + } } .textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] { @@ -212,37 +181,26 @@ menuitem.searchbar-clear-history { } /*= context_sendTabToDevicePopupMenu =========================================*/ -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="phone"] { - --menuitem-image: url("chrome://browser/skin/device-phone.svg"); -} - -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="tablet"] { - --menuitem-image: url("chrome://browser/skin/device-tablet.svg"); -} - -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="desktop"] { - --menuitem-image: url("chrome://browser/skin/device-desktop.svg"); -} - -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="tv"] { - --menuitem-image: url("chrome://browser/skin/device-tv.svg"); -} - -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType="vr"] { - --menuitem-image: url("chrome://browser/skin/device-vr.svg"); -} - -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target[clientType=""] { - --menuitem-image: url("../icons/send-to-device.svg"); -} - -menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) - > .sync-menuitem.sendtab-target:not([clientType]) { - --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +.sync-menuitem.sendtab-target { + &[clientType="phone"] { + --menuitem-image: url("chrome://browser/skin/device-phone.svg"); + } + &[clientType="tablet"] { + --menuitem-image: url("chrome://browser/skin/device-tablet.svg"); + } + &[clientType="desktop"] { + --menuitem-image: url("chrome://browser/skin/device-desktop.svg"); + } + &[clientType="tv"] { + --menuitem-image: url("chrome://browser/skin/device-tv.svg"); + } + &[clientType="vr"] { + --menuitem-image: url("chrome://browser/skin/device-vr.svg"); + } + &[clientType=""] { + --menuitem-image: url("../icons/send-to-device.svg"); + } + &:not([clientType]) { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_place.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_place.scss index 6310fa21..b6e6d56f 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_place.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_place.scss @@ -11,6 +11,9 @@ #placesContext_openLinks\:tabs { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } +#placesContext_open\:newcontainertab { + --menuitem-image: url("../icons/container-openin-16.svg"); +} #placesContext_open\:newwindow { --menuitem-image: url("chrome://browser/skin/window.svg"); } @@ -49,6 +52,7 @@ #placesContext_new\:bookmark { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } +#placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); @include Option("userChrome.icon.library") { @@ -68,7 +72,7 @@ } #show-other-bookmarks_PersonalToolbar { /* checkbox */ - /* --menuitem-image: url("../icons/star-line-horizontal.svg"); */ + --menuitem-image: url("../icons/star-line-horizontal.svg"); } #placesContext_showAllBookmarks { --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss index 112584f0..b82fe302 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss @@ -40,10 +40,16 @@ } #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ - #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { +#context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { /* At windows */ --menuitem-image: url("../icons/share.svg"); } +@include Option("userChrome.icon.menu.full") { + #context_shareTabURL, /* Legacy */ + menuitem.share-tab-url-item { + --menuitem-image: url("../icons/share.svg"); + } +} #context_reopenInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } @@ -85,12 +91,18 @@ .customize-context-moveToPanel { --menuitem-image: url("chrome://browser/skin/pin-12.svg"); } -.toolbar-context-autohide-downloads-button { - --menuitem-image: url("../icons/password-hide.svg"); +#toolbar-context-autohide-downloads-button { + /* checkbox */ + --menuitem-image: url("../icons/eye-tracking-off.svg"); } .customize-context-removeFromToolbar { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } + +#toolbar-context-always-open-downloads-panel { + /* checkbox */ + --menuitem-image: url("../icons/drawer-arrow-download.svg"); +} #toolbar-context-openANewTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } @@ -112,7 +124,7 @@ #toggle_toolbar-menubar { /* checkbox */ - /* --menuitem-image: url("../icons/calendar-agenda.svg"); */ + --menuitem-image: url("../icons/calendar-agenda.svg"); } #toggle_PersonalToolbar { /* Also placeContext */ @@ -122,3 +134,11 @@ menuitem.viewCustomizeToolbar { --menuitem-image: url("chrome://browser/skin/customize.svg"); } + +.fullscreen-context-autohide { + /* checkbox */ + --menuitem-image: url("../icons/eye-tracking-off.svg"); +} +#toolbar-context-menu > menuitem[data-l10n-id="full-screen-exit"] { + --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg"); +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss index 97014227..353bd454 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss @@ -2,6 +2,8 @@ @use "utils/option" as *; @use "utils/color_scheme" as *; @use "utils/theme" as *; +@use "utils/native_menu" as *; +@use "utils/proton_elements" as Proton; @use "sass:selector"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss index 7be87424..cc96c6da 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss @@ -1,6 +1,9 @@ @use "utils/os" as *; @use "utils/option" as *; @use "utils/color_scheme" as *; +@use "utils/native_menu" as *; +@use "utils/proton_elements" as Proton; +@use "sass:selector"; @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @@ -29,3 +32,11 @@ @include Option("userContent.page.proton") { @import "contents/proton_contents"; } + +/** Menu - Icons Layout *******************************************************/ +@include Option("userChrome.icon.menu") { + @import "contents/context_menu"; +} + +/** Download Panel ************************************************************/ +@import "contents/downloads"; diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_chrome.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_chrome.scss index ef6931b0..9679e20d 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_chrome.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_chrome.scss @@ -1,7 +1,4 @@ -@import "standard_folder"; -@import "inbox"; -@import "default_override"; -@import "default_open"; +@import "folder_icons"; @-moz-document url("chrome://browser/content/places/places.xhtml") { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_contents.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_contents.scss index 0e1dda31..5987c71f 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_contents.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_contents.scss @@ -2,18 +2,10 @@ { /** Library - Icons Replace *************************************************/ @include Option("userChrome.icon.library") { - @import "standard_folder"; - @import "inbox"; - @import "default_override"; - @import "default_open"; + @import "folder_icons"; @import "menubar"; } - /*= Context Menu ===========================================================*/ - @include Option("userChrome.icon.context_menu") { - @import "contents_menu"; - } - @include OS($linux) { /*= Layout Fixes =========================================================*/ menupopup menu { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_folder_icons.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_folder_icons.scss new file mode 100644 index 00000000..9b33496d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_folder_icons.scss @@ -0,0 +1,131 @@ +/*= 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.svg") !important; +} + +/* Other Folder - Open */ +#PlacesToolbar #OtherBookmarks[open="true"], +#BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"], +#bookmarksMenuPopup #menu_unsortedBookmarks[open="true"], +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks), +:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) { + list-style-image: url("../icons/mail-inbox.svg") !important; +} + +/*= Default Icon - Override ===================================================*/ +/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */ + +/* Query */ +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important; +} + +/* History */ +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer), +:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { + list-style-image: url("chrome://browser/skin/history.svg") !important; +} + +/* Downloads */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important; +} + +/* Tag */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer), +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) { + list-style-image: url("chrome://browser/skin/places/tag.svg") !important; +} + +/* Boomark */ +:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg") !important; +} + +/* Bookmark Toolbar */ +#BMB_bookmarksPopup #BMB_bookmarksToolbar, /* 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" */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton.scss index 4d4b05cc..86ba4366 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton.scss @@ -21,10 +21,8 @@ --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); --organizer-toolbar-field-focus-box-shadow: unset; --organizer-pane-field-border-color: ThreeDShadow; -} -@include NotContrast { - :root { + @include NotContrast { --organizer-color: var(--in-content-page-color); --organizer-deemphasized-color: var(--in-content-deemphasized-text); @@ -51,10 +49,8 @@ ); --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); - } - @include Dark { - :root { + @include Dark { --organizer-color: rgb(251, 251, 254); --organizer-deemphasized-color: rgb(191, 191, 201); @@ -80,25 +76,23 @@ border-bottom: 1px solid var(--organizer-border-color) !important; padding: 4px !important; padding-inline-end: 6px !important; -} -#placesToolbar > toolbarbutton { - appearance: none !important; - padding: 5px !important; - border-radius: 4px !important; -} + > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; -#placesToolbar > toolbarbutton[disabled] { - opacity: 0.6 !important; -} - -#placesToolbar > toolbarbutton:not([disabled]):hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#placesToolbar > toolbarbutton:not([disabled]):hover:active { - background-color: var(--organizer-selected-background) !important; + &[disabled] { + opacity: 0.6 !important; + } + &:not([disabled]):hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + &:active { + background-color: var(--organizer-selected-background) !important; + } + } + } } #placesToolbar > toolbarbutton > .toolbarbutton-icon, @@ -110,32 +104,30 @@ #placesMenu { margin-inline-start: 6px !important; -} -#placesMenu > menu { - appearance: none !important; - color: var(--organizer-color) !important; - border-radius: 4px !important; - padding-block: 5px !important; - padding-inline-start: 5px !important; - margin-inline-end: 2px !important; -} + > menu { + appearance: none !important; + color: var(--organizer-color) !important; + border-radius: 4px !important; + padding-block: 5px !important; + padding-inline-start: 5px !important; + margin-inline-end: 2px !important; -#placesMenu > menu[_moz-menuactive="true"], -#placesMenu > menu:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#placesMenu > menu:hover:active, -#placesMenu > menu[open] { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; -} - -#placesMenu > menu > .menubar-text { - margin-block: 0 !important; /* override menu.css */ - padding-inline-end: 4px !important; + &[_moz-menuactive="true"], + &:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + &:hover:active, + &[open] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 4px !important; + } + } } /*- Search Bar & Input ---------------------------------------------------*/ @@ -221,11 +213,10 @@ treecol:not([hideheader="true"], [sortable="false"]):hover, treecolpicker:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; -} -treecol:not([hideheader="true"], [sortable="false"]):hover:active, -treecolpicker:hover:active { - background-color: var(--organizer-selected-background) !important; + &:active { + background-color: var(--organizer-selected-background) !important; + } } treecol:not([hideheader="true"], :first-child), @@ -250,43 +241,40 @@ treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { height: 18px !important; } -treechildren::-moz-tree-row { - background-color: transparent !important; -} +treechildren { + &::-moz-tree-row { + background-color: transparent !important; + } + &::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + &::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } -treechildren::-moz-tree-row(hover) { - background-color: var(--organizer-hover-background) !important; -} + &::-moz-tree-image(hover), + &::-moz-tree-twisty(hover), + &::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + &::-moz-tree-image(selected), + &::-moz-tree-twisty(selected), + &::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } -treechildren::-moz-tree-row(selected) { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; - border: 1px solid transparent !important; -} - -treechildren::-moz-tree-image(hover), -treechildren::-moz-tree-twisty(hover), -treechildren::-moz-tree-cell-text(hover) { - color: var(--organizer-hover-color) !important; -} - -treechildren::-moz-tree-image(selected), -treechildren::-moz-tree-twisty(selected), -treechildren::-moz-tree-cell-text(selected) { - color: var(--organizer-selected-color) !important; -} - -treechildren::-moz-tree-separator { - height: 1px !important; - border-color: var(--organizer-separator-color) !important; -} - -treechildren::-moz-tree-separator(hover) { - border-color: var(--organizer-hover-color) !important; -} - -treechildren::-moz-tree-separator(selected) { - border-color: var(--organizer-selected-color) !important; + &::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + &::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + &::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } } /*- Info Box -------------------------------------------------------------*/ @@ -308,36 +296,35 @@ treechildren::-moz-tree-separator(selected) { border-radius: 4px !important; color: var(--organizer-color) !important; background-color: var(--organizer-content-background) !important; - list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); -moz-context-properties: fill !important; fill: currentColor !important; + + &:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + + &:active { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } + &:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + > .button-box { + padding: 0 !important; + } } -#editBookmarkPanelRows .expander-up:hover, -#editBookmarkPanelRows .expander-down:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#editBookmarkPanelRows .expander-up:hover:active, -#editBookmarkPanelRows .expander-down:hover:active { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; -} - -#editBookmarkPanelRows .expander-up:focus-visible, -#editBookmarkPanelRows .expander-down:focus-visible { - outline: 2px solid var(--organizer-outline-color) !important; - outline-offset: -1px !important; -} - -#editBookmarkPanelRows .expander-up { - list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); -} - -#editBookmarkPanelRows .expander-up > .button-box, -#editBookmarkPanelRows .expander-down > .button-box { - padding: 0 !important; +#editBookmarkPanelRows { + .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); + } + .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + } } #places input { @@ -347,15 +334,14 @@ treechildren::-moz-tree-separator(selected) { color: var(--organizer-color) !important; min-height: 20px !important; padding-inline: 4px !important; -} -#places input:focus { - outline: 2px solid var(--organizer-outline-color) !important; - outline-offset: -1px !important; -} - -#places input:not(:read-write):focus { - outline: none !important; + &:focus { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + &:not(:read-write):focus { + outline: none !important; + } } .caption-label { @@ -369,18 +355,17 @@ treechildren::-moz-tree-separator(selected) { background-color: var(--organizer-content-background) !important; border: 1px solid var(--organizer-border-color) !important; border-radius: 4px !important; -} -#editBMPanel_tagsSelectorRow > richlistbox > richlistitem { - border: 1px solid transparent !important; -} + > richlistitem { + border: 1px solid transparent !important; -#editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; + &:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + &[selected] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton_contents.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton_contents.scss index dc62bbb9..9753ce89 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton_contents.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/library/_proton_contents.scss @@ -1,173 +1,102 @@ +$iconSelector: "> .menu-iconic-left > .menu-iconic-icon"; +$checkedIconSelector: "> .menu-iconic-left[checked=\"true\"] > .menu-iconic-icon"; + /*- Radio Button ---------------------------------------------------------*/ menuitem[type="radio"] { - /* margin-inline-start: 0 !important; */ - appearance: none !important; -} + @include Proton.RadioGlobal; -menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon { - appearance: none !important; - width: 16px !important; - height: 16px !important; - padding: 0 !important; - border: 1px solid var(--in-content-box-border-color) !important; - border-radius: 100% !important; - margin-block: 2px !important; /* extend the vertical clicktarget */ - margin-inline: 0 6px !important; - background-color: var(--in-content-button-background) !important; - background-position: center !important; - flex-shrink: 0 !important; /* avoid shrinking inside flex container */ -} + #{$iconSelector} { + @include Proton.RadioIcon; + } + #{$checkedIconSelector} { + @include Proton.RadioCheckedIcon; + } -menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-hover) !important; - color: var(--in-content-button-text-color-hover) !important; -} + &:not([disabled="true"]):hover { + #{$iconSelector} { + @include Proton.RadioIconHover; + } + &:active #{$iconSelector} { + @include Proton.RadioIconActive; + } + } -menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-active) !important; -} + &:not([disabled="true"])[checked="true"]:hover { + #{$iconSelector} { + @include Proton.RadioCheckedIconHover; + } + &:active #{$iconSelector} { + @include Proton.RadioCheckedIconActive; + } + } -menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - -moz-context-properties: fill !important; - fill: currentColor !important; - color: var(--in-content-primary-button-text-color) !important; - background-color: var(--in-content-primary-button-background) !important; - background-image: url("chrome://global/skin/icons/radio.svg") !important; - border-color: transparent !important; - - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; -} - -menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-primary-button-background-hover) !important; - color: var(--in-content-primary-button-text-color-hover) !important; -} - -menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-primary-button-background-active) !important; -} - -menuitem[type="radio"] > .menu-iconic-text { - margin-inline: 0 8px !important; - padding-inline-start: 0 !important; + > .menu-iconic-text { + @include Proton.RadioLabel; + } } /* Disabled checkboxes, radios and labels */ menuitem[type="radio"][disabled="true"], menuitem[type="checkbox"][disabled="true"] { - color: inherit !important; -} - -menuitem[type="radio"][disabled="true"], -menuitem[type="checkbox"][disabled="true"] { - opacity: 0.5 !important; + @include Proton.DisabledMenuItem; } /*- Check Box ------------------------------------------------------------*/ /* From checkbox.css */ menuitem[type="checkbox"] { - appearance: none !important; - -moz-box-align: center !important; - margin: 0px 2px !important; -} + @include Proton.CheckboxGlobal(true); -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-inline-end: 2px !important; -} -menuitem[type="checkbox"] > .menu-iconic-text { - margin: 1px 0 !important; -} - -menuitem[type="checkbox"][disabled="true"] { - opacity: 0.4 !important; -} - -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - appearance: none !important; - color: var(--checkbox-border-color, ThreeDDarkShadow) !important; - background-color: var(--checkbox-unchecked-bgcolor, Field) !important; - border: 1px solid currentColor !important; - border-radius: 2px !important; - margin-inline-end: 6px !important; -} - -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - height: 16px !important; - width: 16px !important; -} - -menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { - background-color: var( - --checkbox-unchecked-hover-bgcolor, - color-mix(in srgb, -moz-accent-color 4%, Field) - ) !important; -} - -menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var( - --checkbox-unchecked-active-bgcolor, - color-mix(in srgb, -moz-accent-color 8%, Field) - ) !important; -} - -menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - border-color: var(--checkbox-checked-border-color, transparent) !important; - background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; - background-image: url("chrome://global/skin/icons/check.svg") !important; - background-position: center !important; - background-repeat: no-repeat !important; - -moz-context-properties: fill !important; - fill: currentColor !important; - color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; -} - -menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - background-color: var( - --checkbox-checked-hover-bgcolor, - color-mix(in srgb, currentColor 12.5%, -moz-accent-color) - ) !important; -} - -menuitem[type="checkbox"]:not([disabled="true"]):hover:active - > .menu-iconic-left[checked="true"] - > .menu-iconic-icon { - background-color: var( - --checkbox-checked-active-bgcolor, - color-mix(in srgb, currentColor 25%, -moz-accent-color) - ) !important; -} - -menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { - outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; - outline-offset: var(--focus-outline-offset, 2px) !important; -} - -@include Contrast { - menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { - /* color will set the border-color on the check due to how HCM works for in-content pages. */ - color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; + #{$iconSelector} { + @include Proton.CheckboxIcon; + } + #{$checkedIconSelector} { + @include Proton.CheckboxCheckedIcon; } - menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { - color: var(--checkbox-checked-border-color, currentColor) !important; - fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + &:not([disabled="true"]):hover { + #{$iconSelector} { + @include Proton.CheckboxIconHover; + } + &:active #{$iconSelector} { + @include Proton.CheckboxIconActive; + } + + #{$checkedIconSelector} { + @include Proton.CheckboxCheckedIconHover; + } + &:active #{$checkedIconSelector} { + @include Proton.CheckboxCheckedIconActive; + } } - menuitem[type="checkbox"]:not([disabled="true"]):hover:active - > .menu-iconic-left[checked="true"] - > .menu-iconic-icon, - menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; - fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + &:focus #{$iconSelector} { + @include Proton.CheckboxFocusRing; } -} -/* From common.css */ -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-block: 2px !important; + @include Contrast { + &:not([disabled="true"]) #{$iconSelector} { + @include Proton.CheckboxIconHoverContrast; + } + + > .menu-iconic-left[checked="true"] { + @include Proton.CheckboxCheckedIconContrast; + } + + &:not([disabled="true"]):hover:active, + &:not([disabled="true"]):hover { + #{$checkedIconSelector} { + @include Proton.CheckboxCheckedIconHoverContrast; + } + } + } + + > .menu-iconic-text { + @include Proton.ChexboxLabel; + } + + &[disabled="true"] { + @include Proton.DisabledChexbox; + } } /*- Menu Separtor --------------------------------------------------------*/ @@ -175,8 +104,10 @@ menuseparator { appearance: none !important; min-width: 2px; min-height: 0; + border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); border-bottom: none; - margin: var(--panel-separator-margin, 6px); + padding: 0; + margin: var(--panel-separator-margin, 6px); } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_drag_space.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_drag_space.scss index 76026226..2cfa38eb 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_drag_space.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_drag_space.scss @@ -4,7 +4,8 @@ --space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */ } -@mixin dragSpaceHeight { +//-- Mixin --------------------------------------------------------------------- +@mixin _dragSpaceHeight { :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] { @content; } @@ -14,7 +15,7 @@ } } } -@mixin dragSpacePadding { +@mixin _dragSpacePadding { /* Add extra space to titlebar for dragging */ :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { @@ -28,13 +29,15 @@ } } +//------------------------------------------------------------------------------ + @include OS($win10) { - @include dragSpaceHeight { + @include _dragSpaceHeight { height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size)); } } @include OS($win7, $win8, $linux) { - @include dragSpaceHeight { + @include _dragSpaceHeight { height: calc(var(--tab-min-height) + var(--space-above-tabbar)); } } @@ -46,12 +49,12 @@ } @include OS($win7) { /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */ - @include dragSpacePadding { + @include _dragSpacePadding { padding-top: calc(var(--space-above-tabbar) + 4px) !important; } } @include OS($win8, $win10, $linux) { - @include dragSpacePadding { + @include _dragSpacePadding { padding-top: var(--space-above-tabbar) !important; } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/clipped_tab/_pinned_close_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/clipped_tab/_pinned_close_button.scss index e5f2b1d4..7f498522 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/clipped_tab/_pinned_close_button.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/clipped_tab/_pinned_close_button.scss @@ -8,6 +8,7 @@ --uc-close-button-padding: 4px; } +//-- Mixin --------------------------------------------------------------------- @mixin pinnedCloseButtonShow($prefix: "") { #{$prefix}:not([busy]) .tab-close-button { display: -moz-box !important; @@ -33,6 +34,8 @@ } } +//------------------------------------------------------------------------------ + .tabbrowser-tab[pinned] { @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/unselected_tab/_dynamic_separator.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/unselected_tab/_dynamic_separator.scss index e80c7ef6..9633b1b2 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/unselected_tab/_dynamic_separator.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/unselected_tab/_dynamic_separator.scss @@ -1,4 +1,5 @@ -@mixin separatorShape() { +//-- Mixin --------------------------------------------------------------------- +@mixin _dynamicSeparatorShape() { /* Box Model */ content: ""; display: block; @@ -20,6 +21,8 @@ } } +//------------------------------------------------------------------------------ + @include Option("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox { position: absolute; @@ -27,7 +30,7 @@ .tab-background::before, #tabs-newtab-button::before { - @include separatorShape; + @include _dynamicSeparatorShape; /* More position */ transform: translateX(-2.5px) translateY(calc(-50% + 1px)); @@ -39,7 +42,7 @@ #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after { - @include separatorShape; + @include _dynamicSeparatorShape; } .tab-background::before { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_color.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_color.scss index 3a9f23f5..94e98bcd 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_color.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_color.scss @@ -40,10 +40,11 @@ html#main-window menupopup:not(.in-menulist) { */ } - /* Fallback background */ + /* Fallback background - Set to Legacy. It will be removed Next update menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) { background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important; } + */ } /* Default theme color preservation */ @@ -66,6 +67,28 @@ html#main-window menupopup:not(.in-menulist) { } } +/*== Info Bar Color ==========================================================*/ +.container.infobar { + background-color: var(--urlbar-box-bgcolor); +} +.notification-button { + background-color: var(--button-bgcolor); + + &:hover { + background-color: var(--button-hover-bgcolor); + } + &:hover:active { + background-color: var(--button-active-bgcolor); + } +} + +html|button.ghost-button:not(.semi-transparent):enabled:hover { + background-color: var(--button-hover-bgcolor) !important; +} +html|button.ghost-button:not(.semi-transparent):enabled:hover:active { + background-color: var(--in-content-button-background-active) !important; +} + /*== Bookmark Popup Color ====================================================*/ #editBMPanel_folderTree:-moz-lwtheme, #editBMPanel_tagsSelector:-moz-lwtheme { @@ -151,34 +174,36 @@ body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { background: transparent !important; border: none !important; clip-path: inset(0 round var(--panel-border-radius)); -} -#PopupAutoComplete > richlistbox { - border-radius: var(--panel-border-radius) !important; - background-color: var(--panel-bgcolor) !important; /* Original: Field */ - color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */ + > richlistbox { + border-radius: var(--panel-border-radius) !important; + background-color: var(--panel-bgcolor) !important; /* Original: Field */ + color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */ + } } .autocomplete-richlistitem:hover { background-color: var(--arrowpanel-dimmed) !important; } -#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { - fill: GrayText !important; -} +#PopupAutoComplete > richlistbox > richlistitem { + &[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, + &[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, + &[originaltype="login"] > .ac-site-icon { + fill: GrayText !important; + } -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { - --panel-border-color: var(--panel-bgcolor); - color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */ - background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */ - border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ -} + &[originaltype="loginsFooter"] { + --panel-border-color: var(--panel-bgcolor); + color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */ + background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */ + border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */ + } -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, -#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { - background-color: var( - --arrowpanel-dimmed-further, - hsla(0, 0%, 80%, 0.5) - ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ + &[originaltype="loginsFooter"]:hover, + &[originaltype="loginsFooter"][selected] { + background-color: var( + --arrowpanel-dimmed-further, + hsla(0, 0%, 80%, 0.5) + ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ + } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_dark.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_dark.scss index f13463d0..f5054517 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_dark.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_fully_dark.scss @@ -65,8 +65,9 @@ browser[type="content"] > html { } #alertSettings > .button-box > .box-inherit { margin: -4px 4px 3px 0 !important; - } - #alertSettings > .button-box > .box-inherit > .button-icon { - padding: 1px; + + > .button-icon { + padding: 1px; + } } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_waterfox.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_waterfox.scss index 699d13a6..2fa4ac19 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_waterfox.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_waterfox.scss @@ -15,12 +15,11 @@ /* This button needs to align with the tree above it. */ margin-inline-start: 4px; -} -#editBMPanel_newFolderButton:hover { - background-color: var(--button-hover-bgcolor); -} - -#editBMPanel_newFolderButton:hover:active { - background-color: var(--button-active-bgcolor); + &:hover { + background-color: var(--button-hover-bgcolor); + &:active { + background-color: var(--button-active-bgcolor); + } + } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_cert.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_cert.scss index a0e6ffdd..152e45f2 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_cert.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_cert.scss @@ -21,32 +21,35 @@ font-size: inherit !important; padding: 8px !important; margin: 2px 4px !important; - } - #locationTextBox:focus { - border-color: transparent !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: -1px !important; /* Prevents antialising around the corners */ - } - #locationTextBox:-moz-ui-invalid { - border-color: transparent !important; - outline: 2px solid var(--in-content-border-invalid) !important; - outline-offset: -1px !important; /* Prevents antialising around the corners */ - } - #locationTextBox:disabled { - opacity: 0.4 !important; + + &:focus { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialising around the corners */ + } + &:-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 */ + } + &:disabled { + opacity: 0.4 !important; + } } - #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) { - width: 48px !important; - height: 48px !important; - background-image: url("chrome://global/skin/icons/warning.svg") !important; - background-size: 48px !important; - background-repeat: no-repeat !important; - - -moz-context-properties: fill !important; - fill: currentColor !important; - } - #exceptiondialog:first-child > hbox > vbox > image { - display: none !important; + #exceptiondialog:first-child > hbox > vbox { + &:not([flex="1"]) { + width: 48px !important; + height: 48px !important; + background-image: url("chrome://global/skin/icons/warning.svg") !important; + background-size: 48px !important; + background-repeat: no-repeat !important; + + -moz-context-properties: fill !important; + fill: currentColor !important; + } + > image { + display: none !important; + } } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_page_info.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_page_info.scss index e9e80bc0..fe107418 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_page_info.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_page_info.scss @@ -9,19 +9,7 @@ border-radius: 8px !important; padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important; margin: 4px !important; - } - #viewGroup > radio:hover { - background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */ - } - #viewGroup > radio[selected="true"] { - color: var(--in-content-button-text-color) !important; /* SelectedItemText */ - background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */ - } - #viewGroup > radio { - color: var(--in-content-deemphasized-text) !important; /* FieldText */ - } - #viewGroup > radio { list-style-image: none !important; background-image: var(--viewgroup-image) !important; background-repeat: no-repeat; @@ -30,6 +18,14 @@ -moz-context-properties: fill !important; fill: currentColor !important; + color: var(--in-content-deemphasized-text) !important; /* FieldText */ + &:hover { + background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */ + } + &[selected="true"] { + color: var(--in-content-button-text-color) !important; /* SelectedItemText */ + background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */ + } } #generalTab { --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg); @@ -48,9 +44,8 @@ /* Overwrite */ margin: 0 !important; padding: 0 6px !important; - } - @include OS($mac) { - #viewGroup > radio > .radio-label-box { + + @include OS($mac) { padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */ } } @@ -76,17 +71,18 @@ -moz-appearance: none !important; background: var(--in-content-table-header-background) !important; color: var(--in-content-table-header-color) !important; - } - treecols > treecol, - treecols > treecolpicker.treecol-image { - -moz-appearance: none !important; - color: var(--in-content-table-header-color) !important; - background: var(--in-content-table-header-background) !important; - border: 1px solid var(--in-content-table-border-color) !important; - padding: 4px !important; - border-spacing: 0; - text-align: center !important; + > treecol, + > treecolpicker.treecol-image { + -moz-appearance: none !important; + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + border: 1px solid var(--in-content-table-border-color) !important; + padding: 4px !important; + border-spacing: 0; + + text-align: center !important; + } } tree, @@ -96,31 +92,31 @@ background-color: var(--in-content-table-background) !important; border: 1px solid var(--in-content-table-border-color) !important; } + treechildren { + &::-moz-tree-row(odd) { + background-color: var(--in-content-box-background-odd) !important; + } + &::-moz-tree-row(hover) { + color: var(--in-content-item-hover-text) !important; + background-color: var(--in-content-item-hover) !important; + } + &::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected) !important; + } - treechildren::-moz-tree-row(odd) { - background-color: var(--in-content-box-background-odd) !important; - } - - treechildren::-moz-tree-row(hover) { - color: var(--in-content-item-hover-text) !important; - background-color: var(--in-content-item-hover) !important; - } - treechildren::-moz-tree-row(selected) { - background-color: var(--in-content-item-selected) !important; - } - - treechildren::-moz-tree-cell { - border-inline: 1px solid var(--in-content-table-border-color) !important; - border-spacing: 0 !important; - padding: 4px !important; - margin: 0 !important; - } - treechildren::-moz-tree-cell-text(hover) { - color: var(--in-content-item-hover-text) !important; - } - treechildren::-moz-tree-cell-text(selected) { - font-weight: 600 !important; - color: var(--in-content-item-selected-text) !important; + &::-moz-tree-cell { + border-inline: 1px solid var(--in-content-table-border-color) !important; + border-spacing: 0 !important; + padding: 4px !important; + margin: 0 !important; + } + &::-moz-tree-cell-text(hover) { + color: var(--in-content-item-hover-text) !important; + } + &::-moz-tree-cell-text(selected) { + font-weight: 600 !important; + color: var(--in-content-item-selected-text) !important; + } } #imagecontainerbox { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_proton_commons.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_proton_commons.scss index 2fe65efb..a3c31e52 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_proton_commons.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/proton_chrome/_proton_commons.scss @@ -56,19 +56,19 @@ /* 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; + &.medium { + /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding + * the 1px border): */ + padding: 6px 13px !important; + min-height: 28px !important; + font-size: 0.95em !important; + } + &.small { + padding: 5px 11px !important; + min-height: 24px !important; + font-size: 0.9em !important; + } } /* Remove margin added by button.css */ @@ -76,20 +76,11 @@ 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"]:-moz-focusring { - box-shadow: none !important; - outline: 2px solid var(--in-content-focus-outline-color) !important; - outline-offset: 2px !important; - } button:not([disabled="true"]):hover { background-color: var(--in-content-button-background-hover) !important; color: var(--in-content-button-text-color-hover) !important; border-color: transparent !important; } - xul|button:not([disabled="true"]):hover:active, xul|button[open], xul|button[open]:hover, @@ -135,175 +126,118 @@ } } + 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"]:-moz-focusring { + box-shadow: none !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: 2px !important; + } + /*- Radio Button -----------------------------------------------------------*/ xul|radio { - /* margin-inline-start: 0 !important; */ - appearance: none !important; + @include Proton.RadioGlobal; } 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 */ + @include Proton.RadioIcon; } - - 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; + @include Proton.RadioCheckedIcon; } - 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"]):hover { + > xul|*.radio-check { + @include Proton.RadioIconHover; + } + &:active > xul|*.radio-check { + @include Proton.RadioIconActive; + } } - xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check { - background-color: var(--in-content-primary-button-background-active) !important; + xul|radio:not([disabled="true"])[selected]:hover { + > xul|*.radio-check { + @include Proton.RadioCheckedIconHover; + } + &:active > xul|*.radio-check { + @include Proton.RadioCheckedIconActive; + } } xul|*.radio-label-box { - margin-inline: 0 8px !important; - padding-inline-start: 0 !important; + @include Proton.RadioLabel; } /* 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; + @include Proton.DisabledMenuItem; } /*- Check Box --------------------------------------------------------------*/ /* From checkbox.css */ checkbox { - appearance: none !important; - -moz-box-align: center !important; - margin: 4px 2px !important; + @include Proton.CheckboxGlobal; + } + + .checkbox-check { + @include Proton.CheckboxIcon; + } + .checkbox-check[checked] { + @include Proton.CheckboxCheckedIcon; + } + + checkbox:not([disabled="true"]):hover { + > .checkbox-check { + @include Proton.CheckboxIconHover; + } + &:active > .checkbox-check { + @include Proton.CheckboxIconActive; + } + + > .checkbox-check[checked] { + @include Proton.CheckboxCheckedIconHover; + } + &:active > .checkbox-check[checked] { + @include Proton.CheckboxCheckedIconActive; + } + } + + checkbox:-moz-focusring > .checkbox-check { + @include Proton.CheckboxFocusRing; + } + + @include Contrast { + checkbox:not([disabled="true"]):hover > .checkbox-check { + @include Proton.CheckboxIconHoverContrast; + } + + .checkbox-check[checked] { + @include Proton.CheckboxCheckedIconContrast; + } + + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + > .checkbox-check[checked] { + @include Proton.CheckboxCheckedIconHoverContrast; + } + } } .checkbox-icon[src] { margin-inline-end: 2px !important; } .checkbox-label { - margin: 1px 0 !important; + @include Proton.ChexboxLabel; } 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; - } - - @include 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; - } + @include Proton.DisabledChexbox; } /* From common.css */ - xul|*.checkbox-check { - margin-block: 2px !important; - } xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px !important; } @@ -318,29 +252,26 @@ 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; - } + &[size="medium"] { + padding-block: 6px !important; + padding-inline: 16px 10px !important; + } + &[size="large"] { + padding-block: 8px !important; + padding-inline: 16px 12px !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; + &:hover { + background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important; + } + &:hover:active { + background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important; + } + &:-moz-focusring { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; + } } #label-box { @@ -354,15 +285,15 @@ appearance: none !important; width: 12px !important; height: 12px !important; - } - /* dropmarker::part(icon) - * ::part is not apply chrome - */ - dropmarker[exportparts="icon: dropmarker-icon"] { - list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; - -moz-context-properties: fill !important; - fill: currentColor !important; + &[exportparts="icon: dropmarker-icon"] { + /* dropmarker::part(icon) + * ::part is not apply chrome + */ + list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + } } #highlightable-label:not([highlightable="true"]), @@ -396,25 +327,23 @@ 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|menu, + 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; + } + &:not([disabled="true"])[selected="true"] { + color: var(--in-content-item-selected-text) !important; + background-color: var(--in-content-item-selected) !important; + } + &[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 { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_urlbar_focus_color.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_urlbar_focus_color.scss index 947b6b95..a175e0e3 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_urlbar_focus_color.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_urlbar_focus_color.scss @@ -1,14 +1,17 @@ /*= Common - URL Bar focus color =============================================*/ // TODO: `OS` Not covered case +$_urlBarFocusSelector: ":root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme)"; +$_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)"; + @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) { + #{$_urlBarFocusSelector}, + #{$_urlBarFocusDarkSelector} { --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 { + #{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background, + #{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background { border-color: color-mix( in srgb, -moz-accent-color 50%, diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_win10.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_win10.scss index b45fa9d0..a90a79a8 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_win10.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/system_default_theme/_win10.scss @@ -309,16 +309,17 @@ /*= Windows10 - Titlebar accent color ========================================*/ @media (-moz-windows-accent-color-in-titlebar) { /* Tab Bar */ - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color { - color: -moz-accent-color-foreground; - background-color: -moz-accent-color; - } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { + .titlebar-color { + color: -moz-accent-color-foreground; + background-color: -moz-accent-color; + } - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { - --toolbarbutton-icon-fill: currentColor; - --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); - --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); + .toolbar-items { + --toolbarbutton-icon-fill: currentColor; + --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); + --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); + } } } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_native_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_native_menu.scss new file mode 100644 index 00000000..5e8ee165 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_native_menu.scss @@ -0,0 +1,7 @@ +@use "option" as *; + +@mixin NativeMenu() { + @include Option("widget.macos.native-context-menus", "widget.gtk.native-context-menus") { + @content; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_proton_elements.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_proton_elements.scss new file mode 100644 index 00000000..04eb4591 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_proton_elements.scss @@ -0,0 +1,157 @@ +//== Radio Button ============================================================== +@mixin RadioGlobal { + /* margin-inline-start: 0 !important; */ + appearance: none !important; +} + +@mixin RadioIcon { + appearance: none !important; + width: 16px !important; + height: 16px !important; + + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 100% !important; + + padding: 0 !important; + margin-inline: 0 6px !important; + margin-block: 2px !important; /* extend the vertical clicktarget */ + + background-color: var(--in-content-button-background) !important; + background-position: center !important; + + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ +} + +@mixin RadioCheckedIcon { + -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; +} + +@mixin RadioIconHover { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; +} + +@mixin RadioIconActive { + background-color: var(--in-content-button-background-active) !important; +} + +@mixin RadioCheckedIconHover { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; +} + +@mixin RadioCheckedIconActive { + background-color: var(--in-content-primary-button-background-active) !important; +} + +@mixin RadioLabel { + margin-inline: 0 8px !important; + padding-inline-start: 0 !important; +} + +@mixin DisabledMenuItem { + color: inherit !important; + opacity: 0.5 !important; +} + +//== Check Box ================================================================= +@mixin CheckboxGlobal($content: false) { + appearance: none !important; + -moz-box-align: center !important; + margin: if($content, 0px, 4px) 2px !important; +} + +@mixin CheckboxIcon { + appearance: none !important; + width: 16px !important; + height: 16px !important; + + border: 1px solid currentColor !important; + border-radius: 2px !important; + + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; + + margin-inline-end: 6px !important; /* or 2px */ + margin-block: 2px !important; /* From common.css */ +} + +@mixin CheckboxCheckedIcon { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + 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; + + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; +} + +@mixin CheckboxIconHover { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; +} + +@mixin CheckboxIconActive { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; +} + +@mixin CheckboxCheckedIconHover { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; +} + +@mixin CheckboxCheckedIconActive { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; +} + +@mixin CheckboxIconHoverContrast { + /* 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; +} + +@mixin CheckboxCheckedIconContrast { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; +} + +@mixin CheckboxCheckedIconHoverContrast { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; +} + +@mixin CheckboxFocusRing { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; +} + +@mixin ChexboxLabel { + margin: 1px 0 !important; +} + +@mixin DisabledChexbox { + opacity: 0.4 !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/yarn.lock b/arch-config/.mozilla/firefox/default-release/chrome/yarn.lock index 2e2759c0..b7386dbd 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/yarn.lock +++ b/arch-config/.mozilla/firefox/default-release/chrome/yarn.lock @@ -2257,9 +2257,9 @@ minimatch@^3.0.4: brace-expansion "^1.1.7" minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== + version "1.2.6" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" + integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== ms@2.1.2: version "2.1.2" diff --git a/arch-config/.mozilla/firefox/default-release/user.js b/arch-config/.mozilla/firefox/default-release/user.js index 83330982..39c37eb8 100644 --- a/arch-config/.mozilla/firefox/default-release/user.js +++ b/arch-config/.mozilla/firefox/default-release/user.js @@ -61,6 +61,7 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.compatibility.dynamic_separator", true); // Need dynamic_seperator // user_pref("userChrome.compatiblity.os.linux_non_native_titlebar_button", true); +// user_pref("userChrome.compatibility.os.windows_maximized, true"); // == Theme Custom Settings ==================================================== // -- User Chrome -------------------------------------------------------------- @@ -108,6 +109,7 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true); +// user_pref("userChrome.icon.menu.full", true); // -- User Content ------------------------------------------------------------- // user_pref("userContent.player.ui.twoline", true);