From 4ba7907beeb86b94209f62c463100e8f7e4b2392 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 9 Nov 2025 14:07:27 +0200 Subject: [PATCH 01/11] client/content header container: fix parent detection --- apps/client/src/widgets/containers/content-header.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/client/src/widgets/containers/content-header.ts b/apps/client/src/widgets/containers/content-header.ts index 54e789ce9..a014b37c1 100644 --- a/apps/client/src/widgets/containers/content-header.ts +++ b/apps/client/src/widgets/containers/content-header.ts @@ -25,8 +25,7 @@ export default class ContentHeader extends Container { } init() { - this.parentElement = this.parent!.$widget.get(0); - + this.parentElement = this.parent?.$widget.get(0); if (!this.parentElement) { console.warn("No parent set for ."); return; From 2f3be96dffd23e637cba6ae5abb59d638758e07f Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 9 Nov 2025 14:17:04 +0200 Subject: [PATCH 02/11] style/info bar: improve style --- apps/client/src/widgets/react/InfoBar.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/react/InfoBar.css b/apps/client/src/widgets/react/InfoBar.css index ec69f466c..10bb52aa3 100644 --- a/apps/client/src/widgets/react/InfoBar.css +++ b/apps/client/src/widgets/react/InfoBar.css @@ -1,11 +1,13 @@ .info-bar { --link-color: var(--main-text-color); - + margin-top: 4px; contain: unset !important; padding: 8px 20px; color: var(--read-only-note-info-bar-color); font-size: .9em; + cursor: default; + user-select: none; } .info-bar-prominent { From 21b0ef95544f85e91cd9faddea03a35b96ab45ee Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 9 Nov 2025 14:43:59 +0200 Subject: [PATCH 03/11] style/note cards: improve style, remove no longer unused CSS variables --- apps/client/src/stylesheets/theme-next-dark.css | 3 +-- apps/client/src/stylesheets/theme-next-light.css | 3 +-- apps/client/src/stylesheets/theme-next/base.css | 14 +++++++++----- apps/client/src/stylesheets/theme-next/pages.css | 2 +- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 787bc2eb8..51db2bc27 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -230,8 +230,7 @@ --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); --card-background-color: #ffffff12; - --card-background-hover-color: #3c3c3c; - --card-background-press-color: #464646; + --card-background-hover-color: #ffffff20; --card-border-color: transparent; --card-box-shadow: none; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 1c44ec755..0046ebe02 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -229,8 +229,7 @@ --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: #0000000d; - --card-background-hover-color: #f9f9f9; - --card-background-press-color: #efefef; + --card-background-hover-color: #0000001c; --card-border-color: transparent; --card-shadow-color: rgba(0, 0, 0, 0.1); --card-box-shadow: none; diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 27119bbb1..82ccce393 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -494,6 +494,15 @@ li.dropdown-item a.dropdown-item-button:focus-visible { margin: 5px 10px 5px 0; } +:root .note-list .note-book-card:hover { + background-color: var(--card-background-hover-color); + transition: background-color 200ms ease-out; +} + +:root .note-list .note-book-card:active { + transform: scale(.98); +} + .note-list.list-view .note-book-card { box-shadow: 0 0 3px var(--card-shadow-color); } @@ -502,10 +511,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible { vertical-align: middle; } -.note-list-wrapper .note-book-card:active { - background-color: var(--card-background-press-color); -} - .note-list-wrapper .note-book-card a { color: inherit !important; } @@ -587,7 +592,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible { } .note-list.grid-view .note-book-card:hover { - background: var(--card-background-color) !important; filter: contrast(105%); } diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css index 85c120bf3..87cb7f1a2 100644 --- a/apps/client/src/stylesheets/theme-next/pages.css +++ b/apps/client/src/stylesheets/theme-next/pages.css @@ -101,7 +101,7 @@ .sql-table-schemas-widget .sql-table-schemas button:hover, .sql-table-schemas-widget .sql-table-schemas button:active, .sql-table-schemas-widget .sql-table-schemas button:focus-visible { - --background: var(--card-background-press-color); + --background: var(--card-background-hover-color); --color: var(--main-text-color); } From ecfa3334912b65cdb14b4ce28ec2ea19eeb4c86b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 9 Nov 2025 14:47:31 +0200 Subject: [PATCH 04/11] style/note cards: remove shadow --- apps/client/src/stylesheets/theme-next/base.css | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 82ccce393..cb0b783eb 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -487,7 +487,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible { --note-list-vertical-padding: 15px; background-color: var(--card-background-color); border: 1px solid var(--card-border-color) !important; - box-shadow: 2px 3px 4px var(--card-shadow-color); border-radius: 12px; user-select: none; padding: 0; From f6afc0b7185012af466df2e033abd18c2cedd82b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sun, 9 Nov 2025 15:46:57 +0200 Subject: [PATCH 05/11] style/scrolling container widget: improve full-height widget handling --- apps/client/src/stylesheets/relation_map.css | 1 - apps/client/src/stylesheets/style.css | 16 +++++++++++++++- apps/client/src/widgets/collections/NoteList.css | 2 +- apps/client/src/widgets/note_detail.ts | 4 ---- apps/client/src/widgets/type_widgets/canvas.ts | 4 ++++ .../src/widgets/type_widgets/relation_map.ts | 2 +- 6 files changed, 21 insertions(+), 8 deletions(-) diff --git a/apps/client/src/stylesheets/relation_map.css b/apps/client/src/stylesheets/relation_map.css index 67444e5aa..3f371d8e2 100644 --- a/apps/client/src/stylesheets/relation_map.css +++ b/apps/client/src/stylesheets/relation_map.css @@ -5,7 +5,6 @@ .note-detail-relation-map { height: 100%; overflow: hidden !important; - padding: 10px; position: relative; } diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 9b04b1428..fa28df6e2 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -2516,7 +2516,7 @@ footer.webview-footer button { transform: rotate(180deg); } -/* CK Edito */ +/* CK Editor */ /* Insert text snippet: limit the width of the listed items to avoid overly long names */ :root body.desktop div.ck-template-form li.ck-list__item .ck-template-form__text-part > span { @@ -2546,4 +2546,18 @@ iframe.print-iframe { .excalidraw.theme--dark canvas { --theme-filter: invert(100%) hue-rotate(180deg); +} + +/* Scrolling container */ + +.scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) { + display: flex; + flex-direction: column; +} + +.scrolling-container > .note-detail.full-height { + position: relative; + flex-grow: 1; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/apps/client/src/widgets/collections/NoteList.css b/apps/client/src/widgets/collections/NoteList.css index 21aed3ac5..f8e5ae14e 100644 --- a/apps/client/src/widgets/collections/NoteList.css +++ b/apps/client/src/widgets/collections/NoteList.css @@ -6,7 +6,7 @@ contain: none !important; } -body.prefers-centered-content .note-list-widget { +body.prefers-centered-content .note-list-widget:not(.full-height) { /* Horizontally center the widget in its parent when the "Keep content centered" option is on */ margin-inline: auto; } diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts index b0dd8db54..afb1c2475 100644 --- a/apps/client/src/widgets/note_detail.ts +++ b/apps/client/src/widgets/note_detail.ts @@ -48,10 +48,6 @@ const TPL = /*html*/` /* Horizontally center the widget in its parent when the "Keep content centered" option is on */ margin-inline: auto; } - - .note-detail.full-height { - height: 100%; - } `; diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts index bc619acea..d31bda9dd 100644 --- a/apps/client/src/widgets/type_widgets/canvas.ts +++ b/apps/client/src/widgets/type_widgets/canvas.ts @@ -13,6 +13,10 @@ import protected_session_holder from "../../services/protected_session_holder.js const TPL = /*html*/`