ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 01:19:59 +02:00
Code Releases Wiki Activity

fix: Fixed positions for gradients selector, b=no-bug, c=common, workspaces

Browse source
This commit is contained in:
Mr. M 2025-06-24 16:37:14 +02:00
parent b735567504
commit 9971dbd0ad
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
4 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/zen/common/styles/zen-browser-ui.css
View file

@ -47,7 +47,6 @@
isolation: isolate; isolation: isolate;
background: var(--zen-themed-toolbar-bg-transparent); background: var(--zen-themed-toolbar-bg-transparent);
transition: background-color var(--inactive-window-transition);
&::after, &::after,
&::before { &::before {

3
src/zen/common/styles/zen-theme.css
View file

@ -251,7 +251,8 @@
&, &,
& #tabbrowser-tabpanels, & #tabbrowser-tabpanels,
& panel, & panel,
& menupopup { & menupopup,
& #zen-browser-background {
@media -moz-pref('zen.theme.window.scheme', 'dark') { @media -moz-pref('zen.theme.window.scheme', 'dark') {
color-scheme: dark; color-scheme: dark;
} }

4
src/zen/workspaces/ZenGradientGenerator.mjs
View file

@ -1151,7 +1151,7 @@
accentColor, accentColor,
(1 - this.currentOpacity) * 100 (1 - this.currentOpacity) * 100
); );
minimalLum = this.isDarkMode ? 0.3 : 0.2; minimalLum = this.isDarkMode ? 0.3 : 0.18;
} }
const lum = this.luminance(accentColor); const lum = this.luminance(accentColor);
// Return true if background is dark enough that white text is preferred // Return true if background is dark enough that white text is preferred
@ -1492,7 +1492,7 @@
: `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})` : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
); );
let isDarkMode = this.isDarkMode; let isDarkMode = this.isDarkMode;
if (dominantColor !== this.getNativeAccentColor()) { if (dominantColor !== this.hexToRgb(this.getNativeAccentColor())) {
isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor); isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);
browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode); browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode);
} else { } else {

22
src/zen/workspaces/zen-gradient-generator.css
View file

@ -183,8 +183,7 @@
#PanelUI-zen-gradient-slider-wave { #PanelUI-zen-gradient-slider-wave {
position: absolute; position: absolute;
top: 3px; left: -5px;
left: -3px;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
@ -192,7 +191,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
scale: 1.2;
&::before { &::before {
content: ''; content: '';
@ -203,14 +201,15 @@
border-radius: 999px; border-radius: 999px;
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
top: -1px; top: 50%;
left: 4px; left: 4px;
scale: 0.85; transform: translateY(-50%);
} }
& svg { & svg {
overflow: visible; overflow: visible;
min-width: calc(100% + 2.5rem); min-width: calc(100% + 2rem);
scale: 1.2;
} }
} }
@ -244,9 +243,12 @@
border-radius: var(--zen-border-radius); border-radius: var(--zen-border-radius);
min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px); min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
background: color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%); background: light-dark(
var(--zen-toolbar-element-bg),
color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%)
);
background-image: radial-gradient( background-image: radial-gradient(
light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) 1px, light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
transparent 0 transparent 0
); );
background-position: -19px -19px; background-position: -19px -19px;
@ -314,12 +316,14 @@
& button { & button {
border: none !important; border: none !important;
padding: 0.4rem !important; padding: 0 !important;
min-width: fit-content !important; min-width: fit-content !important;
transition: background 0.2s; transition: background 0.2s;
appearance: none; appearance: none;
max-height: 26px; max-height: 26px;
max-width: 26px; max-width: 26px;
min-height: 26px;
min-width: 26px !important;
color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9)); color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9));
& .button-box { & .button-box {