From 2fa2865f297d65dbf10c4b235399657dcf0a699d Mon Sep 17 00:00:00 2001 From: "Mr. M" Date: Fri, 18 Jul 2025 00:26:14 +0200 Subject: [PATCH] fix: Fixed TODO in color picker and fixed spacing issues on multiple toolbars, b=no-bug, c=glance, tabs, workspaces --- src/zen/glance/ZenGlanceManager.mjs | 2 +- src/zen/glance/zen-glance.css | 2 +- src/zen/tabs/zen-tabs/vertical-tabs.css | 43 ++++++++------------- src/zen/workspaces/ZenGradientGenerator.mjs | 2 +- src/zen/workspaces/zen-workspaces.css | 4 ++ 5 files changed, 23 insertions(+), 30 deletions(-) diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs index b88b03334..04bdd04ab 100644 --- a/src/zen/glance/ZenGlanceManager.mjs +++ b/src/zen/glance/ZenGlanceManager.mjs @@ -209,7 +209,7 @@ opacity: 1, }, { - duration: 0.5, + duration: 0.4, type: 'spring', bounce: 0.3, } diff --git a/src/zen/glance/zen-glance.css b/src/zen/glance/zen-glance.css index a671aa943..2ef292602 100644 --- a/src/zen/glance/zen-glance.css +++ b/src/zen/glance/zen-glance.css @@ -27,7 +27,7 @@ height: 32px; background: color-mix( in srgb, - light-dark(rgb(24, 24, 24), rgb(231, 231, 231)) 90%, + light-dark(rgb(24, 24, 24), rgb(231, 231, 231)) 96%, var(--zen-primary-color) ); transition: diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 2339eca04..e20386063 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -116,43 +116,42 @@ 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; /* Add padding */ + padding: 6px !important; } - /* 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 { - /* 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; } } +:root:not([zen-single-toolbar='true']) #tabbrowser-tabs { + /* Make up for the margin on tab's background */ + margin-top: -2px; +} + /* ========================================================================== Pinned Tabs Separator ========================================================================== */ @@ -807,29 +806,26 @@ & #titlebar { display: grid; - grid-template-rows: auto 1fr; /* Allow content below button box */ + grid-template-rows: auto 1fr; overflow: clip; } - /* Style top buttons customization target */ & #zen-sidebar-top-buttons-customization-target { - flex-direction: column; /* Stack items vertically */ + flex-direction: column; padding-top: var(--zen-element-separation); } - /* Style bottom buttons area when collapsed */ & #zen-sidebar-foot-buttons { display: flex; - flex-direction: column; /* Stack vertically */ + flex-direction: column; padding-top: var(--zen-element-separation); - align-items: center; /* Center horizontally */ + align-items: center; } - /* Style new tab button area */ & #tabbrowser-arrowscrollbox-periphery { & > toolbarbutton { - margin-left: auto !important; /* Center the button */ - margin-right: auto !important; /* Center the button */ + margin-left: auto !important; + margin-right: auto !important; & image { width: 100%; @@ -847,38 +843,31 @@ display: none !important; } - /* Adjust customization target padding and separator */ & #TabsToolbar-customization-target { padding-bottom: var(--zen-toolbox-padding); &::after { - bottom: -1px !important; /* Position separator correctly */ + bottom: -1px !important; } } - /* Style tabs container when collapsed */ & #tabbrowser-tabs { - margin-top: -2px; /* Minor visual adjustment */ - & .tabbrowser-tab { - margin: 0 auto; /* Center tabs horizontally */ + margin: 0 auto; - /* 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; /* Remove padding */ + padding: 0 !important; & .tab-label-container { display: none !important; /* Hide label */ @@ -1308,7 +1297,7 @@ position: absolute; - &:not(:empty) { + :root[zen-single-toolbar='true'] &:not(:empty) { padding-top: 6px; } diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 36a21e072..2606294b3 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -516,7 +516,7 @@ this.dots.push({ ID: id, element: dot, - position: { x: null, y: null }, // at some point possition should instead be stored as percentege just so that the size of the color picker does not matter. + position: { x, y }, type: color.type, lightness: color.lightness, }); diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index fdfe5138d..7060a32a7 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -74,6 +74,10 @@ & label { margin: 0 !important; } + + :root:not([zen-sidebar-expanded='true']) & { + min-width: 36px; + } } &[reorder-mode='true'] toolbarbutton:not([dragged='true']) {