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

Refactor vertical-tabs and theme styles for improved layout and transition effects

Browse Source
This commit is contained in:
mr. M
2025-02-02 16:03:35 +01:00
parent 0cdc7351df
commit 792c562a35
3 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -737,11 +737,11 @@
/* Mark: Move sidebar to the right */
:root[zen-right-side='true'] {
& #navigator-toolbox {
order: 9 !important;
order: 10 !important;
}
& #zen-sidebar-splitter {
order: 10 !important;
order: 9 !important;
}
}
@@ -960,7 +960,7 @@
& .tab-background {
border-radius: var(--border-radius-medium) !important;
transition: background 0.2s ease-in-out;
transition: background 0.1s ease-in-out;
}
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
@@ -1021,7 +1021,7 @@
inset: 0;
z-index: 0;
content: "";
transition: background 0.2s ease-in-out;
transition: background 0.1s ease-in-out;
}
}

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

@@ -179,7 +179,7 @@
* 1. If the native radius - the separation is less than 4px, use 4px.
* 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
*/
max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
);
/** Other theme-related styles */

21
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -460,6 +460,27 @@
align-items: center;
position: relative;
&::before {
border-radius: var(--border-radius-medium);
background: transparent;
transition: background 0.1s;
pointer-events: none;
content: '';
position: absolute;
top: 6px;
left: 2px;
z-index: -1;
width: calc(100% - 4px);
height: calc(100% - 12px);
}
&:hover,
&[open='true'] {
&::before {
background: var(--zen-toolbar-element-bg);
}
}
& #zen-current-workspace-indicator-icon {
font-size: 14px;
}