mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 00:10:00 +02:00
chore: Refactored vertical tabs css and improved essentials layout, b=(no-bug), c=tabs, workspaces
This commit is contained in:
parent
a35ef0e735
commit
0dac5522fe
5 changed files with 650 additions and 361 deletions
|
@ -22,7 +22,7 @@ docs/issue-metrics/*.md
|
|||
|
||||
# Some CSS files are preprocessed and prettier doesn't handle them well
|
||||
# We also dont want to format the CSS files that are generated by the build
|
||||
src/zen/tabs/zen-tabs/vertical-tabs.css
|
||||
src/zen/tabs/zen-tabs.css
|
||||
src/zen/compact-mode/zen-compact-mode.css
|
||||
src/zen/common/ZenEmojies.mjs
|
||||
|
||||
|
|
|
@ -51,8 +51,8 @@
|
|||
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
|
||||
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
|
||||
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
|
||||
content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
|
||||
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
|
||||
* content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
|
||||
content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
|
||||
|
||||
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
|
||||
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)
|
||||
|
|
|
@ -16,3 +16,100 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Single Toolbar Mode - Top Bar Handling (Includes External CSS)
|
||||
========================================================================== */
|
||||
:root[zen-single-toolbar='true']:not([customizing]) {
|
||||
#zen-appcontent-navbar-container {
|
||||
display: flex;
|
||||
-moz-window-dragging: drag; /* Allow dragging the window via this bar */
|
||||
min-height: var(--zen-element-separation);
|
||||
height: var(--zen-element-separation);
|
||||
|
||||
/* Ensure Personal Toolbar takes available width */
|
||||
& #PersonalToolbar {
|
||||
width: -moz-available;
|
||||
}
|
||||
|
||||
/* Include styles for the top bar under certain conditions:
|
||||
* - Bookmarks toolbar is visible OR
|
||||
* - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
|
||||
*/
|
||||
&:has(#PersonalToolbar[collapsed='false']) {
|
||||
%include zen-tabs/vertical-tabs-topbar.inc.css
|
||||
}
|
||||
&[should-hide='true'] {
|
||||
%include zen-tabs/vertical-tabs-topbar.inc.css
|
||||
}
|
||||
|
||||
/* Hide the top bar completely in fullscreen mode */
|
||||
:root[inDOMFullscreen='true'] & {
|
||||
max-height: 0 !important;
|
||||
min-height: unset !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Very Special Occasions - Complex Layout Fixes
|
||||
========================================================================== */
|
||||
|
||||
/* Exclude these complex fixes if in compact mode */
|
||||
:root:not([zen-compact-mode='true']) {
|
||||
|
||||
/* --- Fix: Right Sidebar + Collapsed + Standard Window Buttons --- */
|
||||
&[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
|
||||
/* Push toolbox down below the top toolbar */
|
||||
& #navigator-toolbox {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
/* Pull window buttons container leftwards over the collapsed sidebar */
|
||||
& .titlebar-buttonbox-container {
|
||||
margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
|
||||
}
|
||||
/* Allow overflow for the button box */
|
||||
& #zen-appcontent-wrapper {
|
||||
overflow-x: visible;
|
||||
}
|
||||
/* Reset padding for top buttons */
|
||||
& #zen-sidebar-top-buttons-customization-target {
|
||||
padding-top: 0;
|
||||
}
|
||||
/* Add padding to the left of the nav container */
|
||||
& #zen-appcontent-navbar-container {
|
||||
padding-left: var(--zen-element-separation);
|
||||
}
|
||||
/* Include common fixes for this top-button scenario */
|
||||
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
||||
}
|
||||
|
||||
/* --- Fix: Left Sidebar + Collapsed + Reversed Window Buttons --- */
|
||||
&:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
|
||||
/* Push toolbox down below the top toolbar */
|
||||
& #navigator-toolbox {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
/* Pull window buttons container rightwards over the collapsed sidebar */
|
||||
& .titlebar-buttonbox-container {
|
||||
margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
|
||||
}
|
||||
/* Allow overflow for the button box */
|
||||
& #zen-appcontent-wrapper {
|
||||
overflow-x: visible;
|
||||
}
|
||||
/* Reset padding for top buttons */
|
||||
& #zen-sidebar-top-buttons-customization-target {
|
||||
padding-top: 0;
|
||||
}
|
||||
/* Add padding to the right of the nav container */
|
||||
& #zen-appcontent-navbar-container {
|
||||
padding-right: var(--zen-element-separation);
|
||||
}
|
||||
/* Include common fixes for this top-button scenario */
|
||||
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load diff
|
@ -2386,6 +2386,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
|||
);
|
||||
const workspaceObject = this.getWorkspaceFromId(workspaceId);
|
||||
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
|
||||
const essentialNumChildren = essentialContainer.children.length;
|
||||
let essentialHackType = 0;
|
||||
if (essentialNumChildren % 3 === 0) {
|
||||
essentialHackType = 3;
|
||||
} else if (essentialNumChildren % 4 === 0 || essentialNumChildren % 4 === 3) {
|
||||
essentialHackType = 4;
|
||||
}
|
||||
if (essentialHackType > 0) {
|
||||
essentialContainer.setAttribute('data-hack-type', essentialHackType);
|
||||
} else {
|
||||
essentialContainer.removeAttribute('data-hack-type');
|
||||
}
|
||||
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
|
||||
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue