mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-04 17:06:35 +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

2
l10n

Submodule l10n updated: ef9c4eb7d7...19ba80d872

2
src/browser/app/profile/zen-browser.js
View File

@@ -71,7 +71,7 @@ pref("app.update.checkInstallTime.days", 6);
// CUSTOM ZEN PREFS
pref('zen.welcomeScreen.enabled', true);
pref('zen.welcomeScreen.enabled', true, sticky);
pref('zen.welcomeScreen.seen', false);
pref('zen.tabs.vertical', true);

5
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -43,6 +43,7 @@
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css)
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css)
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css)
@@ -60,3 +61,7 @@
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (zen-components/actors/ZenThemeMarketplaceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceChild.sys.mjs (zen-components/actors/ZenGlanceChild.sys.mjs)
content/browser/zen-components/actors/ZenGlanceParent.sys.mjs (zen-components/actors/ZenGlanceParent.sys.mjs)
# Fonts
content/browser/zen-fonts/JunicodeVF-Italic.woff2 (content/zen-fonts/JunicodeVF-Italic.woff2)
content/browser/zen-fonts/JunicodeVF-Roman.woff2 (content/zen-fonts/JunicodeVF-Roman.woff2)

BIN
src/browser/base/content/zen-fonts/JunicodeVF-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
src/browser/base/content/zen-fonts/JunicodeVF-Roman.woff2 Normal file
View File

Binary file not shown.

24
src/browser/base/content/zen-styles/zen-branding.css Normal file
View File

@@ -0,0 +1,24 @@
@font-face {
font-family: 'Zen-Junicode';
src: url('chrome://browser/content/zen-fonts/JunicodeVF-Roman.woff2') format('woff2');
}
@font-face {
font-family: 'Zen-Junicode-Italic';
src: url('chrome://browser/content/zen-fonts/JunicodeVF-Italic.woff2') format('woff2');
}
.zen-branding-title {
font-size: 6rem;
line-height: 0.9;
margin-bottom: 0.4rem;
font-family: 'Zen-Junicode', serif;
font-weight: 600;
font-style: normal;
font-feature-settings: 'swsh' 1;
& .zen-branding-title-italic {
font-family: "Zen-Junicode-Italic", serif;
}
}

10
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -14,9 +14,13 @@
--zen-border-radius: 7px;
--zen-primary-color: #ffb787;
--zen-branding-bg-dark: #202020;
--zen-branding-bg: light-dark(#F2F0E3, var(--zen-branding-bg-dark));
--zen-branding-bg-reverse: light-dark(var(--zen-branding-bg-dark), #F2F0E3);
/* Branding */
--zen-branding-dark: #202020;
--zen-branding-coral: #F76F53;
--zen-branding-paper: #F2F0E3;
--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));
/** Zen colors are generated automatically from the primary color */
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);

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%;
background: var(--zen-branding-bg);
}
&::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%
);
}
}
@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 {

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

@@ -10,6 +10,7 @@ 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" />
<linkset>
<link
rel="stylesheet"
type="text/css"
@@ -20,20 +21,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
rel="stylesheet"
href="chrome://browser/content/zen-welcome/welcome.css"
/>
<link
rel="stylesheet"
href="chrome://browser/content/zen-styles/zen-branding.css"
/>
<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`);

4
src/widget/windows/nsWindow-cpp.patch
View File

@@ -1,5 +1,5 @@
diff --git a/widget/windows/nsWindow.cpp b/widget/windows/nsWindow.cpp
index 00681c216c838efedbbcded9d6b843dbd8b5b0b6..76ef1b343908b13e2e1c7c85ddebaf0ccea112cd 100644
index 00681c216c838efedbbcded9d6b843dbd8b5b0b6..eca12711fa5093992817ff1075c3559b03e935d3 100644
--- a/widget/windows/nsWindow.cpp
+++ b/widget/windows/nsWindow.cpp
@@ -1078,6 +1078,16 @@ nsresult nsWindow::Create(nsIWidget* aParent, const LayoutDeviceIntRect& aRect,
@@ -11,7 +11,7 @@ index 00681c216c838efedbbcded9d6b843dbd8b5b0b6..76ef1b343908b13e2e1c7c85ddebaf0c
+ // Windows creates some sort of control buttons under the titlebar, which is
+ // annoying for us because it wont allow us to have those hiding animations.
+ // Let's just... remove them... and hope for the best.
+ if (mWindowType == WindowType::TopLevel) {
+ if (sFirstTopLevelWindowCreated) {
+ LONG_PTR style = ::GetWindowLongPtr(mWnd, GWL_STYLE);
+ style &= ~(WS_SYSMENU | WS_MINIMIZEBOX | WS_MAXIMIZEBOX);
+ ::SetWindowLongPtr(mWnd, GWL_STYLE, style);