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

Refactor styles and animations for improved UI consistency and performance

Browse Source
This commit is contained in:
mr. M
2025-01-17 19:47:51 +01:00
parent 4fdd0993d7
commit e950e012ed
8 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/ZenCustomizableUI.sys.mjs
View File

@@ -11,7 +11,7 @@ export var ZenCustomizableUI = new (class {
'zen-sidebar-top-buttons', 'zen-sidebar-top-buttons',
{ {
type: this.TYPE_TOOLBAR, type: this.TYPE_TOOLBAR,
defaultPlacements: AppConstants.platform === 'macosx' ? [] : ['zen-sidepanel-button'], defaultPlacements: [],
defaultCollapsed: null, defaultCollapsed: null,
}, },
true true

2
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -30,7 +30,7 @@
:root:not([zen-no-padding='true']) & { :root:not([zen-no-padding='true']) & {
margin: 1px; 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);
} }
} }

2
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

@@ -51,7 +51,7 @@
&[animating='true']::after { &[animating='true']::after {
background: var(--zen-main-browser-background-old); background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px); 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; transition: 0s;
} }
} }

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

@@ -228,7 +228,7 @@
border-bottom: 0px solid transparent !important; border-bottom: 0px solid transparent !important;
--tab-block-margin: 2px; --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; grid-gap: 0 !important;
&[overflow]::after, &[overflow]::after,
@@ -924,7 +924,7 @@
&:not([selected], [multiselected="true"]) .tab-background { &:not([selected], [multiselected="true"]) .tab-background {
background: var(--zen-toolbar-element-bg); background: var(--zen-toolbar-element-bg);
backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.05)); border: none;
} }
& .tab-content { & .tab-content {
@@ -960,9 +960,10 @@
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;
position: relative;
&::before { &::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; margin: 2px;
border-radius: calc(var(--tab-border-radius) - 2px); border-radius: calc(var(--tab-border-radius) - 2px);
position: absolute; position: absolute;
@@ -974,7 +975,7 @@
} }
&[selected]:hover .tab-background::before { &[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));
} }
} }
} }

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

@@ -20,7 +20,7 @@
--zen-primary-color: #ffb787; --zen-primary-color: #ffb787;
/* Branding */ /* Branding */
--zen-branding-dark: #202020; --zen-branding-dark: #1d1d1d;
--zen-branding-coral: #f76f53; --zen-branding-coral: #f76f53;
--zen-branding-paper: #ebebeb; --zen-branding-paper: #ebebeb;
@@ -103,7 +103,7 @@
--zen-button-border-radius: 5px; --zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem; --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 */ /* Toolbar */
--zen-toolbar-height: 38px; --zen-toolbar-height: 38px;
@@ -169,6 +169,9 @@
--arrowpanel-background: var(--zen-dialog-background) !important; --arrowpanel-background: var(--zen-dialog-background) !important;
--tab-selected-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !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) { @media (prefers-color-scheme: dark) {

2
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -32,7 +32,7 @@
} }
#urlbar-background { #urlbar-background {
border: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.1)) !important; border: none !important;
margin: 1px; margin: 1px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;

2
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -659,7 +659,7 @@
// Reactivate the transition after the animation // Reactivate the transition after the animation
appWrapper.removeAttribute('post-animating'); appWrapper.removeAttribute('post-animating');
}, 100); }, 100);
}, 700); }, 500);
}); });
} }

7
src/browser/themes/shared/identity-block/identity-block-css.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css 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 --- a/browser/themes/shared/identity-block/identity-block.css
+++ b/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, #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button,
#urlbar-label-box { #urlbar-label-box {
@@ -11,12 +11,13 @@ index cb6bb55dd3aebdaebb92c9e2cba1f2a108b4d7bb..9d5055a007c63cb779e67ae58a1d937a
color: var(--urlbar-box-text-color); color: var(--urlbar-box-text-color);
padding-inline: 8px; padding-inline: 8px;
border-radius: var(--urlbar-icon-border-radius); border-radius: var(--urlbar-icon-border-radius);
@@ -164,16 +164,16 @@ @@ -174,16 +174,17 @@
} }
#identity-icon { #identity-icon {
- list-style-image: url(chrome://global/skin/icons/search-glass.svg); - list-style-image: url(chrome://global/skin/icons/search-glass.svg);
+ list-style-image: url(chrome://global/skin/icons/search-glass.svg) !important; + list-style-image: url(chrome://global/skin/icons/search-glass.svg) !important;
+ fill-opacity: 0.5;
} }
} }