mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 01:19:59 +02:00
fix: Made detected contrasts pass accessibility tests, b=no-bug, c=common, workspaces
This commit is contained in:
parent
ee20de3c3d
commit
76166c4aa3
4 changed files with 22 additions and 12 deletions
|
@ -84,7 +84,13 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</box>
|
</box>
|
||||||
<html:input type="range" min="0.15" max="0.8" value="0.4" step="0.01" id="PanelUI-zen-gradient-generator-opacity" />
|
<html:input type="range" max="0.9" value="0.4" step="0.01" id="PanelUI-zen-gradient-generator-opacity"
|
||||||
|
#ifdef XP_WIN
|
||||||
|
min="0.2"
|
||||||
|
#else
|
||||||
|
min="0.15"
|
||||||
|
#endif
|
||||||
|
/>
|
||||||
</vbox>
|
</vbox>
|
||||||
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
||||||
</vbox>
|
</vbox>
|
||||||
|
|
|
@ -134,6 +134,8 @@
|
||||||
transparent 90%
|
transparent 90%
|
||||||
);
|
);
|
||||||
|
|
||||||
|
--toolbar-color: light-dark(rgb(21, 20, 26, 0.7), rgb(251, 251, 254, 0.7)) !important;
|
||||||
|
|
||||||
/* Other colors */
|
/* Other colors */
|
||||||
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
|
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
|
||||||
--urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
|
--urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
|
||||||
|
@ -227,6 +229,9 @@
|
||||||
@media (-moz-windows-mica) or (-moz-platform: macos) {
|
@media (-moz-windows-mica) or (-moz-platform: macos) {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
--zen-themed-toolbar-bg-transparent: transparent;
|
--zen-themed-toolbar-bg-transparent: transparent;
|
||||||
|
@media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
|
||||||
|
--zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
|
||||||
|
}
|
||||||
&[zen-should-be-dark-mode] {
|
&[zen-should-be-dark-mode] {
|
||||||
--zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
|
--zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,6 +40,9 @@
|
||||||
return points;
|
return points;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const MAX_OPACITY = 0.9;
|
||||||
|
const MIN_OPACITY = AppConstants.platform === 'win' ? 0.2 : 0.15;
|
||||||
|
|
||||||
class nsZenThemePicker extends ZenMultiWindowFeature {
|
class nsZenThemePicker extends ZenMultiWindowFeature {
|
||||||
static MAX_DOTS = 3;
|
static MAX_DOTS = 3;
|
||||||
|
|
||||||
|
@ -1018,11 +1021,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
luminance([r, g, b]) {
|
luminance([r, g, b]) {
|
||||||
const a = [r, g, b].map((v) => {
|
return 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
|
||||||
v /= 255;
|
|
||||||
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
|
|
||||||
});
|
|
||||||
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
contrastRatio(rgb1, rgb2) {
|
contrastRatio(rgb1, rgb2) {
|
||||||
|
@ -1111,7 +1110,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldBeDarkMode(accentColor) {
|
shouldBeDarkMode(accentColor) {
|
||||||
let minimalLum = this.isDarkMode ? 0.6 : 0.5;
|
let minimalLum = 0.5;
|
||||||
if (!this.canBeTransparent) {
|
if (!this.canBeTransparent) {
|
||||||
// Blend the color with the toolbar background
|
// Blend the color with the toolbar background
|
||||||
const toolbarBg = this.getToolbarModifiedBaseRaw();
|
const toolbarBg = this.getToolbarModifiedBaseRaw();
|
||||||
|
@ -1363,14 +1362,13 @@
|
||||||
const [_, secondStop, thirdStop] = document.querySelectorAll(
|
const [_, secondStop, thirdStop] = document.querySelectorAll(
|
||||||
'#PanelUI-zen-gradient-generator-slider-wave-gradient stop'
|
'#PanelUI-zen-gradient-generator-slider-wave-gradient stop'
|
||||||
);
|
);
|
||||||
// Opacity can only be between 0.15 to 0.80. Make opacity relative to that range
|
// Opacity can only be between MIN_OPACITY to MAX_OPACITY. Make opacity relative to that range
|
||||||
// So 0.15 becomes 0, and 0.80 becomes 1.
|
if (opacity < MIN_OPACITY) {
|
||||||
if (opacity < 0.15) {
|
|
||||||
opacity = 0;
|
opacity = 0;
|
||||||
} else if (opacity > 0.8) {
|
} else if (opacity > MAX_OPACITY) {
|
||||||
opacity = 1;
|
opacity = 1;
|
||||||
} else {
|
} else {
|
||||||
opacity = (opacity - 0.15) / (0.8 - 0.15);
|
opacity = (opacity - MIN_OPACITY) / (MAX_OPACITY - MIN_OPACITY);
|
||||||
}
|
}
|
||||||
if (isDefaultTheme) {
|
if (isDefaultTheme) {
|
||||||
opacity = 1; // If it's the default theme, we want the wave to be
|
opacity = 1; // If it's the default theme, we want the wave to be
|
||||||
|
|
|
@ -277,6 +277,7 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.05) translate(-50%, -50%);
|
transform: scale(1.05) translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
transform-origin: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[dragging='true'] {
|
&[dragging='true'] {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue