Refactor tab and URL bar styles for improved transparency and backdrop filtering

This commit is contained in:
mr. M
2025-01-20 08:10:08 +01:00
parent d06d684c96
commit f000af56e7
3 changed files with 10 additions and 5 deletions

View File

@@ -228,7 +228,7 @@
border-bottom: 0px solid transparent !important;
--tab-block-margin: 2px;
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), var(--zen-toolbar-element-bg));
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.11));
grid-gap: 0 !important;
&[overflow]::after,
@@ -916,8 +916,8 @@
}
&:not([selected], [multiselected="true"]) .tab-background {
background: var(--zen-toolbar-element-bg);
backdrop-filter: none !important;
background: transparent;
backdrop-filter: var(--zen-toolbar-element-filter) !important;
border: none;
}

View File

@@ -104,7 +104,10 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.11));
--zen-toolbar-element-filter: brightness(0.95);
@media (prefers-color-scheme: dark) {
--zen-toolbar-element-filter: brightness(1.2);
}
/* Toolbar */
--zen-toolbar-height: 38px;

View File

@@ -27,7 +27,8 @@
}
#urlbar-background {
background: var(--zen-toolbar-element-bg) !important;
background: transparent !important;
backdrop-filter: var(--zen-toolbar-element-filter);
outline: none !important;
}
@@ -120,6 +121,7 @@
#urlbar[breakout-extend='true'] #urlbar-background {
border: 1px solid var(--zen-colors-border) !important;
box-shadow: var(--zen-big-shadow) !important;
backdrop-filter: none !important;
}
:root[zen-single-toolbar='true'] {