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

Merge branch 'dev' into new-color-picker

Browse Source
This commit is contained in:
mr. m
2025-02-17 22:03:52 +01:00
committed by GitHub
parent 63c52cc40a 84bbb4ba63
commit 1609569dc9
304 changed files with 3084 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/browser/base/content/ZenStartup.mjs
View File

@@ -36,6 +36,8 @@
gZenVerticalTabsManager.init();
gZenUIManager.init();
this._checkForWelcomePage();
document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab');
} catch (e) {
console.error('ZenThemeModifier: Error initializing browser layout', e);
@@ -117,6 +119,13 @@
gURLBar._initPasteAndGo();
gURLBar._initStripOnShare();
},
_checkForWelcomePage() {
if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)) {
Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
Services.scriptloader.loadSubScript('chrome://browser/content/zen-components/ZenWelcome.mjs', window);
}
},
};
ZenStartup.init();

8
src/browser/base/content/ZenUIManager.mjs
View File

@@ -246,7 +246,7 @@ var gZenUIManager = {
const toast = this._createToastElement(messageId, options);
this._toastContainer.removeAttribute('hidden');
this._toastContainer.appendChild(toast);
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.4 });
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
await new Promise((resolve) => setTimeout(resolve, 3000));
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
const toastHeight = toast.getBoundingClientRect().height;
@@ -665,7 +665,7 @@ var gZenVerticalTabsManager = {
target.appendChild(child);
},
renameTabKeydown(event) {
async renameTabKeydown(event) {
if (event.key === 'Enter') {
let label = this._tabEdited.querySelector('.tab-label-container-editing');
let input = this._tabEdited.querySelector('#tab-label-input');
@@ -681,6 +681,10 @@ var gZenVerticalTabsManager = {
} else {
gBrowser.setTabTitle(this._tabEdited);
}
if (this._tabEdited.getAttribute('zen-pin-id')) {
// Update pin title in storage
await gZenPinnedTabManager.updatePinTitle(this._tabEdited, this._tabEdited.label, !!newName);
}
// Maybe add some confetti here?!?
gZenUIManager.motion.animate(

37
src/browser/base/content/browser-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36f4089dd6 100644
index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..5225d0539aa7dabf81a8fd60af3e839f203d296c 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -10,23 +10,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36
DevToolsSocketStatus:
"resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
@@ -632,6 +633,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
false
);
+const ZEN_WELCOME_PATH = "zen-welcome";
+const ZEN_WELCOME_ELEMENT_ATTR = "zen-dialog-welcome-element";
+XPCOMUtils.defineLazyServiceGetter(
+ this,
+ "ProfileService",
+ "@mozilla.org/toolkit/profile-service;1",
+ "nsIToolkitProfileService"
+);
+
customElements.setElementCreationCallback("screenshots-buttons", () => {
Services.scriptloader.loadSubScript(
"chrome://browser/content/screenshots/screenshots-buttons.js",
@@ -3440,6 +3450,10 @@ var XULBrowserWindow = {
@@ -3440,6 +3441,10 @@ var XULBrowserWindow = {
AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
@@ -37,7 +21,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36
PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
if (!gMultiProcessBrowser) {
@@ -4435,7 +4449,7 @@ nsBrowserAccess.prototype = {
@@ -4435,7 +4440,7 @@ nsBrowserAccess.prototype = {
// Passing a null-URI to only create the content window,
// and pass true for aSkipLoad to prevent loading of
// about:blank
@@ -46,7 +30,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36
null,
aParams,
aWhere,
@@ -4443,6 +4457,10 @@ nsBrowserAccess.prototype = {
@@ -4443,6 +4448,10 @@ nsBrowserAccess.prototype = {
aName,
true
);
@@ -57,16 +41,3 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..1f051e8a1e8a58e8bb721196deecfa36
},
openURIInFrame: function browser_openURIInFrame(
@@ -7285,6 +7303,12 @@ var gDialogBox = {
parentElement.showModal();
this._didOpenHTMLDialog = true;
+ if (uri.includes(ZEN_WELCOME_PATH)) {
+ parentElement.setAttribute(ZEN_WELCOME_ELEMENT_ATTR, true);
+ } else if (parentElement.hasAttribute(ZEN_WELCOME_ELEMENT_ATTR)) {
+ parentElement.removeAttribute(ZEN_WELCOME_ELEMENT_ATTR);
+ }
+
// Disable menus and shortcuts.
this._updateMenuAndCommandState(false /* to disable */);

24
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae402a465de 100644
index a0a382643a2f74b6d789f3641ef300eed202d5e9..a962e155f1452362a2a35df89c8f56e1c0d9968c 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -11,16 +11,20 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
<script src="chrome://browser/content/navigator-toolbox.js" />
<!-- Menu -->
@@ -19,7 +19,7 @@
@@ -17,9 +17,11 @@
#include browser-menubar.inc
</toolbaritem>
<spacer flex="1" skipintoolbarset="true" style="order: 1000;"/>
+#if 0
#include titlebar-items.inc.xhtml
+#endif
</toolbar>
-
+<hbox id="titlebar">
<toolbar id="TabsToolbar"
class="browser-toolbar browser-titlebar"
fullscreentoolbar="true"
@@ -32,7 +32,7 @@
@@ -32,7 +34,7 @@
<hbox class="titlebar-spacer" type="pre-tabs"/>
@@ -29,7 +33,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
<toolbartabstop/>
<hbox id="TabsToolbar-customization-target" flex="1">
<toolbarbutton id="firefox-view-button"
@@ -40,9 +40,9 @@
@@ -40,9 +42,9 @@
data-l10n-id="toolbar-button-firefox-view-2"
role="button"
aria-pressed="false"
@@ -40,7 +44,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
<tabs id="tabbrowser-tabs"
is="tabbrowser-tabs"
aria-multiselectable="true"
@@ -50,6 +50,10 @@
@@ -50,6 +52,10 @@
tooltip="tabbrowser-tab-tooltip"
orient="horizontal"
stopwatchid="FX_TAB_CLICK_MS">
@@ -51,7 +55,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
<hbox class="tab-drop-indicator" hidden="true"/>
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
# significantly, there is an optimization in
@@ -57,7 +61,7 @@
@@ -57,7 +63,7 @@
# the current structure that we may want to revisit.
<html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
@@ -60,7 +64,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
@@ -75,6 +79,8 @@
@@ -75,6 +81,8 @@
tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/>
<html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
@@ -69,12 +73,12 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
</tabs>
<toolbarbutton id="new-tab-button"
@@ -100,11 +106,12 @@
@@ -100,11 +108,12 @@
#include private-browsing-indicator.inc.xhtml
<toolbarbutton id="content-analysis-indicator"
class="toolbarbutton-1 content-analysis-indicator-icon"/>
-
+ #if 0
+#if 0
#include titlebar-items.inc.xhtml
-
+#endif
@@ -85,7 +89,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..7a2be5fe6cdecb771ce3326008085ae4
<toolbar id="nav-bar"
class="browser-toolbar chromeclass-location"
data-l10n-id="navbar-accessible"
@@ -490,10 +497,12 @@
@@ -490,10 +499,12 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>

2
src/browser/base/content/zen-assets.inc.xhtml
View File

@@ -24,6 +24,8 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-branding.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-welcome.css" />
</linkset>
# Scripts used all over the browser

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

@@ -24,6 +24,7 @@
content/browser/zen-components/ZenActorsManager.mjs (zen-components/ZenActorsManager.mjs)
content/browser/zen-components/ZenRices.mjs (zen-components/ZenRices.mjs)
content/browser/zen-components/ZenEmojies.mjs (zen-components/ZenEmojies.mjs)
content/browser/zen-components/ZenWelcome.mjs (zen-components/ZenWelcome.mjs)
content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css)
@@ -47,11 +48,12 @@
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css)
content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css)
content/browser/zen-styles/zen-welcome.css (content/zen-styles/zen-welcome.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)
content/browser/zen-styles/zen-panels/welcome.css (content/zen-styles/zen-panels/welcome.css)
content/browser/zen-styles/zen-panels/dialog.css (content/zen-styles/zen-panels/dialog.css)
* content/browser/zen-styles/zen-compact-mode.css (content/zen-styles/zen-compact-mode.css)
@@ -62,6 +64,7 @@
content/browser/zen-images/layouts/collapsed.png (content/zen-images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png)
content/browser/zen-images/grain-bg.png (content/zen-images/grain-bg.png)
# Actors
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)

BIN
src/browser/base/content/zen-images/grain-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

4
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

File diff suppressed because one or more lines are too long

8
src/browser/base/content/zen-styles/zen-buttons.css
View File

@@ -31,9 +31,9 @@ xul|button:is(.expander-down) {
border-radius: 6px !important;
}
@media (-moz-bool-pref: 'zen.theme.pill-button') {
:host(:is(.anonymous-content-host, notification-message)),
:root {
--zen-button-border-radius: 20px;
.footer-button {
transition: scale 0.2s;
&:active {
scale: 0.98;
}
}

14
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -120,6 +120,20 @@
opacity: 1;
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
}
}
#navigator-toolbox:hover,

2
src/browser/base/content/zen-styles/zen-panel-ui.css
View File

@@ -7,7 +7,7 @@ panel[type='arrow'][animate][animate='open']::part(content) {
animation: zen-jello-animation 0.35s ease;
@media (-moz-platform: macos) {
animation: zen-jello-animation-alt 0.35s ease;
animation: zen-jello-animation-alt 0.2s ease-out;
}
}

11
src/browser/base/content/zen-styles/zen-panels/dialog.css Normal file
View File

@@ -0,0 +1,11 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* Zen Welcome idalog override */
@media (prefers-color-scheme: dark) {
.dialogBox:not(.spotlightBox) {
border: 1px solid var(--zen-colors-border);
}
}

33
src/browser/base/content/zen-styles/zen-panels/welcome.css
View File

@@ -1,33 +0,0 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/* Zen Welcome idalog override */
@media (prefers-color-scheme: dark) {
.dialogBox:not(.spotlightBox) {
border: 1px solid var(--zen-colors-border);
}
}
#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox:not(.spotlightBox) {
margin: 0 !important;
}
#window-modal-dialog[zen-dialog-welcome-element='true'],
#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogOverlay,
#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogFrame,
#window-modal-dialog[zen-dialog-welcome-element='true'] .dialogBox {
width: 100% !important;
height: 100% !important;
max-height: none !important;
max-width: none !important;
}
#window-modal-dialog[zen-dialog-welcome-element='true'] {
--zen-welcome-dialog-space: 7px;
margin: 0 auto !important;
max-width: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
max-height: calc(100% - calc(var(--zen-welcome-dialog-space) * 2)) !important;
margin-top: var(--zen-welcome-dialog-space) !important;
}

5
src/browser/base/content/zen-styles/zen-popup.css
View File

@@ -6,7 +6,7 @@
@import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
@import url('chrome://browser/content/zen-styles/zen-panels/print.css');
@import url('chrome://browser/content/zen-styles/zen-panels/welcome.css');
@import url('chrome://browser/content/zen-styles/zen-panels/dialog.css');
:root {
--panel-subview-body-padding: 2px 0;
@@ -358,6 +358,8 @@ menuitem {
right: calc(var(--zen-element-separation) * 2);
z-index: 1000;
gap: 1rem;
display: flex;
align-items: end;
& .zen-toast {
padding: 0.9rem 0.8rem;
@@ -366,6 +368,7 @@ menuitem {
color: var(--button-primary-color);
box-shadow: var(--zen-big-shadow);
display: flex;
font-weight: 600;
gap: 5px;
flex-direction: column;
gap: 2px;

5
src/browser/base/content/zen-styles/zen-single-components.css
View File

@@ -69,3 +69,8 @@
body > #confetti {
z-index: 1;
}
/* Bookmarks */
#PersonalToolbar:not([collapsed='true']) {
min-height: 30px;
}

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

@@ -428,7 +428,7 @@
:root[zen-single-toolbar='true'] & {
& #urlbar:not([breakout-extend='true']) .urlbar-input-container {
padding-left: 4px;
padding-left: 8px;
padding-right: 4px;
}
}
@@ -955,7 +955,8 @@
padding: 0;
}
#zen-essentials-container > .tabbrowser-tab {
#zen-essentials-container > .tabbrowser-tab,
#zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab {
--toolbarbutton-inner-padding: 0;
max-width: unset;
width: 100% !important;
@@ -1010,11 +1011,12 @@
background: transparent;
overflow: hidden;
position: relative;
--zen-essential-bg-margin: 2px;
&::before {
background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85));
margin: 2px;
border-radius: calc(var(--border-radius-medium) - 2px);
margin: var(--zen-essential-bg-margin);
border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin));
position: absolute;
inset: 0;
z-index: 0;

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

@@ -104,7 +104,7 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.11));
--zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.125));
/* Toolbar */
--zen-toolbar-height: 38px;
@@ -163,7 +163,7 @@
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
@media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 85%, transparent 15%);
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, transparent 20%);
}
}

39
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -71,10 +71,6 @@
padding-inline-start: 8px !important;
}
#identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
margin-right: 0 !important;
}
#urlbar:not([extend='true']) #identity-box #identity-icon-box {
position: relative;
}
@@ -132,8 +128,11 @@
:root[zen-single-toolbar='true'] {
.urlbar-page-action:not([open]),
.identity-box-button:not([open]),
#tracking-protection-icon-container {
display: none;
}
#identity-icon-box:not([open]) {
margin-inline-end: calc(-8px - 2 * var(--urlbar-icon-padding)) !important;
opacity: 0;
transition: all 0.1s ease;
@@ -143,32 +142,30 @@
visibility: collapse;
}
#urlbar[open] :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button),
#urlbar:hover :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button),
.urlbar-page-action[open],
.identity-box-button[open],
#tracking-protection-icon-container[open] {
#urlbar[open] :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button):not([hidden='true']),
#urlbar:hover #identity-icon-box {
opacity: 1;
margin-inline-end: 0 !important;
display: flex;
transition: 0;
}
#urlbar:not([open]):hover #identity-box {
margin-inline-end: 0 !important;
}
#urlbar:not([open]) {
#identity-box {
order: 9;
}
}
#identity-permission-box:not([open]),
#notification-popup-box:not([open]) {
margin-inline-start: calc(-10px - 2 * var(--urlbar-icon-padding));
opacity: 0;
transition: all 0.2s;
}
#urlbar[open] #identity-permission-box,
#urlbar[open] #notification-popup-box,
#urlbar:hover #identity-permission-box,
#urlbar:hover #notification-popup-box,
#identity-permission-box[open],
#notification-popup-box[open] {
opacity: 1;
margin-inline-start: 0 !important;
}
#notification-popup-box {
align-items: center;
justify-content: center;

238
src/browser/base/content/zen-styles/zen-welcome.css Normal file
View File

@@ -0,0 +1,238 @@
#zen-welcome,
#zen-welcome-start,
#zen-welcome-pages {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-moz-window-dragging: drag;
}
:root[zen-welcome-stage] #zen-sidebar-splitter {
display: none;
}
#zen-welcome-start {
flex-direction: column;
-moz-window-dragging: drag;
--zen-primary-color: light-dark(black, white);
#zen-welcome-start-button {
opacity: 0;
list-style-image: url(chrome://browser/skin/zen-icons/forward.svg);
position: absolute;
bottom: 10%;
.button-icon {
filter: invert(1);
}
}
#zen-welcome-title {
text-align: center;
font-size: 5rem;
line-height: 1.1;
max-width: 50%;
font-weight: 500;
white-space: nowrap;
& > span {
display: block;
opacity: 0;
}
}
}
#zen-welcome-pages {
opacity: 0;
justify-content: start;
align-items: start;
display: none;
background: var(--zen-branding-bg);
border-radius: 1em;
overflow: hidden;
position: relative;
width: 60%;
height: 60%;
box-shadow: var(--zen-big-shadow);
#zen-welcome-page-sidebar {
flex-direction: column;
justify-content: space-between;
padding: 3.8rem;
width: 40%;
height: 100%;
overflow: hidden;
& #zen-welcome-heart {
width: 100%;
height: 100%;
opacity: 0;
color: var(--zen-primary-color);
fill: var(--zen-primary-color);
background-image: url(chrome://browser/skin/zen-icons/essential-add.svg);
background-size: 15%;
background-repeat: no-repeat;
background-position: center;
}
}
#zen-welcome-page-sidebar-buttons {
flex-direction: column;
gap: 10px;
}
#zen-welcome-page-sidebar-content {
& h1 {
font-size: xx-large;
font-weight: 600;
margin-bottom: 1rem;
}
& p {
margin: 0 0 1.1rem 0;
color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
}
& > * {
transform: translate(300%);
}
}
& button {
justify-content: center;
align-items: center;
transform: translate(300%);
}
#zen-welcome-page-content {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
width: 60%;
height: 100%;
position: relative;
overflow: hidden;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
gap: 1.6rem;
& label {
opacity: 0;
transition:
scale 0.1s,
box-shadow 0.1s;
padding: 1.5rem 1.1rem;
border-radius: 0.6rem;
width: 50%;
gap: 0.8rem;
display: flex;
border: 2px solid var(--zen-colors-border);
background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
align-items: center;
&:hover {
box-shadow: var(--zen-big-shadow);
}
&:has(:checked) {
box-shadow: var(--zen-big-shadow);
border: 2px solid var(--zen-primary-color);
scale: 1.03;
}
}
#zen-welcome-initial-essentials-browser {
width: 70%;
height: 80%;
display: flex;
margin-left: auto;
margin-top: auto;
border-top-left-radius: 1.2em;
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2));
padding-right: 20%;
overflow: hidden;
opacity: 0;
border: 1px solid var(--zen-colors-border);
border-bottom-width: 0;
border-right-width: 0;
#zen-welcome-initial-essentials-browser-sidebar {
width: 100%;
padding: 1.4rem;
gap: 1.2rem;
background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.4));
#zen-welcome-initial-essentials-browser-sidebar-win-buttons {
gap: 0.5rem;
align-items: center;
& > div {
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--zen-toolbar-element-bg);
}
}
#zen-welcome-initial-essentials-browser-sidebar-essentials {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
visibility: visible;
& * {
visibility: visible;
}
& .extra-tab {
width: 100%;
height: 3rem;
border-radius: 0.8rem;
margin-top: 0.5rem;
background: var(--zen-toolbar-element-bg);
}
& .tabbrowser-tab {
--tab-min-height: 5rem !important;
min-width: 5rem !important;
transition: transform 0.1s;
position: relative;
&::after {
position: absolute;
content: '';
width: 1.6rem;
height: 1.6rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--zen-tab-icon);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
--border-radius-medium: 1rem;
&[visuallyselected] {
transform: scale(1.04);
& .tab-background {
--zen-essential-bg-margin: 3px;
box-shadow: var(--zen-big-shadow);
}
}
& .tab-background::after {
filter: blur(30px) !important;
}
}
}
}
}
}
}

4
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -455,12 +455,12 @@
}
.zen-current-workspace-indicator {
padding: 15px calc(4px + var(--tab-inline-padding));
padding: 15px calc(6px + var(--tab-inline-padding));
font-weight: 600;
position: absolute;
max-height: var(--zen-workspace-indicator-height);
min-height: var(--zen-workspace-indicator-height);
gap: 12px;
gap: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;