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

feat: Improved color choices for backgrounds and fixed opacity on tab titles, b=no-bug, c=common, tabs, workspaces

Browse source
This commit is contained in:
mr. m 2025-06-28 21:51:42 +02:00
parent 3da5eda339
commit 9e338aabbc
No known key found for this signature in database
GPG key ID: 928E01ED4C97749F
5 changed files with 13 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@
#navigator-toolbox { #navigator-toolbox {
/* see issue #426 */ /* see issue #426 */
background: var(--zen-navigator-toolbox-background, transparent) !important; background: var(--zen-navigator-toolbox-background, transparent) !important;
--inactive-titlebar-opacity: 1; --inactive-titlebar-opacity: 0.8;
} }
#nav-bar, #nav-bar,

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

@ -117,8 +117,8 @@
--zen-button-padding: 0.6rem 1.2rem; --zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark( --zen-toolbar-element-bg: light-dark(
color-mix(in oklch, var(--toolbox-textcolor) 8%, rgba(255, 255, 255, 0.01)), color-mix(in oklch, var(--toolbox-textcolor) 9%, transparent),
color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent 85%) color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
); );
/* Toolbar */ /* Toolbar */
@ -139,6 +139,7 @@
) !important; ) !important;
--toolbar-color: light-dark(rgb(21, 20, 26, 0.7), rgb(251, 251, 254, 0.7)) !important; --toolbar-color: light-dark(rgb(21, 20, 26, 0.7), rgb(251, 251, 254, 0.7)) !important;
--toolbox-textcolor-inactive: var(--toolbox-textcolor) !important;
/* Other colors */ /* Other colors */
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important; --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;

5
src/zen/tabs/zen-tabs/vertical-tabs.css
View file

@ -1298,11 +1298,14 @@
min-width: calc(100% + var(--zen-toolbox-padding) * 2); min-width: calc(100% + var(--zen-toolbox-padding) * 2);
width: calc(100% + var(--zen-toolbox-padding) * 2); width: calc(100% + var(--zen-toolbox-padding) * 2);
padding: 0 var(--zen-toolbox-padding); padding: 0 var(--zen-toolbox-padding);
padding-top: 6px;
display: grid; display: grid;
position: absolute; position: absolute;
&:not(:empty) {
padding-top: 6px;
}
&[hidden='true'] { &[hidden='true'] {
--hidden-essentials-width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding)); --hidden-essentials-width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
max-width: var( max-width: var(

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

@ -1451,16 +1451,9 @@
browser.document.documentElement.removeAttribute('zen-should-be-dark-mode'); browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
} }
// Set `--toolbox-textcolor` to have a contrast with the primary color // Set `--toolbox-textcolor` to have a contrast with the primary color
await gZenUIManager.motion.animate( document.documentElement.style.setProperty(
browser.document.documentElement, '--toolbox-textcolor',
{ isDarkMode ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)'
'--toolbox-textcolor': isDarkMode
? 'rgba(255, 255, 255, 0.7)'
: 'rgba(23, 23, 23, 0.7)',
},
{
duration: 0.05,
}
); );
} }

4
src/zen/workspaces/zen-workspaces.css
View file

@ -34,8 +34,8 @@
& toolbarbutton { & toolbarbutton {
margin: 0; margin: 0;
width: 28px; width: 30px;
height: 28px; height: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 !important; padding: 0 !important;