diff --git a/src/styles/tokens.css b/src/styles/tokens.css index c3a3483d6..ea589dd4c 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -250,8 +250,10 @@ html { /* metrics (theme JSON at 100%) */ --h-titlebar: 40px; + --titlebar-tool-button: 30px; /* tool window stripe button, icons only */ --stripe-icon-button: 28px; + --stripe-outer-padding: 4px; --h-header: 40px; --h-tabbar: 38px; --h-tab: 28px; diff --git a/src/workbench/TitleBar.module.css b/src/workbench/TitleBar.module.css index 8d01c0819..2c4443521 100644 --- a/src/workbench/TitleBar.module.css +++ b/src/workbench/TitleBar.module.css @@ -13,6 +13,8 @@ /* Room for the native macOS traffic lights (Overlay title bar). */ .overlay { padding-left: max(82px, calc(82px / var(--titlebar-zoom, 1))); + /* Keep the gear on the icon-only right stripe's centre line, including compact mode. */ + padding-right: calc(var(--stripe-outer-padding) + (var(--stripe-icon-button) - var(--titlebar-tool-button)) / 2); } /* Welcome window: plain title on the frame colour with a hairline, like IntelliJ's welcome frame. */ .minimal { @@ -91,8 +93,8 @@ margin-left: 12px; } .tool { - width: 30px; - height: 30px; + width: var(--titlebar-tool-button); + height: var(--titlebar-tool-button); border-radius: var(--radius-popup); color: var(--fg-secondary); } diff --git a/src/workbench/toolwindows/ToolWindows.module.css b/src/workbench/toolwindows/ToolWindows.module.css index d493846b7..7d0f22c7d 100644 --- a/src/workbench/toolwindows/ToolWindows.module.css +++ b/src/workbench/toolwindows/ToolWindows.module.css @@ -161,7 +161,7 @@ /* --stripe-drag: the width under the pointer while the stripe edge is dragged. */ --stripe-button: var(--stripe-drag, var(--stripe-icon-button)); /* Outer padding: narrower than the island gap so the side frame stays close to the status bar's height, as in IDEA. */ - --stripe-pad: 4px; + --stripe-pad: var(--stripe-outer-padding); width: calc(var(--stripe-button) + var(--stripe-pad) + var(--island-gap)); container-type: inline-size; flex: none; @@ -182,7 +182,6 @@ } .stripeWithNames { --stripe-button: var(--stripe-drag, var(--stripe-button-w, 56px)); - --stripe-pad: 4px; gap: 4px; } .stripeSideLeft {