mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-29 06:28:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor toolbar background handling and improve tab styling in compact mode

Browse Source
This commit is contained in:
mr. M
2024-11-06 19:46:21 +01:00
parent 9042baf13d
commit a2ca9361e1
5 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -58,8 +58,7 @@
outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
--zen-themed-toolbar-bg-transparency: 1 !important;
background: var(--zen-main-browser-background) !important;
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
backdrop-filter: blur(5px) !important;
@@ -135,10 +134,9 @@
background: var(--zen-dialog-background);
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
--zen-themed-toolbar-bg-transparency: 1 !important;
background-attachment: fixed;
backdrop-filter: blur(5px);
background: var(--zen-main-browser-background);
background: var(--zen-main-browser-background-toolbar);
background-size: 100% 2000px;
border-bottom: 1px solid var(--zen-colors-border);
}

9
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -20,7 +20,7 @@
}
#vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
border: none;
height: 1px;
@@ -264,7 +264,7 @@
}
& #zen-essentials-container {
--tab-min-height: 40px;
--tab-min-height: 38px;
}
/* Mark: Fix separator paddings */
@@ -608,8 +608,7 @@
z-index: 100 !important;
width: 250px !important;
--zen-themed-toolbar-bg-transparency: 1 !important;
background: var(--zen-main-browser-background) !important;
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
@@ -744,7 +743,7 @@
content: '';
display: block;
height: 1px;
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
width: 98%;
position: absolute;
top: -8px;

6
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -99,6 +99,7 @@
/* XUL */
--zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
--zen-main-browser-background-toolbar: var(--zen-main-browser-background);
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
--zen-appcontent-border: 1px solid var(--zen-colors-border);
@@ -127,10 +128,11 @@
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
--zen-themed-toolbar-bg-transparent: light-dark(#f7f7f7, var(--zen-colors-tertiary));
@supports (-moz-osx-font-smoothing: auto) {
--zen-themed-toolbar-bg-transparency: 0.2;
--zen-themed-toolbar-bg: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
--zen-themed-toolbar-bg-transparency: 0.05;
--zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
}
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;