mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-06 03:18:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor compact mode styles and improve tab positioning for better layout consistency

Browse Source
This commit is contained in:
mr. M
2025-03-04 00:22:40 +01:00
parent 23a60e79c1
commit 096a28002f
3 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,7 +54,8 @@
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));
}
}
@@ -254,14 +255,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;
}
}

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

@@ -263,6 +263,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
if (!this.fakeBrowser) {
return;
}
// if we are still in that 1/4 of the way to the edge then we should not hide the fake browser
if (event.clientX < (panelsWidth / 4) * 3 && event.clientX > panelsRect.left) {
return;
}
this.fakeBrowser.classList.add('fade-out');
gBrowser.selectedTab = this._draggingTab;
this._draggingTab = null;
@@ -1507,7 +1511,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
const droppedOnTab = gBrowser.getTabForBrowser(browser);
if (droppedOnTab && droppedOnTab !== draggedTab) {
// Calculate which side of the target browser the drop occurred
const browserRect = browser.getBoundingClientRect();
// const browserRect = browser.getBoundingClientRect();
// const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect);
const hoverSide = 'right';
@@ -1567,7 +1571,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
draggedTab.linkedBrowser.closest('.browserSidebarContainer'),
{
scale: [0.98, 1],
opacity: [0, 1],
},
{
type: 'spring',

31
src/browser/themes/shared/tabbrowser/tabs-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index 01815c2114a627e5cac183c702bd82f1bd4f58f8..3a453164ee8a555db2a0ba28288d69857a4933bc 100644
index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f023b2641bf 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -31,7 +31,7 @@
@@ -42,10 +42,37 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..3a453164ee8a555db2a0ba28288d6985
#tabbrowser-tabs[orient=vertical] & {
- top: 7px;
+ top: 0px;
+ top: -7px;
}
&[crashed] {
@@ -510,7 +509,7 @@
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
- &[pinned]:not([crashed]) {
+ &:not([crashed]) {
&[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
@@ -572,7 +571,7 @@
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
- &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
+ &:is([soundplaying], [muted], [activemedia-blocked]),
&[crashed] {
display: revert;
}
@@ -586,7 +585,7 @@
--button-min-height-small: 24px;
--button-border-radius: var(--border-radius-small);
- #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
+ #tabbrowser-tabs:is([orient="horizontal"]) &:not([pinned]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
@@ -617,14 +616,14 @@
}