mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 05:35:29 +02:00
Refactor styles and animations for improved UI consistency and performance
This commit is contained in:
mr. M
parent
4fdd0993d7
commit
e950e012ed
8 changed files with 19 additions and 14 deletions
|
|
@ -11,7 +11,7 @@ export var ZenCustomizableUI = new (class {
|
|||
'zen-sidebar-top-buttons',
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: AppConstants.platform === 'macosx' ? [] : ['zen-sidepanel-button'],
|
||||
defaultPlacements: [],
|
||||
defaultCollapsed: null,
|
||||
},
|
||||
true
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
:root:not([zen-no-padding='true']) & {
|
||||
margin: 1px;
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
|
||||
box-shadow: 0 0 9.73px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
&[animating='true']::after {
|
||||
background: var(--zen-main-browser-background-old);
|
||||
backdrop-filter: blur(5px);
|
||||
animation: zen-main-app-wrapper-animation 0.6s ease forwards;
|
||||
animation: zen-main-app-wrapper-animation 0.4s ease forwards;
|
||||
transition: 0s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@
|
|||
border-bottom: 0px solid transparent !important;
|
||||
|
||||
--tab-block-margin: 2px;
|
||||
--tab-selected-bgcolor: light-dark(rgba(255,255,255,.8), rgba(255,255,255,.25));
|
||||
--tab-selected-bgcolor: var(--zen-toolbar-element-bg);
|
||||
grid-gap: 0 !important;
|
||||
|
||||
&[overflow]::after,
|
||||
|
|
@ -924,7 +924,7 @@
|
|||
&:not([selected], [multiselected="true"]) .tab-background {
|
||||
background: var(--zen-toolbar-element-bg);
|
||||
backdrop-filter: none !important;
|
||||
border: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.05));
|
||||
border: none;
|
||||
}
|
||||
|
||||
& .tab-content {
|
||||
|
|
@ -960,9 +960,10 @@
|
|||
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
|
||||
background: light-dark(rgba(255, 255, 255, 0.75), rgba(68, 64, 64, 0.75));
|
||||
margin: 2px;
|
||||
border-radius: calc(var(--tab-border-radius) - 2px);
|
||||
position: absolute;
|
||||
|
|
@ -974,7 +975,7 @@
|
|||
}
|
||||
|
||||
&[selected]:hover .tab-background::before {
|
||||
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
|
||||
background: light-dark(rgba(255, 255, 255, 0.70), rgba(68, 64, 64, 0.70));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
--zen-primary-color: #ffb787;
|
||||
|
||||
/* Branding */
|
||||
--zen-branding-dark: #202020;
|
||||
--zen-branding-dark: #1d1d1d;
|
||||
--zen-branding-coral: #f76f53;
|
||||
--zen-branding-paper: #ebebeb;
|
||||
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
--zen-button-border-radius: 5px;
|
||||
--zen-button-padding: 0.6rem 1.2rem;
|
||||
|
||||
--zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.65), rgba(170, 170, 170, 0.2));
|
||||
--zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.11));
|
||||
|
||||
/* Toolbar */
|
||||
--zen-toolbar-height: 38px;
|
||||
|
|
@ -169,6 +169,9 @@
|
|||
--arrowpanel-background: var(--zen-dialog-background) !important;
|
||||
|
||||
--tab-selected-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
/** Other theme-related styles */
|
||||
font-family: SF Pro,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
#urlbar-background {
|
||||
border: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.1)) !important;
|
||||
border: none !important;
|
||||
margin: 1px;
|
||||
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
|
||||
|
|
|
|||
|
|
@ -659,7 +659,7 @@
|
|||
// Reactivate the transition after the animation
|
||||
appWrapper.removeAttribute('post-animating');
|
||||
}, 100);
|
||||
}, 700);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css
|
||||
index cb6bb55dd3aebdaebb92c9e2cba1f2a108b4d7bb..9d5055a007c63cb779e67ae58a1d937ad2a31bfe 100644
|
||||
index 11ff8f62c9e40fd2f523387a4325518f383f5d11..d6563e2ddf963caa34bee716c42f9d440c327b61 100644
|
||||
--- a/browser/themes/shared/identity-block/identity-block.css
|
||||
+++ b/browser/themes/shared/identity-block/identity-block.css
|
||||
@@ -70,7 +70,7 @@
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
#identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button,
|
||||
#urlbar-label-box {
|
||||
|
|
@ -11,12 +11,13 @@ index cb6bb55dd3aebdaebb92c9e2cba1f2a108b4d7bb..9d5055a007c63cb779e67ae58a1d937a
|
|||
color: var(--urlbar-box-text-color);
|
||||
padding-inline: 8px;
|
||||
border-radius: var(--urlbar-icon-border-radius);
|
||||
@@ -164,16 +164,16 @@
|
||||
@@ -174,16 +174,17 @@
|
||||
}
|
||||
|
||||
#identity-icon {
|
||||
- list-style-image: url(chrome://global/skin/icons/search-glass.svg);
|
||||
+ list-style-image: url(chrome://global/skin/icons/search-glass.svg) !important;
|
||||
+ fill-opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue