mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-30 12:20:36 -08:00
Fix: Compatibility - Hard coded -moz-accent-color #437
This commit is contained in:
alstjr7375
parent
d89c2df8f4
commit
ddd8b4401d
19 changed files with 514 additions and 186 deletions
62
__tests__/accent_color.test.scss
Normal file
62
__tests__/accent_color.test.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@use "true" as *;
|
||||
@use "../src/utils/accent_color" as *;
|
||||
|
||||
@include test-module("Accent Color Option [mix]") {
|
||||
@include test("simple") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include AccentColor {
|
||||
body {
|
||||
background-color: $accentColor;
|
||||
color: $accentTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
body {
|
||||
background-color: AccentColor;
|
||||
color: AccentColorText;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
body {
|
||||
background-color: -moz-accent-color;
|
||||
color: -moz-accent-color-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include test("css var") {
|
||||
@include assert {
|
||||
@include output {
|
||||
:root {
|
||||
@include AccentColor {
|
||||
// Don't use like this!!
|
||||
--uc-accent-color: $accentColor;
|
||||
--uc-accent-text-color: $accentTextColor;
|
||||
|
||||
// Use like this
|
||||
--uc-accent-color: #{$accentColor};
|
||||
--uc-accent-text-color: #{$accentTextColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
:root {
|
||||
--uc-accent-color: $accentColor;
|
||||
--uc-accent-text-color: $accentTextColor;
|
||||
--uc-accent-color: AccentColor;
|
||||
--uc-accent-text-color: AccentColorText;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root {
|
||||
--uc-accent-color: $accentColor;
|
||||
--uc-accent-text-color: $accentTextColor;
|
||||
--uc-accent-color: -moz-accent-color;
|
||||
--uc-accent-text-color: -moz-accent-color-foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29,21 +29,6 @@
|
|||
}
|
||||
}
|
||||
/** 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 ===============================================================*/
|
||||
|
|
@ -161,7 +146,12 @@
|
|||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[sizemode="normal"][tabsintitlebar] #navigator-toolbox {
|
||||
border-top-color: var(--uc-accent-color) !important;
|
||||
border-top-color: AccentColor !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root[sizemode="normal"][tabsintitlebar] #navigator-toolbox {
|
||||
border-top-color: -moz-accent-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -366,16 +356,31 @@
|
|||
/* 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: var(--uc-accent-color) !important;
|
||||
--focus-outline-color: AccentColor !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, var(--uc-accent-color) 50%, transparent) !important;
|
||||
border-color: color-mix(in srgb, AccentColor 50%, transparent) !important;
|
||||
/* Like: --toolbar-field-focus-border-color */
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
|
||||
--focus-outline-color: -moz-accent-color !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
|
||||
#urlbar[open]
|
||||
> #urlbar-background {
|
||||
border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important;
|
||||
/* Like: --toolbar-field-focus-border-color */
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Windows7 - Aero Based Theme ==============================================*/
|
||||
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
|
||||
|
|
@ -433,11 +438,20 @@
|
|||
--win-shorcut-text-color: #757575;
|
||||
--win-error-color: #b31616;
|
||||
--win-red-border-color: #ff4343;
|
||||
--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);
|
||||
--win-accent-forground-color: AccentColorText;
|
||||
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, AccentColor);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, AccentColor);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, AccentColor);
|
||||
--win-accent-active-color: AccentColor;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--win-accent-forground-color: -moz-accent-color-foreground;
|
||||
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
|
||||
--win-accent-active-color: -moz-accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
|
|
@ -465,10 +479,19 @@
|
|||
--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%, 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);
|
||||
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, AccentColor);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, AccentColor);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, AccentColor);
|
||||
--win-accent-active-color: AccentColor;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
|
||||
--win-accent-active-color: -moz-accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
:root:not(:-moz-lwtheme),
|
||||
|
|
@ -719,20 +742,39 @@
|
|||
/* 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: var(--uc-accent-text-color);
|
||||
background-color: var(--uc-accent-color);
|
||||
color: AccentColorText;
|
||||
background-color: AccentColor;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
|
||||
color: -moz-accent-color-foreground;
|
||||
background-color: -moz-accent-color;
|
||||
}
|
||||
}
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
|
||||
--toolbarbutton-icon-fill: currentColor;
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent);
|
||||
--toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent);
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, AccentColorText 10%, transparent);
|
||||
--toolbarbutton-active-background: color-mix(in srgb, AccentColorText 15%, transparent);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.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-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
|
||||
--toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= GTK - URL View url accent color ==========================================*/
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:not(:-moz-lwtheme) .urlbarView-url {
|
||||
--urlbar-popup-url-color: var(--uc-accent-color);
|
||||
--urlbar-popup-url-color: AccentColor;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root:not(:-moz-lwtheme) .urlbarView-url {
|
||||
--urlbar-popup-url-color: -moz-accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nightly Compatibility */
|
||||
|
|
@ -758,14 +800,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: var(--uc-accent-text-color);
|
||||
--mac-primary-button-color: AccentColorText;
|
||||
/* or -moz-mac-menutextselect */
|
||||
--mac-accent-color: var(--uc-accent-color);
|
||||
--mac-accent-color: AccentColor;
|
||||
/* 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%, var(--uc-accent-color));
|
||||
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, AccentColor);
|
||||
--mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, AccentColor);
|
||||
/* or -moz-mac-menuselect, Highlight */
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color));
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, AccentColor);
|
||||
/* or ActiveBorder */
|
||||
/* Text, Icon Color */
|
||||
--menu-color: var(--mac-text-color) !important;
|
||||
|
|
@ -872,6 +914,20 @@
|
|||
--download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
|
||||
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--mac-primary-button-color: -moz-accent-color-foreground;
|
||||
/* or -moz-mac-menutextselect */
|
||||
--mac-accent-color: -moz-accent-color;
|
||||
/* or LinkText */
|
||||
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
|
||||
--mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, -moz-accent-color);
|
||||
/* or -moz-mac-menuselect, Highlight */
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color);
|
||||
/* or ActiveBorder */
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
|
|
@ -1371,9 +1427,17 @@
|
|||
|
||||
.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
|
||||
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
|
||||
border-color: var(--uc-accent-color) !important;
|
||||
border-color: AccentColor !important;
|
||||
/* Hard Coded */
|
||||
outline-color: var(--uc-accent-color) !important;
|
||||
outline-color: AccentColor !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
|
||||
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
|
||||
border-color: -moz-accent-color !important;
|
||||
/* Hard Coded */
|
||||
outline-color: -moz-accent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= PopupAutoComplete ========================================================*/
|
||||
|
|
@ -1730,61 +1794,116 @@
|
|||
.checkbox-check[checked] {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !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, var(--uc-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;
|
||||
color: var(--checkbox-checked-color, AccentColorText) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, AccentColor) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
.checkbox-check[checked] {
|
||||
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-hover-bgcolor,
|
||||
color-mix(in srgb, var(--uc-accent-color) 4%, Field)
|
||||
) !important;
|
||||
background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field)) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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, var(--uc-accent-color) 8%, Field)
|
||||
) !important;
|
||||
background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field)) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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:not([disabled="true"]):hover > .checkbox-check[checked] {
|
||||
background-color: var(
|
||||
--checkbox-checked-hover-bgcolor,
|
||||
color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
|
||||
color-mix(in srgb, currentColor 12.5%, AccentColor)
|
||||
) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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%, var(--uc-accent-color))
|
||||
color-mix(in srgb, currentColor 25%, AccentColor)
|
||||
) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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, var(--uc-accent-color)) !important;
|
||||
outline: 2px solid var(--focus-outline-color, AccentColor) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
checkbox:-moz-focusring > .checkbox-check {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !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, var(--uc-accent-color) 4%, Field)) !important;
|
||||
color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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, var(--uc-accent-text-color)) !important;
|
||||
fill: var(--checkbox-checked-color, AccentColorText) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
.checkbox-check[checked] {
|
||||
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !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, var(--uc-accent-text-color)) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important;
|
||||
color: var(--checkbox-checked-border-color-hover, AccentColorText) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, AccentColorText) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-icon[src] {
|
||||
|
|
@ -1830,9 +1949,14 @@
|
|||
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, var(--uc-accent-color)) !important;
|
||||
outline: 2px solid var(--focus-outline-color, AccentColor) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
xul|menulist:-moz-focusring {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#label-box {
|
||||
-moz-box-align: center !important;
|
||||
|
|
@ -2696,14 +2820,27 @@
|
|||
|
||||
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
|
||||
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
|
||||
border-color: var(--uc-accent-color) !important;
|
||||
border-color: AccentColor !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
.sidebar-panel:not([lwt-sidebar]) #search-box:hover,
|
||||
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
|
||||
border-color: -moz-accent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Others */
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent);
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, AccentColor) 50%, transparent);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= Downloads Panel ========================================================*/
|
||||
|
|
@ -4554,15 +4691,30 @@
|
|||
@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, var(--uc-accent-text-color) 10%, transparent) !important;
|
||||
fill: color-mix(in srgb, AccentColorText 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, var(--uc-accent-text-color) 15%, transparent) !important;
|
||||
fill: color-mix(in srgb, AccentColorText 15%, transparent) !important;
|
||||
/* Hardcorded for compatibility */
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
fill: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) !important;
|
||||
/* Hardcorded for compatibility */
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important;
|
||||
/* Hardcorded for compatibility */
|
||||
}
|
||||
}
|
||||
}
|
||||
/* '+'Icon */
|
||||
#tabs-newtab-button .toolbarbutton-icon {
|
||||
|
|
|
|||
|
|
@ -610,20 +610,6 @@
|
|||
/** 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"),
|
||||
|
|
@ -836,11 +822,17 @@
|
|||
@supports -moz-bool-pref("userContent.page.proton_color.system_accent") {
|
||||
:host,
|
||||
:root {
|
||||
--in-content-primary-button-text-color: var(--uc-accent-text-color) !important;
|
||||
--in-content-primary-button-text-color: $accentTextColor !important;
|
||||
--in-content-primary-button-background: Highlight !important;
|
||||
--in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
|
||||
--in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:host,
|
||||
:root {
|
||||
--in-content-primary-button-text-color: $accentTextColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2848,56 +2840,111 @@
|
|||
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !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, var(--uc-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;
|
||||
color: var(--checkbox-checked-color, AccentColorText) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, AccentColor) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
|
||||
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !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, var(--uc-accent-color) 4%, Field)
|
||||
color-mix(in srgb, AccentColor 4%, Field)
|
||||
) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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, var(--uc-accent-color) 8%, Field)
|
||||
color-mix(in srgb, AccentColor 8%, Field)
|
||||
) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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"]: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%, var(--uc-accent-color))
|
||||
color-mix(in srgb, currentColor 12.5%, AccentColor)
|
||||
) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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%, var(--uc-accent-color))
|
||||
color-mix(in srgb, currentColor 25%, AccentColor)
|
||||
) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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, var(--uc-accent-color)) !important;
|
||||
outline: 2px solid var(--focus-outline-color, AccentColor) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !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, var(--uc-accent-color) 4%, Field)
|
||||
) !important;
|
||||
color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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, var(--uc-accent-text-color)) !important;
|
||||
fill: var(--checkbox-checked-color, AccentColorText) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
|
||||
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
}
|
||||
}
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
|
||||
> .menu-iconic-left[checked="true"]
|
||||
|
|
@ -2905,8 +2952,19 @@
|
|||
menuitem[type="checkbox"]:not([disabled="true"]):hover
|
||||
> .menu-iconic-left[checked="true"]
|
||||
> .menu-iconic-icon {
|
||||
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;
|
||||
color: var(--checkbox-checked-border-color-hover, AccentColorText) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, AccentColorText) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
menuitem[type="checkbox"] > .menu-iconic-text {
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
: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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
/*= Color - Compatibility ====================================================*/
|
||||
@import "accent_color";
|
||||
|
||||
/*= Theme - Compatibility ====================================================*/
|
||||
@include Option("userChrome.compatibility.theme") {
|
||||
@import "theme";
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
#navigator-toolbox {
|
||||
border-top-color: var(--uc-accent-color) !important;
|
||||
@include AccentColor {
|
||||
border-top-color: $accentColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@
|
|||
|
||||
@include Option("userContent.page.proton_color.system_accent") {
|
||||
:host, :root {
|
||||
--in-content-primary-button-text-color: var(--uc-accent-text-color) !important;
|
||||
@include AccentColor {
|
||||
--in-content-primary-button-text-color: $accentTextColor !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;
|
||||
|
|
|
|||
|
|
@ -12,12 +12,16 @@ 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: var(--uc-accent-color) !important;
|
||||
@include AccentColor {
|
||||
border-color: $accentColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Others */
|
||||
#editBMPanel_namePicker:hover,
|
||||
#editBMPanel_tagsField:hover,
|
||||
.findbar-container .findbar-textbox:hover {
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent);
|
||||
@include AccentColor {
|
||||
--input-border-color: color-mix(in srgb, var(--focus-outline-color, #{$accentColor}) 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
@use "utils/option" as *;
|
||||
@use "utils/color_scheme" as *;
|
||||
@use "utils/theme" as *;
|
||||
@use "utils/accent_color" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@use "utils/os" as *;
|
||||
@use "utils/option" as *;
|
||||
@use "utils/color_scheme" as *;
|
||||
@use "utils/accent_color" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
|
@ -22,7 +23,6 @@
|
|||
/** 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") {
|
||||
|
|
|
|||
|
|
@ -32,21 +32,23 @@
|
|||
fill: var(--toolbarbutton-active-background) !important;
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
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,
|
||||
var(--uc-accent-text-color) 15%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
@include AccentColor {
|
||||
: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,
|
||||
$accentTextColor 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,
|
||||
$accentTextColor 15%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -155,8 +155,10 @@ 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: var(--uc-accent-color) !important; /* Hard Coded */
|
||||
outline-color: var(--uc-accent-color) !important;
|
||||
@include AccentColor {
|
||||
border-color: $accentColor !important; /* Hard Coded */
|
||||
outline-color: $accentColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= PopupAutoComplete ========================================================*/
|
||||
|
|
|
|||
|
|
@ -269,7 +269,9 @@
|
|||
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
|
||||
}
|
||||
&:-moz-focusring {
|
||||
outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
|
||||
@include AccentColor {
|
||||
outline: 2px solid var(--focus-outline-color, $accentColor) !important;
|
||||
}
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
/*= GTK - URL View url accent color ==========================================*/
|
||||
@include OS($linux) {
|
||||
:root:not(:-moz-lwtheme) .urlbarView-url {
|
||||
--urlbar-popup-url-color: var(--uc-accent-color);
|
||||
@include AccentColor {
|
||||
--urlbar-popup-url-color: #{$accentColor};
|
||||
}
|
||||
}
|
||||
|
||||
/* Nightly Compatibility */
|
||||
|
|
|
|||
|
|
@ -12,15 +12,17 @@
|
|||
--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: 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%,
|
||||
var(--uc-accent-color)
|
||||
); /* or -moz-mac-menuselect, Highlight */
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color)); /* or ActiveBorder */
|
||||
@include AccentColor {
|
||||
--mac-primary-button-color: #{$accentTextColor}; /* or -moz-mac-menutextselect */
|
||||
--mac-accent-color: #{$accentColor}; /* or LinkText */
|
||||
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, #{$accentColor});
|
||||
--mac-accent-hover-color: color-mix(
|
||||
in srgb,
|
||||
rgb(0, 0, 0) 10%,
|
||||
#{$accentColor}
|
||||
); /* or -moz-mac-menuselect, Highlight */
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, #{$accentColor}); /* or ActiveBorder */
|
||||
}
|
||||
|
||||
/* Text, Icon Color */
|
||||
--menu-color: var(--mac-text-color) !important;
|
||||
|
|
|
|||
|
|
@ -5,17 +5,19 @@ $_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode
|
|||
|
||||
@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
|
||||
/* URL Bar */
|
||||
#{$_urlBarFocusSelector},
|
||||
#{$_urlBarFocusDarkSelector} {
|
||||
--focus-outline-color: var(--uc-accent-color) !important;
|
||||
}
|
||||
@include AccentColor {
|
||||
#{$_urlBarFocusSelector},
|
||||
#{$_urlBarFocusDarkSelector} {
|
||||
--focus-outline-color: #{$accentColor} !important;
|
||||
}
|
||||
|
||||
#{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background,
|
||||
#{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--uc-accent-color) 50%,
|
||||
transparent
|
||||
) !important; /* Like: --toolbar-field-focus-border-color */
|
||||
#{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background,
|
||||
#{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
$accentColor 50%,
|
||||
transparent
|
||||
) !important; /* Like: --toolbar-field-focus-border-color */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,11 +21,13 @@
|
|||
--win-shorcut-text-color: #757575;
|
||||
--win-error-color: #b31616;
|
||||
--win-red-border-color: #ff4343;
|
||||
--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 AccentColor {
|
||||
--win-accent-forground-color: #{$accentTextColor};
|
||||
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, #{$accentColor});
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, #{$accentColor});
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, #{$accentColor});
|
||||
--win-accent-active-color: #{$accentColor};
|
||||
}
|
||||
}
|
||||
@include Dark {
|
||||
#{system-default-theme()} {
|
||||
|
|
@ -49,10 +51,12 @@
|
|||
--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%, 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);
|
||||
@include AccentColor {
|
||||
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, #{$accentColor});
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, #{$accentColor});
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, #{$accentColor});
|
||||
--win-accent-active-color: #{$accentColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,14 +318,18 @@
|
|||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
|
||||
.titlebar-color {
|
||||
color: var(--uc-accent-text-color);
|
||||
background-color: var(--uc-accent-color);
|
||||
@include AccentColor {
|
||||
color: $accentTextColor;
|
||||
background-color: $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-items {
|
||||
--toolbarbutton-icon-fill: currentColor;
|
||||
--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);
|
||||
@include AccentColor {
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, #{$accentTextColor} 10%, transparent);
|
||||
--toolbarbutton-active-background: color-mix(in srgb, #{$accentTextColor} 15%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
src/utils/_accent_color.scss
Normal file
21
src/utils/_accent_color.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@use "option" as *;
|
||||
|
||||
// Compatibility for accent color
|
||||
// https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
|
||||
//
|
||||
// Need to hard coded #437
|
||||
$accentColor: AccentColor;
|
||||
$accentTextColor: AccentColorText;
|
||||
|
||||
@mixin AccentColor() {
|
||||
@content;
|
||||
|
||||
@include Option("userChrome.compatibility.accent_color") {
|
||||
$accentColor: -moz-accent-color !global;
|
||||
$accentTextColor: -moz-accent-color-foreground !global;
|
||||
|
||||
@content;
|
||||
}
|
||||
$accentColor: AccentColor !global;
|
||||
$accentTextColor: AccentColorText !global;
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@use "accent_color" as *;
|
||||
|
||||
//== Radio Button ==============================================================
|
||||
@mixin RadioGlobal {
|
||||
/* margin-inline-start: 0 !important; */
|
||||
|
|
@ -88,63 +90,82 @@
|
|||
@mixin CheckboxCheckedIcon {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !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, var(--uc-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;
|
||||
|
||||
@include AccentColor {
|
||||
color: var(--checkbox-checked-color, $accentTextColor) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, $accentColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxIconHover {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-hover-bgcolor,
|
||||
color-mix(in srgb, var(--uc-accent-color) 4%, Field)
|
||||
) !important;
|
||||
@include AccentColor {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-hover-bgcolor,
|
||||
color-mix(in srgb, $accentColor 4%, Field)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxIconActive {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-active-bgcolor,
|
||||
color-mix(in srgb, var(--uc-accent-color) 8%, Field)
|
||||
) !important;
|
||||
@include AccentColor {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-active-bgcolor,
|
||||
color-mix(in srgb, $accentColor 8%, Field)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconHover {
|
||||
background-color: var(
|
||||
--checkbox-checked-hover-bgcolor,
|
||||
color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color))
|
||||
) !important;
|
||||
@include AccentColor {
|
||||
background-color: var(
|
||||
--checkbox-checked-hover-bgcolor,
|
||||
color-mix(in srgb, currentColor 12.5%, $accentColor)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconActive {
|
||||
background-color: var(
|
||||
--checkbox-checked-active-bgcolor,
|
||||
color-mix(in srgb, currentColor 25%, var(--uc-accent-color))
|
||||
) !important;
|
||||
@include AccentColor {
|
||||
background-color: var(
|
||||
--checkbox-checked-active-bgcolor,
|
||||
color-mix(in srgb, currentColor 25%, $accentColor)
|
||||
) !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, var(--uc-accent-color) 4%, Field)) !important;
|
||||
@include AccentColor {
|
||||
/* 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, $accentColor 4%, Field)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconContrast {
|
||||
color: var(--checkbox-checked-border-color, currentColor) !important;
|
||||
fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important;
|
||||
@include AccentColor {
|
||||
fill: var(--checkbox-checked-color, $accentTextColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconHoverContrast {
|
||||
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;
|
||||
@include AccentColor {
|
||||
color: var(--checkbox-checked-border-color-hover, $accentTextColor) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, $accentTextColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CheckboxFocusRing {
|
||||
outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important;
|
||||
@include AccentColor {
|
||||
outline: 2px solid var(--focus-outline-color, $accentColor) !important;
|
||||
}
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue