diff --git a/.prettierignore b/.prettierignore index 82e333ac..9ecc5ffd 100644 --- a/.prettierignore +++ b/.prettierignore @@ -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 diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 8e3de8d3..bd4e8aab 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -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) diff --git a/src/zen/tabs/zen-tabs.css b/src/zen/tabs/zen-tabs.css index 5ddb9c65..e8f15ccd 100644 --- a/src/zen/tabs/zen-tabs.css +++ b/src/zen/tabs/zen-tabs.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 + } +} \ No newline at end of file diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 5e1edd0e..3d115ea7 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -4,306 +4,342 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +/* ========================================================================== + Initial Setup & Layout Changes for Vertical Tabs + ========================================================================== */ + +/* Ensure tabs, toolbar, and titlebar stack vertically */ #tabbrowser-tabs, #TabsToolbar, #titlebar, #TabsToolbar-customization-target { flex-direction: column; - height: 100%; + height: 100%; /* Make sure they take up full height */ } +/* ========================================================================== + Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`) + ========================================================================== */ :root[zen-single-toolbar='true'] { + /* Define and apply a smaller toolbar height for single toolbar mode */ & #zen-appcontent-navbar-container, & #zen-sidebar-top-buttons { --zen-toolbar-height: 32px; height: var(--zen-toolbar-height); } + /* Specific styling for macOS when the three-dot menu is hidden */ @media (-moz-platform: macos) and (not -moz-pref('zen.view.mac.show-three-dot-menu')) { + /* Hide the PanelUI (hamburger) button when not customizing or open */ &:not([customizing]) #PanelUI-button:not([open]):not([panelopen]) { - position: absolute; + position: absolute; /* Remove from layout flow */ opacity: 0; - pointer-events: none; + pointer-events: none; /* Make it unclickable */ } } - & #zen-sidebar-top-buttons .toolbarbutton-1 { - & > .toolbarbutton-icon { - padding: 4px; - } + /* Adjust padding for top sidebar buttons */ + & #zen-sidebar-top-buttons .toolbarbutton-1 > .toolbarbutton-icon { + padding: 4px; } + /* Make the separator take full width */ & #zen-sidebar-top-buttons-separator { width: 100%; } } +/* ========================================================================== + Vertical Tabs Mode Specific Styles (`zen.tabs.vertical` pref) + ========================================================================== */ @media -moz-pref('zen.tabs.vertical') { :root:not([zen-window-buttons-reversed='true']) { + /* Align window controls to the right by default */ & .titlebar-buttonbox-container { margin-left: auto; width: fit-content; } + /* Specific adjustments for window controls when sidebar is on the right */ &:root[zen-right-side='true'] #zen-sidebar-top-buttons .titlebar-buttonbox-container { - /* Must have the #zen-sidebar-top-buttons so we target it only when it's on the sidebar */ - margin-right: calc(-1 * var(--zen-toolbox-padding)); - margin-top: -10px /*Make sure this stays synced with the top buttons' margin!*/; - height: calc(4px + var(--zen-toolbar-height)) !important; + /* Selector ensures this only applies when buttons are in the sidebar */ + margin-right: calc(-1 * var(--zen-toolbox-padding)); /* Pull slightly outside */ + margin-top: -10px /* Align vertically with top buttons */; + height: calc(4px + var(--zen-toolbar-height)) !important; /* Adjust height */ & .titlebar-button { - align-items: end; + align-items: end; /* Align button content to the bottom */ } } } + /* Ensure arrow scrollbox takes minimum necessary height */ #tabbrowser-arrowscrollbox { min-height: fit-content !important; } } +/* Alignreversed window controls to the left */ :root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container { margin-right: auto; width: fit-content; } +/* Center items within the TabsToolbar */ #TabsToolbar > * { justify-content: center; } +/* ========================================================================== + Toolbox Padding & Variables + ========================================================================== */ #browser { - --zen-min-toolbox-padding: .4rem; + /* Define base padding with platform-specific overrides */ + --zen-min-toolbox-padding: 0.4rem; @media (-moz-platform: macos) { - --zen-min-toolbox-padding: .52rem; + --zen-min-toolbox-padding: 0.52rem; } @media (-moz-platform: linux) { - --zen-min-toolbox-padding: .35rem; + --zen-min-toolbox-padding: 0.35rem; } + /* Actual padding used, ensuring it's at least min padding or based on element separation */ --zen-toolbox-padding: max(var(--zen-min-toolbox-padding), calc(var(--zen-element-separation) / 1.5)); } +/* ========================================================================== + Single Toolbar Mode - Further Layout Adjustments + ========================================================================== */ :root[zen-single-toolbar='true'] { + /* Make URL bar container take available width */ #urlbar-container { width: -moz-available !important; } + /* Center identity icons vertically */ #identity-icon-box, #identity-permission-box { margin-top: auto; margin-bottom: auto; - padding: 6px !important; + padding: 6px !important; /* Add padding */ } + /* Adjust height for floating URL bar */ & #urlbar-container[breakout='true']:has([zen-floating-urlbar='true']) { --urlbar-container-height: 36px !important; --urlbar-height: 38px !important; } & #nav-bar { + /* Add bottom margin */ margin-bottom: var(--zen-toolbox-padding); + /* Hide flexible spaces */ & toolbarspring { display: none; } } + /* Add vertical margins to the top sidebar buttons area */ & #zen-sidebar-top-buttons { margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0; } + /* Remove padding from PanelUI button */ & #PanelUI-menu-button { padding: 0 !important; } } +/* ========================================================================== + Pinned Tabs Separator + ========================================================================== */ .vertical-pinned-tabs-container-separator { background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)); - margin: 8px auto; + margin: 8px auto; /* Center horizontally */ border: none; height: 1px; max-height: 1px; - width: 98%; - transition: margin 0.2s ease-in-out, background 0.2s ease-in-out, max-height 0.2s ease-in-out; + width: 98%; /* Slightly less than full width */ + transition: + margin 0.2s ease-in-out, + background 0.2s ease-in-out, + max-height 0.2s ease-in-out; + /* Hide separator when specified by parent container attribute */ #vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & { max-height: 0; - margin: 0 auto; + margin: 0 auto; /* Collapse margins */ } } +/* ========================================================================== + Navigator Toolbox (Main Sidebar Container) Base Styles + ========================================================================== */ #navigator-toolbox { + /* Define theme variables, including platform specifics for native look */ --border-radius-medium: 10px; --tab-border-radius: 6px; - --zen-toolbox-min-width: 1px; + --zen-toolbox-min-width: 1px; /* Default minimum width (used when collapsed) */ @media (-moz-platform: windows) { - /* More native look */ --border-radius-medium: 8px; --tab-border-radius: 6px; } @media (-moz-platform: macos) { - /* More native look */ --border-radius-medium: 12px; --tab-border-radius: 10px; } + /* Define tab hover background color */ --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%); min-width: var(--zen-toolbox-min-width); - margin-top: 0 !important; /* Fix full screen mode */ - - border: none; - order: 0 !important; - - display: flex; + margin-top: 0 !important; /* Fix potential issues in full screen mode */ + border: none; /* Remove default borders */ + order: 0 !important; /* Default order (can be changed for right-side) */ + display: flex; /* Use flex layout */ } +/* Hide default titlebar spacers */ .titlebar-spacer[type='pre-tabs'], .titlebar-spacer[type='post-tabs'] { display: none; } -:root[zen-single-toolbar='true']:not([customizing]) { - #zen-appcontent-navbar-container { - display: flex; - -moz-window-dragging: drag; - min-height: var(--zen-element-separation); - height: var(--zen-element-separation); - - & #PersonalToolbar { - width: -moz-available; - } - - /* We enable this trick IF we follow any of theses conditions: - * - We are supposed to hide the window controls (e.g. left sidebar, windows like layouts) - * - This also involves linux's reverse GTK window controls, we'll need to handle that a bit differently - * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled - */ - &:has(#PersonalToolbar[collapsed='false']) { -%include vertical-tabs-topbar.inc.css - } - - &[should-hide='true'] { -%include vertical-tabs-topbar.inc.css - } - - :root[inDOMFullscreen='true'] & { - max-height: 0 !important; - min-height: unset !important; - opacity: 0 !important; - pointer-events: none !important; - } - } -} - +/* ========================================================================== + Tabs Toolbar Customization Target + ========================================================================== */ #TabsToolbar-customization-target { - position: relative; + position: relative; /* For pseudo-element positioning */ max-width: 100%; - gap: 0; + gap: 0; /* Remove default gap */ + + /* Add a separator line at the bottom */ &::after { content: ''; display: block; height: 1px; - margin: 0 auto; width: 80%; left: 50%; transform: translateX(-50%); position: absolute; - bottom: calc(-1 * var(--zen-toolbox-padding)); + bottom: calc(-1 * var(--zen-toolbox-padding)); /* Position below the target */ } + /* Remove top borders from direct children */ & > * { border-top-width: 0 !important; } } +/* Style the new tab button specifically */ #vertical-tabs-newtab-button { + /* Transparent background unless active */ &:hover, &:not(:is(:hover, :active)) .toolbarbutton-icon { background: transparent !important; } } +/* ========================================================================== + Tab Container (#tabbrowser-tabs) Base Styles + ========================================================================== */ #tabbrowser-tabs { margin-inline-start: 0 !important; padding-inline-start: 0 !important; - overflow-y: unset !important; /* DO NOT CHANGE THIS: Firefox renders badly workspace changes */ - overflow-x: clip; - overflow-clip-margin: var(--zen-toolbox-padding); + overflow-y: unset !important; /* Critical: Prevents rendering issues on workspace changes */ + overflow-x: clip; /* Clip horizontal overflow */ + overflow-clip-margin: var(--zen-toolbox-padding); /* Add margin to clipping area */ @media (-moz-platform: macos) { - font-size: 1.1rem; + font-size: 1.1rem; /* Slightly larger font on macOS */ } - --tab-inner-inline-margin: 0; + --tab-inner-inline-margin: 0; /* Reset default inner margin */ position: relative; - border-bottom: 0px solid transparent !important; + border-bottom: 0px solid transparent !important; /* Remove default bottom border */ + /* Define tab variables */ --tab-block-margin: 2px; --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12)); --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important; - grid-gap: 0 !important; + grid-gap: 0 !important; /* Reset grid gap */ + /* Hide default overflow indicators and the provided separator */ &[overflow]::after, - #vertical-tabs-newtab-button, - #vertical-pinned-tabs-container-separator { /* notice #vertical-pinned-tabs-container-separator is an ID */ - /* Hide separator they give us, eww */ + #vertical-tabs-newtab-button, /* Assuming this is a button *within* #tabbrowser-tabs, but it looks like it's outside */ + #vertical-pinned-tabs-container-separator { + /* Selector targets the specific separator ID */ display: none !important; } + /* ======================================================================== + Individual Tab Styles (.tabbrowser-tab within #tabbrowser-tabs) + ======================================================================== */ & .tabbrowser-tab { + /* Add smooth scaling transition */ &, & .tab-content > image { transition: scale 0.07s ease; } + /* Hide specific empty tabs (likely placeholders) */ &[zen-empty-tab] { display: none; } + /* Scale down tab slightly on active press (but not when dragging or clicking images) */ #tabbrowser-tabs:not([movingtab]) &:active:not(:has(.tab-content > image:active)) { - scale: var(--zen-active-tab-scale); + scale: var(--zen-active-tab-scale); /* Requires --zen-active-tab-scale to be defined elsewhere */ } + /* Scale down icon/image specifically on active press */ #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active { scale: 0.92; } + /* Fallback icon for broken/missing favicons */ & .tab-icon-image { &:not([src]), &:-moz-broken { + /* Use an empty SVG as placeholder */ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important; + /* Semi-transparent background based on primary color */ background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%); } } - max-width: unset; - padding: 0 !important; - - position: relative; + max-width: unset; /* Allow tabs to take full width */ + padding: 0 !important; /* Remove default padding */ + position: relative; /* For absolute positioning of children */ + /* Tab Background Styles */ & .tab-background { - overflow: hidden; + overflow: hidden; /* Hide overflowing content/pseudo-elements */ + /* Context line (usually for container tabs) styling */ & .tab-context-line { - margin: 0 0px !important; - width: 3px !important; + margin: 0 0px !important; /* Reset margin */ + width: 3px !important; /* Set specific width */ } } + /* Dim pending tabs if preference is enabled */ @media -moz-pref('zen.tabs.dim-pending') { &[pending='true'] .tab-icon-image { opacity: 0.5; } } - /* We have a tab inside a tab, this means, it's a glance tab */ + /* --- Glance Tab Styles (Nested .tabbrowser-tab) --- */ + /* Styles for a tab nested within another tab (representing a "glance"?) */ & .tabbrowser-tab { - pointer-events: none; - margin: 0 0 0 4px; + pointer-events: none; /* Disable interaction */ + margin: 0 0 0 4px; /* Add left margin */ + /* Reset/override variables for smaller size */ --toolbarbutton-inner-padding: 0; --border-radius-medium: 8px; width: 24px; @@ -311,22 +347,25 @@ --tab-min-height: 24px; --tab-min-width: 24px; + /* Style glance tab background */ & .tab-background { background: var(--zen-toolbar-element-bg) !important; margin-block: 0 !important; margin-inline: 0 !important; box-shadow: none !important; } + /* Adjust padding for content */ & .tab-content { padding: 0 5px; } - & label { display: none !important; } + /* Hide label and buttons */ + & label, & .tab-close-button, & .tab-reset-button, & .tab-reset-pin-button { display: none !important; } - + /* Style glance tab icon */ & .tab-icon-image { --toolbarbutton-inner-padding: 0 !important; width: 14px; @@ -334,18 +373,21 @@ } } - /* On essentials, glance tabs are floating */ + /* --- Essentials Glance Tab Specifics (Floating) --- */ + /* Additional styles for glance tabs in "essential" mode */ &[zen-essential='true'] .tabbrowser-tab { - position: absolute; + position: absolute; /* Position absolutely relative to parent tab */ top: 0px; right: 0px; + /* Define variables for size */ --tab-collapsed-width: 34px; --tab-min-height: 16px; width: var(--tab-collapsed-width) !important; - z-index: 1; - pointer-events: none; + z-index: 1; /* Ensure it's above parent tab content */ + pointer-events: none; /* Still non-interactive */ + + /* Specific background and border for floating effect */ & .tab-background { - /* Solid colors because we don't want to show the background */ background: light-dark(rgb(249, 249, 249), rgb(63, 63, 63)) !important; border: 2px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)); } @@ -353,110 +395,144 @@ } } +/* ========================================================================== + Sidebar Bottom Buttons Area + ========================================================================== */ #zen-sidebar-bottom-buttons { background: transparent; - gap: 5px; - align-items: center; - - padding-top: var(--zen-element-separation); - --toolbarbutton-inner-padding: 5px; + gap: 5px; /* Spacing between buttons */ + align-items: center; /* Center vertically */ + padding-top: var(--zen-element-separation); /* Add padding above */ + --toolbarbutton-inner-padding: 5px; /* Define inner padding for buttons */ + /* Remove padding from direct children (except workspaces button) */ & > toolbarbutton:not(#zen-workspaces-button) { padding: 0 !important; } } +/* Hide the default new tab button container */ #newtab-button-container { display: none !important; } +/* ========================================================================== + Tab Arrow Scrollbox Adjustments + ========================================================================== */ #tabbrowser-arrowscrollbox { + /* Remove gap within the scrollbox part */ &::part(scrollbox) { gap: 0px !important; } + /* Hide default overflow indicators */ &::part(overflow-start-indicator), &::part(overflow-end-indicator) { display: none !important; } } +/* ========================================================================== + Custom Tab Wrapper & Container Styles + ========================================================================== */ + +/* Wrapper for vertical tabs, enabling scrolling */ #zen-tabs-wrapper { min-height: fit-content; - overflow-y: auto; - height: 100%; - scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; + overflow-y: auto; /* Allow vertical scrolling */ + height: 100%; /* Take full available height */ + scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; /* Custom scrollbar */ - /* Only do this hack if we have workspaces enabled */ + /* Negative margin hack for workspace transitions (only if workspaces are enabled) */ :root[zen-workspace-id] & { margin-left: calc(-1 * var(--zen-toolbox-padding)); width: calc(100% + var(--zen-toolbox-padding) * 2); } } +/* Container for browser tabs within the sidebar */ #zen-browser-tabs-container { - overflow-x: clip !important; /* might break custom css with new design, so let's force it */ - position: relative; + overflow-x: clip !important; /* Force horizontal clipping */ + position: relative; /* Positioning context */ } +/* ========================================================================== + Pinned Tabs Container Specific Styles + ========================================================================== */ #vertical-pinned-tabs-container { - padding-inline-end: 0 !important; - display: flex !important; - flex-direction: column; + padding-inline-end: 0 !important; /* Remove end padding */ + display: flex !important; /* Use flex layout */ + flex-direction: column; /* Stack pinned tabs vertically */ min-height: fit-content !important; - overflow-x: clip; - overflow-y: visible; - max-height: unset !important; + overflow-x: clip; /* Clip horizontal overflow */ + overflow-y: visible; /* Allow vertical overflow (for menus etc.) */ + max-height: unset !important; /* Allow it to grow */ + /* Make non-selected, non-hovered pinned tab backgrounds transparent */ & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) { background: transparent; } + /* Center content within pinned tabs */ & .tabbrowser-tab .tab-content { display: flex; align-items: center; justify-content: center; } + /* Ensure glance tabs within pinned container fit their content */ .tabbrowser-tab[zen-glance-tab='true'] { width: fit-content !important; } } +/* Styling for the label shown when hovering the reset-pin button */ .tab-reset-pin-label { - pointer-events: none; - transition: opacity 0.1s ease-in-out, margin 0.1s ease-in-out, max-height 0.1s ease-in-out; - max-height: 0px; + pointer-events: none; /* Non-interactive */ + transition: + opacity 0.1s ease-in-out, + margin 0.1s ease-in-out, + max-height 0.1s ease-in-out; + max-height: 0px; /* Hidden by default */ opacity: 0; - transform: translateY(-5px); + transform: translateY(-5px); /* Slight offset */ font-size: x-small; margin: 0; } -/* Mark: toolbox as expanded */ +/* ========================================================================== + Mark: EXPANDED Sidebar Styles (`zen-sidebar-expanded='true'`) + ========================================================================== */ #navigator-toolbox[zen-sidebar-expanded='true'] { + /* Set width to fit content when expanded */ --zen-toolbox-min-width: fit-content; - --tab-icon-end-margin: 8.5px; + /* Define margin for tab icons */ + --tab-icon-end-margin: 8.5px; /* Used later? Not directly applied here */ padding: var(--zen-toolbox-padding); - padding-left: 0; - padding-top: 0; + padding-left: 0; /* Reset left padding (adjusted later based on side) */ + padding-top: 0; /* Reset top padding */ + /* Ensure Personal Toolbar has no left padding when expanded */ #PersonalToolbar:not([collapsed='true']) { padding-left: 0 !important; } + /* Set a minimum width for the titlebar area */ & #titlebar { min-width: 150px; } + /* Add margin to the new tab button area */ & #tabbrowser-arrowscrollbox-periphery { margin-inline: var(--tab-block-margin); } + /* Adjust nav-bar padding */ & #nav-bar { - padding-right: 0; + padding-right: 0; /* Reset right padding */ + /* Specific padding for URL bar input in single toolbar mode */ :root[zen-single-toolbar='true'] & { & #urlbar:not([breakout-extend='true']):not([pageproxystate='invalid']) .urlbar-input-container { padding-left: 8px; @@ -465,155 +541,170 @@ } } + /* Remove top margin from nav-bar */ & #nav-bar { margin-top: 0; } + /* Hide workspace indicator icon if it has no specific icon set */ & .zen-current-workspace-indicator-icon[no-icon='true'] { display: none; } + /* Hide workspace button icon if it has no specific icon set */ & #zen-workspaces-button { & .zen-workspace-sidebar-icon[no-icon='true'] { display: none; } } + /* Style pinned tabs container when it has visible tabs */ & #vertical-pinned-tabs-container:has(tab:not([hidden])) { position: relative; + /* Make pinned tabs take full width */ & .tabbrowser-tab { width: 100%; } } + /* Style bottom buttons area when expanded */ & #zen-sidebar-bottom-buttons { display: flex; - /* Make sure the icons take most of the space, smartly */ - flex-direction: row; - justify-content: space-between; - + flex-direction: row; /* Arrange buttons horizontally */ + justify-content: space-between; /* Distribute space */ width: 100%; position: relative; } + /* Set min height for tabs in the essentials wrapper */ & #zen-essentials-wrapper { --tab-min-height: 44px; } - /* Mark: Fix separator paddings */ + /* Adjust padding based on sidebar side */ &[zen-right-side='true'] { - padding-left: 0; + padding-left: 0; /* No padding on the inside edge (left) */ } - &:not([zen-right-side='true']) { - padding-right: 0; - padding-left: var(--zen-toolbox-padding); + padding-right: 0; /* No padding on the inside edge (right) */ + padding-left: var(--zen-toolbox-padding); /* Add padding on the outside edge (left) */ } + /* Style the customization target and its contents when expanded */ & #TabsToolbar-customization-target { + /* Make separator full width */ &::after { width: 100%; bottom: calc(-0.5 * var(--zen-toolbox-padding)); } + /* Style toolbar items (buttons, etc.) */ & > :is(toolbaritem, toolbarbutton):not(#search-container):not(#zen-workspaces-button), & #tabbrowser-arrowscrollbox-periphery > toolbarbutton { - width: 100% !important; - border-radius: var(--border-radius-medium) !important; - - padding-left: var(--toolbarbutton-inner-padding) !important; + /* Target new tab button too */ + width: 100% !important; /* Full width */ + border-radius: var(--border-radius-medium) !important; /* Apply border radius */ + padding-left: var(--toolbarbutton-inner-padding) !important; /* Apply padding */ padding-right: var(--toolbarbutton-inner-padding) !important; + /* Ensure label takes full width */ & label { display: flex; width: 100%; } + /* Standardize icon size */ & image { height: 16px; width: 16px; padding: 0 !important; } + /* Style for active/checked state */ &:is([open], [checked]) { background: var(--toolbarbutton-active-background) !important; - & image, label { background: transparent !important; - } + } /* Ensure children are transparent */ } + /* Style for hover state */ &:hover { background: var(--toolbarbutton-hover-background); - & image, label { background: transparent !important; - } + } /* Ensure children are transparent */ } } } + /* Style tabs container when expanded */ & #tabbrowser-tabs { - --tab-inline-padding: 8px; - & .tabbrowser-tab { + --tab-inline-padding: 8px; /* Define padding for tab content */ + & .tabbrowser-tab { + /* Show tab label */ & .tab-label-container { display: flex; } + /* Adjust tab background margin and width */ & .tab-background { margin-inline: var(--tab-block-margin); - width: -moz-available; + width: -moz-available; /* Take available width */ } + /* --- Pinned Tab Icon Repositioning & Reset Button --- */ + /* Reposition icon stack absolutely when tab is pinned (and not essential) */ &[zen-pinned-changed='true']:not([zen-essential]) > .tab-stack > .tab-content > .tab-icon-stack { position: absolute; top: 50%; transform: translateY(-50%); - /* 16px divided by 2, it's the icon size */ - left: 8px; + left: 8px; /* Position near the start */ margin: 0 !important; - pointer-events: none; + pointer-events: none; /* Icon stack itself is not interactive */ + /* Allow interaction with elements inside the stack (e.g., overlays) */ & > *:not(.tab-icon-image) { pointer-events: all; } } + /* Hide the reset-pin image by default */ &[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button image { opacity: 0; } + /* Show reset-pin interactions on hover */ &[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button:hover { + /* Show the helper label */ & ~ .tab-label-container .tab-reset-pin-label { max-height: 10px; opacity: 0.6; } - - & ~ .tab-label-container .tab-reset-pin-label { - max-height: 10px; - opacity: 0.6; - } - - + /* Fade out the original tab icon */ & ~ .tab-icon-stack .tab-icon-image { opacity: 0; } - + /* Show the reset-pin button image */ & image { opacity: 1; } } + /* --- End Pinned Tab --- */ + /* Show close button on hover or when selected */ &:is(:hover, [visuallyselected]) .tab-close-button { display: block; - --tab-inline-padding: 0; /* Avoid weird padding */ + /* Reset padding for close button positioning */ + --tab-inline-padding: 0; margin-inline-end: 0; } + /* Adjust margins for various tab icon states/overlays */ .tab-throbber, .tab-icon-pending, .tab-icon-image, @@ -626,118 +717,166 @@ } } +/* ========================================================================== + Mark: COLLAPSED Sidebar Styles (`:not([zen-sidebar-expanded='true'])`) + ========================================================================== */ + +/* Define fixed width and padding for collapsed state */ :root:not([zen-sidebar-expanded='true']) { --tab-min-width: 36px !important; --zen-toolbox-padding: 6px !important; --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2); } -/* Mark: collapsed sidebar */ #navigator-toolbox:not([zen-sidebar-expanded='true']) { + /* Force fixed width */ max-width: var(--zen-toolbox-max-width) !important; min-width: var(--zen-toolbox-max-width) !important; - padding-bottom: var(--zen-toolbox-padding); + padding-bottom: var(--zen-toolbox-padding); /* Apply bottom padding */ + + /* Hide text labels */ & .zen-current-workspace-indicator-name, & .toolbarbutton-text { display: none !important; } + + /* Center and dim workspace indicator */ & .zen-current-workspace-indicator { padding-left: 0; padding-right: 0; display: flex; align-items: center; justify-content: center; - opacity: .4; - align-items: center; + opacity: 0.4; } + + /* Center items in essentials container */ & .zen-essentials-container { justify-content: center; } + + /* Style new tab button when collapsed */ & #vertical-tabs-newtab-button { padding: 0 !important; background: transparent !important; } + + /* Ensure bottom buttons container fits content during customization */ :root[customizing] & #zen-sidebar-bottom-buttons { min-width: unset !important; } + + /* Center top buttons container */ & #zen-sidebar-top-buttons { justify-content: center; - max-height: unset !important; + max-height: unset !important; /* Allow natural height */ height: fit-content !important; } + + /* Adjust titlebar layout for collapsed state */ & #titlebar { display: grid; - grid-template-rows: auto 1fr; + grid-template-rows: auto 1fr; /* Allow content below button box */ } + + /* Style top buttons customization target */ & #zen-sidebar-top-buttons-customization-target { - flex-direction: column; + flex-direction: column; /* Stack items vertically */ padding-top: var(--zen-element-separation); } + + /* Style bottom buttons area when collapsed */ & #zen-sidebar-bottom-buttons { display: flex; - flex-direction: column; + flex-direction: column; /* Stack vertically */ padding-top: var(--zen-element-separation); - align-items: center; + align-items: center; /* Center horizontally */ } + + /* Style new tab button area */ & #tabbrowser-arrowscrollbox-periphery { & > toolbarbutton { - margin: 0 auto !important; - padding: 0 !important; + margin: 0 auto !important; /* Center the button */ + padding: 0 !important; /* Remove padding */ } + /* Adjust separator */ &::before { width: 90% !important; } } - & #EssentialsToolbar { - display: none !important; - } + + /* Hide optional elements */ + & #EssentialsToolbar, & #essentials-accordion-header { display: none !important; } + + /* Style pinned tabs container */ & #vertical-pinned-tabs-container:has(tab:not([hidden])) { position: relative; + /* Constrain pinned tab width */ & .tabbrowser-tab { max-width: var(--tab-min-width); } } + + /* Adjust customization target padding and separator */ & #TabsToolbar-customization-target { padding-bottom: var(--zen-toolbox-padding); &::after { - bottom: -1px !important; + bottom: -1px !important; /* Position separator correctly */ } } + + /* Style tabs container when collapsed */ & #tabbrowser-tabs { - margin-top: -2px; + margin-top: -2px; /* Minor visual adjustment */ + & .tabbrowser-tab { - margin: 0 auto; + margin: 0 auto; /* Center tabs horizontally */ + + /* Center background */ & .tab-background { margin-inline: auto !important; } + + /* Hide reset buttons */ & .tab-reset-button, & .tab-reset-pin-button { display: none !important; } + + /* Center tab content and hide label */ & .tab-content { display: flex; align-content: center; justify-content: center; - padding: 0 !important; + padding: 0 !important; /* Remove padding */ + & .tab-label-container { - display: none !important; + display: none !important; /* Hide label */ } + + /* Reset icon end margin */ & .tab-icon-image, & .tab-icon-pending { margin-inline-end: 0 !important; } - /* Hide glances */ + + /* Hide nested glance tabs completely */ & .tabbrowser-tab { display: none !important; } } } + + /* Optionally hide mute button overlay on non-selected tabs when collapsed */ @media -moz-pref('zen.view.sidebar-collapsed.hide-mute-button') { & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) { display: none !important; + + /* Complex selectors to ensure indicators still show correctly in specific density/hover states */ + /* This part seems overly complex and might need review/simplification if possible */ :is( :root[uidensity='compact'], #tabbrowser-tabs[secondarytext-unsupported], @@ -749,10 +888,12 @@ #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] { - opacity: 1 !important; + opacity: 1 !important; /* Ensure full opacity */ } } } + + /* Reset end margins for all icon types when collapsed */ & .tab-throbber, & .tab-icon-pending, & .tab-icon-image, @@ -761,46 +902,59 @@ margin-inline-end: 0 !important; } } + + /* Stack workspace button content vertically */ & #zen-workspaces-button { flex-direction: column; } } +/* Hide splitter when sidebar is collapsed */ :root:not([zen-sidebar-expanded='true']) #zen-sidebar-splitter { display: none !important; } -/* Mark: Separator styling */ +/* ========================================================================== + Mark: Sidebar Splitter Styling + ========================================================================== */ #zen-sidebar-splitter { - opacity: 0; - max-width: var(--zen-toolbox-padding) !important; + opacity: 0; /* Hidden by default, maybe shown on hover/drag? */ + max-width: var(--zen-toolbox-padding) !important; /* Width based on padding */ min-width: var(--zen-toolbox-padding) !important; height: 100%; transition: opacity 0.2s ease-in-out; - background: var(--zen-colors-border); - appearance: none; - position: relative !important; - order: 0; + background: var(--zen-colors-border); /* Use theme border color */ + appearance: none; /* Remove default styling */ + position: relative !important; /* Ensure positioning context */ + order: 0; /* Default order */ } -/* Mark: Move sidebar to the right */ +/* ========================================================================== + Mark: Move Sidebar to the Right (`zen-right-side='true'`) + ========================================================================== */ :root[zen-right-side='true'] { + /* Move the main toolbox (sidebar) to the right */ & #navigator-toolbox { - order: 10 !important; + order: 10 !important; /* High order value */ } + /* Move the splitter just before the toolbox */ & #zen-sidebar-splitter { order: 9 !important; } } -/* Mark: Override the default tab close button */ +/* ========================================================================== + Mark: Override Default Tab Close/Reset Button Behavior + ========================================================================== */ #tabbrowser-tabs { & .tabbrowser-tab { + /* Hide standard close button on pinned tabs (except pending) */ &[pinned]:not([pending='true']) .tab-close-button { display: none !important; } + /* Show custom reset (unpin) button on hover/selection for non-essential pinned tabs */ &[pinned]:not([pending='true']):not([zen-essential]) { &:hover .tab-reset-button, &[visuallyselected] .tab-reset-button { @@ -808,70 +962,80 @@ } } + /* Hide the reset-pin button if tab isn't marked as changed */ &:not([zen-pinned-changed='true']) .tab-reset-pin-button { display: none; } + /* Never show reset buttons on essential tabs */ &[zen-essential] .tab-reset-button, &[zen-essential] .tab-reset-pin-button { display: none; } + /* Hide reset button unless pinned and selected/hovered */ &:not([pinned][visuallyselected]) .tab-reset-button { display: none; } + /* Ensure selected tab background border is transparent */ &[selected] .tab-background { border-color: transparent; } } } -.tab-reset-button, +/* ========================================================================== + Custom Reset/Unpin Button Styles + ========================================================================== */ +.tab-reset-button, /* Standard unpin button */ .tab-reset-pin-button { - display: none; - -moz-context-properties: fill, fill-opacity; + /* Button shown when pinning state changes */ + display: none; /* Hidden by default, shown conditionally above */ + -moz-context-properties: fill, fill-opacity; /* Inherit fill properties */ border-radius: var(--tab-border-radius); color: inherit; fill: currentColor; - padding: var(--tab-close-button-padding); - width: 24px; + padding: var(--tab-close-button-padding); /* Use standard close button padding */ + width: 24px; /* Fixed size */ height: 24px; - outline: var(--toolbarbutton-outline); + outline: var(--toolbarbutton-outline); /* Use standard outline */ + /* Hover/active outline styles */ &:hover { outline-color: var(--toolbarbutton-hover-outline-color); } - &:hover:active { outline-color: var(--toolbarbutton-active-outline-color); } } +/* Specific styling for the alternative reset-pin button */ .tab-reset-pin-button { - display: flex; - position: relative; - height: calc(100% - var(--tab-block-margin) * 2); - margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin)); + display: flex; /* Use flex for alignment */ + position: relative; /* For pseudo-element positioning */ + height: calc(100% - var(--tab-block-margin) * 2); /* Adjust height based on margins */ + margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin)); /* Overlap slightly */ margin-right: 8px; - padding: 0 calc(var(--toolbarbutton-inner-padding) - 2px) 0 calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px); - border-radius: 0; - border-top-left-radius: var(--border-radius-medium); - width: unset; + padding: 0 calc(var(--toolbarbutton-inner-padding) - 2px) 0 + calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px); /* Custom padding */ + border-radius: 0; /* Remove general radius */ + border-top-left-radius: var(--border-radius-medium); /* Apply radius only to left corners */ + width: unset; /* Auto width */ border-bottom-left-radius: var(--border-radius-medium); align-items: center; justify-content: center; + /* Style the image inside (uses original tab icon) */ & > image { - list-style-image: var(--zen-original-tab-icon); - width: 100%; - height: 100%; - pointer-events: none; - width: 16px; + list-style-image: var(--zen-original-tab-icon); /* Expects variable set elsewhere */ + width: 16px; /* Fixed size */ height: 16px; - border-radius: 4px; + pointer-events: none; + border-radius: 4px; /* Slightly rounded */ } + /* Add a decorative vertical line */ &::after { content: ''; display: block; @@ -882,32 +1046,36 @@ right: 0; top: 50%; border-radius: 2px; - transform: rotate(15deg) translateY(-50%); + transform: rotate(15deg) translateY(-50%); /* Tilted line */ } + /* Hide the line on hover (reveals icon change) */ &:hover::after { opacity: 0; } } -.reset-icon, +/* Remove default appearance for custom buttons */ +.reset-icon, /* Assuming this is used within .tab-reset-button */ .tab-reset-pin-button { appearance: none; } +/* Background color changes on hover/active (for non-forced-colors mode) */ @media not (forced-colors) { .tab-reset-button:hover, .tab-reset-pin-button:hover { - background-color: color-mix(in srgb, currentColor 10%, transparent); + background-color: color-mix(in srgb, currentColor 10%, transparent); /* Slight tint */ } .tab-reset-button:hover:active, .tab-reset-pin-button:hover:active { - background-color: color-mix(in srgb, currentColor 20%, transparent); + background-color: color-mix(in srgb, currentColor 20%, transparent); /* Darker tint */ } } -.tab-reset-button> .button-icon, +/* Ensure icons within reset buttons have no margin */ +.tab-reset-button > .button-icon, .tab-reset-button > .button-box > .button-icon, .tab-reset-button > .toolbarbutton-icon, .tab-reset-pin-button > .button-icon, @@ -916,6 +1084,7 @@ margin: 0; } +/* Hide text labels within reset buttons */ .tab-reset-button > .button-box > .button-text, .tab-reset-button > .toolbarbutton-text, .tab-reset-pin-button > .button-box > .button-text, @@ -923,134 +1092,158 @@ display: none; } - -/* Customization mode */ - +/* ========================================================================== + Customization Mode Adjustments + ========================================================================== */ :root[customizing] #TabsToolbar > *, :root[customizing] #TabsToolbar-customization-target { - min-width: unset !important; + min-width: unset !important; /* Allow shrinking during customization */ } -/* Mark: Sidebar top buttons */ +/* ========================================================================== + Mark: Sidebar Top Buttons Area Styles + ========================================================================== */ #zen-sidebar-top-buttons { - order: -1; - - min-width: unset !important; + order: -1; /* Ensure it appears at the top */ + min-width: unset !important; /* Allow shrinking */ + /* Adjust inner padding based on sidebar state */ :root[zen-sidebar-expanded='true'] & { - --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; + --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important; /* Use theme variable */ } - :root[zen-single-toolbar='true'] & { - --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important; + --toolbarbutton-inner-padding: calc( + var(--zen-toolbar-button-inner-padding) - 2px + ) !important; /* Slightly less in single toolbar */ + /* Reorder buttons in single toolbar mode */ & #PanelUI-button { - order: -2; + order: -2; /* Hamburger first */ } - & #unified-extensions-button { - order: -1; + order: -1; /* Extensions next */ } } + /* Style the customization target within the top buttons area */ & #zen-sidebar-top-buttons-customization-target { - height: 100%; - align-items: center; + height: 100%; /* Full height */ + align-items: center; /* Center items vertically */ + /* Adjust start padding based on state and side */ :root:not([zen-sidebar-expanded='true']):not([zen-right-side='true']) { padding-inline-start: var(--zen-toolbox-padding); } - #nav-bar & { + /* If nested in nav-bar, use outer padding */ padding-inline-start: var(--toolbarbutton-outer-padding); } - :root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) { - padding-inline-end: var(--zen-toolbox-padding); + padding-inline-end: var(--zen-toolbox-padding); /* Add end padding for right sidebar */ } + /* Standardize height and padding for toolbar buttons (excluding titlebar buttons) */ & toolbarbutton:not(.titlebar-button) { - height: calc(2 * var(--toolbarbutton-inner-padding) + 16px); - padding: 0 var(--toolbarbutton-outer-padding) !important; + height: calc(2 * var(--toolbarbutton-inner-padding) + 16px); /* Calculate height based on padding + icon */ + padding: 0 var(--toolbarbutton-outer-padding) !important; /* Apply outer padding */ } + /* Hide flexible space when collapsed */ :root:not([zen-sidebar-expanded='true']) & toolbarspring { display: none; } } + /* Style specific action buttons (likely icon-only) */ & .zen-sidebar-action-button { - padding: 0 !important; - + padding: 0 !important; /* Remove padding */ & label { - display: none !important; + display: none !important; /* Hide label */ } } } +/* ========================================================================== + Vertical New Tab Button (Optional Feature) + ========================================================================== */ + +/* Hide the button wrapper by default */ #tabs-newtab-button { display: none; - opacity: 0.5; - -moz-user-focus: ignore !important; + opacity: 0.5; /* Dimmed by default */ + -moz-user-focus: ignore !important; /* Prevent focus */ } +/* Show and style the button if preference `zen.tabs.show-newtab-vertical` is enabled */ @media -moz-pref('zen.tabs.show-newtab-vertical') { #tabs-newtab-button { - display: flex !important; - transition: scale 0.1s ease; + display: flex !important; /* Show the button */ + transition: scale 0.1s ease; /* Add scale transition */ + + /* Style text within the button */ & .toolbarbutton-text { align-items: center; padding-top: 0; } + /* Scale down slightly on press */ &:active, &[open] { scale: 0.98; } + /* Style when placed "in urlbar" (likely a state/attribute) */ &[in-urlbar] { background: var(--tab-selected-bgcolor) !important; - opacity: 1 !important; - box-shadow: var(--tab-selected-shadow); + opacity: 1 !important; /* Full opacity */ + box-shadow: var(--tab-selected-shadow); /* Apply selected tab shadow */ } } + /* Style the container ("periphery") holding the new tab button */ #tabbrowser-arrowscrollbox-periphery { + /* Conditional border color for light mode */ @media not (prefers-color-scheme: dark) { - --zen-colors-border: var(--zen-colors-tertiary); + --zen-colors-border: var(--zen-colors-tertiary); /* Use tertiary color */ } + /* Move button to the top if preference is set */ @media -moz-pref('zen.view.show-newtab-button-top') { order: -1; } + /* Add a separator line above the button if preferences are set and there are tabs */ @media -moz-pref('zen.view.show-newtab-button-border-top') and (not -moz-pref('zen.view.show-newtab-button-top')) { - #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & { - margin-top: 15px; - position: relative; - &::before { - content: ''; - display: block; - height: 1px; - background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)); - width: 98%; - position: absolute; - top: -8px; - left: 50%; - transform: translateX(-50%); + #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & { + /* Only if tabs exist */ + margin-top: 15px; /* Space above */ + position: relative; /* For pseudo-element */ + &::before { + content: ''; + display: block; + height: 1px; + background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1)); /* Separator color */ + width: 98%; /* Near full width */ + position: absolute; + top: -8px; /* Position above the button */ + left: 50%; + transform: translateX(-50%); /* Center horizontally */ + } } } } - } } +/* ========================================================================== + Mark: Essentials Toolbar / Section Styles + ========================================================================== */ -/* Mark: Essentials Toolbar */ #zen-essentials-wrapper { margin-left: calc(-1 * var(--zen-toolbox-padding)); min-width: calc(100% + var(--zen-toolbox-padding) * 2); } +/* Container for essential items (often pinned/favorite tabs) */ .zen-essentials-container { padding-bottom: var(--zen-toolbox-padding); overflow: hidden; @@ -1058,30 +1251,39 @@ transition: max-height 0.3s ease-out; opacity: 1; grid-template-columns: repeat(auto-fit, minmax(49px, auto)); - overflow: hidden; + &[data-hack-type] { + &[data-hack-type='3'] { + --zen-hack-type: 3; + } + &[data-hack-type='4'] { + --zen-hack-type: 4; + } + grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--zen-hack-type) - 1%), auto)); + } scrollbar-width: thin; min-width: calc(100% + var(--zen-toolbox-padding) * 2); padding: 0 var(--zen-toolbox-padding); - display: grid; } +/* Style tabs within the Essentials container (and a related welcome sidebar) */ .zen-essentials-container > .tabbrowser-tab, #zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab { - --toolbarbutton-inner-padding: 0; - max-width: unset; - width: 100% !important; + --toolbarbutton-inner-padding: 0; /* Reset padding */ + max-width: unset; /* Allow stretching */ + width: 100% !important; /* Force full width of grid cell */ + /* Style background */ & .tab-background { - border-radius: var(--border-radius-medium) !important; - transition: background 0.1s ease-in-out; + border-radius: var(--border-radius-medium) !important; /* Use medium radius */ + transition: background 0.1s ease-in-out; /* Smooth background transition */ } --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2)); - &:not([visuallyselected], [multiselected="true"]) .tab-background { - background: var(--zen-toolbar-element-bg); - border: none; + &:not([visuallyselected], [multiselected='true']) .tab-background { + background: var(--zen-toolbar-element-bg); /* Use generic element background */ + border: none; /* No border */ } & .tab-content { @@ -1089,10 +1291,7 @@ justify-content: center; } - & .tab-label-container { - display: none !important; - } - + & .tab-label-container, & .tab-close-button { display: none !important; } @@ -1106,123 +1305,88 @@ background: var(--tab-selected-bgcolor); } + /* Optional blurred favicon background effect (if pref `zen.theme.essentials-favicon-bg` is enabled) */ @media -moz-pref('zen.theme.essentials-favicon-bg') { &[visuallyselected] > .tab-stack > .tab-background { + /* Create a blurred background pseudo-element using the tab icon */ &::after { - content: ""; - inset: -50%; - filter: blur(20px); + content: ''; + inset: -50%; /* Extend beyond bounds */ + filter: blur(20px); /* Apply blur */ position: absolute; background-size: contain; background-clip: padding-box; - background-image: var(--zen-tab-icon); - z-index: -1; + background-image: var(--zen-tab-icon); /* Use tab icon variable */ + z-index: -1; /* Place behind content */ background-position: center; } - background: transparent; - overflow: hidden; - position: relative; - --zen-essential-bg-margin: 2px; + background: transparent; /* Make main background transparent */ + overflow: hidden; /* Clip pseudo-elements */ + position: relative; /* Positioning context */ + --zen-essential-bg-margin: 2px; /* Margin for inner layer */ + /* Create an inner background layer for contrast */ &::before { background: light-dark(rgba(255, 255, 255, 0.85), rgba(68, 64, 64, 0.85)); - margin: var(--zen-essential-bg-margin); - border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin)); + margin: var(--zen-essential-bg-margin); /* Apply margin */ + border-radius: calc(var(--border-radius-medium) - var(--zen-essential-bg-margin)); /* Adjust radius */ position: absolute; inset: 0; - z-index: 0; - content: ""; - transition: background 0.1s ease-in-out; + z-index: 0; /* Position above ::after, below content */ + content: ''; + transition: background 0.1s ease-in-out; /* Smooth transition */ } } + /* Slightly fade inner background on hover */ &[visuallyselected]:hover .tab-background::before { - background: light-dark(rgba(255, 255, 255, 0.80), rgba(68, 64, 64, 0.75)); + background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.75)); } } } - -/* Very special occasions */ - -/* Mark: Right side windows controls with collapsed sidebar */ -:root:not([zen-compact-mode='true']) { - &[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) { - & #navigator-toolbox { - margin-top: var(--zen-toolbar-height) !important; - } - - & .titlebar-buttonbox-container { - margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important; - } - - & #zen-appcontent-wrapper { - overflow-x: visible; - } - - & #zen-sidebar-top-buttons-customization-target { - padding-top: 0; - } - - & #zen-appcontent-navbar-container { - padding-left: var(--zen-element-separation); - } - -%include vertical-tabs-topbuttons-fix.css - } - - &:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] { - & #navigator-toolbox { - margin-top: var(--zen-toolbar-height) !important; - } - - & .titlebar-buttonbox-container { - margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important; - } - - & #zen-appcontent-wrapper { - overflow-x: visible; - } - - & #zen-sidebar-top-buttons-customization-target { - padding-top: 0; - } - - & #zen-appcontent-navbar-container { - padding-right: var(--zen-element-separation); - } - -%include vertical-tabs-topbuttons-fix.css - } -} - -/* Vertical tabs reordering indicators */ +/* ========================================================================== + Vertical Tabs Reordering Drag Indicator + ========================================================================== */ #zen-drag-indicator { + /* Define indicator variables */ --zen-drag-indicator-height: 2px; - --zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%); - position: fixed; - z-index: 1000; - background: var(--zen-drag-indicator-bg); - pointer-events: none; - border-radius: 5px; + --zen-drag-indicator-bg: color-mix( + in srgb, + var(--zen-primary-color) 50%, + light-dark(rgba(0, 0, 0, 0.85), rgba(255, 255, 255, 0.95)) 50% + ); + position: fixed; /* Position relative to viewport */ + z-index: 1000; /* Ensure it's on top */ + background: var(--zen-drag-indicator-bg); + pointer-events: none; /* Non-interactive */ + border-radius: 5px; /* Rounded ends */ + + /* Add a circle at the start of the indicator */ &::before { - content: ""; + content: ''; position: absolute; - height: calc(2 * var(--zen-drag-indicator-height)); + height: calc(2 * var(--zen-drag-indicator-height)); /* Circle diameter */ width: calc(2 * var(--zen-drag-indicator-height)); - border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg); - border-radius: 50%; - background: transparent; + border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg); /* Thick border */ + border-radius: 50%; /* Make it a circle */ + background: transparent; /* Hollow circle */ } + /* Styles for horizontal drag indicator (e.g., between workspaces?) */ &[orientation='horizontal'] { + /* Position and size based on external CSS variables */ left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px); width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px); height: var(--zen-drag-indicator-height); - transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out; + transition: + top 0.1s ease-out, + left 0.1s ease-out, + width 0.1s ease-out; + /* Position the circle at the left end */ &::before { left: calc(-2 * var(--zen-drag-indicator-height)); top: 50%; @@ -1230,12 +1394,18 @@ } } + /* Styles for vertical drag indicator (between tabs) */ &[orientation='vertical'] { + /* Position and size based on external CSS variables */ top: calc(var(--indicator-top) + 2 * var(--zen-drag-indicator-height) + 4px); height: calc(var(--indicator-height) - 2 * var(--zen-drag-indicator-height) - 4px); width: var(--zen-drag-indicator-height); - transition: top 0.1s ease-out, left 0.1s ease-out, height 0.1s ease-out; + transition: + top 0.1s ease-out, + left 0.1s ease-out, + height 0.1s ease-out; + /* Position the circle at the top end */ &::before { top: calc(-2 * var(--zen-drag-indicator-height)); left: 50%; @@ -1244,7 +1414,10 @@ } } -/* Renaming tabs */ +/* ========================================================================== + Renaming Tabs Input Styles + ========================================================================== */ + .tab-label-container-editing { display: none !important; } @@ -1258,20 +1431,27 @@ padding: 0; } -/* Section: tab workspaces stylings */ -.zen-workspace-tabs-section { - position: absolute; - transform: translateX(-100%); +/* ========================================================================== + Section: Tab Workspaces Stylings + ========================================================================== */ +/* Style for individual workspace tab sections */ +.zen-workspace-tabs-section { + position: absolute; /* Position absolutely for transitions */ + transform: translateX(-100%); /* Initially off-screen to the left */ + + /* Apply flex layout unless it's the essentials container */ &:not(.zen-essentials-container) { display: flex; - min-width: calc(100% - var(--zen-toolbox-padding) * 2); + min-width: calc(100% - var(--zen-toolbox-padding) * 2); /* Set width based on padding */ } + /* Apply horizontal margins unless it's the indicator or essentials */ &:not(.zen-current-workspace-indicator):not(.zen-essentials-container) { margin: 0 var(--zen-toolbox-padding); } + /* Hide section visually and disable interaction when hidden attribute is present */ &[hidden='true'] { visibility: hidden; pointer-events: none; diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 676fd4b5..72bf7e2a 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -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); }