diff --git a/l10n b/l10n
index 146e85615..83464a5d3 160000
--- a/l10n
+++ b/l10n
@@ -1 +1 @@
-Subproject commit 146e85615a6752039c3e578795ccf457bcda11b2
+Subproject commit 83464a5d3596558a8d15c7fd7f495f61726a0f05
diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index 38217c8ca..91984e761 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -103,5 +103,28 @@
overflow: hidden;
justify-content: center;
align-items: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1.1rem;
+
+ & label {
+ opacity: 0;
+ transition: scale 0.2s;
+ padding: 1.1rem 1.3rem;
+ border-radius: .6rem;
+ width: 50%;
+ 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));
+
+ &:hover {
+ scale: 1.015;
+ }
+
+ &:has(:checked) {
+ border: 2px solid var(--zen-primary-color);
+ scale: 1.03;
+ }
+ }
}
}
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index ff51d5da1..8e38ee806 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -100,9 +100,7 @@
);
}
- async fadeInContent(page) {
- const contentElement = document.getElementById('zen-welcome-page-content');
- contentElement.innerHTML = page.content;
+ async fadeInContent() {
await animate(
'#zen-welcome-page-content > *',
{ opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] },
@@ -157,8 +155,8 @@
}
await this.fadeInTitles(currentPage);
await this.fadeInButtons(currentPage);
- await this.fadeInContent(currentPage);
currentPage.fadeIn();
+ await this.fadeInContent();
}
finish() {
@@ -197,14 +195,20 @@
},
},
],
- content: `
-
- `,
- fadeIn() {},
+ fadeIn() {
+ const xul = `
+
+
+
+
+
+
+
+
+ `;
+ const fragment = window.MozXULElement.parseXULToFragment(xul);
+ document.getElementById('zen-welcome-page-content').appendChild(fragment);
+ },
fadeOut() {},
},
];