mirror of
https://github.com/zen-browser/desktop.git
synced 2026-02-01 09:34:37 +00:00
Refactor tab and URL bar styles for improved transparency and backdrop filtering
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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'] {
|
||||
|
||||
Reference in New Issue
Block a user