From 37ea1584c94e35303eac437296a7d3e85780cbf2 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 20 Dec 2025 10:42:13 +0200 Subject: [PATCH 1/5] style/tab bar: visually merge the tab bar with the center panel --- apps/client/src/stylesheets/theme-next/shell.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index e3e92cd7d..d44e6e059 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1025,7 +1025,7 @@ body.layout-vertical.electron.platform-darwin .tab-row-container { } .tab-row-widget > * { - margin-top: calc((var(--tab-bar-height) - var(--tab-height)) / 2); + margin-top: calc(var(--tab-bar-height) - var(--tab-height)); } body.layout-horizontal .tab-row-container { @@ -1069,8 +1069,9 @@ body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-lay border-bottom-color: transparent; } -.tab-row-widget .note-tab .note-tab-wrapper { +:root div.tab-row-widget div.note-tab div.note-tab-wrapper { height: var(--tab-height) !important; + border-radius: 8px 8px 0 0; transition: background 75ms ease-in, box-shadow 75ms ease-in; From b7b7610f4d1ff9411432876b8146ad57283f9985 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 20 Dec 2025 11:05:14 +0200 Subject: [PATCH 2/5] style/classic toolbar: allow customizing the background color via a CSS variable --- apps/client/src/stylesheets/theme-next-dark.css | 3 +++ apps/client/src/stylesheets/theme-next-light.css | 3 +++ apps/client/src/stylesheets/theme-next/shell.css | 16 ++++++++++++++++ 3 files changed, 22 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index f4848739e..8e92f4900 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -170,6 +170,9 @@ --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; + --classic-toolbar-vert-layout-background-color: var(--main-background-color); + --classic-toolbar-horiz-layout-background-color: var(--main-background-color); + --center-pane-vert-layout-background-color-bgfx: #0c0c0c69; --center-pane-horiz-layout-background-color-bgfx: #1e1e1ec7; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 0f71df9c3..1bc72a3e2 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -162,6 +162,9 @@ --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; + --classic-toolbar-vert-layout-background-color: var(--main-background-color); + --classic-toolbar-horiz-layout-background-color: var(--main-background-color); + --center-pane-vert-layout-background-color-bgfx: #ffffff75; --center-pane-horiz-layout-background-color-bgfx: #ffffffd6; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index d44e6e059..9cf8b990f 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1222,6 +1222,22 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . top: 0; } +/* + * CLASSIC FORMATTING TOOLBAR + */ + +#rest-pane > .classic-toolbar-widget { + margin-bottom: 2px; +} + +body.layout-vertical #rest-pane > .classic-toolbar-widget { + background: var(--classic-toolbar-vert-layout-background-color); +} + +body.layout-horizontal #rest-pane > .classic-toolbar-widget { + background: var(--classic-toolbar-horiz-layout-background-color); +} + /* * CENTER PANE */ From 7af5c77bcb27e70e119309cd83be3ffc1820c461 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 20 Dec 2025 12:18:11 +0200 Subject: [PATCH 3/5] style/tab bar: tweak margin --- apps/client/src/stylesheets/theme-next/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index e3468421e..f77696dc0 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -50,7 +50,7 @@ --tab-bar-height: 50px; --tab-height: 36px; - --tab-first-item-horiz-offset: 1px; + --tab-first-item-horiz-offset: 0; --new-tab-button-size: 24px; --center-pane-border-radius: 10px; From 8cf6a6b9ae1ffaff6d61d41bb85eeb9ac52f5d81 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 20 Dec 2025 12:51:43 +0200 Subject: [PATCH 4/5] style: make the center panel border radius apply over the classic formatting toolbar if required --- apps/client/src/stylesheets/theme-next/shell.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 9cf8b990f..176081adf 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1228,6 +1228,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . #rest-pane > .classic-toolbar-widget { margin-bottom: 2px; + border-start-start-radius: var(--center-pane-border-radius); } body.layout-vertical #rest-pane > .classic-toolbar-widget { @@ -1238,13 +1239,18 @@ body.layout-horizontal #rest-pane > .classic-toolbar-widget { background: var(--classic-toolbar-horiz-layout-background-color); } +.classic-toolbar-widget:not(.hidden-ext) + #vertical-main-container { + /* Remove the center panel border radius when the toolbar is visible */ + --center-pane-border-radius: 0; +} + /* * CENTER PANE */ /* The first visible note split */ .vertical-layout #center-pane .note-split:not(.visible ~ .visible) { - border-radius: var(--center-pane-border-radius) 0 0 0; + border-start-start-radius: var(--center-pane-border-radius); } #center-pane .note-split { From 061b0966bb0c9f3a4d7856e852c545018a615357 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 20 Dec 2025 15:28:46 +0200 Subject: [PATCH 5/5] rollback: style/tab bar: visually merge the tab bar with the center panel --- apps/client/src/stylesheets/theme-next/shell.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 176081adf..f1e9c181b 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1025,11 +1025,11 @@ body.layout-vertical.electron.platform-darwin .tab-row-container { } .tab-row-widget > * { - margin-top: calc(var(--tab-bar-height) - var(--tab-height)); + margin-top: calc((var(--tab-bar-height) - var(--tab-height)) / 2); } body.layout-horizontal .tab-row-container { - padding-top: calc((var(--tab-bar-height) - var(--tab-height))); + padding-top: calc(var(--tab-bar-height) - var(--tab-height)); } /* Define extra drag areas for Electron windows */ @@ -1071,7 +1071,7 @@ body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-lay :root div.tab-row-widget div.note-tab div.note-tab-wrapper { height: var(--tab-height) !important; - border-radius: 8px 8px 0 0; + border-radius: 8px; transition: background 75ms ease-in, box-shadow 75ms ease-in;