diff --git a/l10n b/l10n index ef9c4eb7d..19ba80d87 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit ef9c4eb7d78ca93947da56e679cbdd85d5bac7aa +Subproject commit 19ba80d872e724fd564b80affd19b677df1e8799 diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 437588d1a..4feef9a26 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -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); diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 2aa1b9bf5..63233196a 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -43,7 +43,8 @@ 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) content/browser/zen-styles/zen-panels/print.css (content/zen-styles/zen-panels/print.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) diff --git a/src/browser/base/content/zen-fonts/JunicodeVF-Italic.woff2 b/src/browser/base/content/zen-fonts/JunicodeVF-Italic.woff2 new file mode 100644 index 000000000..69ffb1722 Binary files /dev/null and b/src/browser/base/content/zen-fonts/JunicodeVF-Italic.woff2 differ diff --git a/src/browser/base/content/zen-fonts/JunicodeVF-Roman.woff2 b/src/browser/base/content/zen-fonts/JunicodeVF-Roman.woff2 new file mode 100644 index 000000000..7e09ffc63 Binary files /dev/null and b/src/browser/base/content/zen-fonts/JunicodeVF-Roman.woff2 differ diff --git a/src/browser/base/content/zen-styles/zen-branding.css b/src/browser/base/content/zen-styles/zen-branding.css new file mode 100644 index 000000000..957165227 --- /dev/null +++ b/src/browser/base/content/zen-styles/zen-branding.css @@ -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; + } +} diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index 042f266a5..09b1f7b26 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -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%); diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css index 08ce799f6..3393bd5da 100644 --- a/src/browser/components/zen-welcome/welcome.css +++ b/src/browser/components/zen-welcome/welcome.css @@ -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 { diff --git a/src/browser/components/zen-welcome/welcome.html b/src/browser/components/zen-welcome/welcome.html index aa31a24ed..15180770e 100644 --- a/src/browser/components/zen-welcome/welcome.html +++ b/src/browser/components/zen-welcome/welcome.html @@ -10,30 +10,34 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. - + + + + - - - - + + + -
+ +
- -

- -

- +

+

@@ -152,11 +156,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. >
- -
- -
- page.setPages(this)); this._displayCurrentPage(); - console.info('Welcome pages initialized.'); this.nextEl = document.getElementById(`next`); this.prevEl = document.getElementById(`back`); diff --git a/src/widget/windows/nsWindow-cpp.patch b/src/widget/windows/nsWindow-cpp.patch index 2b75c41cc..404df6308 100644 --- a/src/widget/windows/nsWindow-cpp.patch +++ b/src/widget/windows/nsWindow-cpp.patch @@ -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);