From b4fe46eba36246fa587cf6527191bbd93dd0f942 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 22 Oct 2025 19:41:49 +0300 Subject: [PATCH 001/106] style: tweak the appearance of option cards --- apps/client/src/stylesheets/theme-next-dark.css | 4 ++-- apps/client/src/stylesheets/theme-next-light.css | 6 +++--- apps/client/src/stylesheets/theme-next/pages.css | 16 +++++++++++----- .../src/widgets/type_widgets/options/etapi.tsx | 2 +- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 5b012996e..0afc80576 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -227,8 +227,8 @@ --card-background-color: #ffffff12; --card-background-hover-color: #3c3c3c; --card-background-press-color: #464646; - --card-border-color: #222222; - --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); + --card-border-color: transparent; + --card-box-shadow: none; --calendar-color: var(--menu-text-color); --calendar-weekday-labels-color: var(--muted-text-color); diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 30f4e1c3a..4711a2a1b 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -223,12 +223,12 @@ --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2); - --card-background-color: var(--accented-background-color); + --card-background-color: #0000000d; --card-background-hover-color: #f9f9f9; --card-background-press-color: #efefef; - --card-border-color: #eaeaea; + --card-border-color: transparent; --card-shadow-color: rgba(0, 0, 0, 0.1); - --card-box-shadow: 0 0 12px var(--card-shadow-color); + --card-box-shadow: none; --calendar-color: var(--menu-text-color); --calendar-weekday-labels-color: var(--muted-text-color); diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css index d0c092321..9e6c98651 100644 --- a/apps/client/src/stylesheets/theme-next/pages.css +++ b/apps/client/src/stylesheets/theme-next/pages.css @@ -148,7 +148,7 @@ div.note-detail-empty { --options-card-min-width: 500px; --options-card-max-width: 900px; --options-card-padding: 17px; - --options-title-font-size: 1rem; + --options-title-font-size: .75rem; --options-title-offset: 13px; } /* Create a gap at the top of the option pages */ @@ -173,8 +173,7 @@ div.note-detail-empty { } .options-section:not(.tn-no-card) { - margin: auto; - border-radius: 12px; + border-radius: 8px; border: 1px solid var(--card-border-color) !important; box-shadow: var(--card-box-shadow); background: var(--card-background-color); @@ -182,7 +181,7 @@ div.note-detail-empty { margin-bottom: calc(var(--options-title-offset) + 26px) !important; } -body.desktop .option-section:not(.tn-no-card) { +body.desktop .options-section:not(.tn-no-card) { min-width: var(--options-card-min-width); max-width: var(--options-card-max-width); } @@ -193,9 +192,16 @@ body.desktop .option-section:not(.tn-no-card) { padding-bottom: var(--default-padding); } +.options-section:not(.tn-no-card) h4, +.options-section:not(.tn-no-card) h5 { + text-transform: uppercase; + letter-spacing: .4pt; +} + + .options-section:not(.tn-no-card) h4 { font-size: var(--options-title-font-size); - font-weight: bold; + font-weight: 600; color: var(--launcher-pane-text-color); margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important; margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important; diff --git a/apps/client/src/widgets/type_widgets/options/etapi.tsx b/apps/client/src/widgets/type_widgets/options/etapi.tsx index 3ee7c7e19..eff8283df 100644 --- a/apps/client/src/widgets/type_widgets/options/etapi.tsx +++ b/apps/client/src/widgets/type_widgets/options/etapi.tsx @@ -101,7 +101,7 @@ function TokenList({ tokens }: { tokens: EtapiToken[] }) { return ( tokens.length ? ( -
+
From 4344687303424b8a2883040943e00160905b2532 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 22 Oct 2025 19:58:42 +0300 Subject: [PATCH 002/106] style: tweak the appearance of the promoted attributes cards --- apps/client/src/stylesheets/theme-next-dark.css | 6 +++--- apps/client/src/stylesheets/theme-next-light.css | 4 ++-- apps/client/src/stylesheets/theme-next/shell.css | 3 +-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 0afc80576..ca0d818e6 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -192,9 +192,9 @@ --badge-background-color: #ffffff1a; --badge-text-color: var(--muted-text-color); - --promoted-attribute-card-background-color: var(--card-background-color); - --promoted-attribute-card-shadow-color: #000000b3; - + --promoted-attribute-card-background-color: #ffffff21; + --promoted-attribute-card-shadow: none; + --floating-button-shadow-color: #00000080; --floating-button-background-color: #494949d2; --floating-button-color: var(--button-text-color); diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 4711a2a1b..631d443b1 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -185,8 +185,8 @@ --badge-background-color: #00000011; --badge-text-color: var(--muted-text-color); - --promoted-attribute-card-background-color: var(--card-background-color); - --promoted-attribute-card-shadow-color: #00000033; + --promoted-attribute-card-background-color: #00000014; + --promoted-attribute-card-shadow: none; --floating-button-shadow-color: #00000042; --floating-button-background-color: #eaeaeacc; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index b6bd38789..8a382af89 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1328,8 +1328,7 @@ div.promoted-attribute-cell { --pa-card-padding-inline-end: 2px; --input-background-color: transparent; - box-shadow: 1px 1px 2px var(--promoted-attribute-card-shadow-color); - + box-shadow: var(--promoted-attribute-card-shadow); display: inline-flex; margin: 0; border-radius: 8px; From 2470b0b334b029a3023ff95f39e53d67a63ebfa1 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 22 Oct 2025 20:06:06 +0300 Subject: [PATCH 003/106] style: tweak the appearance of the promoted attributes cards --- apps/client/src/stylesheets/theme-next/ribbon.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css index 192cfa6f4..dc1465d17 100644 --- a/apps/client/src/stylesheets/theme-next/ribbon.css +++ b/apps/client/src/stylesheets/theme-next/ribbon.css @@ -34,6 +34,7 @@ div.promoted-attributes-container { margin-top: 8px; margin-bottom: 8px; + margin-inline-start: 12px; } /* From a01fb3959957d707cec37378c1c5649668dfd8dd Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 10:16:18 +0300 Subject: [PATCH 004/106] client/quick edit dialog: make available the CSS variables with the custom color of the edited note --- .../src/widgets/dialogs/popup_editor.ts | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts index 1deb584d9..9b4e70c32 100644 --- a/apps/client/src/widgets/dialogs/popup_editor.ts +++ b/apps/client/src/widgets/dialogs/popup_editor.ts @@ -57,17 +57,19 @@ const TPL = /*html*/`\ } -
-
-
-
- +
+
+
+
+
+ +
+
- -
-
- +
+ +
@@ -79,6 +81,7 @@ export default class PopupEditorDialog extends Container { private noteContext: NoteContext; private $modalHeader!: JQuery; private $modalBody!: JQuery; + private $wrapper!: JQuery; constructor() { super(); @@ -93,6 +96,7 @@ export default class PopupEditorDialog extends Container { const $newWidget = $(TPL); this.$modalHeader = $newWidget.find(".modal-title"); this.$modalBody = $newWidget.find(".modal-body"); + this.$wrapper = $newWidget.find(".quick-edit-dialog-wrapper"); const children = this.$widget.children(); this.$modalHeader.append(children[0]); @@ -112,6 +116,15 @@ export default class PopupEditorDialog extends Container { } }); + const colorClass = this.noteContext.note?.getColorClass(); + const wrapperElement = this.$wrapper.get(0)!; + + if (colorClass) { + wrapperElement.className = "quick-edit-dialog-wrapper tinted-dialog " + colorClass; + } else { + wrapperElement.className = "quick-edit-dialog-wrapper"; + } + const activeEl = document.activeElement; if (activeEl && "blur" in activeEl) { (activeEl as HTMLElement).blur(); From b58f37cd4af1adfe38cc9621fce688c6760a47d7 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 10:18:52 +0300 Subject: [PATCH 005/106] style/quick edit dialog: tint the dialog background, border and promoted attributes card according to the note's custom color --- apps/client/src/stylesheets/theme-next/dialogs.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css index ed617991c..1a36c4a31 100644 --- a/apps/client/src/stylesheets/theme-next/dialogs.css +++ b/apps/client/src/stylesheets/theme-next/dialogs.css @@ -421,4 +421,12 @@ div.tn-tool-dialog { .note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx { margin-inline-end: .25em; +} + +/* QUICK EDIT DIALOG */ + +.quick-edit-dialog-wrapper.tinted-dialog { + --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%); + --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); + --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); } \ No newline at end of file From 535b960b767ec08dcfcfcc8415e99fa238637a99 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 10:44:23 +0300 Subject: [PATCH 006/106] style/quick edit dialog: ignore monochromatic custom colors --- apps/client/src/widgets/dialogs/popup_editor.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts index 9b4e70c32..c1417d906 100644 --- a/apps/client/src/widgets/dialogs/popup_editor.ts +++ b/apps/client/src/widgets/dialogs/popup_editor.ts @@ -120,11 +120,17 @@ export default class PopupEditorDialog extends Container { const wrapperElement = this.$wrapper.get(0)!; if (colorClass) { - wrapperElement.className = "quick-edit-dialog-wrapper tinted-dialog " + colorClass; + wrapperElement.className = "quick-edit-dialog-wrapper " + colorClass; } else { wrapperElement.className = "quick-edit-dialog-wrapper"; } + const customHue = getComputedStyle(wrapperElement).getPropertyValue("--custom-color-hue"); + if (customHue) { + /* Apply the tinted-dialog class only if the custom color CSS class specifies a hue */ + wrapperElement.classList.add("tinted-dialog"); + } + const activeEl = document.activeElement; if (activeEl && "blur" in activeEl) { (activeEl as HTMLElement).blur(); From b4dd40e1284c711f136f8f5fb042a158b5591317 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 10:48:04 +0300 Subject: [PATCH 007/106] style/quick edit dialog: refactor --- apps/client/src/stylesheets/theme-next/dialogs.css | 2 +- apps/client/src/widgets/dialogs/popup_editor.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css index 1a36c4a31..e7a5405e8 100644 --- a/apps/client/src/stylesheets/theme-next/dialogs.css +++ b/apps/client/src/stylesheets/theme-next/dialogs.css @@ -425,7 +425,7 @@ div.tn-tool-dialog { /* QUICK EDIT DIALOG */ -.quick-edit-dialog-wrapper.tinted-dialog { +.tinted-quick-edit-dialog { --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%); --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts index c1417d906..a1697c5f5 100644 --- a/apps/client/src/widgets/dialogs/popup_editor.ts +++ b/apps/client/src/widgets/dialogs/popup_editor.ts @@ -128,7 +128,7 @@ export default class PopupEditorDialog extends Container { const customHue = getComputedStyle(wrapperElement).getPropertyValue("--custom-color-hue"); if (customHue) { /* Apply the tinted-dialog class only if the custom color CSS class specifies a hue */ - wrapperElement.classList.add("tinted-dialog"); + wrapperElement.classList.add("tinted-quick-edit-dialog"); } const activeEl = document.activeElement; From 8c165c040153632be7aeffaaa5db77b309da629c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 10:57:01 +0300 Subject: [PATCH 008/106] style/quick edit dialog: add support for the dark color scheme --- apps/client/src/stylesheets/theme-next-dark.css | 6 ++++++ apps/client/src/stylesheets/theme-next-light.css | 6 ++++++ apps/client/src/stylesheets/theme-next/dialogs.css | 8 -------- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index c9ac61508..d3bf6bd5a 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -294,4 +294,10 @@ body ::-webkit-calendar-picker-indicator { body .todo-list input[type="checkbox"]:not(:checked):before { border-color: var(--muted-text-color) !important; +} + +.tinted-quick-edit-dialog { + --modal-background-color: hsl(var(--custom-color-hue), 30.3%, 17.5%); + --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); + --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 23.9%, 32%); } \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 631d443b1..21c527993 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -270,4 +270,10 @@ * The --custom-color-hue variable contains the hue of the user-selected note color. * This value is unset for gray tones. */ --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1); +} + +.tinted-quick-edit-dialog { + --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%); + --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); + --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); } \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css index e7a5405e8..ed617991c 100644 --- a/apps/client/src/stylesheets/theme-next/dialogs.css +++ b/apps/client/src/stylesheets/theme-next/dialogs.css @@ -421,12 +421,4 @@ div.tn-tool-dialog { .note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx { margin-inline-end: .25em; -} - -/* QUICK EDIT DIALOG */ - -.tinted-quick-edit-dialog { - --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%); - --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); - --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); } \ No newline at end of file From 5141f0a0d5433a4864dd68bde4cf4142bbc97520 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 19:43:06 +0300 Subject: [PATCH 009/106] style/quick edit dialog: tweak the colors for the dark color scheme --- apps/client/src/stylesheets/theme-next-dark.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index d3bf6bd5a..4bef80040 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -297,7 +297,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before { } .tinted-quick-edit-dialog { - --modal-background-color: hsl(var(--custom-color-hue), 30.3%, 17.5%); - --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); - --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 23.9%, 32%); + --modal-background-color: hsl(var(--custom-color-hue), 19.2%, 10.2%); + --modal-border-color: hsl(var(--custom-color-hue), 17.6%, 25.7%); + --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 21.1%, 27.8%); } \ No newline at end of file From ddafda5f4e26d2edd55e3a1ae40c5279423be824 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 20:01:29 +0300 Subject: [PATCH 010/106] style/quick edit dialog: tweak the colors for the dark color scheme --- apps/client/src/stylesheets/theme-next-dark.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 4bef80040..73b929170 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -297,7 +297,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before { } .tinted-quick-edit-dialog { - --modal-background-color: hsl(var(--custom-color-hue), 19.2%, 10.2%); - --modal-border-color: hsl(var(--custom-color-hue), 17.6%, 25.7%); - --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 21.1%, 27.8%); + --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%); + --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%); + --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%); } \ No newline at end of file From ca3964f8b7233e01efbc97f50e8cb5457b99dc9e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 20:18:52 +0300 Subject: [PATCH 011/106] style/floating buttons: tweak position --- apps/client/src/widgets/FloatingButtons.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css index 88257cd67..b61df46da 100644 --- a/apps/client/src/widgets/FloatingButtons.css +++ b/apps/client/src/widgets/FloatingButtons.css @@ -6,7 +6,7 @@ .floating-buttons-children, .show-floating-buttons { position: absolute; - top: var(--floating-buttons-vert-offset, 10px); + top: var(--floating-buttons-vert-offset, 14px); inset-inline-end: var(--floating-buttons-horiz-offset, 10px); display: flex; flex-direction: row; From f42e870de1662a0e2753e6c665769c7bb0d06346 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 23 Oct 2025 20:28:36 +0300 Subject: [PATCH 012/106] style/dropdowns: increase the radius of the backdrop blur --- apps/client/src/stylesheets/theme-next/shell.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 8a382af89..5e375bbea 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -8,7 +8,7 @@ } :root { - --dropdown-backdrop-filter: blur(10px) saturate(6); + --dropdown-backdrop-filter: blur(20px) saturate(6); --dropdown-border-radius: 10px; } From 74a805056baf833fdb5278785303ce9e0af40454 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 24 Oct 2025 01:03:28 +0300 Subject: [PATCH 013/106] style/settings: use Mica for settings pages --- 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 | 14 +++++++++++++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 73b929170..2f5ecfa19 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -166,6 +166,9 @@ --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; + --center-pane-vert-layout-background-color-bgfx: #0c0c0c69; + --center-pane-horiz-layout-background-color-bgfx: #1e1e1ec7; + --right-pane-heading-color: gray; --root-background: var(--left-pane-background-color); diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 21c527993..121ee0dec 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -159,6 +159,9 @@ --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; + --center-pane-vert-layout-background-color-bgfx: #ffffff75; + --center-pane-horiz-layout-background-color-bgfx: #ffffffd6; + --right-pane-heading-color: gray; --root-background: var(--left-pane-background-color); diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 5e375bbea..4e3ef494b 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -43,13 +43,19 @@ body.background-effects.platform-win32 { --tab-background-color: var(--window-background-color-bgfx); --new-tab-button-background: var(--window-background-color-bgfx); --active-tab-background-color: var(--launcher-pane-horiz-background-color); + --root-background: transparent; } body.background-effects.platform-win32.layout-vertical { --left-pane-background-color: var(--window-background-color-bgfx); + --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx); --background-material: mica; } +body.background-effects.platform-win32.layout-horizontal { + --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx); +} + body.background-effects.platform-win32, body.background-effects.platform-win32 #root-widget { background: var(--window-background-color-bgfx) !important; @@ -59,6 +65,12 @@ body.background-effects.platform-win32.layout-horizontal #horizontal-main-contai body.background-effects.platform-win32.layout-vertical #vertical-main-container { background-color: var(--root-background); } + +/* TODO: optimize */ +body.background-effects.platform-win32 #center-pane:has(.type-contentWidget.visible .note-detail-content-widget-content.options) { + /* Settings page */ + --center-pane-background-color: var(--center-pane-background-color-bgfx); +} /* #endregion */ /* Matches when the left pane is collapsed */ @@ -1172,7 +1184,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . */ #center-pane { - background: var(--main-background-color); + background: var(--center-pane-background-color, var(--main-background-color)); } .vertical-layout #center-pane { From 1568908982ecc2def192a83743f1e805c54deed2 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 25 Oct 2025 11:12:00 +0300 Subject: [PATCH 014/106] style/center pane: allow distinct background colors for note splits --- apps/client/src/stylesheets/theme-next/shell.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 4e3ef494b..f8fda4b08 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -67,9 +67,9 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container } /* TODO: optimize */ -body.background-effects.platform-win32 #center-pane:has(.type-contentWidget.visible .note-detail-content-widget-content.options) { +body.background-effects.platform-win32 #center-pane .note-split.type-contentWidget.visible:has(.note-detail-content-widget-content.options) { /* Settings page */ - --center-pane-background-color: var(--center-pane-background-color-bgfx); + --note-split-background-color: var(--center-pane-background-color-bgfx); } /* #endregion */ @@ -1183,21 +1183,19 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . * CENTER PANE */ -#center-pane { - background: var(--center-pane-background-color, var(--main-background-color)); -} - -.vertical-layout #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; } -.note-split { +#center-pane .note-split { padding-top: 2px; + background-color: var(--note-split-background-color, var(--main-background-color)); animation: note-entrance 100ms linear; /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */ } -.split-note-container-widget > .gutter { +#center-pane .split-note-container-widget > .gutter { background: var(--root-background) !important; transition: background 150ms ease-out; } From 638cb4281e758cb729238c66ff4280a83715487d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 25 Oct 2025 11:28:26 +0300 Subject: [PATCH 015/106] style/center pane: optimize the identification of options pages --- apps/client/src/stylesheets/theme-next/shell.css | 6 +++--- apps/client/src/widgets/note_wrapper.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index f8fda4b08..2864e6d6b 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -66,11 +66,11 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container background-color: var(--root-background); } -/* TODO: optimize */ -body.background-effects.platform-win32 #center-pane .note-split.type-contentWidget.visible:has(.note-detail-content-widget-content.options) { - /* Settings page */ +/* Settings page */ +body.background-effects.platform-win32 #center-pane .note-split.options { --note-split-background-color: var(--center-pane-background-color-bgfx); } + /* #endregion */ /* Matches when the left pane is collapsed */ diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts index 01a1f7c87..559f9ece9 100644 --- a/apps/client/src/widgets/note_wrapper.ts +++ b/apps/client/src/widgets/note_wrapper.ts @@ -61,7 +61,7 @@ export default class NoteWrapperWidget extends FlexContainer { this.$widget.addClass(utils.getNoteTypeClass(note.type)); this.$widget.addClass(utils.getMimeTypeClass(note.mime)); - + this.$widget.toggleClass("options", note.isOptions()); this.$widget.toggleClass("protected", note.isProtected); const noteLanguage = note?.getLabelValue("language"); From 38a1cd0d3545c04279a658299819241bef7d1854 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 28 Oct 2025 23:55:51 +0200 Subject: [PATCH 016/106] style: tweak gutters --- apps/client/src/stylesheets/theme-next/shell.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 2864e6d6b..12ac3a649 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1195,10 +1195,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */ } -#center-pane .split-note-container-widget > .gutter { - background: var(--root-background) !important; - transition: background 150ms ease-out; -} + /* * Ribbon & note header From 98b8e97fd9ad8ca46a69ee3c5b0754aab7e34097 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 00:20:50 +0200 Subject: [PATCH 017/106] style/right panel: add translucent background when background effects are active --- apps/client/src/stylesheets/theme-next-dark.css | 1 + apps/client/src/stylesheets/theme-next-light.css | 1 + apps/client/src/stylesheets/theme-next/shell.css | 5 ++--- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 2f5ecfa19..12878cf67 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -211,6 +211,7 @@ --floating-button-hide-button-background: #00000029; --floating-button-hide-button-color: #ffffff63; + --right-pane-background-color: var(--main-background-color); --right-pane-item-hover-background: #ffffff26; --right-pane-item-hover-color: white; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 121ee0dec..c7c03b664 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -210,6 +210,7 @@ --new-tab-button-hover-background: white; --new-tab-button-hover-color: black; + --right-pane-background-color: var(--main-background-color); --right-pane-item-hover-background: #ececec; --right-pane-item-hover-color: inherit; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 12ac3a649..b4cc36b48 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -44,6 +44,7 @@ body.background-effects.platform-win32 { --new-tab-button-background: var(--window-background-color-bgfx); --active-tab-background-color: var(--launcher-pane-horiz-background-color); --root-background: transparent; + --right-pane-background-color: var(--center-pane-vert-layout-background-color-bgfx); } body.background-effects.platform-win32.layout-vertical { @@ -1195,8 +1196,6 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */ } - - /* * Ribbon & note header */ @@ -1722,7 +1721,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span { */ #right-pane { - background: var(--main-background-color); + background: var(--right-pane-background-color); } #right-pane div.card-header { From 4fe39445857f5cbc8bc022afbf64e41b035dd10d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 00:34:20 +0200 Subject: [PATCH 018/106] style/right panel: use own background color when background effects are active --- apps/client/src/stylesheets/theme-next-dark.css | 1 + apps/client/src/stylesheets/theme-next-light.css | 1 + apps/client/src/stylesheets/theme-next/shell.css | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 12878cf67..a43cc8a92 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -212,6 +212,7 @@ --floating-button-hide-button-color: #ffffff63; --right-pane-background-color: var(--main-background-color); + --right-pane-background-color-bgfx: #0c0c0c24; /* Only for the vertical layout */ --right-pane-item-hover-background: #ffffff26; --right-pane-item-hover-color: white; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index c7c03b664..8a083ae6d 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -211,6 +211,7 @@ --new-tab-button-hover-color: black; --right-pane-background-color: var(--main-background-color); + --right-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx); /* Only for the vertical layout */ --right-pane-item-hover-background: #ececec; --right-pane-item-hover-color: inherit; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index b4cc36b48..cf02b6588 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -44,12 +44,12 @@ body.background-effects.platform-win32 { --new-tab-button-background: var(--window-background-color-bgfx); --active-tab-background-color: var(--launcher-pane-horiz-background-color); --root-background: transparent; - --right-pane-background-color: var(--center-pane-vert-layout-background-color-bgfx); } body.background-effects.platform-win32.layout-vertical { --left-pane-background-color: var(--window-background-color-bgfx); --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx); + --right-pane-background-color: var(--right-pane-background-color-bgfx); --background-material: mica; } From 2a5f329adadf76e9ef6e6773822c544bfaf08d66 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 00:45:40 +0200 Subject: [PATCH 019/106] style: darken the main background color --- apps/client/src/stylesheets/theme-next-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index a43cc8a92..787bc2eb8 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -15,7 +15,7 @@ --native-titlebar-background: #00000000; --window-background-color-bgfx: transparent; /* When background effects enabled */ - --main-background-color: #272727; + --main-background-color: #242424; --main-text-color: #ccc; --main-border-color: #454545; --subtle-border-color: #313131; From 5df512a69cc295eed7616566ac9f551817b848e5 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 01:32:47 +0200 Subject: [PATCH 020/106] style: use background effects for empty note, refactor --- apps/client/src/stylesheets/theme-next/shell.css | 4 ++-- apps/client/src/widgets/note_wrapper.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index cf02b6588..dd3a58ca9 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -67,8 +67,8 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container background-color: var(--root-background); } -/* Settings page */ -body.background-effects.platform-win32 #center-pane .note-split.options { +/* Note split with background effects */ +body.background-effects.platform-win32 #center-pane .note-split.bgfx { --note-split-background-color: var(--center-pane-background-color-bgfx); } diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts index 559f9ece9..9d1be7794 100644 --- a/apps/client/src/widgets/note_wrapper.ts +++ b/apps/client/src/widgets/note_wrapper.ts @@ -52,6 +52,7 @@ export default class NoteWrapperWidget extends FlexContainer { const note = this.noteContext?.note; if (!note) { + this.$widget.addClass("bgfx"); return; } @@ -61,7 +62,7 @@ export default class NoteWrapperWidget extends FlexContainer { this.$widget.addClass(utils.getNoteTypeClass(note.type)); this.$widget.addClass(utils.getMimeTypeClass(note.mime)); - this.$widget.toggleClass("options", note.isOptions()); + this.$widget.toggleClass("bgfx", note.isOptions()); this.$widget.toggleClass("protected", note.isProtected); const noteLanguage = note?.getLabelValue("language"); From f789b6950673f4229e5c11bd2d47ed1cbbef56f4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 02:39:25 +0200 Subject: [PATCH 021/106] style: disable tab switching animation while background effects are active, improve performance --- apps/client/src/stylesheets/theme-next/shell.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index dd3a58ca9..a8ec29e49 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -1192,8 +1192,10 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . #center-pane .note-split { padding-top: 2px; background-color: var(--note-split-background-color, var(--main-background-color)); +} + +body:not(.background-effects) #center-pane .note-split { animation: note-entrance 100ms linear; - /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */ } /* @@ -1206,9 +1208,9 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . @keyframes note-entrance { from { - opacity: 0; + filter: opacity(0); } to { - opacity: 1; + filter: opacity(1); } } From 0424fe4fbae505d8439dc0913344a67ef4b998b8 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 03:13:16 +0200 Subject: [PATCH 022/106] client/css var utility: add support for parsing boolean values --- apps/client/src/utils/css-var.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/apps/client/src/utils/css-var.ts b/apps/client/src/utils/css-var.ts index 886247881..108ab7a14 100644 --- a/apps/client/src/utils/css-var.ts +++ b/apps/client/src/utils/css-var.ts @@ -23,6 +23,24 @@ export class CssVarReader { return (!isNaN(number.valueOf()) ? number.valueOf() : defaultValue) } + asBoolean(defaultValue?: boolean) { + let value = this.value.toLocaleLowerCase().trim(); + let result: boolean | undefined; + + switch (value) { + case "true": + case "1": + result = true; + break; + case "false": + case "0": + result = false; + break; + } + + return (result !== undefined) ? result : defaultValue; + } + asEnum(enumType: T, defaultValue?: T[keyof T]): T[keyof T] | undefined { let result: T[keyof T] | undefined; From 947e43a615e59d18a09260b6cdb0ed31e321d808 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 03:20:25 +0200 Subject: [PATCH 023/106] style: allow custom themes to turn off background effects --- apps/client/src/stylesheets/theme-next/base.css | 1 + apps/client/src/stylesheets/theme-next/shell.css | 16 ++++++++-------- .../src/widgets/containers/root_container.ts | 13 ++++++++++++- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index a33da2bc5..46934c8f5 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -82,6 +82,7 @@ /* Theme capabilities */ --tab-note-icons: true; + --allow-background-effects: true; /* To ensure that a tree item's custom color remains sufficiently contrasted and readable, * the color is adjusted based on the current color scheme (light or dark). The lightness diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index a8ec29e49..a0f73a082 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -35,7 +35,7 @@ body.mobile { } /* #region Mica */ -body.background-effects.platform-win32 { +body.background-effects.theme-supports-background-effects.platform-win32 { --background-material: tabbed; --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx); --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx); @@ -46,29 +46,29 @@ body.background-effects.platform-win32 { --root-background: transparent; } -body.background-effects.platform-win32.layout-vertical { +body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical { --left-pane-background-color: var(--window-background-color-bgfx); --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx); --right-pane-background-color: var(--right-pane-background-color-bgfx); --background-material: mica; } -body.background-effects.platform-win32.layout-horizontal { +body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal { --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx); } -body.background-effects.platform-win32, -body.background-effects.platform-win32 #root-widget { +body.background-effects.theme-supports-background-effects.platform-win32, +body.background-effects.theme-supports-background-effects.platform-win32 #root-widget { background: var(--window-background-color-bgfx) !important; } -body.background-effects.platform-win32.layout-horizontal #horizontal-main-container, -body.background-effects.platform-win32.layout-vertical #vertical-main-container { +body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal #horizontal-main-container, +body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical #vertical-main-container { background-color: var(--root-background); } /* Note split with background effects */ -body.background-effects.platform-win32 #center-pane .note-split.bgfx { +body.background-effects.theme-supports-background-effects.platform-win32 #center-pane .note-split.bgfx { --note-split-background-color: var(--center-pane-background-color-bgfx); } diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts index bd1ae9719..2e532ac3d 100644 --- a/apps/client/src/widgets/containers/root_container.ts +++ b/apps/client/src/widgets/containers/root_container.ts @@ -1,9 +1,10 @@ import { EventData } from "../../components/app_context.js"; +import { LOCALES } from "@triliumnext/commons"; +import { readCssVar } from "../../utils/css-var.js"; import FlexContainer from "./flex_container.js"; import options from "../../services/options.js"; import type BasicWidget from "../basic_widget.js"; import utils from "../../services/utils.js"; -import { LOCALES } from "@triliumnext/commons"; /** * The root container is the top-most widget/container, from which the entire layout derives. @@ -33,6 +34,7 @@ export default class RootContainer extends FlexContainer { this.#setMotion(options.is("motionEnabled")); this.#setShadows(options.is("shadowsEnabled")); this.#setBackdropEffects(options.is("backdropEffectsEnabled")); + this.#setThemeCapabilities(); this.#setLocaleAndDirection(options.get("locale")); return super.render(); @@ -71,6 +73,15 @@ export default class RootContainer extends FlexContainer { document.body.classList.toggle("backdrop-effects-disabled", !enabled); } + #setThemeCapabilities() { + // Supports background effects + + const useBgfx = readCssVar(document.documentElement, "allow-background-effects") + .asBoolean(false); + + document.body.classList.toggle("theme-supports-background-effects", useBgfx); + } + #setLocaleAndDirection(locale: string) { const correspondingLocale = LOCALES.find(l => l.id === locale); document.body.lang = locale; From a2c523def1310f68de126bd2ee78ad1b4219b9c3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 29 Oct 2025 20:28:53 +0200 Subject: [PATCH 024/106] style: fix a bug preventing background effects to work properly --- apps/client/src/stylesheets/theme-next/shell.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index a0f73a082..9860c1c2f 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -35,8 +35,14 @@ body.mobile { } /* #region Mica */ -body.background-effects.theme-supports-background-effects.platform-win32 { + +body.background-effects.platform-win32 { + /* Quirk: --background-material is read before "theme-supports-background-effects" class + * is applied. Apply the matterial even if the theme doesn't support it. */ --background-material: tabbed; +} + +body.background-effects.theme-supports-background-effects.platform-win32 { --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx); --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx); --launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx); @@ -46,11 +52,14 @@ body.background-effects.theme-supports-background-effects.platform-win32 { --root-background: transparent; } +body.background-effects.platform-win32.layout-vertical { + --background-material: mica; +} + body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical { --left-pane-background-color: var(--window-background-color-bgfx); --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx); --right-pane-background-color: var(--right-pane-background-color-bgfx); - --background-material: mica; } body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal { From 1ef03b7a77e3a502e3bfb1336a17f6aa9144e301 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 30 Oct 2025 00:23:41 +0200 Subject: [PATCH 025/106] client: rework max content width handling --- apps/client/src/stylesheets/style.css | 5 ++++- apps/client/src/widgets/collections/NoteList.css | 1 + apps/client/src/widgets/note_detail.ts | 1 + apps/server/src/assets/views/desktop.ejs | 4 ++-- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 1f4152792..b74da80d2 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1809,12 +1809,15 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { } .note-split { + /* Limits the maximum width of the note */ + --max-content-width: var(--preferred-max-content-width); + margin-inline-start: auto; margin-inline-end: auto; } .note-split.full-content-width { - max-width: 999999px; + --max-content-width: unset; } button.close:hover { diff --git a/apps/client/src/widgets/collections/NoteList.css b/apps/client/src/widgets/collections/NoteList.css index 08fab236c..2257e7f59 100644 --- a/apps/client/src/widgets/collections/NoteList.css +++ b/apps/client/src/widgets/collections/NoteList.css @@ -1,5 +1,6 @@ .note-list-widget { min-height: 0; + max-width: var(--max-content-width); /* Inherited from .note-split */ overflow: auto; contain: none !important; } diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts index a976b97ce..6ab265c46 100644 --- a/apps/client/src/widgets/note_detail.ts +++ b/apps/client/src/widgets/note_detail.ts @@ -39,6 +39,7 @@ const TPL = /*html*/`
From 4063229982526c4d00cb20035b4d2ebac7f18d27 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 30 Oct 2025 00:49:02 +0200 Subject: [PATCH 026/106] client: allow changing the max content width option without a frontend reload --- apps/client/src/widgets/containers/root_container.ts | 11 +++++++++++ .../src/widgets/type_widgets/options/appearance.tsx | 4 ---- apps/server/src/routes/index.ts | 1 - 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts index 2e532ac3d..4ab82ffdc 100644 --- a/apps/client/src/widgets/containers/root_container.ts +++ b/apps/client/src/widgets/containers/root_container.ts @@ -31,6 +31,7 @@ export default class RootContainer extends FlexContainer { window.visualViewport?.addEventListener("resize", () => this.#onMobileResize()); } + this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0); this.#setMotion(options.is("motionEnabled")); this.#setShadows(options.is("shadowsEnabled")); this.#setBackdropEffects(options.is("backdropEffectsEnabled")); @@ -52,14 +53,24 @@ export default class RootContainer extends FlexContainer { if (loadResults.isOptionReloaded("backdropEffectsEnabled")) { this.#setBackdropEffects(options.is("backdropEffectsEnabled")); } + + if (loadResults.isOptionReloaded("maxContentWidth")) { + this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0); + } } + #onMobileResize() { const currentViewportHeight = getViewportHeight(); const isKeyboardOpened = (currentViewportHeight < this.originalViewportHeight); this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened); } + #setMaxContentWidth(width: number) { + width = Math.max(width, 640); + document.body.style.setProperty("--preferred-max-content-width", `${width}px`); + } + #setMotion(enabled: boolean) { document.body.classList.toggle("motion-disabled", !enabled); jQuery.fx.off = !enabled; diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index 20ace18f7..7a6431f35 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -299,10 +299,6 @@ function MaxContentWidth() { /> - -

- {t("max_content_width.apply_changes_description")}