From 742856827977c8ee341de3f78d02c29d0a122d7a Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Mon, 16 Dec 2024 22:40:44 +0100 Subject: [PATCH] Worked on animations --- .../content/zen-styles/zen-compact-mode.css | 31 ++-- .../zen-styles/zen-tabs/vertical-tabs.css | 4 +- .../base/content/zen-styles/zen-theme.css | 2 +- .../base/zen-components/ZenCompactMode.mjs | 137 +++++++++--------- .../components/zen-welcome/welcome.css | 2 +- 5 files changed, 91 insertions(+), 85 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index b7f665c5c..a347bdd37 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -30,21 +30,24 @@ #navigator-toolbox { --zen-toolbox-max-width: 54px !important; --zen-compact-float: calc(var(--zen-element-separation) - 1px); - position: absolute; - z-index: 10; - transition: transform 0.25s ease, opacity 0.1s ease-in-out; - top: 0; - bottom: var(--zen-element-separation); - opacity: 0; - padding-left: var(--zen-compact-float) !important; - padding-bottom: 0 !important; - padding-top: 0 !important; - :root[zen-single-toolbar='true'] & { - top: var(--zen-element-separation); + &:not([animate='true']) { + position: absolute; + z-index: 10; + transition: transform 0.25s ease, opacity 0.1s ease-in-out; + top: 0; + bottom: var(--zen-element-separation); + opacity: 0; + padding-left: var(--zen-compact-float) !important; + padding-bottom: 0 !important; + padding-top: 0 !important; - & #nav-bar { - margin-left: calc(var(--zen-toolbox-padding) / 2) !important; + :root[zen-single-toolbar='true'] & { + top: var(--zen-element-separation); + + & #nav-bar { + margin-left: calc(var(--zen-toolbox-padding) / 2) !important; + } } } } @@ -76,7 +79,7 @@ } } - #titlebar { + #navigator-toolbox:not([animate='true']) #titlebar { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); border-radius: calc(var(--zen-border-radius) - 2px); padding: var(--zen-toolbox-padding) !important; 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 2be9457cf..7a0483497 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 @@ -227,11 +227,11 @@ transition: scale 0.1s ease-in-out; &[fadein='true']:not([zen-essential='true']) { #tabbrowser-tabs[zen-workspace-animation='previous'] & { - animation: zen-slide-in 0.2s ease-in-out; + animation: zen-slide-in 0.2s ease; } #tabbrowser-tabs[zen-workspace-animation='next'] & { - animation: zen-slide-in-reverse 0.2s ease-in-out; + animation: zen-slide-in-reverse 0.2s ease; } } diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index d7b848891..03839e4cf 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -17,7 +17,7 @@ /* Branding */ --zen-branding-dark: #202020; --zen-branding-coral: #F76F53; - --zen-branding-paper: #F2F0E3; + --zen-branding-paper: #ebebeb; --zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark)); --zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper)); diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index 7d282ec7b..a59686bcb 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/src/browser/base/zen-components/ZenCompactMode.mjs @@ -104,79 +104,82 @@ var gZenCompactModeManager = { return; } this._isAnimating = true; - let sidebarWidth = this.sidebar.getBoundingClientRect().width; - if (sidebarWidth < 300) { - sidebarWidth += sidebarWidth < 210 ? 9 : 11; // Bug: IF sidebar is too small, it will not animate properly - } - if (canHideSidebar && isCompactMode) { - this.sidebar.style.position = "relative"; - this.sidebar.style.transition = "margin .3s ease, opacity .3s ease"; - this.sidebar.style.left = "0"; - this.sidebar.style.setProperty("opacity", "1", "important"); - if (!this.sidebarIsOnRight) { - this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; - } else { - this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`; - } - this.sidebar.style.pointerEvents = "none"; - - window.requestAnimationFrame(() => { - this.sidebar.style.removeProperty("opacity"); - setTimeout(() => { - window.requestAnimationFrame(() => { - this._isAnimating = false; - this.sidebar.style.removeProperty("opacity"); - this.sidebar.style.removeProperty("position"); - this.sidebar.style.removeProperty("transition"); - this.sidebar.style.removeProperty("pointer-events"); - this.sidebar.style.removeProperty("margin-left"); - this.sidebar.style.removeProperty("margin-right"); - this.sidebar.style.removeProperty("transform"); - this.sidebar.style.removeProperty("left"); - document.getElementById('browser').style.removeProperty("overflow"); - }); - }, 400); - }); - } else if (canHideSidebar && !isCompactMode) { - document.getElementById('browser').style.overflow = "hidden"; - this.sidebar.style.position = "relative"; - this.sidebar.style.left = "0"; - - if (!this.sidebarIsOnRight) { - this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; - } else { - this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`; - this.sidebar.style.transform = `translateX(${sidebarWidth}px)`; - } - - window.requestAnimationFrame(() => { - this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease"; - // we are in compact mode and we are exiting it + // Do this so we can get the correct width ONCE compact mode styled have been applied + this.sidebar.setAttribute("animate", "true"); + window.requestAnimationFrame(() => { + let sidebarWidth = Math.max(this.sidebar.getAttribute("width"), this.sidebar.getBoundingClientRect().width); + if (canHideSidebar && isCompactMode) { + this.sidebar.style.position = "relative"; + this.sidebar.style.transition = "margin .4s ease, opacity .4s ease"; + this.sidebar.style.left = "0"; + this.sidebar.style.setProperty("opacity", "1", "important"); if (!this.sidebarIsOnRight) { - this.sidebar.style.marginLeft = "0"; + this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; } else { - this.sidebar.style.marginRight = "0"; - this.sidebar.style.transform = "translateX(0)"; + this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`; } this.sidebar.style.pointerEvents = "none"; - setTimeout(() => { - window.requestAnimationFrame(() => { - this._isAnimating = false; - this.sidebar.style.removeProperty("position"); - this.sidebar.style.removeProperty("pointer-events"); - this.sidebar.style.removeProperty("opacity"); - this.sidebar.style.removeProperty("margin-left"); - this.sidebar.style.removeProperty("margin-right"); - this.sidebar.style.removeProperty("transform"); - this.sidebar.style.removeProperty("transition"); - this.sidebar.style.removeProperty("left"); + window.requestAnimationFrame(() => { + this.sidebar.style.opacity = "0"; + setTimeout(() => { + window.requestAnimationFrame(() => { + this._isAnimating = false; + this.sidebar.style.removeProperty("opacity"); + this.sidebar.style.removeProperty("position"); + this.sidebar.style.removeProperty("transition"); + this.sidebar.style.removeProperty("pointer-events"); + this.sidebar.style.removeProperty("margin-left"); + this.sidebar.style.removeProperty("margin-right"); + this.sidebar.style.removeProperty("transform"); + this.sidebar.style.removeProperty("left"); + document.getElementById('browser').style.removeProperty("overflow"); + this.sidebar.removeAttribute("animate"); + }); + }, 450); + }); + } else if (canHideSidebar && !isCompactMode) { + document.getElementById('browser').style.overflow = "hidden"; + this.sidebar.style.position = "relative"; + this.sidebar.style.left = "0"; - document.getElementById('browser').style.removeProperty("overflow"); - }); - }, 400); - }); - } + if (!this.sidebarIsOnRight) { + this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; + } else { + this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`; + this.sidebar.style.transform = `translateX(${sidebarWidth}px)`; + } + + window.requestAnimationFrame(() => { + this.sidebar.style.transition = "margin .3s ease, transform .4s ease, opacity .3s ease"; + // we are in compact mode and we are exiting it + if (!this.sidebarIsOnRight) { + this.sidebar.style.marginLeft = "0"; + } else { + this.sidebar.style.marginRight = "0"; + this.sidebar.style.transform = "translateX(0)"; + } + this.sidebar.style.pointerEvents = "none"; + + setTimeout(() => { + window.requestAnimationFrame(() => { + this._isAnimating = false; + this.sidebar.style.removeProperty("position"); + this.sidebar.style.removeProperty("pointer-events"); + this.sidebar.style.removeProperty("opacity"); + this.sidebar.style.removeProperty("margin-left"); + this.sidebar.style.removeProperty("margin-right"); + this.sidebar.style.removeProperty("transform"); + this.sidebar.style.removeProperty("transition"); + this.sidebar.style.removeProperty("left"); + + document.getElementById('browser').style.removeProperty("overflow"); + this.sidebar.removeAttribute("animate"); + }); + }, 400); + }); + } + }); }, updateContextMenu() { diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css index 00bbd1aef..27c7e5b20 100644 --- a/src/browser/components/zen-welcome/welcome.css +++ b/src/browser/components/zen-welcome/welcome.css @@ -39,7 +39,7 @@ body { #welcome .zen-branding-title, #thanks .zen-branding-title { text-align: center; - font-size: 11rem; + font-size: 9rem; } #buttons-footer {