From 9542c9776afd6add49500ecf0347eb5fd53984f5 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 16 Dec 2025 20:30:58 +0200 Subject: [PATCH 01/17] style/note title & icon: use CSS variables to adjust size, improve the layout on different sizes --- apps/client/src/widgets/note_icon.css | 23 ++++++++++------ apps/client/src/widgets/note_title.css | 38 ++++++++++++++++++-------- 2 files changed, 40 insertions(+), 21 deletions(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 2163de8e5..4d023b6fe 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -1,17 +1,22 @@ -.note-icon-widget { - padding-inline-start: 10px; - margin-inline-end: 0; - width: 50px; - height: 50px; +div.note-icon-widget { + /* The size of the icon */ + --note-icon-size: 30px; + /* The padding size for the icon container */ + --note-icon-container-padding-size: 10px; + contain: unset; } .note-icon-widget button.note-icon { - font-size: 180%; - background-color: transparent; + --size: calc(var(--note-icon-size) + var(--note-icon-container-padding-size) * 2); + + width: var(--size); + height: var(--size); + padding: 0; border: 1px solid transparent; - padding: 6px; - cursor: pointer; + background-color: transparent; color: var(--muted-text-color); + cursor: pointer; + font-size: var(--note-icon-size); } .note-icon-widget button.note-icon:disabled { diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css index fb61d7b41..72ccb0139 100644 --- a/apps/client/src/widgets/note_title.css +++ b/apps/client/src/widgets/note_title.css @@ -1,15 +1,21 @@ -.note-title-widget { +div.note-title-widget { + /* The font size for the title */ + --note-title-size: 180%; + /* The horizontal padding of the title widget */ + --note-title-padding-inline: 12px; + flex-grow: 1000; - height: 100%; + height: auto; + contain: unset; } .note-title-widget input.note-title { - font-size: 110%; + font-size: var(--note-title-size); border: 0; - margin: 2px 0px; min-width: 5em; width: 100%; - padding: 1px 12px; + padding-block: 0; + padding-inline: var(--note-title-padding-inline); } .note-title-widget input.note-title[readonly] { @@ -22,15 +28,12 @@ } body.mobile .note-title-widget input.note-title { - padding: 0; -} - -body.desktop .note-title-widget input.note-title { - font-size: 180%; + --note-title-padding-inline: 0; } body.experimental-feature-new-layout { .title-row { + container-type: size; border-bottom: 1px solid var(--main-border-color); transition: border 400ms ease-out; @@ -40,9 +43,20 @@ body.experimental-feature-new-layout { transition: none; } + .note-icon-widget { + --note-icon-size: 20px; + --note-icon-padding-size: 8px; + } + + .note-title-widget { + --note-title-size: 18px; + --note-title-padding-inline: 4px; + } + @container (max-width: 700px) { - .note-icon-widget .note-icon { - font-size: 1.3em; + .note-title-widget { + --note-title-size: 1.25rem; + --note-title-padding-inline: 4px; } .note-title-widget { From 35218aca712035f4cd192c1cfe61af4596651aa8 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 16 Dec 2025 22:34:42 +0200 Subject: [PATCH 02/17] style/note title & icon: add a circular background for the note icon --- apps/client/src/widgets/note_icon.css | 31 ++++++++++++++++++++++++++ apps/client/src/widgets/note_title.css | 3 ++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 4d023b6fe..f0fdb8c4d 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -74,3 +74,34 @@ div.note-icon-widget { width: 1em; height: 1em; } + +body.experimental-feature-new-layout { + --note-icon-button-background-color: #444444; + --note-icon-button-color: white; + + .note-icon-widget button.note-icon { + position: relative; + background: transparent !important; + + &:hover { + transform: scale(1.15); + transition: transform 150ms ease-out; + } + + /* The icon */ + &::before { + position: relative; + z-index: 1; + color: var(--note-icon-button-color); + } + + /* The background circle */ + &::after { + content: ""; + position: absolute; + inset: 0; + border-radius: 50%; + background: var(--note-icon-button-background-color); + } + } +} \ No newline at end of file diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css index 72ccb0139..6f64b79bf 100644 --- a/apps/client/src/widgets/note_title.css +++ b/apps/client/src/widgets/note_title.css @@ -45,7 +45,8 @@ body.experimental-feature-new-layout { .note-icon-widget { --note-icon-size: 20px; - --note-icon-padding-size: 8px; + --note-icon-container-padding-size: 4px; + margin-inline: 8px; } .note-title-widget { From 5ffae303c44e97aacdd16feb93f7c01b2cb7f1d5 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 16 Dec 2025 22:54:12 +0200 Subject: [PATCH 03/17] style/forms/buttons: add a generic class for focusable buttons --- apps/client/src/stylesheets/theme-next/forms.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index de76231be..2d87245d7 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -56,7 +56,8 @@ button.btn.btn-primary:focus-visible, button.btn.btn-secondary:focus-visible, button.btn.btn-sm:not(.select-button):focus-visible, button.btn.btn-success:focus-visible, -button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible { +button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible, +.tn-focusable-button:focus-visible { outline: 2px solid var(--input-focus-outline-color); } From cad86d4b21e693eda5d3afdb3aff53f4ba5bab6e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 16 Dec 2025 22:54:55 +0200 Subject: [PATCH 04/17] style/note title & icon: tweak appearance --- apps/client/src/widgets/note_icon.css | 2 ++ apps/client/src/widgets/note_icon.tsx | 2 +- apps/client/src/widgets/note_title.css | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index f0fdb8c4d..3274f2124 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -81,6 +81,8 @@ body.experimental-feature-new-layout { .note-icon-widget button.note-icon { position: relative; + outline-offset: 4px; + border-radius: 50%; background: transparent !important; &:hover { diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index 4401b013f..28b118b1a 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -42,7 +42,7 @@ export default function NoteIcon() { className="note-icon-widget" title={t("note_icon.change_note_icon")} dropdownContainerStyle={{ width: "610px" }} - buttonClassName={`note-icon ${icon ?? "bx bx-empty"}`} + buttonClassName={`note-icon tn-focusable-button ${icon ?? "bx bx-empty"}`} hideToggleArrow disabled={viewScope?.viewMode !== "default"} > diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css index 6f64b79bf..39338e9f4 100644 --- a/apps/client/src/widgets/note_title.css +++ b/apps/client/src/widgets/note_title.css @@ -46,12 +46,12 @@ body.experimental-feature-new-layout { .note-icon-widget { --note-icon-size: 20px; --note-icon-container-padding-size: 4px; - margin-inline: 8px; + margin-inline: 12px 8px; } .note-title-widget { --note-title-size: 18px; - --note-title-padding-inline: 4px; + --note-title-padding-inline: 0; } @container (max-width: 700px) { From 6f494e3e387fbcd14a4000b761f74e64e1dbe0a1 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 16 Dec 2025 23:33:57 +0200 Subject: [PATCH 05/17] style/inline title: use a better layout --- .../client/src/widgets/layout/InlineTitle.css | 20 +++++++++++++++---- .../client/src/widgets/layout/InlineTitle.tsx | 6 ++++-- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index be153dbb0..afe2066f2 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -13,6 +13,7 @@ & > .inline-title-row { display: flex; align-items: center; + gap: 16px; transition: var(--title-transition); &.hidden { @@ -26,12 +27,22 @@ } .note-icon-widget { - padding: 0; + --note-icon-size: 35px; } - .inline-title-row { - border-bottom: 2px solid gray; + .note-title-caption { + flex-grow: 1; } + + .note-title-widget { + --note-title-size: 1.8em; + --note-title-padding-inline: 0; + + input { + line-height: 1; + } + } + } .title-row { @@ -59,10 +70,11 @@ body.prefers-centered-content .inline-title { display: flex; gap: 0.25em; margin: 0; - margin-top: 4px; list-style-type: none; opacity: .5; flex-wrap: wrap; + font-size: .85rem; + line-height: 1; span.value { font-weight: 500; diff --git a/apps/client/src/widgets/layout/InlineTitle.tsx b/apps/client/src/widgets/layout/InlineTitle.tsx index cdcb04442..6dec10c10 100644 --- a/apps/client/src/widgets/layout/InlineTitle.tsx +++ b/apps/client/src/widgets/layout/InlineTitle.tsx @@ -71,10 +71,12 @@ export default function InlineTitle() { >
- +
+ + +
- From 143b1827e66a3c61462ae091f1dd557377034c7a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 00:09:15 +0200 Subject: [PATCH 06/17] style/inline title: tweak appearance --- .../client/src/widgets/layout/InlineTitle.css | 54 +++++++++++++------ apps/client/src/widgets/note_title.css | 2 + 2 files changed, 39 insertions(+), 17 deletions(-) diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index afe2066f2..7b81da51e 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -8,9 +8,14 @@ .inline-title { max-width: var(--max-content-width); + container-type: inline-size; padding-inline-start: 24px; & > .inline-title-row { + --icon-size: 35px; + --icon-padding-size: 10px; + --title-size: 1.8em; + display: flex; align-items: center; gap: 16px; @@ -20,29 +25,41 @@ opacity: 0; pointer-events: none; } + + .note-icon-widget { + --note-icon-size: 35px; + --note-icon-container-padding-size: 10px; + } + + .note-title-caption { + flex-grow: 1; + } + + .note-title-widget { + --note-title-size: 1.8em; + --note-title-padding-inline: 0; + } + + @container (max-width: 500px) { + .note-icon-widget { + --note-icon-size: 25px; + --note-icon-container-padding-size: 6px; + } + + .note-title-widget { + --note-title-size: 1.5em; + } + + .title-details { + display: none; + } + } } &.hidden { display: none; } - .note-icon-widget { - --note-icon-size: 35px; - } - - .note-title-caption { - flex-grow: 1; - } - - .note-title-widget { - --note-title-size: 1.8em; - --note-title-padding-inline: 0; - - input { - line-height: 1; - } - } - } .title-row { @@ -70,11 +87,14 @@ body.prefers-centered-content .inline-title { display: flex; gap: 0.25em; margin: 0; + margin-top: .2rem; list-style-type: none; opacity: .5; flex-wrap: wrap; font-size: .85rem; line-height: 1; + flex-wrap: nowrap; + white-space: nowrap; span.value { font-weight: 500; diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css index 39338e9f4..09548692d 100644 --- a/apps/client/src/widgets/note_title.css +++ b/apps/client/src/widgets/note_title.css @@ -12,8 +12,10 @@ div.note-title-widget { .note-title-widget input.note-title { font-size: var(--note-title-size); border: 0; + border-radius: 0; min-width: 5em; width: 100%; + line-height: 1; padding-block: 0; padding-inline: var(--note-title-padding-inline); } From 07dcdf30784cc2ce557dd90007a6fa3aaa047716 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 00:16:45 +0200 Subject: [PATCH 07/17] style/inline title: replace the hover effect of the note icon --- apps/client/src/widgets/note_icon.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 3274f2124..fa1a94e44 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -77,6 +77,7 @@ div.note-icon-widget { body.experimental-feature-new-layout { --note-icon-button-background-color: #444444; + --note-icon-button-hover-background-color: #5a5a5a; --note-icon-button-color: white; .note-icon-widget button.note-icon { @@ -85,11 +86,6 @@ body.experimental-feature-new-layout { border-radius: 50%; background: transparent !important; - &:hover { - transform: scale(1.15); - transition: transform 150ms ease-out; - } - /* The icon */ &::before { position: relative; @@ -105,5 +101,10 @@ body.experimental-feature-new-layout { border-radius: 50%; background: var(--note-icon-button-background-color); } + + &:hover::after { + background: var(--note-icon-button-hover-background-color); + transition: background 200ms ease-out; + } } } \ No newline at end of file From 5446d8a9322a28d756e7328eead44f87504aec3d Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 00:33:33 +0200 Subject: [PATCH 08/17] style/inline title: improve the note icon focus indicator --- apps/client/src/widgets/layout/InlineTitle.css | 1 + apps/client/src/widgets/note_icon.css | 13 ++++++++----- apps/client/src/widgets/note_title.css | 1 - 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index 7b81da51e..81195597c 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -7,6 +7,7 @@ } .inline-title { + margin-top: 2px; /* Allow space for the focus outline */ max-width: var(--max-content-width); container-type: inline-size; padding-inline-start: 24px; diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index fa1a94e44..b95eda46a 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -81,11 +81,15 @@ body.experimental-feature-new-layout { --note-icon-button-color: white; .note-icon-widget button.note-icon { + --input-focus-outline-color: var(--note-icon-button-hover-background-color); + position: relative; - outline-offset: 4px; - border-radius: 50%; background: transparent !important; + &, &:hover { + border-radius: 50%; + } + /* The icon */ &::before { position: relative; @@ -102,9 +106,8 @@ body.experimental-feature-new-layout { background: var(--note-icon-button-background-color); } - &:hover::after { - background: var(--note-icon-button-hover-background-color); - transition: background 200ms ease-out; + &:focus-visible { + outline: 2px solid var(--note-icon-button-color); } } } \ No newline at end of file diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css index 09548692d..3cef8d561 100644 --- a/apps/client/src/widgets/note_title.css +++ b/apps/client/src/widgets/note_title.css @@ -35,7 +35,6 @@ body.mobile .note-title-widget input.note-title { body.experimental-feature-new-layout { .title-row { - container-type: size; border-bottom: 1px solid var(--main-border-color); transition: border 400ms ease-out; From 286d2e8e5b11f864bf7b4d4cb55772ea74f2d76b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 00:52:47 +0200 Subject: [PATCH 09/17] style/inline title: tweak the layout of the note type selector --- apps/client/src/widgets/layout/InlineTitle.css | 4 +++- apps/client/src/widgets/type_widgets/text/EditableText.css | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index 81195597c..8e2c34cd9 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -103,13 +103,15 @@ body.prefers-centered-content .inline-title { } .note-type-switcher { + position: relative; + top: 5px; padding: .25em 0; display: flex; align-items: center; overflow-x: auto; min-width: 0; gap: 5px; - min-height: 40px; + min-height: 35px; --badge-radius: 12px; >* { diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.css b/apps/client/src/widgets/type_widgets/text/EditableText.css index 8c340c738..a2e1af8c5 100644 --- a/apps/client/src/widgets/type_widgets/text/EditableText.css +++ b/apps/client/src/widgets/type_widgets/text/EditableText.css @@ -1,7 +1,6 @@ .note-detail-editable-text { font-family: var(--detail-font-family); padding-inline-start: 14px; - padding-top: 10px; height: 100%; } From 08730dd82110e06d6edee15b3e71a51c80400507 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:00:07 +0200 Subject: [PATCH 10/17] style/inline title: add an intro animation for the note type selector --- apps/client/src/widgets/layout/InlineTitle.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index 8e2c34cd9..4f468d4a2 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -102,7 +102,17 @@ body.prefers-centered-content .inline-title { } } +@keyframes note-type-switcher-intro { + from { + opacity: 0; + } to { + opacity: 1; + } +} + .note-type-switcher { + --badge-radius: 12px; + position: relative; top: 5px; padding: .25em 0; @@ -112,10 +122,10 @@ body.prefers-centered-content .inline-title { min-width: 0; gap: 5px; min-height: 35px; - --badge-radius: 12px; - + >* { flex-shrink: 0; + animation: note-type-switcher-intro 200ms ease-in; } .ext-badge { From 84f7ae9f05ab49b1f4453d280aa938546518ac54 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:03:01 +0200 Subject: [PATCH 11/17] style/inline title: fix icon hover color --- apps/client/src/widgets/note_icon.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index b95eda46a..43709b715 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -87,7 +87,7 @@ body.experimental-feature-new-layout { background: transparent !important; &, &:hover { - border-radius: 50%; + border-radius: 50%; } /* The icon */ @@ -106,6 +106,12 @@ body.experimental-feature-new-layout { background: var(--note-icon-button-background-color); } + + &:hover::after { + background: var(--note-icon-button-hover-background-color); + transition: background 200ms ease-out; + } + &:focus-visible { outline: 2px solid var(--note-icon-button-color); } From c31f35dbd79cf6219cb5f63d8189cc1156427076 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:11:23 +0200 Subject: [PATCH 12/17] style/inline title: handle empty icons when the icon selection is disabled --- apps/client/src/widgets/note_icon.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 43709b715..ebf637df1 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -98,7 +98,7 @@ body.experimental-feature-new-layout { } /* The background circle */ - &::after { + &:not(.bx-empty:disabled)::after { content: ""; position: absolute; inset: 0; @@ -106,12 +106,6 @@ body.experimental-feature-new-layout { background: var(--note-icon-button-background-color); } - - &:hover::after { - background: var(--note-icon-button-hover-background-color); - transition: background 200ms ease-out; - } - &:focus-visible { outline: 2px solid var(--note-icon-button-color); } From 468d4a43698ec7ef2c0dc861d5d0d87c21ade127 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:15:35 +0200 Subject: [PATCH 13/17] style/inline title: fix (again) icon hover color --- apps/client/src/widgets/note_icon.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index ebf637df1..c5597452c 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -109,5 +109,10 @@ body.experimental-feature-new-layout { &:focus-visible { outline: 2px solid var(--note-icon-button-color); } + + &:hover:not(.bx-empty:disabled)::after { + background: var(--note-icon-button-hover-background-color); + transition: background 200ms ease-out; + } } } \ No newline at end of file From ddca68eafa31c4887f50a59179764f3b8ef7b2ba Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:33:23 +0200 Subject: [PATCH 14/17] style/note title & icon: add support for both dark and light color schemes --- apps/client/src/stylesheets/theme-next-dark.css | 4 ++++ apps/client/src/stylesheets/theme-next-light.css | 4 ++++ apps/client/src/widgets/note_icon.css | 4 ---- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index b4c3def74..113a57f79 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -199,6 +199,10 @@ --badge-background-color: #ffffff1a; --badge-text-color: var(--muted-text-color); + --note-icon-button-background-color: #444444; + --note-icon-button-hover-background-color: #5a5a5a; + --note-icon-button-color: white; + --promoted-attribute-card-background-color: #ffffff21; --promoted-attribute-card-shadow: none; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 620672499..d1364ebd4 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -191,6 +191,10 @@ --badge-background-color: #00000011; --badge-text-color: var(--muted-text-color); + --note-icon-button-background-color: #4f4f4f; + --note-icon-button-hover-background-color: #737373; + --note-icon-button-color: white; + --promoted-attribute-card-background-color: #00000014; --promoted-attribute-card-shadow: none; diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index c5597452c..7168daf5b 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -76,10 +76,6 @@ div.note-icon-widget { } body.experimental-feature-new-layout { - --note-icon-button-background-color: #444444; - --note-icon-button-hover-background-color: #5a5a5a; - --note-icon-button-color: white; - .note-icon-widget button.note-icon { --input-focus-outline-color: var(--note-icon-button-hover-background-color); From b8ceb10e6861761673a8034f0656b9149967fede Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:39:14 +0200 Subject: [PATCH 15/17] style/note title & icon: update 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 113a57f79..248efee75 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -199,9 +199,9 @@ --badge-background-color: #ffffff1a; --badge-text-color: var(--muted-text-color); - --note-icon-button-background-color: #444444; - --note-icon-button-hover-background-color: #5a5a5a; - --note-icon-button-color: white; + --note-icon-button-background-color: #a6a6a6; + --note-icon-button-hover-background-color: #d0d0d0; + --note-icon-button-color: black; --promoted-attribute-card-background-color: #ffffff21; --promoted-attribute-card-shadow: none; From 3b6a82355663c1bba0c25195305ff9e7e7b3c7d3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:48:35 +0200 Subject: [PATCH 16/17] style/note title & icon: tweak icon size --- apps/client/src/widgets/note_title.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css index 3cef8d561..f798e83ef 100644 --- a/apps/client/src/widgets/note_title.css +++ b/apps/client/src/widgets/note_title.css @@ -45,8 +45,8 @@ body.experimental-feature-new-layout { } .note-icon-widget { - --note-icon-size: 20px; - --note-icon-container-padding-size: 4px; + --note-icon-size: 16px; + --note-icon-container-padding-size: 6px; margin-inline: 12px 8px; } From fc9f47a80182766aa96aaaf1193d416d0edfe7da Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 01:58:20 +0200 Subject: [PATCH 17/17] style/note title & icon: fix an issue pointed by gemini-code-assist --- apps/client/src/widgets/layout/InlineTitle.css | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index 4f468d4a2..a667e35fc 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -91,7 +91,6 @@ body.prefers-centered-content .inline-title { margin-top: .2rem; list-style-type: none; opacity: .5; - flex-wrap: wrap; font-size: .85rem; line-height: 1; flex-wrap: nowrap;