From c81cf324b804e700cb21d40fea14085af0429177 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Mon, 17 Feb 2025 19:12:49 +0100 Subject: [PATCH] Refactor CSS styles for ZenWelcome and vertical tabs, improving layout and animations --- .../zen-styles/zen-tabs/vertical-tabs.css | 8 +- .../base/content/zen-styles/zen-theme.css | 2 +- .../base/content/zen-styles/zen-welcome.css | 103 +++++++++++++- .../base/zen-components/ZenWelcome.mjs | 127 ++++++++++++++---- 4 files changed, 201 insertions(+), 39 deletions(-) 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(); },