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

Enhance Zen styling and transitions for improved user experience

Browse Source
This commit is contained in:
mr. M
2025-01-19 13:55:57 +01:00
parent 25910c5189
commit 08cf77eb23
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,11 +100,12 @@
}
#navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: 0 0 9.73px 0px rgba(0, 0, 0, 0.25);
border-radius: calc(var(--zen-border-radius) - 2px);
box-shadow: var(--zen-big-shadow);
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 2);
padding: var(--zen-toolbox-padding) !important;
position: relative;
background: var(--zen-dialog-background);
border: 1px solid var(--zen-colors-border-contrast);
:root[zen-single-toolbar='true'] {
padding-top: 0 !important;

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

@@ -35,6 +35,7 @@
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
--zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 97%, rgb(117, 117, 117) 3%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
@@ -206,7 +207,8 @@
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(43, 43, 43) 80%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
--zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, .11) 90%);
--zen-dialog-background: var(--zen-dark-color-mix-base);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);

6
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -147,7 +147,7 @@ var gZenCompactModeManager = {
if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => {
this.sidebar.style.position = 'unset';
this.sidebar.style.transition = 'margin .25s ease-in-out';
this.sidebar.style.transition = 'margin .17s ease';
this.sidebar.style.left = '0';
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
@@ -172,7 +172,7 @@ var gZenCompactModeManager = {
this._isAnimating = false;
});
});
}, 450);
}, 170);
});
});
} else if (canHideSidebar && !isCompactMode) {
@@ -188,7 +188,7 @@ var gZenCompactModeManager = {
}
window.requestAnimationFrame(() => {
this.sidebar.style.transition = 'margin .25s ease, transform .275s ease, opacity .1s ease';
this.sidebar.style.transition = 'margin .17s ease, transform .275s ease, opacity .1s ease';
// we are in compact mode and we are exiting it
if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = '0';

4
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -1290,6 +1290,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
async _performWorkspaceChange(window, { onInit = false, explicitAnimationDirection = undefined } = {}) {
const previousWorkspace = await this.getActiveWorkspace();
if (previousWorkspace && previousWorkspace.uuid === window.uuid && !onInit) {
return;
}
this.activeWorkspace = window.uuid;
const containerId = window.containerTabId?.toString();
const workspaces = await this._workspaces();