mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 09:26:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Zen branding styles and update welcome page layout

Browse Source
This commit is contained in:
mr. M
2024-12-07 18:21:52 +01:00
parent 857db43428
commit acdca8320b
11 changed files with 109 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/browser/components/zen-welcome/welcome.css
View File

@@ -19,96 +19,80 @@ body {
width: 100%;
height: 100%;
overflow: hidden;
transition: 2s;
-moz-transform: scale(1.1); /* zoom */
user-select: none;
}
body {
--zen-gradient-color: var(--zen-colors-secondary);
--zen-gradient-background: var(--zen-colors-tertiary);
--zen-gradient-border: #fbffbe;
&::before,
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
}
&::before {
background: radial-gradient(circle at 50%, var(--zen-gradient-background) 20%, var(--zen-gradient-color) 60%);
mask: var(--noise), radial-gradient(circle at 50%, transparent 20%, light-dark(#000, #fff) (60% + 10%));
}
&::after {
mask-image: var(--noise), linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
background: linear-gradient(
45deg,
#6d6dff 10%,
var(--zen-gradient-background) 25%,
var(--zen-gradient-background) 75%,
var(--zen-gradient-border) 90%
);
}
background: var(--zen-branding-bg);
}
@media (prefers-color-scheme: dark) {
body {
--zen-gradient-border: rgb(32, 32, 28);
--zen-gradient-color: transparent;
}
}
#first-view {
#main-view {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
background: var(--zen-dialog-background);
width: 55%;
position: relative;
padding: 5% 4%;
overflow: hidden;
border-right: 1px solid var(--zen-colors-border);
width: 50%;
margin: auto;
}
#welcome .zen-branding-title {
text-align: center;
font-size: 11rem;
}
#buttons-footer {
margin-top: auto;
padding: 10px;
width: -moz-available;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
#second-view {
body:has(#welcome:not([hidden='true'])) {
background: var(--zen-branding-coral);
color: var(--zen-branding-paper);
& #buttons-footer {
justify-content: center;
position: fixed;
bottom: 22px;
margin: 0 auto;
& button {
background: var(--zen-branding-paper);
color: var(--zen-branding-dark);
}
}
}
#main-view:has(#welcome:not([hidden='true'])) {
width: 100%;
height: 100%;
position: relative;
& #back {
display: none;
}
}
button {
padding: 8px;
border-radius: 999px;
}
#footer-buttons button {
padding: 8px 0;
button.primary {
background: var(--zen-branding-bg-reverse);
color: var(--zen-branding-bg);
}
.page {
display: flex;
flex-direction: column;
justify-content: start;
justify-content: center;
width: -moz-available;
height: 100%;
align-items: center;
margin: 32px;
}
@@ -187,13 +171,16 @@ p {
margin-bottom: 30px;
}
.icon {
#zen-logo {
-moz-context-properties: fill;
fill: currentColor;
display: inline-block;
height: 82px;
width: 82px;
margin-bottom: 20px;
height: 42px;
width: 42px;
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
}
.asset {
@@ -245,7 +232,7 @@ input[type='checkbox'] {
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(40px, 0, 0);
transform: translate3d(0, 40px, 0);
filter: blur(15px);
}
@@ -298,7 +285,7 @@ input[type='checkbox'] {
}
#circular-progress circle.bg {
stroke: light-dark(#3f3f3f, #4d4d4d);
stroke: transparent;
}
#circular-progress circle.fg {
@@ -306,7 +293,7 @@ input[type='checkbox'] {
transform-origin: var(--half-size) var(--half-size);
stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
transition: stroke-dasharray 0.3s linear 0s;
stroke: var(--zen-primary-color);
stroke: var(--zen-branding-coral);
}
#colorListWrapper {

41
src/browser/components/zen-welcome/welcome.html
View File

@@ -10,30 +10,34 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<meta name="color-scheme" content="light dark">
<meta name="referrer" content="no-referrer" />
<link
<linkset>
<link
rel="stylesheet"
type="text/css"
href="chrome://global/skin/in-content/common.css"
/>
<link rel="stylesheet" href="chrome://global/skin/global.css" />
<link
rel="stylesheet"
href="chrome://browser/content/zen-welcome/welcome.css"
/>
<link
rel="stylesheet"
type="text/css"
href="chrome://global/skin/in-content/common.css"
/>
<link rel="stylesheet" href="chrome://global/skin/global.css" />
<link
rel="stylesheet"
href="chrome://browser/content/zen-welcome/welcome.css"
href="chrome://browser/content/zen-styles/zen-branding.css"
/>
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="browser/zen-welcome.ftl" />
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="browser/zen-welcome.ftl" />
</linkset>
<script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body class="gradient-background">
<div id="first-view">
<img id="zen-logo" src="chrome://branding/content/about-logo.png" />
<div id="main-view">
<div class="page" id="welcome">
<img class="icon" src="chrome://branding/content/about-logo.png" />
<h1 data-l10n-id="welcome-dialog-welcome"></h1>
<p data-l10n-id="welcome-dialog-welcome-subtext"></p>
<h1 class="zen-branding-title" data-l10n-id="welcome-dialog-welcome-title-part-1"></h1>
<h1 class="zen-branding-title" data-l10n-id="welcome-dialog-welcome-title-part-2"></h1>
</div>
<div class="page page-split" id="import">
@@ -152,11 +156,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
></button>
</div>
</div>
<div id="second-view">
</div>
<svg
width="250" height="250" viewBox="0 0 250 250"
id="circular-progress" style="--progress: 50"

4
src/browser/components/zen-welcome/welcome.js
View File

@@ -242,16 +242,12 @@ class Pages {
* @param {Page[]} pages The pages
*/
constructor(pages) {
console.info('Initializing welcome pages...');
this.pages = pages;
this.currentPage = 0;
window.maximize();
this.pages.forEach((page) => page.setPages(this));
this._displayCurrentPage();
console.info('Welcome pages initialized.');
this.nextEl = document.getElementById(`next`);
this.prevEl = document.getElementById(`back`);