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

Refactor CSS styles for ZenWelcome and vertical tabs, improving layout and animations

Browse Source
This commit is contained in:
mr. M
2025-02-17 19:12:49 +01:00
parent 68a3096683
commit c81cf324b8
4 changed files with 201 additions and 39 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

@@ -955,7 +955,8 @@
padding: 0;
}
#zen-essentials-container > .tabbrowser-tab {
#zen-essentials-container > .tabbrowser-tab,
#zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab {
--toolbarbutton-inner-padding: 0;
max-width: unset;
width: 100% !important;
@@ -1010,11 +1011,12 @@
background: transparent;
overflow: hidden;
position: relative;
--zen-essential-bg-margin: 2px;
&::before {
background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85));
margin: 2px;
border-radius: calc(var(--border-radius-medium) - 2px);
margin: var(--zen-essential-bg-margin);
border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin));
position: absolute;
inset: 0;
z-index: 0;

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

@@ -163,7 +163,7 @@
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
@media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 85%, transparent 15%);
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, transparent 20%);
}
}

103
src/browser/base/content/zen-styles/zen-welcome.css
View File

@@ -97,14 +97,14 @@
}
& > * {
opacity: 0;
transform: translate(300%);
}
}
& button {
justify-content: center;
align-items: center;
opacity: 0;
transform: translate(300%);
}
#zen-welcome-page-content {
@@ -121,25 +121,116 @@
& label {
opacity: 0;
transition: scale 0.1s;
transition: scale 0.1s, box-shadow 0.1s;
padding: 1.5rem 1.1rem;
border-radius: 0.6rem;
width: 50%;
gap: 0.8rem;
display: flex;
border: 2px solid var(--zen-colors-border);
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
align-items: center;
&:hover {
scale: 1.015;
box-shadow: var(--zen-big-shadow);
}
&:has(:checked) {
box-shadow: var(--zen-big-shadow);
border: 2px solid var(--zen-primary-color);
scale: 1.03;
}
}
#zen-welcome-initial-essentials-browser {
width: 70%;
height: 80%;
display: flex;
margin-left: auto;
margin-top: auto;
border-top-left-radius: 1.2em;
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2));
padding-right: 20%;
overflow: hidden;
opacity: 0;
border: 1px solid var(--zen-colors-border);
border-bottom-width: 0;
border-right-width: 0;
#zen-welcome-initial-essentials-browser-sidebar {
width: 100%;
padding: 1.4rem;
gap: 1.2rem;
background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
#zen-welcome-initial-essentials-browser-sidebar-win-buttons {
gap: 0.5rem;
align-items: center;
& > div {
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--zen-toolbar-element-bg);
}
}
#zen-welcome-initial-essentials-browser-sidebar-essentials {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
visibility: visible;
& * {
visibility: visible;
}
& .extra-tab {
width: 100%;
height: 3rem;
border-radius: 0.8rem;
margin-top: 0.5rem;
background: var(--zen-toolbar-element-bg)
}
& .tabbrowser-tab {
--tab-min-height: 5rem !important;
min-width: 5rem !important;
transition: transform 0.1s;
position: relative;
&::after {
position: absolute;
content: "";
width: 1.6rem;
height: 1.6rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--zen-tab-icon);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
--border-radius-medium: 1rem;
&[visuallyselected] {
transform: scale(1.04);
& .tab-background {
--zen-essential-bg-margin: 3px;
box-shadow: var(--zen-big-shadow);
}
}
& .tab-background::after {
filter: blur(30px) !important;
}
}
}
}
}
}
}