Enhance Zen welcome styles: improve button scaling, update layout properties, and add background effects

This commit is contained in:
mr. M
2025-02-14 22:19:27 +01:00
parent aec9c9d34b
commit 5884fee7ac
3 changed files with 25 additions and 8 deletions

View File

@@ -34,7 +34,7 @@ xul|button:is(.expander-down) {
.footer-button {
transition: scale 0.2s;
&:active {
scale: scale(0.98);
scale: 0.98;
}
}

View File

@@ -6,6 +6,7 @@
display: flex;
align-items: center;
justify-content: center;
-moz-window-dragging: drag;
}
:root[zen-welcome-stage] #zen-sidebar-splitter {
@@ -48,34 +49,39 @@
justify-content: start;
align-items: start;
display: none;
background: var(--zen-branding-bg);
border-radius: 1em;
overflow: hidden;
position: relative;
width: 60%;
height: 60%;
box-shadow: var(--zen-big-shadow);
#zen-welcome-page-sidebar {
background: rgba(255, 255, 255, 0.07);
flex-direction: column;
justify-content: space-between;
padding: 3.5rem;
padding: 3.8rem;
width: 40%;
height: 100%;
backdrop-filter: blur(10px);
overflow: hidden;
}
#zen-welcome-page-sidebar-buttons {
flex-direction: column;
gap: 5px;
gap: 10px;
}
#zen-welcome-page-sidebar-content {
& h1 {
font-size: 2.2rem;
font-size: xx-large;
font-weight: 600;
margin-bottom: 1rem;
}
& p {
font-size: 1.1rem;
font-size: medium;
margin: 0 0 1.1rem 0;
opacity: .6;
color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
}
& > * {
@@ -87,4 +93,14 @@
justify-content: center;
opacity: 0;
}
#zen-welcome-page-content {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
width: 60%;
height: 100%;
position: relative;
overflow: hidden;
justify-content: center;
align-items: center;
}
}

View File

@@ -51,6 +51,7 @@
init() {
document.getElementById('zen-welcome-pages').style.display = 'flex';
document.getElementById('zen-welcome-start').remove();
window.maximize();
animate('#zen-welcome-pages', { opacity: [0, 1] });
}