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

Merge branch 'dev' into glance-buttons-overflow

Browse Source
This commit is contained in:
Vrezh Fedora
2025-03-14 22:22:20 +09:00
parent 02a860ba19 2e1354cdb9
commit d808e72d2a
212 changed files with 2915 additions and 4476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,6 +48,7 @@
openWatermark() {
if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
document.documentElement.removeAttribute('zen-before-loaded');
return;
}
for (let elem of document.querySelectorAll('#browser > *, #urlbar')) {

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

@@ -37,6 +37,8 @@ var gZenUIManager = {
window.addEventListener('TabClose', this.onTabClose.bind(this));
this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
gZenMediaController.init();
},
updateTabsToolbar() {
@@ -62,6 +64,7 @@ var gZenUIManager = {
}
tabs.style.removeProperty('flex');
tabs.style.maxHeight = height + 'px';
gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
},
get tabsWrapper() {
@@ -346,33 +349,37 @@ var gZenVerticalTabsManager = {
return visibleTabs[visibleTabs.length - 1] === aTab;
};
const tabSize = aTab.getBoundingClientRect().height;
const transform = `-${tabSize}px`;
gZenUIManager.motion
.animate(
aTab,
{
opacity: [0, 1],
transform: ['scale(0.95)', 'scale(1)'],
marginBottom: isLastTab() ? [] : [transform, '0px'],
},
{
duration: 0.2,
easing: 'ease-out',
}
)
.then(() => {
aTab.style.removeProperty('margin-bottom');
aTab.style.removeProperty('transform');
aTab.style.removeProperty('opacity');
});
gZenUIManager.motion
.animate(aTab.querySelector('.tab-content'), {
filter: ['blur(1px)', 'blur(0px)'],
})
.then(() => {
aTab.querySelector('.tab-stack').style.removeProperty('filter');
});
try {
const tabSize = aTab.getBoundingClientRect().height;
const transform = `-${tabSize}px`;
gZenUIManager.motion
.animate(
aTab,
{
opacity: [0, 1],
transform: ['scale(0.95)', 'scale(1)'],
marginBottom: isLastTab() ? [] : [transform, '0px'],
},
{
duration: 0.2,
easing: 'ease-out',
}
)
.then(() => {
aTab.style.removeProperty('margin-bottom');
aTab.style.removeProperty('transform');
aTab.style.removeProperty('opacity');
});
gZenUIManager.motion
.animate(aTab.querySelector('.tab-content'), {
filter: ['blur(1px)', 'blur(0px)'],
})
.then(() => {
aTab.querySelector('.tab-stack').style.removeProperty('filter');
});
} catch (e) {
console.error(e);
}
},
get actualWindowButtons() {
@@ -619,6 +626,12 @@ var gZenVerticalTabsManager = {
}
gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
document.getElementById('urlbar').removeAttribute('--urlbar-height');
if (!isSingleToolbar) {
document.getElementById('urlbar').style.setProperty('--urlbar-height', '32px');
} else {
gURLBar.updateLayoutBreakout();
}
// Always move the splitter next to the sidebar
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));

22
src/browser/base/content/main-popupset-inc-xhtml.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc31cb4034 100644
index 959c523b21c642f29353b9de37b3ce6b5505b01b..4cd26ea85ad4905bade71dcd470b8678079787bd 100644
--- a/browser/base/content/main-popupset.inc.xhtml
+++ b/browser/base/content/main-popupset.inc.xhtml
@@ -181,6 +181,10 @@
@@ -206,6 +206,10 @@
hidden="true"
tabspecific="true"
aria-labelledby="editBookmarkPanelTitle">
@@ -13,7 +13,7 @@ index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc
<box class="panel-header">
<html:h1>
<html:span id="editBookmarkPanelTitle"/>
@@ -206,6 +210,7 @@
@@ -231,6 +235,7 @@
class="footer-button"/>
</html:moz-button-group>
</vbox>
@@ -21,7 +21,21 @@ index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc
</panel>
</html:template>
@@ -535,6 +540,8 @@
@@ -426,11 +431,13 @@
observes="cmd_CustomizeToolbars"
class="viewCustomizeToolbar"
data-lazy-l10n-id="toolbar-context-menu-view-customize-toolbar-2"/>
+#if 0
<menuseparator id="sidebarRevampSeparator"/>
<menuitem id="toolbar-context-toggle-vertical-tabs"
data-lazy-l10n-id="toolbar-context-turn-on-vertical-tabs"/>
<menuitem id="toolbar-context-customize-sidebar"
data-lazy-l10n-id="toolbar-context-customize-sidebar"/>
+#endif
<menuseparator contexttype="fullscreen"/>
<menuitem id="toolbar-context-full-screen-autohide"
class="fullscreen-context-autohide"
@@ -565,6 +572,8 @@
#include popup-notifications.inc.xhtml

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

@@ -26,6 +26,7 @@
<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" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-media-controls.css" />
</linkset>
# Scripts used all over the browser
@@ -42,6 +43,7 @@
<script src="chrome://browser/content/zen-components/ZenGradientGenerator.mjs" />
<script src="chrome://browser/content/zen-components/ZenViewSplitter.mjs"/>
<script src="chrome://browser/content/zen-components/ZenGlanceManager.mjs" />
<script src="chrome://browser/content/zen-components/ZenMediaController.mjs" />
# Unimportant scripts
<script src="chrome://browser/content/zen-components/ZenRices.mjs" />

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

@@ -25,6 +25,7 @@
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-components/ZenMediaController.mjs (zen-components/ZenMediaController.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)
@@ -49,6 +50,7 @@
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-media-controls.css (content/zen-styles/zen-media-controls.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)
@@ -64,6 +66,7 @@
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)
content/browser/zen-images/note-indicator.svg (content/zen-images/note-indicator.svg)
# Actors
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)

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

Binary file not shown.

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

Binary file not shown.

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

@@ -1,6 +1,6 @@
<vbox id="glance-wrapper">
<vbox id="zen-glance-sidebar-container" hidden="true">
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
<toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confrim" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
<toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
</vbox>
</vbox>

100
src/browser/base/content/zen-images/note-indicator.svg Normal file
View File

@@ -0,0 +1,100 @@
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="none"/>
<style type="text/css"><![CDATA[
.note {
fill: white;
transform-box: fill-box;
transform-origin: center;
}
@keyframes flyUpLeft {
from {
opacity: 1;
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
}
to {
opacity: 0;
transform: translate(-9px, -35px) scale(5) rotate(0deg);
}
}
@keyframes flyUpRight {
from {
opacity: 1;
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
}
to {
opacity: 0;
transform: translate(9px, -35px) scale(5) rotate(0deg);
}
}
@keyframes flyUpCenter {
from {
opacity: 1;
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
}
to {
opacity: 0;
transform: translate(0px, -35px) scale(5) rotate(0deg);
}
}
}*/
]]></style>
<g class="note-group">
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
</g>
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</g>
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
</g>
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 1.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</g>
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
</g>
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

51
src/browser/base/content/zen-media-player.inc.xhtml Normal file
View File

@@ -0,0 +1,51 @@
<toolbar id="zen-media-controls-toolbar"
class="browser-toolbar customization-target zen-sidebar-toolbar"
context="toolbar-context-menu"
mode="icons"
hidden="true">
<toolbaritem>
<vbox id="zen-media-main-vbox">
<hbox id="zen-media-service-hbox" class="show-on-hover">
<hbox id="zen-media-service-button">
<image/>
</hbox>
<hbox id="zen-media-service-title" fadein="true">
<label class="service" />
<label class="tld" />
</hbox>
</hbox>
<vbox id="zen-media-info-vbox" class="show-on-hover">
<label id="zen-media-title" fadein="true"/>
<label id="zen-media-artist" fadein="true"/>
</vbox>
<hbox id="zen-media-progress-hbox" class="show-on-hover">
<label id="zen-media-current-time">0:00</label>
<html:input type="range" id="zen-media-progress-bar"
value="0" min="0" max="100" step="0.1"
oninput="gZenMediaController.onMediaSeekDrag(event);"
onchange="gZenMediaController.onMediaSeekComplete(event);"/>
<label id="zen-media-duration">0:00</label>
</hbox>
<hbox id="zen-media-controls-hbox">
<toolbarbutton id="zen-media-focus-button"
class="toolbarbutton-1"
oncommand="gZenMediaController.onMediaFocus();" />
<toolbarbutton id="zen-media-previoustrack-button"
class="toolbarbutton-1"
oncommand="gZenMediaController.onMediaPlayPrev();" />
<toolbarbutton id="zen-media-playpause-button"
class="toolbarbutton-1"
oncommand="gZenMediaController.onMediaToggle();" />
<toolbarbutton id="zen-media-nexttrack-button"
class="toolbarbutton-1"
oncommand="gZenMediaController.onMediaPlayNext();" />
<toolbarbutton id="zen-media-mute-button"
class="toolbarbutton-1"
oncommand="gZenMediaController.onMediaMute();" />
</hbox>
</vbox>
</toolbaritem>
</toolbar>

1
src/browser/base/content/zen-sidebar-icons.inc.xhtml
View File

@@ -1,3 +1,4 @@
#include zen-media-player.inc.xhtml
<toolbar brighttext="true"
id="zen-sidebar-bottom-buttons"
fullscreentoolbar="true"

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

@@ -38,6 +38,9 @@
--zen-toolbox-max-width: 64px !important;
--zen-compact-float: var(--zen-element-separation);
/* Initial padding for when we are animating */
padding: 0 0 0 var(--zen-toolbox-padding) !important;
&:not([animate='true']) {
position: absolute;
z-index: 10;
@@ -51,7 +54,12 @@
opacity: 0;
:root[zen-single-toolbar='true'] & {
top: var(--zen-element-separation);
top: calc(var(--zen-element-separation) / 2);
height: calc(100% - var(--zen-element-separation));
}
& #zen-sidebar-top-buttons {
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
}
@@ -61,7 +69,7 @@
}
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--zen-sidebar-width) + 1px);
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
@@ -78,7 +86,7 @@
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
&:not([animate='true']) {
right: calc(-1 * var(--zen-sidebar-width) + 1px);
right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
}
}
@@ -90,12 +98,21 @@
#navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: var(--zen-big-shadow);
border-radius: var(--zen-native-inner-radius);
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
padding: var(--zen-toolbox-padding) !important;
position: relative;
background: var(--zen-dialog-background);
border: 1px solid var(--zen-colors-border-contrast);
width: calc(100% - var(--zen-toolbox-padding));
/* times 4 because we have the inner padding and the outter padding to consider */
:root[zen-sidebar-expanded='true'] & {
&[has-animated-padding='true'] {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
&:not([has-animated-padding='true']) {
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
}
}
:root[zen-single-toolbar='true'] {
padding-top: 0 !important;
@@ -113,6 +130,7 @@
& #urlbar[open][zen-floating-urlbar='true'] {
transition: left 0.05s ease;
visibility: visible;
#navigator-toolbox:has(&) {
opacity: 1;
@@ -134,17 +152,18 @@
}
}
#navigator-toolbox[zen-has-hover],
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
#navigator-toolbox[zen-user-show],
#navigator-toolbox[zen-has-empty-tab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
#navigator-toolbox:has(.tabbrowser-tab:active),
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox:has(
*:is([panelopen='true'], [open='true'], #urlbar:not([zen-floating-urlbar='true']):focus-within):not(tab):not(.zen-compact-mode-ignore)
*:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
) {
&:not([animate='true']):not(:has(#urlbar[zen-floating-urlbar='true']:hover)) {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
@@ -249,14 +268,14 @@
1.003423 100%
);
transition:
left 0.3s var(--zen-compact-mode-func),
right 0.3s var(--zen-compact-mode-func);
left 0.25s var(--zen-compact-mode-func),
right 0.25s var(--zen-compact-mode-func);
opacity: 1;
&:not([supress-primary-adjustment='true']) {
left: -1px;
left: calc(var(--zen-element-separation) / -2);
:root[zen-right-side='true'] & {
right: -1px;
right: calc(var(--zen-element-separation) / -2);
left: auto;
}
}

123
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -17,7 +17,7 @@
margin: 0;
}
#zen-splitview-dropzone {
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
border-radius: var(--zen-native-inner-radius);
transition: inset ease-out 0.08s;
display: none;
background-color: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%);
@@ -29,12 +29,11 @@
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'],
#zen-splitview-dropzone {
flex: 1;
margin: var(--zen-split-column-gap) calc(var(--zen-split-row-gap) + 1px) !important;
margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
position: absolute !important;
overflow: hidden;
transition: inset 0.1s;
}
#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {
@@ -45,12 +44,11 @@
}
#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
outline: 2px solid var(--zen-primary-color) !important;
outline-offset: -1px;
outline: 1px solid var(--zen-primary-color) !important;
}
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
--zen-split-row-gap: calc(var(--zen-element-separation) + 1px);
--zen-split-row-gap: var(--zen-element-separation);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
margin-right: calc(-1 * var(--zen-split-column-gap));
}
@@ -92,12 +90,6 @@
pointer-events: all;
}
.zen-split-view-splitter[orient='vertical'] {
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-split-row-gap) / -2);
cursor: ew-resize;
}
.zen-split-view-splitter[orient='horizontal'] {
height: var(--zen-split-column-gap);
cursor: ns-resize;
@@ -214,37 +206,104 @@
display: revert;
}
.zen-view-splitter-header {
display: flex;
width: 100%;
height: 20px;
/*TODO: update with appropriate color*/
background-color: var(--zen-colors-secondary);
align-items: center;
.zen-view-splitter-header-container {
position: absolute;
top: calc(var(--zen-split-column-gap) / -2);
left: 50%;
opacity: 0;
transition: opacity 0.2s;
z-index: 100;
cursor: move;
transform: translateX(-50%);
pointer-events: none;
}
.zen-tab-unsplit-button {
.zen-view-splitter-header {
display: flex;
align-items: center;
position: fixed;
padding: 0.4rem 0.6rem;
border-radius: 8px;
background-color: light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
box-shadow: 0 0 0 1px var(--button-primary-border-color);
gap: 0.8rem;
transform: translateX(-50%);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
:root:not([inDOMFullscreen='true']) .browserSidebarContainer:hover .zen-view-splitter-header-container,
.zen-view-splitter-header-container:hover {
pointer-events: all;
opacity: 1;
transition-delay: 0.2s;
}
.zen-view-splitter-header-container toolbarbutton {
display: block;
-moz-context-properties: fill, fill-opacity;
border-radius: var(--tab-border-radius);
/*TODO: update with appropriate color*/
color: inherit;
fill: currentColor;
padding: var(--tab-close-button-padding);
width: 24px;
height: 24px;
width: 16px;
height: 16px;
cursor: pointer;
appearance: none;
margin-left: auto;
outline: var(--toolbarbutton-outline);
list-style-image: url('chrome://global/skin/icons/close-fill.svg') !important;
&:hover {
outline-color: var(--toolbarbutton-hover-outline-color);
outline: none;
color: var(--button-primary-bgcolor);
border-top-left-radius: 0;
border-top-right-radius: 0;
& image {
width: 14px;
height: 14px;
}
&:hover:active {
outline-color: var(--toolbarbutton-active-outline-color);
&.zen-tab-rearrange-button {
cursor: move;
& image {
transform: rotate(90deg);
}
}
}
#zen-split-view-fake-browser {
position: absolute;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
overflow: hidden;
&[side='right'] {
right: 0;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.5rem;
pointer-events: none;
height: 3.5rem;
background: var(--zen-split-view-fake-icon);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
transition: opacity 0.2s;
transition-delay: 0.1s;
@starting-style {
opacity: 0;
}
}
&.fade-out::after {
opacity: 0;
transition-delay: 0s;
}
}

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

@@ -14,7 +14,11 @@ tab-group[split-view-group] {
--zen-split-view-active-tab-bg: color-mix(in srgb, var(--zen-toolbar-element-bg), transparent 40%);
:root:not([zen-sidebar-expanded='true']) & {
padding: 2px 0;
padding: 0 2px;
--tab-min-height: 30px;
--tab-collapsed-width: 38px;
margin: 0 auto;
--tab-min-width: 34px;
}
& > .tabbrowser-tab {
@@ -56,7 +60,7 @@ tab-group[split-view-group] {
}
}
&:has(> tab[visuallyselected]) {
&:has(> tab:is([visuallyselected], [multiselected])) {
background-color: var(--tab-selected-bgcolor);
box-shadow: var(--tab-selected-shadow);

37
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -34,14 +34,22 @@
width: 32px;
height: 32px;
background: light-dark(rgb(24, 24, 24), rgb(231, 231, 231));
transition: background 0.2s ease;
transition:
background 0.05s ease,
scale 0.05s ease;
border-radius: 999px;
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
opacity: 0;
padding: 8px;
&:hover {
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
scale: 1.05;
}
&:hover:active {
scale: 0.95;
}
& label {
@@ -52,6 +60,33 @@
filter: invert(1);
}
}
& #zen-glance-sidebar-close {
width: fit-content;
& label {
display: block;
max-width: 0px;
margin: 0;
overflow: hidden;
transition:
max-width 0.2s ease,
margin-left 0.2s ease;
}
&[waitconfirmation] {
background: rgb(220, 53, 69);
color: white;
fill: white;
& label {
max-width: 100px;
margin-left: 8px;
}
& image {
filter: none;
}
}
}
}
#zen-glance-sidebar-container[hidden='true'] {

18
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -89,6 +89,7 @@
border-radius: 50%;
cursor: pointer;
position: relative;
transition: transform 0.1s;
&::after {
content: '';
position: absolute;
@@ -99,6 +100,23 @@
outline: 2px solid var(--zen-toolbar-element-bg);
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s;
}
&:hover {
transform: scale(1.05);
&::after {
transform: scale(1.05);
}
}
&:hover:active {
transform: scale(0.95);
&::after {
transform: scale(0.95);
}
}
}
}

256
src/browser/base/content/zen-styles/zen-media-controls.css Normal file
View File

@@ -0,0 +1,256 @@
#zen-media-controls-toolbar {
--progress-height: 5px;
--button-spacing: 2px;
display: flex;
justify-content: space-between;
min-width: 0;
background: transparent;
container-type: inline-size;
.toolbarbutton-1 {
border-radius: 5px;
color: white;
}
#zen-media-prev-button,
#zen-media-play-pause-button,
#zen-media-next-button {
margin: 0;
}
image.toolbarbutton-icon {
padding: 5px;
width: 26px;
height: 26px;
}
#zen-media-progress-bar {
appearance: none;
width: 100%;
height: var(--progress-height);
margin: 0 8px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: height 0.15s ease-out;
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-thumb {
background: var(--zen-primary-color);
border: none;
width: 14px;
height: 14px;
border-radius: 50%;
cursor: pointer;
}
}
&:hover {
& #zen-media-main-vbox {
transition-delay: 0s;
gap: 6px;
}
.show-on-hover {
max-height: 50px;
padding: 2px 6px;
margin-bottom: 0;
opacity: 1;
transform: translateY(0);
}
}
&:not(:hover) {
&.playing:not([muted]) #zen-media-focus-button::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
opacity: 1;
background: url('chrome://browser/content/zen-images/note-indicator.svg') no-repeat;
top: -50%;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
}
#zen-media-focus-button {
align-self: center;
transition:
opacity 0.2s ease,
transform 0.2s ease;
@container (max-width: 185px) {
width: 0;
height: 0;
opacity: 0;
padding: 0;
margin-right: -10%;
transform: translateX(-20px);
transition: margin 0.15s ease-in-out;
}
@container (min-width: 185px) {
opacity: 1;
transform: translateX(0);
}
}
toolbaritem {
flex-grow: 1;
padding: 0;
transition: padding 0.3s ease-out;
position: absolute;
left: 0;
bottom: 0;
padding: 4px;
border-radius: var(--border-radius-medium);
background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !important;
width: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.show-on-hover {
max-height: 0;
opacity: 0;
transform: translateY(5px);
padding: 0 6px;
transition:
max-height 0.1s ease-in-out,
opacity 0.1s ease-in-out,
transform 0.05s ease-in-out,
padding 0.15s ease-in-out;
}
#zen-media-current-time,
#zen-media-duration {
margin: 0 0 0 1px;
font-size: x-small;
opacity: 0.7;
font-weight: 500;
}
}
#zen-media-controls-toolbar {
display: none;
animation: none;
transition: none;
&:not([hidden]) {
display: flex;
height: 2.5rem;
overflow: visible;
position: relative;
z-index: 2;
}
}
#zen-media-service-title,
#zen-media-title,
#zen-media-artist {
white-space: nowrap;
width: 0;
margin-left: 0;
}
#zen-media-service-title {
align-self: center;
font-size: math;
margin-left: 6px;
& label {
margin: 0;
}
& .tld {
opacity: 0.5;
}
}
#zen-media-title,
#zen-media-artist {
align-self: start;
}
#zen-media-artist {
opacity: 0.7;
font-weight: 500;
font-size: smaller;
}
#zen-media-title {
height: 16px;
font-size: math;
font-weight: bold;
}
#zen-media-main-vbox,
#zen-media-service-hbox,
#zen-media-info-vbox,
#zen-media-progress-hbox {
width: 100%;
}
#zen-media-service-hbox {
padding-top: 6px;
}
#zen-media-info-vbox {
& label {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
#zen-media-main-vbox {
height: 100%;
justify-content: space-between;
transition: gap 0.1s ease-out;
transition-delay: 0.1s;
gap: 0px;
}
#zen-media-progress-hbox {
flex-grow: 1;
height: 1.1rem;
align-items: center;
}
#zen-media-controls-hbox {
align-items: flex-end;
justify-content: space-between;
max-width: 100%;
--toolbarbutton-outer-padding: 0;
}
#zen-media-service-button {
align-items: center;
& image {
width: 16px;
height: 16px;
border-radius: 4px;
}
}
:root:not([zen-sidebar-expanded='true']) {
#zen-media-controls-toolbar {
display: none;
}
}

15
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View File

@@ -111,24 +111,25 @@
background: transparent;
border: none;
cursor: ew-resize;
z-index: 2;
&:is(.zen-split-view-splitter[orient='vertical']) {
/* Bit of a hacky solution, but it works */
width: calc(var(--zen-element-separation) - 3px);
margin-left: calc(-1 * var(--zen-element-separation) / 2 - 2px);
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
height: unset;
cursor: ew-resize;
}
&::before {
height: 50px;
width: 4px;
background: var(--zen-colors-primary);
width: 2px;
background: var(--button-primary-bgcolor);
border-radius: 2px;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.1s ease-in-out;
pointer-events: none;
@@ -139,10 +140,6 @@
}
}
.zen-split-view-splitter[orient='vertical']::before {
transform: translate(-75%, -50%);
}
.zen-sidebar-web-panel-splitter[side='right'] {
left: 100%;
}

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

@@ -19,12 +19,6 @@
text-overflow: ellipsis;
}
@media not (-moz-bool-pref: 'zen.watermark.enabled') {
#zen-watermark {
display: none;
}
}
#customization-footer #customization-toolbar-visibility-button {
display: none !important;
}

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

@@ -94,9 +94,8 @@
padding: 6px !important;
}
& #urlbar-container,
& #urlbar {
--urlbar-container-height: 40px;
& #urlbar-container[breakout='true']:has([zen-floating-urlbar='true']) {
--urlbar-container-height: 36px !important;
--urlbar-height: 38px !important;
}
@@ -109,7 +108,7 @@
}
& #zen-sidebar-top-buttons {
margin: 4px 0;
margin: var(--zen-element-separation) 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
& #PanelUI-menu-button {
@@ -264,7 +263,7 @@
display: none;
}
&:active {
#tabbrowser-tabs:not([movingtab]) &:active {
scale: var(--zen-active-tab-scale);
}
@@ -374,6 +373,12 @@
overflow-y: auto;
height: 100%;
scrollbar-width: thin;
/* Only do this hack if we have workspaces enabled */
:root[zen-workspace-id] & {
margin-left: calc(-1 * var(--zen-toolbox-padding));
width: calc(100% + var(--zen-toolbox-padding) * 2);
}
}
#zen-browser-tabs-container {
@@ -440,7 +445,7 @@
padding-right: 0;
:root[zen-single-toolbar='true'] & {
& #urlbar:not([breakout-extend='true']) .urlbar-input-container {
& #urlbar:not([breakout-extend='true']):not([pageproxystate='invalid']) .urlbar-input-container {
padding-left: 8px;
padding-right: 4px;
}
@@ -865,6 +870,7 @@
pointer-events: none;
width: 16px;
height: 16px;
border-radius: 4px;
}
&::after {
@@ -1050,7 +1056,7 @@
overflow: hidden;
transition: max-height 0.3s ease-out;
opacity: 1;
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
grid-template-columns: repeat(auto-fit, minmax(48px, auto));
overflow: hidden;
scrollbar-width: thin;
display: grid;
@@ -1102,7 +1108,7 @@
&::after {
content: "";
inset: -50%;
filter: blur(15px);
filter: blur(15px) brightness(1.2);
position: absolute;
background-size: 100% 100%;
background-clip: padding-box;
@@ -1168,7 +1174,7 @@
}
& .titlebar-buttonbox-container {
margin-left: calc(-1 * var(--zen-toolbox-max-width)) !important;
margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
}
& #zen-appcontent-wrapper {
@@ -1261,5 +1267,9 @@
.zen-workspace-tabs-section {
position: absolute;
transform: translateX(-100%);
min-width: 100%;
min-width: calc(100% - var(--zen-toolbox-padding) * 2);
&:not(.zen-current-workspace-indicator) {
margin: 0 var(--zen-toolbox-padding);
}
}

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

@@ -79,7 +79,7 @@
--focus-outline-color: var(--button-bgcolor) !important;
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
--toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;
--toolbarbutton-icon-fill: light-dark(rgba(57, 57, 58, 0.6), rgba(251, 251, 254, 0.6)) !important;
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
@@ -155,7 +155,7 @@
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
--zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
--zen-workspace-indicator-height: 45px;
@@ -164,7 +164,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) 80%, transparent 20%);
--zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
}
}

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

@@ -16,6 +16,10 @@
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
border-radius: var(--toolbarbutton-border-radius);
padding: 1px;
:root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
--urlbar-container-padding: 2px !important;
}
}
.urlbar-input::placeholder {
@@ -44,6 +48,16 @@
outline-color: none !important;
}
#urlbar:not([breakout-extend='true']) {
& #urlbar-background {
transition: background-color 0.15s ease;
}
&:hover #urlbar-background {
background-color: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2)) !important;
}
}
#identity-box.chromeUI:not([pageproxystate='invalid']) {
& #identity-icon-box {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
@@ -70,7 +84,7 @@
position: relative;
}
#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
#urlbar:not([breakout-extend='true']) #identity-box {
margin-inline-end: 0 !important;
}
@@ -80,6 +94,12 @@
justify-content: center !important;
align-items: center !important;
margin: 0;
:root[zen-single-toolbar='true'] & {
padding: 6px !important;
width: unset !important;
height: unset !important;
}
}
#tracking-protection-icon-container {
@@ -88,8 +108,6 @@
.urlbar-page-action,
#tracking-protection-icon-container {
width: calc(var(--urlbar-min-height) - 6 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 6 * var(--urlbar-container-padding)) !important;
margin-top: auto !important;
margin-bottom: auto !important;
}
@@ -119,10 +137,11 @@
box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
backdrop-filter: none !important;
border-radius: 0.8rem !important;
}
#urlbar-go-button {
margin: auto 0;
display: none;
}
:root[zen-single-toolbar='true'] {
@@ -133,11 +152,11 @@
display: none;
}
#identity-icon-box:not([open]) {
margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding)) !important;
#identity-box:not([pageproxystate='invalid']) #identity-icon-box:not([open]) {
margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
transform: translateX(100%);
opacity: 0;
transition: all 0.1s ease;
opacity: 0;
}
#identity-permission-box > *:not(#permissions-granted-icon) {
@@ -153,9 +172,9 @@
#identity-permission-box
),
#urlbar:hover #identity-icon-box {
opacity: 1;
opacity: 1 !important;
margin-inline-start: 0 !important;
transform: none;
transform: none !important;
display: flex;
#urlbar:not(:hover) & {
transition: 0;
@@ -167,7 +186,7 @@
}
#urlbar:not([open]) {
#identity-box {
#identity-box:not([pageproxystate='invalid']) {
order: 9;
}
}
@@ -317,7 +336,7 @@ button.popup-notification-dropmarker {
background: transparent;
&[notificationside='top'] {
position: absolute;
position: fixed;
bottom: calc(var(--zen-element-separation) * 1.5);
right: calc(var(--zen-element-separation) * 1.5);
width: fit-content;
@@ -435,9 +454,8 @@ button.popup-notification-dropmarker {
font-size: 1.5em !important;
width: min(90%, 60rem) !important;
}
top: 50vh !important;
top: 25vh !important;
transform: translateX(-50%);
margin-top: -20%;
left: 50% !important;
#urlbar-container:has(&) {
@@ -446,6 +464,12 @@ button.popup-notification-dropmarker {
}
}
@media not (-moz-bool-pref: 'zen.urlbar.show-protections-icon') {
#tracking-protection-icon-container {
display: none !important;
}
}
/* Code ~~stolen~~ taken inspiration from https://github.com/greeeen-dev/zen-arc-cmd-bar
*
* MIT License

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

@@ -24,10 +24,6 @@
list-style-image: url(chrome://browser/skin/zen-icons/forward.svg);
position: absolute;
bottom: 10%;
.button-icon {
filter: invert(1);
}
}
#zen-welcome-title {
@@ -58,6 +54,7 @@
width: 60%;
height: 60%;
box-shadow: var(--zen-big-shadow);
overflow: hidden;
/* Small screens */
@media (max-width: 1400px) {
@@ -89,13 +86,18 @@
width: 100%;
height: 100%;
opacity: 0;
color: var(--zen-primary-color);
fill: var(--zen-primary-color);
color: currentColor;
fill: currentColor;
-moz-context-properties: fill, fill-opacity;
background-image: url(chrome://browser/skin/zen-icons/essential-add.svg);
background-size: 15%;
background-repeat: no-repeat;
background-position: center;
}
&[animate-heart] {
overflow: hidden;
}
}
#zen-welcome-page-sidebar-buttons {
@@ -129,6 +131,7 @@
#zen-welcome-page-content {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
width: 60%;
max-width: 80rem;
height: 100%;
position: relative;
overflow: hidden;
@@ -205,7 +208,7 @@
#zen-welcome-initial-essentials-browser-sidebar-essentials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
gap: 0.4rem 1.2rem;
visibility: visible;
& * {
@@ -245,15 +248,10 @@
&[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;
filter: blur(30px) brightness(1.2);
}
}
}

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

@@ -9,6 +9,7 @@
justify-content: center;
align-items: center;
display: flex;
font-size: x-small;
position: relative;
@@ -451,6 +452,7 @@
/* Mark workspaces indicator */
#zen-current-workspace-indicator-container {
position: relative;
margin-bottom: var(--zen-workspace-indicator-height);
}
@@ -464,6 +466,7 @@
align-items: center;
flex-direction: row !important;
max-width: 100%;
width: 100%;
&::before {
border-radius: var(--border-radius-medium);
@@ -488,6 +491,7 @@
& .zen-current-workspace-indicator-icon {
font-size: 12px;
line-height: 1;
}
.zen-current-workspace-indicator-name {
@@ -497,6 +501,7 @@
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
font-size: small;
}
}