mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into minimal

Browse source
This commit is contained in:
alstjr7375 2022-07-22 09:20:33 +09:00
commit 54bec9504f
29 changed files with 420 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

189
css/leptonChrome.css
View file

@ -29,6 +29,21 @@
}
}
/** Compatibility Fixes *******************************************************/
/*= Color - Compatibility ====================================================*/
:root {
/* Compatibility for accent color
https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
*/
--uc-accent-color: AccentColor;
--uc-accent-text-color: AccentColorText;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
:root {
--uc-accent-color: -moz-accent-color;
--uc-accent-text-color: -moz-accent-color-foreground;
}
}
/*= Theme - Compatibility ====================================================*/
@supports -moz-bool-pref("userChrome.compatibility.theme") {
/*= Hotfix #98 ===============================================================*/
@ -146,7 +161,7 @@
}
@media (-moz-windows-accent-color-in-titlebar) {
:root[sizemode="normal"][tabsintitlebar] #navigator-toolbox {
border-top-color: -moz-accent-color !important;
border-top-color: var(--uc-accent-color) !important;
}
}
}
@ -351,14 +366,14 @@
/* URL Bar */
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
--focus-outline-color: -moz-accent-color !important;
--focus-outline-color: var(--uc-accent-color) !important;
}
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
#urlbar[open]
> #urlbar-background {
border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important;
border-color: color-mix(in srgb, var(--uc-accent-color) 50%, transparent) !important;
/* Like: --toolbar-field-focus-border-color */
}
}
@ -418,11 +433,11 @@
--win-shorcut-text-color: #757575;
--win-error-color: #b31616;
--win-red-border-color: #ff4343;
--win-accent-forground-color: -moz-accent-color-foreground;
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
--win-accent-active-color: -moz-accent-color;
--win-accent-forground-color: var(--uc-accent-text-color);
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, var(--uc-accent-color));
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, var(--uc-accent-color));
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, var(--uc-accent-color));
--win-accent-active-color: var(--uc-accent-color);
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
@ -450,10 +465,10 @@
--win-shorcut-text-color: #adadad;
--win-error-color: #ffb900;
--win-red-border-color: #ff4343;
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
--win-accent-active-color: -moz-accent-color;
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, var(--uc-accent-color));
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, var(--uc-accent-color));
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, var(--uc-accent-color));
--win-accent-active-color: var(--uc-accent-color);
}
}
:root:not(:-moz-lwtheme),
@ -482,8 +497,7 @@
/* Text Shortcut Color */
--panel-shortcut-color: var(--win-shorcut-text-color) !important;
--panel-description-color: var(--win-shorcut-text-color) !important;
/* Title Background, Border Color */
--menu-border-color: var(--win-bgcolor) !important;
/* Title Background */
--lwt-accent-color: var(--win-bgcolor) !important;
--toolbar-field-border-color: var(--win-bgcolor) !important;
--chrome-content-separator-color: var(--win-bgcolor) !important;
@ -493,6 +507,7 @@
--toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
--arrowpanel-background: var(--win-component-bgcolor) !important;
--autocomplete-popup-background: var(--win-component-bgcolor) !important;
/* Border Color */
/* Seperator */
--toolbarseparator-color: var(--win-tab-seperator-color) !important;
/* Field Backround Color */
@ -636,7 +651,7 @@
.sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
--lwt-sidebar-background-color: transparent !important;
--lwt-sidebar-background-color: var(--win-sidebar-bgcolor) !important;
--lwt-sidebar-text-color: var(--win-text-color) !important;
}
}
@ -704,20 +719,20 @@
/* 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;
color: var(--uc-accent-text-color);
background-color: var(--uc-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);
--toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent);
--toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent);
}
}
/*= GTK - URL View url accent color ==========================================*/
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) .urlbarView-url {
--urlbar-popup-url-color: -moz-accent-color;
--urlbar-popup-url-color: var(--uc-accent-color);
}
/* Nightly Compatibility */
@ -743,14 +758,14 @@
--mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
--mac-hover-bgcolor: Window;
--mac-disabled-bgcolor: transparent;
--mac-primary-button-color: -moz-accent-color-foreground;
--mac-primary-button-color: var(--uc-accent-text-color);
/* or -moz-mac-menutextselect */
--mac-accent-color: -moz-accent-color;
--mac-accent-color: var(--uc-accent-color);
/* or LinkText */
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
--mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, -moz-accent-color);
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, var(--uc-accent-color));
--mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, var(--uc-accent-color));
/* or -moz-mac-menuselect, Highlight */
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color);
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color));
/* or ActiveBorder */
/* Text, Icon Color */
--menu-color: var(--mac-text-color) !important;
@ -1356,9 +1371,9 @@
.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
border-color: -moz-accent-color !important;
border-color: var(--uc-accent-color) !important;
/* Hard Coded */
outline-color: -moz-accent-color !important;
outline-color: var(--uc-accent-color) !important;
}
/*= PopupAutoComplete ========================================================*/
@ -1715,9 +1730,9 @@
.checkbox-check[checked] {
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
border-color: var(--checkbox-checked-border-color, transparent) !important;
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
@ -1728,48 +1743,48 @@
checkbox:not([disabled="true"]):hover > .checkbox-check {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
color-mix(in srgb, var(--uc-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)
color-mix(in srgb, var(--uc-accent-color) 8%, Field)
) !important;
}
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
background-color: var(
--checkbox-checked-hover-bgcolor,
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
color-mix(in srgb, currentColor 12.5%, var(--uc-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)
color-mix(in srgb, currentColor 25%, var(--uc-accent-color))
) !important;
}
checkbox:-moz-focusring > .checkbox-check {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
@media (prefers-contrast) {
checkbox:not([disabled="true"]):hover > .checkbox-check {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
color: var(--checkbox-checked-border-color, color-mix(in srgb, var(--uc-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;
fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
}
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked],
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] {
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
}
}
.checkbox-icon[src] {
@ -1815,7 +1830,7 @@
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: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
@ -2681,14 +2696,14 @@
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
border-color: -moz-accent-color !important;
border-color: var(--uc-accent-color) !important;
}
/* Others */
#editBMPanel_namePicker:hover,
#editBMPanel_tagsField:hover,
.findbar-container .findbar-textbox:hover {
--input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
--input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent);
}
}
/*= Downloads Panel ========================================================*/
@ -3454,6 +3469,12 @@
#ContentSelectDropdown > menupopup > menuitem {
padding-block: 0 !important;
}
@media (-moz-gtk-csd-available) {
#ContentSelectDropdown > menupopup > menucaption,
#ContentSelectDropdown > menupopup > menuitem {
padding-block: var(--menu-padding) !important;
}
}
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
:root:not([uidensity="touch"]) .menu-text,
@ -4559,7 +4580,11 @@
.tab-background::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before {
~ #tabs-newtab-button::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery
#tabs-newtab-button::before {
opacity: 0 !important;
}
}
@ -4688,13 +4713,13 @@
@media (-moz-windows-accent-color-in-titlebar) {
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
fill: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) !important;
fill: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent) !important;
/* Hardcorded for compatibility */
}
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important;
fill: color-mix(in srgb, var(--uc-accent-text-color) 15%, transparent) !important;
/* Hardcorded for compatibility */
}
}
@ -4770,16 +4795,27 @@
--inline-tab-padding: 8px;
}
#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
#tabbrowser-tabs[closebuttons="activetab"]
.tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
mask-image: linear-gradient(to right, black 70%, transparent) !important;
.tabbrowser-tab .tab-label-container {
--tab-label-mask-size: 1.8em;
/* Original: 2em */
}
#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container {
--tab-label-mask-size: 30%;
}
#tabbrowser-tabs[closebuttons="activetab"]
.tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
mask-image: linear-gradient(to left, black 70%, transparent) !important;
.tabbrowser-tab:is([visuallyselected="true"], [multiselected="true"])
.tab-label-container {
--tab-label-mask-size: 25%;
}
.tabbrowser-tab[visuallyselected="true"]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab:not([visuallyselected="true"], [labelendaligned]):hover
.tab-label-container {
--tab-label-mask-size: 0.9em;
/* Original: 1em */
}
}
/** Clipped tabs - Show close button at hover *********************************/
@ -6630,9 +6666,9 @@
> 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)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -6675,9 +6711,9 @@
: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)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -6733,9 +6769,9 @@
: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)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -6765,9 +6801,9 @@
: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)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@ -6822,11 +6858,12 @@
}
/* 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, .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"));
}
*/
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menuitem:not(.menuitem-iconic, .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)
menu:not(.menu-iconic) {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
/*= Bookmark Menu - Layout ===================================================*/
/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
@ -7890,6 +7927,10 @@
--menuitem-image: url("chrome://browser/skin/mail.svg");
}
menu.share-tab-url-item {
--menuitem-image: url("chrome://browser/skin/share.svg");
}
#menu_print {
--menuitem-image: url("chrome://global/skin/icons/print.svg");
}
@ -7972,6 +8013,14 @@
--menuitem-image: url("chrome://browser/skin/characterEncoding.svg");
}
#enterFullScreenItem {
--menuitem-image: url("chrome://browser/skin/fullscreen.svg");
}
#exitFullScreenItem {
--menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
}
#fullScreenItem {
/* checkbox */
--menuitem-image: url("chrome://browser/skin/fullscreen.svg");
@ -8007,6 +8056,10 @@
--menuitem-image: url("../icons/resize.svg");
}
#toggle_zoom {
--menuitem-image: url("../icons/screenshot.svg");
}
/*= goPopup ==================================================================*/
#menu_showAllHistory {
--menuitem-image: url("chrome://browser/skin/history.svg");
@ -8129,6 +8182,14 @@
--menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}
/*= windowPopup ==============================================================*/
#windowPopup > menuitem[command="minimizeWindow"] {
--menuitem-image: url("../icons/arrow-between-down.svg");
}
#windowPopup > menuitem[command="zoomWindow"] {
--menuitem-image: url("../icons/auto-fit-width.svg");
}
/*= menu_HelpPopup ===========================================================*/
#menu_openHelp {
--menuitem-image: url("chrome://global/skin/icons/help.svg");

112
css/leptonContent.css
View file

@ -272,6 +272,77 @@
}
}
}
/** Activity Stream - Menu Icons ********************************************/
@supports -moz-bool-pref("userChrome.icon.context_menu") {
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
padding-inline-start: 24px;
/* 16p + (4px * 2) */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-image: var(--menuitem-image);
background-position: left 4px center;
}
.context-menu-item span[data-l10n-id="newtab-menu-pin"] {
--menuitem-image: url("../icons/pin-tab.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-unpin"] {
--menuitem-image: url("../icons/unpin-tab.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-edit-topsites"] {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-bookmark"] {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-remove-bookmark"] {
--menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-save-to-pocket"] {
--menuitem-image: url("../icons/pocket-outline.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-open-file"] {
--menuitem-image: url("../icons/fluid.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-show-file"] {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
}
@supports -moz-bool-pref("userChrome.icon.library") {
.context-menu-item span[data-l10n-id="newtab-menu-show-file"] {
--menuitem-image: url("../icons/folder.svg");
}
}
.context-menu-item span[data-l10n-id="newtab-menu-open-new-window"] {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-open-new-private-window"] {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-dismiss"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-delete-history"] {
--menuitem-image: url("../icons/eraser.svg");
}
}
/** Activity Stream - Web Site Icon: full size ******************************/
@supports -moz-bool-pref("userContent.newTab.full_icon") {
.top-site-outer .tile {
@ -539,6 +610,20 @@
/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
@supports -moz-bool-pref("userContent.page.proton_color") {
:root {
/* Compatibility for accent color
https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
*/
--uc-accent-color: AccentColor;
--uc-accent-text-color: AccentColorText;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
:root {
--uc-accent-color: -moz-accent-color;
--uc-accent-text-color: -moz-accent-color-foreground;
}
}
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
url-prefix("https://addons.mozilla.org"),
@ -751,7 +836,7 @@
@supports -moz-bool-pref("userContent.page.proton_color.system_accent") {
:host,
:root {
--in-content-primary-button-text-color: -moz-accent-color-foreground !important;
--in-content-primary-button-text-color: var(--uc-accent-text-color) !important;
--in-content-primary-button-background: Highlight !important;
--in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
--in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
@ -2763,9 +2848,9 @@
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;
color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
border-color: var(--checkbox-checked-border-color, transparent) !important;
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
@ -2775,19 +2860,19 @@
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)
color-mix(in srgb, var(--uc-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)
color-mix(in srgb, var(--uc-accent-color) 8%, Field)
) !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)
color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
) !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
@ -2795,21 +2880,24 @@
> .menu-iconic-icon {
background-color: var(
--checkbox-checked-active-bgcolor,
color-mix(in srgb, currentColor 25%, -moz-accent-color)
color-mix(in srgb, currentColor 25%, var(--uc-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: 2px solid var(--focus-outline-color, var(--uc-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;
color: var(
--checkbox-checked-border-color,
color-mix(in srgb, var(--uc-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;
fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
@ -2817,8 +2905,8 @@
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;
color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
}
}
menuitem[type="checkbox"] > .menu-iconic-text {

3
icons/arrow-between-down.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M2.824.47a.47.47 0 0 0-.942 0v.471c0 .78.632 1.412 1.412 1.412h9.412c.78 0 1.412-.632 1.412-1.412v-.47a.47.47 0 0 0-.942 0v.47c0 .26-.21.47-.47.47H3.294a.47.47 0 0 1-.47-.47zM8 3.295c.26 0 .47.21.47.47V11.1l3.433-3.432a.47.47 0 0 1 .665.666l-4.235 4.235a.47.47 0 0 1-.666 0L3.432 8.333a.47.47 0 0 1 .665-.666L7.53 11.1V3.765c0-.26.211-.47.471-.47zM1.882 15.06c0-.78.632-1.412 1.412-1.412h9.412c.78 0 1.412.632 1.412 1.412v.47a.47.47 0 0 1-.942 0v-.47a.47.47 0 0 0-.47-.47H3.294a.47.47 0 0 0-.47.47v.47a.47.47 0 0 1-.942 0Z" style="stroke-width:.941176"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 713 B

3
icons/auto-fit-width.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M16 2.5a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0zm-15 0a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0Zm11.854 5.146a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L11.293 8.5H4.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L4.707 7.5h6.586l-1.147-1.146a.5.5 0 0 1 .708-.708z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 447 B

2
install.ps1
View file

@ -826,7 +826,7 @@ function Copy-Lepton() {
Param (
[Parameter(Position=0)]
[string] $chromeDir = "chrome",
[Parameter(Position=0)]
[Parameter(Position=1)]
[string] $userJSPath = "${chromeDir}\user.js"
)

12
src/compatibility/_accent_color.scss Normal file
View file

@ -0,0 +1,12 @@
:root {
/* Compatibility for accent color
https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
*/
--uc-accent-color: AccentColor;
--uc-accent-text-color: AccentColorText;
@include Option("userChrome.compatibility.accent_color") {
--uc-accent-color: -moz-accent-color;
--uc-accent-text-color: -moz-accent-color-foreground;
}
}

3
src/compatibility/_index.scss
View file

@ -1,3 +1,6 @@
/*= Color - Compatibility ====================================================*/
@import "accent_color";
/*= Theme - Compatibility ====================================================*/
@include Option("userChrome.compatibility.theme") {
@import "theme";

2
src/compatibility/_os.scss
View file

@ -10,7 +10,7 @@
@media (-moz-windows-accent-color-in-titlebar) {
#navigator-toolbox {
border-top-color: -moz-accent-color !important;
border-top-color: var(--uc-accent-color) !important;
}
}
}

6
src/contents/_activity_stream.scss
View file

@ -27,6 +27,12 @@
}
}
/** Activity Stream - Menu Icons ********************************************/
@include Option("userChrome.icon.context_menu") {
@import "../icons/layout_activity_stream";
@import "../icons/activity_stream";
}
/** Activity Stream - Web Site Icon: full size ******************************/
@include Option("userContent.newTab.full_icon") {
.top-site-outer .tile {

2
src/contents/_proton_color.scss
View file

@ -19,7 +19,7 @@
@include Option("userContent.page.proton_color.system_accent") {
:host, :root {
--in-content-primary-button-text-color: -moz-accent-color-foreground !important;
--in-content-primary-button-text-color: var(--uc-accent-text-color) !important;
--in-content-primary-button-background: Highlight !important;
--in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
--in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;

4
src/decoration/_field_border.scss
View file

@ -12,12 +12,12 @@ body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
}
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
border-color: -moz-accent-color !important;
border-color: var(--uc-accent-color) !important;
}
/* Others */
#editBMPanel_namePicker:hover,
#editBMPanel_tagsField:hover,
.findbar-container .findbar-textbox:hover {
--input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
--input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent);
}

41
src/icons/_activity_stream.scss Normal file
View file

@ -0,0 +1,41 @@
.context-menu-item span[data-l10n-id="newtab-menu-pin"] {
--menuitem-image: url("../icons/pin-tab.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-unpin"] {
--menuitem-image: url("../icons/unpin-tab.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-edit-topsites"] {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-bookmark"] {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-remove-bookmark"] {
--menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-save-to-pocket"] {
--menuitem-image: url("../icons/pocket-outline.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-open-file"] {
--menuitem-image: url("../icons/fluid.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-show-file"] {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
@include Option("userChrome.icon.library") {
--menuitem-image: url("../icons/folder.svg");
}
}
.context-menu-item span[data-l10n-id="newtab-menu-open-new-window"] {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-open-new-private-window"] {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-dismiss"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-delete-history"] {
--menuitem-image: url("../icons/eraser.svg");
}

23
src/icons/_global_menu.scss
View file

@ -32,6 +32,9 @@
#menu_sendLink {
--menuitem-image: url("chrome://browser/skin/mail.svg");
}
menu.share-tab-url-item {
--menuitem-image: url("chrome://browser/skin/share.svg");
}
#menu_printPreview {
}
@ -114,6 +117,12 @@
--menuitem-image: url("chrome://browser/skin/characterEncoding.svg");
}
#enterFullScreenItem {
--menuitem-image: url("chrome://browser/skin/fullscreen.svg");
}
#exitFullScreenItem {
--menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
}
#fullScreenItem {
/* checkbox */
--menuitem-image: url("chrome://browser/skin/fullscreen.svg");
@ -145,6 +154,10 @@
--menuitem-image: url("../icons/resize.svg");
}
#toggle_zoom {
--menuitem-image: url("../icons/screenshot.svg");
}
/*= goPopup ==================================================================*/
#menu_showAllHistory {
--menuitem-image: url("chrome://browser/skin/history.svg");
@ -262,6 +275,16 @@
--menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg");
}
/*= windowPopup ==============================================================*/
#windowPopup > menuitem {
&[command="minimizeWindow"] {
--menuitem-image: url("../icons/arrow-between-down.svg");
}
&[command="zoomWindow"] {
--menuitem-image: url("../icons/auto-fit-width.svg");
}
}
/*= menu_HelpPopup ===========================================================*/
#menu_openHelp {
--menuitem-image: url("chrome://global/skin/icons/help.svg");

16
src/icons/_layout_activity_stream.scss Normal file
View file

@ -0,0 +1,16 @@
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
padding-inline-start: 24px; /* 16p + (4px * 2) */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-image: var(--menuitem-image);
background-position: left 4px center;
}

6
src/icons/_layout_menu.scss
View file

@ -118,9 +118,7 @@ $_layoutCommonMenus: (
}
/* Global Menu */
/* Disabled. some icons not appear
#{$_iconMenuPopupMenus} {
list-style-image: var(--menuitem-image, url("../icons/blank.svg"));
#{selector.nest($_iconMenuPopup, "menuitem:not(.menuitem-iconic, .bookmark-item), menu:not(.menu-iconic)")} {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
*/
}

2
src/icons/_layout_menu_common.scss
View file

@ -10,7 +10,7 @@ $_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)";
$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)";
$_nestedPopupIconMenus: selector.nest(
$_nestedPopupIcon,

1
src/leptonContent.scss
View file

@ -22,6 +22,7 @@
/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
@include Option("userContent.page.proton_color") {
@import "compatibility/accent_color";
@import "contents/proton_color";
}
@include Option("userContent.page.dark_mode") {

4
src/padding/_menu.scss
View file

@ -25,6 +25,10 @@ menupopup > menu {
#ContentSelectDropdown > menupopup > menucaption,
#ContentSelectDropdown > menupopup > menuitem {
padding-block: 0 !important;
@include OS($linux) {
padding-block: var(--menu-padding) !important;
}
}
@include OS($mac) {

25
src/tabbar/clipped_tab/_letters_cleary.scss
View file

@ -13,14 +13,23 @@
--inline-tab-padding: 8px;
}
#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
#tabbrowser-tabs[closebuttons="activetab"]
.tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
mask-image: linear-gradient(to right, black 70%, transparent) !important;
// mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
.tabbrowser-tab {
.tab-label-container {
--tab-label-mask-size: 1.8em; /* Original: 2em */
}
}
#tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
#tabbrowser-tabs[closebuttons="activetab"]
.tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
mask-image: linear-gradient(to left, black 70%, transparent) !important;
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab {
.tab-label-container {
--tab-label-mask-size: 30%;
}
&:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container {
--tab-label-mask-size: 25%;
}
}
.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover .tab-label-container {
--tab-label-mask-size: 0.9em; /* Original: 1em */
}

4
src/tabbar/newtab_button/_looks_like_tab.scss
View file

@ -36,7 +36,7 @@
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
fill: color-mix(
in srgb,
-moz-accent-color-foreground 10%,
var(--uc-accent-text-color) 10%,
transparent
) !important; /* Hardcorded for compatibility */
}
@ -44,7 +44,7 @@
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
fill: color-mix(
in srgb,
-moz-accent-color-foreground 15%,
var(--uc-accent-text-color) 15%,
transparent
) !important; /* Hardcorded for compatibility */
}

5
src/tabbar/unselected_tab/_dynamic_separator.scss
View file

@ -99,7 +99,10 @@
.tab-background::before,
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabs-newtab-button::before {
~ #tabs-newtab-button::before, /* Legacy - v103 */
#navigator-toolbox:not([movingtab])
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before {
opacity: 0 !important;
}
}

4
src/theme/_fully_color.scss
View file

@ -155,8 +155,8 @@ body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] {
}
.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
border-color: -moz-accent-color !important; /* Hard Coded */
outline-color: -moz-accent-color !important;
border-color: var(--uc-accent-color) !important; /* Hard Coded */
outline-color: var(--uc-accent-color) !important;
}
/*= PopupAutoComplete ========================================================*/

2
src/theme/proton_chrome/_proton_commons.scss
View file

@ -269,7 +269,7 @@
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: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
}

2
src/theme/system_default_theme/_gtk.scss
View file

@ -1,7 +1,7 @@
/*= GTK - URL View url accent color ==========================================*/
@include OS($linux) {
:root:not(:-moz-lwtheme) .urlbarView-url {
--urlbar-popup-url-color: -moz-accent-color;
--urlbar-popup-url-color: var(--uc-accent-color);
}
/* Nightly Compatibility */

10
src/theme/system_default_theme/_mac.scss
View file

@ -12,15 +12,15 @@
--mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
--mac-hover-bgcolor: Window;
--mac-disabled-bgcolor: transparent;
--mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
--mac-accent-color: -moz-accent-color; /* or LinkText */
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
--mac-primary-button-color: var(--uc-accent-text-color); /* or -moz-mac-menutextselect */
--mac-accent-color: var(--uc-accent-color); /* or LinkText */
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, var(--uc-accent-color));
--mac-accent-hover-color: color-mix(
in srgb,
rgb(0, 0, 0) 10%,
-moz-accent-color
var(--uc-accent-color)
); /* or -moz-mac-menuselect, Highlight */
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color)); /* or ActiveBorder */
/* Text, Icon Color */
--menu-color: var(--mac-text-color) !important;

4
src/theme/system_default_theme/_urlbar_focus_color.scss
View file

@ -7,14 +7,14 @@ $_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode
/* URL Bar */
#{$_urlBarFocusSelector},
#{$_urlBarFocusDarkSelector} {
--focus-outline-color: -moz-accent-color !important;
--focus-outline-color: var(--uc-accent-color) !important;
}
#{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background,
#{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background {
border-color: color-mix(
in srgb,
-moz-accent-color 50%,
var(--uc-accent-color) 50%,
transparent
) !important; /* Like: --toolbar-field-focus-border-color */
}

34
src/theme/system_default_theme/_win10.scss
View file

@ -21,11 +21,11 @@
--win-shorcut-text-color: #757575;
--win-error-color: #b31616;
--win-red-border-color: #ff4343;
--win-accent-forground-color: -moz-accent-color-foreground;
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
--win-accent-active-color: -moz-accent-color;
--win-accent-forground-color: var(--uc-accent-text-color);
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, var(--uc-accent-color));
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, var(--uc-accent-color));
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, var(--uc-accent-color));
--win-accent-active-color: var(--uc-accent-color);
}
@include Dark {
#{system-default-theme()} {
@ -49,10 +49,10 @@
--win-shorcut-text-color: #adadad;
--win-error-color: #ffb900;
--win-red-border-color: #ff4343;
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
--win-accent-active-color: -moz-accent-color;
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, var(--uc-accent-color));
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, var(--uc-accent-color));
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, var(--uc-accent-color));
--win-accent-active-color: var(--uc-accent-color);
}
}
@ -84,8 +84,7 @@
--panel-shortcut-color: var(--win-shorcut-text-color) !important;
--panel-description-color: var(--win-shorcut-text-color) !important;
/* Title Background, Border Color */
--menu-border-color: var(--win-bgcolor) !important;
/* Title Background */
--lwt-accent-color: var(--win-bgcolor) !important;
--toolbar-field-border-color: var(--win-bgcolor) !important;
--chrome-content-separator-color: var(--win-bgcolor) !important;
@ -97,6 +96,9 @@
--arrowpanel-background: var(--win-component-bgcolor) !important;
--autocomplete-popup-background: var(--win-component-bgcolor) !important;
/* Border Color */
// --menu-border-color: var(--win-border-color) !important;
/* Seperator */
--toolbarseparator-color: var(--win-tab-seperator-color) !important;
@ -249,7 +251,7 @@
.sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
--lwt-sidebar-background-color: transparent !important;
--lwt-sidebar-background-color: var(--win-sidebar-bgcolor) !important;
--lwt-sidebar-text-color: var(--win-text-color) !important;
}
}
@ -312,14 +314,14 @@
: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;
color: var(--uc-accent-text-color);
background-color: var(--uc-accent-color);
}
.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);
--toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent);
--toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent);
}
}
}

22
src/utils/_proton_elements.scss
View file

@ -88,10 +88,10 @@
@mixin CheckboxCheckedIcon {
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
border-color: var(--checkbox-checked-border-color, transparent) !important;
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
@ -103,48 +103,48 @@
@mixin CheckboxIconHover {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
color-mix(in srgb, var(--uc-accent-color) 4%, Field)
) !important;
}
@mixin CheckboxIconActive {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, -moz-accent-color 8%, Field)
color-mix(in srgb, var(--uc-accent-color) 8%, Field)
) !important;
}
@mixin CheckboxCheckedIconHover {
background-color: var(
--checkbox-checked-hover-bgcolor,
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
) !important;
}
@mixin CheckboxCheckedIconActive {
background-color: var(
--checkbox-checked-active-bgcolor,
color-mix(in srgb, currentColor 25%, -moz-accent-color)
color-mix(in srgb, currentColor 25%, var(--uc-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;
color: var(--checkbox-checked-border-color, color-mix(in srgb, var(--uc-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;
fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !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;
color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
}
@mixin CheckboxFocusRing {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}

21
user.js
View file

@ -28,33 +28,36 @@ user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar"
// ** Theme Related Options ****************************************************
// == Theme Distribution Settings ==============================================
// The rows that are located continuously must be changed `true`/`false` explicitly because there is a collision.
// https://github.com/black7375/Firefox-UI-Fix/wiki/Options#important
user_pref("userChrome.tab.connect_to_window", true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar", true); // Original, Photon
user_pref("userChrome.tab.lepton_like_padding", true); // Original
// user_pref("userChrome.tab.photon_like_padding", true); // Photon
user_pref("userChrome.tab.photon_like_padding", false); // Photon
user_pref("userChrome.tab.dynamic_separtor", true); // Original, Proton
// user_pref("userChrome.tab.static_separator", true); // Photon
// user_pref("userChrome.tab.static_separator.selected_accent", true); // Just option
user_pref("userChrome.tab.static_separator", false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.newtab_button_like_tab", true); // Original
// user_pref("userChrome.tab.newtab_button_smaller", true); // Photon
// user_pref("userChrome.tab.newtab_button_proton", true); // Proton
user_pref("userChrome.tab.newtab_button_smaller", false); // Photon
user_pref("userChrome.tab.newtab_button_proton", false); // Proton
user_pref("userChrome.icon.panel_full", true); // Original, Proton
// user_pref("userChrome.icon.panel_photon", true); // Photon
// user_pref("userChrome.icon.panel_sparse", true); // Just option
user_pref("userChrome.icon.panel_photon", false); // Photon
user_pref("userChrome.icon.panel_sparse", false); // Just option
// Original Only
user_pref("userChrome.tab.box_shadow", true);
user_pref("userChrome.tab.bottom_rounded_corner", true);
// Photon Only
// user_pref("userChrome.tab.photon_like_contextline", true);
// user_pref("userChrome.rounding.square_tab", true);
user_pref("userChrome.tab.photon_like_contextline", false);
user_pref("userChrome.rounding.square_tab", false);
// == Theme Compatibility Settings =============================================
// user_pref("userChrome.compatibility.accent_color", true); // Firefox v103 Below
// user_pref("userChrome.compatibility.covered_header_image", true);
// user_pref("userChrome.compatibility.panel_cutoff", true);
// user_pref("userChrome.compatibility.navbar_top_border", true);