diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 254e35c0d..bbc94852e 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -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;
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index e7f8f5012..fb90fcaaa 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -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%);
}
}
diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index 6f914c329..79dbad347 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -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;
+ }
+ }
+ }
+ }
+ }
}
}
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index 525d2313b..dedc00da4 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -62,9 +62,9 @@
(description2 ? `${description2}` : '');
await animate(
'#zen-welcome-page-sidebar-content > *',
- { x: ['150%', 0], filter: ['blur(2px)', 'blur(0px)'], opacity: [0, 1] },
+ { x: ['150%', 0] },
{
- delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
+ delay: getMotion().stagger(0.05),
type: 'spring',
bounce: 0.2,
}
@@ -91,7 +91,7 @@
}
await animate(
'#zen-welcome-page-sidebar-buttons button',
- { x: ['150%', 0], filter: ['blur(2px)', 'blur(0px)'], opacity: [0, 1] },
+ { x: ['150%', 0] },
{
delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
type: 'spring',
@@ -103,7 +103,7 @@
async fadeInContent() {
await animate(
'#zen-welcome-page-content > *',
- { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] },
+ { opacity: [0, 1] },
{
delay: getMotion().stagger(0.1),
type: 'spring',
@@ -115,7 +115,7 @@
async fadeOutButtons() {
await animate(
'#zen-welcome-page-sidebar-buttons button',
- { x: [0, '-150%'], filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0] },
+ { x: [0, '-150%'] },
{
type: 'spring',
bounce: 0,
@@ -129,7 +129,7 @@
async fadeOutTitles() {
await animate(
'#zen-welcome-page-sidebar-content > *',
- { x: [0, '-150%'], filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0] },
+ { x: [0, '-150%'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
@@ -141,7 +141,7 @@
async fadeOutContent() {
await animate(
'#zen-welcome-page-content > *',
- { opacity: [1, 0], scale: [1, 0.9], filter: ['blur(0px)', 'blur(2px)'] },
+ { opacity: [1, 0] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
@@ -268,6 +268,26 @@
}
},
},
+ {
+ text: [
+ {
+ id: 'zen-welcome-workspace-colors-title',
+ },
+ {
+ id: 'zen-welcome-workspace-colors-description',
+ },
+ ],
+ buttons: [
+ {
+ l10n: 'zen-welcome-next-action',
+ onclick: async () => {
+ return true;
+ },
+ },
+ ],
+ fadeIn() {},
+ fadeOut() {},
+ },
{
text: [
{
@@ -288,27 +308,77 @@
},
},
],
- fadeIn() {},
- fadeOut() {},
- },
- {
- text: [
- {
- id: 'zen-welcome-workspace-colors-title',
- },
- {
- id: 'zen-welcome-workspace-colors-description',
- },
- ],
- buttons: [
- {
- l10n: 'zen-welcome-next-action',
- onclick: async () => {
- return true;
- },
- },
- ],
- fadeIn() {},
+ fadeIn() {
+ const xul = `
+
+
+
+ `;
+ const fragment = window.MozXULElement.parseXULToFragment(xul);
+ document.getElementById('zen-welcome-page-content').appendChild(fragment);
+ document.getElementById('zen-welcome-initial-essentials-browser-sidebar-essentials').addEventListener('click', async (event) => {
+ const tab = event.target.closest('.tabbrowser-tab');
+ if (!tab) {
+ return;
+ }
+ tab.toggleAttribute('visuallyselected');
+ });
+ },
fadeOut() {},
},
{
@@ -385,7 +455,6 @@
function () {
window.resizeTo(875, 560);
window.focus();
- appWin.center(null, true, false);
const appWin = window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow);
appWin.rollupAllPopups();
},