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

Fix: Compatibility - Accent Color #433

Browse source
This commit is contained in:
alstjr7375 2022-07-20 02:25:16 +09:00
parent 1e5b9c83a5
commit 56a88a5ab4
17 changed files with 142 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

95
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: AccentColorText;
}
}
/*= 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),
@ -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 ========================================================*/
@ -4535,13 +4550,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 */
}
}

41
css/leptonContent.css
View file

@ -539,6 +539,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: AccentColorText;
}
}
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
url-prefix("https://addons.mozilla.org"),
@ -751,7 +765,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 +2777,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 +2789,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 +2809,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 +2834,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 {

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;
}
}
}

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);
}

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/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 */
}

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 */
}

26
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);
}
}
@ -312,14 +312,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;
}

1
user.js
View file

@ -57,6 +57,7 @@ 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);