mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-05-03 12:35:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance styling and functionality in Zen components; adjust URL bar border radius, update tab unloading logic, and refine element separation settings

Browse Source
This commit is contained in:
mr. M
2025-03-06 12:50:42 +01:00
parent 8d3b9098c0
commit 713ceab89f
138 changed files with 196 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@
#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;
@@ -48,7 +48,7 @@
}
#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));
}
@@ -90,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;

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

@@ -114,9 +114,10 @@
&: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 {

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

@@ -1101,7 +1101,7 @@
&::after {
content: "";
inset: -50%;
filter: blur(15px);
filter: blur(15px) brightness(1.2);
position: absolute;
background-size: 100% 100%;
background-clip: padding-box;

4
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, .6), rgba(251, 251, 254, .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;

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

@@ -127,6 +127,7 @@
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: 1rem !important;
}
#urlbar-go-button {

10
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 {
@@ -251,14 +247,10 @@
&[visuallyselected] {
transform: scale(1.04);
& .tab-background {
box-shadow: var(--zen-big-shadow);
}
}
& .tab-background::after {
filter: blur(30px) !important;
filter: blur(30px) brightness(1.2);
}
}
}

2
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -863,7 +863,7 @@
getToolbarModifiedBase() {
return this.isDarkMode
? 'color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, #fff 20%)'
: 'color-mix(in srgb, var(--zen-themed-toolbar-bg) 95%, #000 5%)';
: 'color-mix(in srgb, var(--zen-themed-toolbar-bg) 95%, #000 6%)';
}
getSingleRGBColor(color, forToolbar = false) {

3
src/browser/base/zen-components/ZenTabUnloader.mjs
View File

@@ -274,7 +274,8 @@
(tab.pictureinpicture && !ignoreTimestamp) ||
(tab.soundPlaying && !ignoreTimestamp) ||
(tab.zenIgnoreUnload && !ignoreTimestamp) ||
excludedUrls.some((url) => url.test(tab.linkedBrowser?.currentURI.spec))
(excludedUrls.some((url) => url.test(tab.linkedBrowser?.currentURI.spec))
&& tab.linkedBrowser?.currentURI.spec !== 'about:blank')
) {
return false;
}

2
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -1227,7 +1227,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
this.tabBrowserPanel.setAttribute('zen-split-resizing', true);
const isVertical = event.target.getAttribute('orient') === 'vertical';
const dimension = isVertical ? 'width' : 'height';
const clientAxis = isVertical ? 'screenX' : 'screenY';
const clientAxis = isVertical ? 'clientX' : 'clientY';
const gridIdx = parseInt(event.target.getAttribute('gridIdx'));
const startPosition = event[clientAxis];

12
src/browser/base/zen-components/ZenWelcome.mjs
View File

@@ -335,7 +335,7 @@
<html:div></html:div>
</hbox>
<html:div id="zen-welcome-initial-essentials-browser-sidebar-essentials">
<html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://web.whatsapp.com" style="--zen-tab-icon: url('https://web.whatsapp.com/favicon.ico');">
<html:div class="tabbrowser-tab" fadein="" data-url="https://web.whatsapp.com" style="--zen-tab-icon: url('https://web.whatsapp.com/favicon.ico');">
<stack class="tab-stack">
<html:div class="tab-background"></html:div>
</stack>
@@ -345,17 +345,17 @@
<html:div class="tab-background"></html:div>
</stack>
</html:div>
<html:div class="tabbrowser-tab" fadein="" data-url="https://reddit.com" style="--zen-tab-icon: url('https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png');">
<html:div class="tabbrowser-tab" fadein="" data-url="https://trello.com" style="--zen-tab-icon: url('https://trello.com/favicon.ico');">
<stack class="tab-stack">
<html:div class="tab-background"></html:div>
</stack>
</html:div>
<html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://slack.com/" style="--zen-tab-icon: url('https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png');">
<html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-tab-icon: url('https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png');">
<stack class="tab-stack">
<html:div class="tab-background"></html:div>
</stack>
</html:div>
<html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://github.com" style="--zen-tab-icon: url('https://github.githubassets.com/favicons/favicon-dark.png');">
<html:div class="tabbrowser-tab" fadein="" data-url="https://github.com" style="--zen-tab-icon: url('https://github.githubassets.com/favicons/favicon-dark.png');">
<stack class="tab-stack">
<html:div class="tab-background"></html:div>
</stack>
@@ -370,12 +370,12 @@
<html:div class="tab-background"></html:div>
</stack>
</html:div>
<html:div class="tabbrowser-tab" fadein="" data-url="https://instagram.com" style="--zen-tab-icon: url('https://www.instagram.com/static/images/ico/favicon-192.png/68d99ba29cc8.png');">
<html:div class="tabbrowser-tab" fadein="" data-url="https://calendar.google.com" style="--zen-tab-icon: url('https://calendar.google.com/googlecalendar/images/favicons_2020q4/calendar_6.ico');">
<stack class="tab-stack">
<html:div class="tab-background"></html:div>
</stack>
</html:div>
<html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://element.io" style="--zen-tab-icon: url('http://www.google.com/s2/favicons?domain=element.io');">
<html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://youtube.com" style="--zen-tab-icon: url('https://www.youtube.com/favicon.ico');">
<stack class="tab-stack">
<html:div class="tab-background"></html:div>
</stack>

2
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -614,6 +614,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (currentTab.pinned) {
this.selectEmptyTab();
try {
console.log(currentTab)
console.log(currentTab.linkedBrowser?.currentURI.spec)
gZenTabUnloader.explicitUnloadTabs([currentTab]);
} catch (e) {
console.error('ZenWorkspaces: Error unloading tab', e);