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 a28b4fdab..84ff008d0 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
@@ -109,7 +109,7 @@
}
& #zen-sidebar-top-buttons {
- margin: 4px 0;
+ margin: var(--zen-element-separation) 0 var(--zen-toolbox-padding) 0;
}
& #PanelUI-menu-button {
diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index 69020b6f4..f67fa8eb2 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -58,6 +58,7 @@
width: 60%;
height: 60%;
box-shadow: var(--zen-big-shadow);
+ overflow: hidden;
/* Small screens */
@media (max-width: 1400px) {
@@ -96,6 +97,10 @@
background-repeat: no-repeat;
background-position: center;
}
+
+ &[animate-heart] {
+ overflow: hidden;
+ }
}
#zen-welcome-page-sidebar-buttons {
@@ -129,6 +134,7 @@
#zen-welcome-page-content {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
width: 60%;
+ max-width: 80rem;
height: 100%;
position: relative;
overflow: hidden;
@@ -205,7 +211,7 @@
#zen-welcome-initial-essentials-browser-sidebar-essentials {
display: grid;
grid-template-columns: repeat(3, 1fr);
- gap: 0.8rem;
+ gap: 0.4rem 1.2rem;
visibility: visible;
& * {
@@ -247,7 +253,6 @@
transform: scale(1.04);
& .tab-background {
- --zen-essential-bg-margin: 3px;
box-shadow: var(--zen-big-shadow);
}
}
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index 730296af6..a7a285f56 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -226,6 +226,7 @@
const sidebar = document.getElementById('zen-welcome-page-sidebar');
sidebar.style.width = '100%';
sidebar.appendChild(heart);
+ sidebar.setAttribute('animate-heart', 'true');
await animate(
'#zen-welcome-heart',
{ opacity: [0, 1, 1, 1, 0], scale: [0.5, 1, 1.2, 1, 1.2] },
@@ -349,12 +350,12 @@
-
+
-
+
@@ -364,7 +365,7 @@
-
+