From 4b4b427d2bae6c0619d3fb002133f8a3d01fb42c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 18:33:53 +0200 Subject: [PATCH 01/15] style: tweak layout --- apps/client/src/widgets/layout/NoteTitleActions.css | 4 ++-- apps/client/src/widgets/layout/NoteTypeSwitcher.css | 1 - apps/client/src/widgets/search_result.css | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index 4ae4c15816..92e9109549 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -4,8 +4,8 @@ body.experimental-feature-new-layout { } .title-actions { - --title-actions-padding-start: 12px; - --title-actions-padding-end: 8px; + --title-actions-padding-start: var(--content-margin-inline); + --title-actions-padding-end: var(--content-margin-inline); display: flex; max-width: var(--max-content-width); diff --git a/apps/client/src/widgets/layout/NoteTypeSwitcher.css b/apps/client/src/widgets/layout/NoteTypeSwitcher.css index 574924d037..495d055d32 100644 --- a/apps/client/src/widgets/layout/NoteTypeSwitcher.css +++ b/apps/client/src/widgets/layout/NoteTypeSwitcher.css @@ -11,7 +11,6 @@ position: relative; top: 5px; - padding: .25em 0; display: flex; align-items: center; overflow-x: auto; diff --git a/apps/client/src/widgets/search_result.css b/apps/client/src/widgets/search_result.css index 13acf04e9d..8888bd01ac 100644 --- a/apps/client/src/widgets/search_result.css +++ b/apps/client/src/widgets/search_result.css @@ -4,8 +4,8 @@ contain: none !important; } -.search-result-widget .note-list { - padding: 10px; +.search-result-widget .note-list-wrapper { + margin-inline: var(--content-margin-inline); } .note-split.type-search .scrolling-container { From 843e4d45e6f612dd53bab0793d59d6d73c5c8c1b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 18:55:57 +0200 Subject: [PATCH 02/15] style: tweak layout --- apps/client/src/widgets/layout/NoteTitleActions.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css index 92e9109549..9301bf5012 100644 --- a/apps/client/src/widgets/layout/NoteTitleActions.css +++ b/apps/client/src/widgets/layout/NoteTitleActions.css @@ -8,6 +8,7 @@ body.experimental-feature-new-layout { --title-actions-padding-end: var(--content-margin-inline); display: flex; + width: 100%; max-width: var(--max-content-width); flex-direction: column; gap: 0.5em; From 7861bc41f98bb9ca034153d7351ae96c12b7cda2 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 18:56:24 +0200 Subject: [PATCH 03/15] style/calendar: tweak layout --- apps/client/src/stylesheets/theme-next/shell.css | 6 ------ .../src/widgets/launch_bar/CalendarWidget.css | 16 ++++++++++++---- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 1ac2f13e77..6fac6af980 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -372,10 +372,6 @@ body[dir=ltr] #launcher-container { .calendar-dropdown-widget .calendar-header [data-calendar-input="month"] { --input-background-color: transparent; --menu-background-color: transparent; - - text-align: center; - font-size: 1.4em; - font-weight: 300; } .calendar-dropdown-widget .calendar-header input:not(:focus) { @@ -425,8 +421,6 @@ body[dir=ltr] #launcher-container { } .calendar-dropdown-widget .calendar-week span { - font-size: 0.85em; - font-weight: 500; color: var(--calendar-weekday-labels-color); } diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.css b/apps/client/src/widgets/launch_bar/CalendarWidget.css index a47d026278..73ecaccf32 100644 --- a/apps/client/src/widgets/launch_bar/CalendarWidget.css +++ b/apps/client/src/widgets/launch_bar/CalendarWidget.css @@ -35,7 +35,7 @@ .calendar-dropdown-widget .calendar-header { align-items: center; display: flex; - padding: 0 0.5rem 0.5rem 0.5rem; + padding: 0 0.5rem 1rem 0.5rem; } .calendar-dropdown-widget .calendar-header>div { @@ -65,8 +65,14 @@ border: 0; border-inline-start: unset; background-color: var(--menu-background-color); - font-weight: bold; + font-weight: 400; outline: 0; + font-weight: 300; + font-size: 1.4em; +} + +.calendar-dropdown-widget .calendar-header .dropdown-toggle { + justify-content: center; } .calendar-dropdown-widget .calendar-header .dropdown-toggle::after { @@ -82,18 +88,20 @@ .calendar-dropdown-widget .calendar-week span { flex-direction: column; flex: 0 0 12.5%; - font-size: 1rem; - font-weight: bold; max-width: 12.5%; padding-top: 5px; padding-bottom: 5px; text-align: center; text-transform: uppercase; + font-size: .85em; + font-weight: 500; } .calendar-dropdown-widget .calendar-body { display: flex; flex-wrap: wrap; + min-height: 250px; + align-items: center; } .calendar-dropdown-widget .calendar-week-number { From 8c9ad575efa8301458a1bbc98004698a9ca62216 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 19:26:06 +0200 Subject: [PATCH 04/15] style: tweak layout --- apps/client/src/widgets/collections/board/index.css | 2 +- apps/client/src/widgets/collections/calendar/index.css | 2 +- apps/client/src/widgets/collections/table/index.css | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css index 4851410db8..73bd997a6e 100644 --- a/apps/client/src/widgets/collections/board/index.css +++ b/apps/client/src/widgets/collections/board/index.css @@ -14,7 +14,7 @@ height: 100%; display: flex; gap: 1em; - padding-inline: 12px; + margin-inline: var(--content-margin-inline); padding-block: 4px; align-items: flex-start; overflow-x: auto; diff --git a/apps/client/src/widgets/collections/calendar/index.css b/apps/client/src/widgets/collections/calendar/index.css index 34296dc174..df93910b50 100644 --- a/apps/client/src/widgets/collections/calendar/index.css +++ b/apps/client/src/widgets/collections/calendar/index.css @@ -52,7 +52,7 @@ --fc-border-color: var(--main-border-color); --fc-neutral-bg-color: var(--launcher-pane-background-color); --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background); - padding: 0 12px; + padding: 0 var(--content-margin-inline); } .calendar-container .fc-list-sticky .fc-list-day > * { diff --git a/apps/client/src/widgets/collections/table/index.css b/apps/client/src/widgets/collections/table/index.css index 5d0725250c..604a384156 100644 --- a/apps/client/src/widgets/collections/table/index.css +++ b/apps/client/src/widgets/collections/table/index.css @@ -13,6 +13,7 @@ .table-view-container { height: 100%; + margin-inline-start: var(--content-margin-inline); } .search-result-widget-content .table-view { From aba7f35d9f9bc12c63b7afe68f4da68a5f063892 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 19:34:31 +0200 Subject: [PATCH 05/15] style/text: tweak dividers --- apps/client/src/stylesheets/theme-next/notes/text.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index e025b23fb2..252a3da6b2 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -647,10 +647,10 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child { font-weight: 600; } -.ck-content hr { - margin: 5px 0; - height: 1px; - background-color: var(--main-border-color); +:root .ck-content hr { + margin-block: 5px; + height: 0; + border: thin solid var(--main-border-color); opacity: 1; } From b24d2c65a140a33d79de19a004075facaf79b6cd Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 20:33:33 +0200 Subject: [PATCH 06/15] style: tweak layout --- apps/client/src/widgets/type_widgets/ProtectedSession.css | 4 ++++ .../client/src/widgets/type_widgets/helpers/SetupForm.css | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.css b/apps/client/src/widgets/type_widgets/ProtectedSession.css index 6bfcb87737..41a24b8d65 100644 --- a/apps/client/src/widgets/type_widgets/ProtectedSession.css +++ b/apps/client/src/widgets/type_widgets/ProtectedSession.css @@ -3,4 +3,8 @@ margin-inline: 40px; flex-direction: column; justify-content: center; + + label { + margin-bottom: 8px; + } } \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets/helpers/SetupForm.css b/apps/client/src/widgets/type_widgets/helpers/SetupForm.css index 1bd04b30c7..c71ac73b03 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SetupForm.css +++ b/apps/client/src/widgets/type_widgets/helpers/SetupForm.css @@ -19,4 +19,12 @@ .tn-link { margin-top: 1em; } + + label { + margin-bottom: 8px; + } + + .input-group { + margin: 0; + } } From 6b82943871864032c7a90fe47c83709014b0b0ca Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 26 Feb 2026 09:31:39 +0200 Subject: [PATCH 07/15] style/tree items: restyle selection --- .../src/stylesheets/theme-next/shell.css | 28 ++++++++++++++++++- apps/client/src/stylesheets/tree.css | 13 +++------ 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 6fac6af980..fcf7f442c3 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -685,7 +685,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { #left-pane span.fancytree-node.fancytree-active { position: relative; - background: transparent !important; + background: transparent; color: var(--custom-color, var(--left-pane-item-selected-color)); } @@ -698,6 +698,14 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { } } +/* + * .fancytree-node pseudo-elements: + * + * - ::before: the active tree item decorator. + * - ::after: the selected tree item background. A pseudo-element is used instead of the + * element's background color, to allow alpha compositing for the hover state. + */ + #left-pane span.fancytree-node.fancytree-active::before { position: absolute; content: ""; @@ -712,6 +720,24 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { z-index: -1; } +#left-pane span.fancytree-node.fancytree-selected { + --left-pane-item-selected-shadow-size: 4px; + + position: relative; + background-color: transparent; + border-radius: 0; +} + +#left-pane span.fancytree-node.fancytree-selected::after { + display: block; + position: absolute; + z-index: -2; + content: ""; + inset: 0; + background: var(--selection-background-color); + animation: left-pane-item-select 100ms ease-out; +} + #left-pane span.fancytree-node.protected > span.fancytree-custom-icon { position: relative; filter: unset !important; diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index 8ed03215b1..a4869d674e 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -185,7 +185,7 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit span.fancytree-active { color: var(--active-item-text-color); - background-color: var(--active-item-background-color) !important; + background-color: var(--active-item-background-color); border-color: transparent; /* invisible border */ border-radius: 5px; } @@ -195,14 +195,9 @@ span.fancytree-active .fancytree-title { border: 0; } -span.fancytree-selected { - border-color: var(--main-border-color) !important; - border-radius: 5px; -} - -span.fancytree-selected .fancytree-title { - text-decoration: underline; - font-style: italic; +span.fancytree-node.fancytree-selected { + background-color: var(--selection-background-color); + border-radius: 0; } span.fancytree-selected .fancytree-custom-icon::before { From af0e4088a62be07283ab70cde5c70cc9ae5bb615 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 26 Feb 2026 09:35:29 +0200 Subject: [PATCH 08/15] style/tree items: fix hover color for the active item --- apps/client/src/stylesheets/theme-next/shell.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index fcf7f442c3..aa671d131a 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -683,7 +683,8 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { padding-inline-start: 12px; } -#left-pane span.fancytree-node.fancytree-active { +#left-pane span.fancytree-node.fancytree-active, +#left-pane span.fancytree-node.fancytree-active:hover { position: relative; background: transparent; color: var(--custom-color, var(--left-pane-item-selected-color)); From abb5fe5b0f72c881f62fa217ce8aafd26868b0b7 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 26 Feb 2026 10:27:13 +0200 Subject: [PATCH 09/15] style/tree items: restyle the bulk actions button --- .../src/stylesheets/theme-next/shell.css | 45 +++++++++++++++++-- apps/client/src/stylesheets/tree.css | 4 +- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index aa671d131a..b7a08b4c97 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -801,7 +801,8 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i opacity: 0.5; } -#left-pane .tree-item-button { +#left-pane .tree-item-button, +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon { margin-inline-end: 6px; border: unset; border-radius: 50%; @@ -812,7 +813,8 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i box-shadow 200ms ease-out; } -#left-pane .tree-item-button:hover { +#left-pane .tree-item-button:hover, +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon:hover { background: var(--left-pane-item-action-button-hover-background); box-shadow: var(--left-pane-item-action-button-hover-shadow); transition: @@ -820,10 +822,47 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i box-shadow 100ms ease-in; } -#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover { +#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover, +#left-pane span.fancytree-node.fancytree-active.fancy-tree-selected .fancytree-custom-icon:hover { box-shadow: var(--left-pane-item-selected-action-button-hover-shadow); } +/* Selected item bulk action button */ + +@keyframes bulk-action-button-blink { + from { + opacity: 1; + } + to { + opacity: .3; + } +} + +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon { + display: flex; + justify-content: center; + align-items: center; + width: 1em; + height: 1em; + margin: 0; + +} + +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon::before { + border: 0; + font-size: .65em; +} + +#left-pane span.fancytree-node.fancytree-selected:hover .fancytree-custom-icon:not(:hover)::before { + animation: bulk-action-button-blink 500ms linear infinite alternate; +} + +#left-pane span.fancytree-node.fancytree-selected.protected .fancytree-custom-icon::after { + /* Protected note indicator */ + display: none; +} + + #context-menu-container { /* The context menu of the tree */ --menu-item-icon-vert-offset: -1px; diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index a4869d674e..cb354d30df 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -202,8 +202,8 @@ span.fancytree-node.fancytree-selected { span.fancytree-selected .fancytree-custom-icon::before { font-family: "boxicons"; - content: "\eb43"; - border: 1px solid var(--main-border-color); + content: "\ef05"; + border: 1px solid var(--main-text-color); border-radius: 3px; } From 3b9f765c24a221eab92837b9e540bf7416187b47 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 26 Feb 2026 19:52:20 +0200 Subject: [PATCH 10/15] style/tree items: display a fallback icon when the specified icon pack is missing --- apps/client/src/stylesheets/tree.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index cb354d30df..a791f0578b 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -140,10 +140,22 @@ ul.fancytree-container { background-color: inherit; } + .fancytree-custom-icon { + display: flex; + justify-content: center; + align-items: center; + width: 1em; + height: 1em; font-size: 1.2em; } +/* Fallback icon */ +:where(.fancytree-custom-icon)::before { + content: "?"; +} + +/* Protected note icon badge */ span.fancytree-node.protected > span.fancytree-custom-icon { filter: drop-shadow(2px 2px 2px var(--main-text-color)); } From 7fac172ce2e83778ee179a2186cf93c3a4b5086a Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 26 Feb 2026 19:54:42 +0200 Subject: [PATCH 11/15] style: remove redundant style --- apps/client/src/stylesheets/theme-next/shell.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index b7a08b4c97..ba6f5d95b5 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -839,13 +839,7 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i } #left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon { - display: flex; - justify-content: center; - align-items: center; - width: 1em; - height: 1em; margin: 0; - } #left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon::before { From f4d91e48ba2cc515dcba550d2bb48e5c51bf4cb4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 26 Feb 2026 20:46:55 +0200 Subject: [PATCH 12/15] style/pdf viewer: fix color scheme --- apps/client/src/widgets/type_widgets/file/PdfViewer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx index 7e6870dd42..a406f84a02 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -7,7 +7,8 @@ const VARIABLE_WHITELIST = new Set([ "root-background", "main-background-color", "main-border-color", - "main-text-color" + "main-text-color", + "theme-style" ]); interface PdfViewerProps extends Pick, "tabIndex"> { From 7c89c6652687a6d3fc42a2d01c38662dfdb8f59b Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 27 Feb 2026 19:34:26 +0200 Subject: [PATCH 13/15] style/pdf viewer: restyle UI --- .../widgets/type_widgets/file/PdfViewer.tsx | 44 +++- packages/pdfjs-viewer/src/custom.css | 219 ++++++++++++++++-- 2 files changed, 242 insertions(+), 21 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx index a406f84a02..6ba24ef812 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -1,14 +1,37 @@ import type { HTMLAttributes, RefObject } from "preact"; import { useCallback, useEffect, useRef } from "preact/hooks"; - +import Inter from "./../../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf"; import { useSyncedRef, useTriliumOption, useTriliumOptionBool } from "../../react/hooks"; +interface FontDefinition { + name: string; + url: string; +} + +const FONTS: FontDefinition[] = [ + {name: "Inter", url: Inter}, +] + const VARIABLE_WHITELIST = new Set([ "root-background", "main-background-color", "main-border-color", "main-text-color", - "theme-style" + "theme-style", + "menu-background-color", + "dropdown-backdrop-filter", + "dropdown-border-radius", + "dropdown-border-color", + "dropdown-shadow-opacity", + "menu-padding-size", + "dropdown-backdrop-filter", + "menu-text-color", + "hover-item-background-color", + "hover-item-text-color", + "menu-item-icon-color", + "input-focus-outline-color", + "input-background-color", + "input-text-color" ]); interface PdfViewerProps extends Pick, "tabIndex"> { @@ -54,10 +77,14 @@ function useStyleInjection(iframeRef: RefObject) { const style = doc.createElement('style'); style.id = 'client-root-vars'; - style.textContent = cssVarsToString(getRootCssVariables()); + style.textContent = cssVarsToString(getRootCssVariables());; styleRef.current = style; - doc.head.appendChild(style); + + const fontStyles = doc.createElement("style"); + fontStyles.textContent = FONTS.map(injectFont).join("\n"); + doc.head.appendChild(fontStyles); + }, [ iframeRef ]); // React to changes. @@ -93,3 +120,12 @@ function cssVarsToString(vars: Record) { .map(([k, v]) => ` ${k}: ${v};`) .join('\n')}\n}`; } + +function injectFont(font: FontDefinition) { + return ` + @font-face { + font-family: '${font.name}'; + src: url('${font.url}'); + } + `; +}; \ No newline at end of file diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index bf291112dd..441fc049c0 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -1,31 +1,175 @@ -:root { - color-scheme: var(--tn-theme-style); +/* #region General */ - --body-bg-color: transparent; - --toolbar-bg-color: transparent; +:root { --main-color: var(--tn-main-text-color); + --body-bg-color: transparent; --toolbar-border-color: var(--tn-main-border-color); + --toolbar-bg-color: transparent; --toolbar-icon-opacity: 1; + --toggled-btn-bg-color: var(--tn-hover-item-background-color); + --doorhanger-bg-color: var(--tn-menu-background-color); + --doorhanger-separator-color: var(--tn-main-border-color); --page-margin: 12px auto; --spreadHorizontalWrapped-margin-LR: 4px; + + color-scheme: var(--tn-theme-style); } -.pdfViewer { - .page, - .page > .canvasWrapper, - .page > .canvasWrapper > canvas { - border-radius: 6px; - } +:root button, +:root dialog, +:root #toolbarContainer, +:root .toolbarButton, +:root #scaleSelect, +:root .toolbarButtonWithContainer .editorParamsToolbar .editorParamsLabel, +:root #toolbarContainer #toolbarViewer input, +:root #editorUndoBar, +:root .dialogButton { + font-family: "Inter"; + font-size: 11; +} - .page { - border: 1px solid var(--tn-main-border-color); - box-shadow: 7px 7px 15px #00000010; +#secondaryToolbar, +#documentPropertiesDialog, +#findbar.doorHanger, +.doorHangerRight, +#printServiceDialog { + border: 1px solid var(--tn-dropdown-border-color); + border-radius: var(--tn-dropdown-border-radius); + background-color: var(--tn-menu-background-color); + padding: var(--tn-menu-padding-size); + box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--tn-dropdown-shadow-opacity)); + backdrop-filter: var(--tn-dropdown-backdrop-filter); +} + +.doorHangerRight, +.doorHangerLeft, +.doorHanger { + &::after, &::before { + display: none; } } +:root .toggle-button { + --toggle-border-color: transparent; + --toggle-background-color: var(--tn-input-background-color); + --toggle-background-color-hover: var(--toggle-background-color); + --toggle-dot-background-color: var(--tn-input-text-color); + --toggle-background-color-pressed: var(--tn-input-text-color); + --toggle-background-color-pressed-hover: var(--toggle-background-color-pressed); + cursor: pointer; +} + +:root .colorPicker { + --hover-outline-color: var(--tn-input-focus-outline-color); + --selected-outline-color: var(--tn-main-text-color); +} + +/* #endregion */ + /* #region Toolbar */ +.toolbarButton { + color: var(--menu-text-color); + + &:not(.labeled):active::before { + transform: scale(.85) !important; + } + + &:hover { + background: var(--tn-hover-item-background-color); + border-radius: 6px; + color: var(--tn-hover-item-text-color); + } +} + +#findbar { + padding: unset; +} + +#scaleSelectContainer { + --dropdown-btn-bg-color: transparent; + --button-hover-color: var(--tn-hover-item-background-color); + border-radius: 6px; + + select:focus { + background: var(--tn-main-background-color); + } +} + +/* Toolbar editor dropdowns */ +:root .editorParamsToolbar:not(.menu), +:root #highlightParamsToolbarContainer { + padding: 10px 16px; +} + +/* Toolbar dropdowns */ +:root .editorParamsToolbar { + .menu { + padding: 8px; + } + + .editorParamsToolbarContainer { + padding: 0; + } +} + +/* Overflow menu */ +#secondaryToolbar { + --toolbar-icon-bg-color: var(--tn-menu-item-icon-color); + --toolbar-icon-hover-bg-color: var(--tn-menu-item-icon-color); + --toggled-btn-bg-color: transparent; + --toggled-btn-color: currentColor; + --doorhanger-icon-opacity: 1; + padding: var(--tn-menu-padding-size); +} + +/* Horizontal menu dividers */ +:root #highlightParamsToolbarContainer #editorHighlightVisibility .divider, +:root .horizontalToolbarSeparator { + position: relative; + overflow: visible; + background: unset; + border: none; + + &:before { + content: ""; + position: absolute; + left: 0; + right: 0; + border-top: 1px solid var(--tn-main-border-color); + } +} + +/* Radio menu items */ +#cursorToolButtons .toolbarButton, +#scrollModeButtons .toolbarButton, +#spreadModeButtons .toolbarButton { + --toggled-hover-active-btn-color: var(--tn-hover-item-background-color); + --toggled-btn-color: var(--tn-menu-item-icon-color); + position: relative; + + &::after { + display: block; + content: ""; + position: absolute; + right: 0; + width: 2em; + height: 100%; + /* https://pictogrammers.com/library/mdi/icon/radiobox-blank/ */ + mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3eradiobox-blank%3c/title%3e%3cpath d='M12%2c20A8%2c8 0 0%2c1 4%2c12A8%2c8 0 0%2c1 12%2c4A8%2c8 0 0%2c1 20%2c12A8%2c8 0 0%2c1 12%2c20M12%2c2A10%2c10 0 0%2c0 2%2c12A10%2c10 0 0%2c0 12%2c22A10%2c10 0 0%2c0 22%2c12A10%2c10 0 0%2c0 12%2c2Z' /%3e%3c/svg%3e"); + mask-size: 16px; + mask-repeat: no-repeat; + mask-position: center center; + background-color: var(--tn-main-text-color); + } + + &.toggled::after { + /* https://pictogrammers.com/library/mdi/icon/radiobox-marked/ */ + mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3eradiobox-marked%3c/title%3e%3cpath d='M12%2c20A8%2c8 0 0%2c1 4%2c12A8%2c8 0 0%2c1 12%2c4A8%2c8 0 0%2c1 20%2c12A8%2c8 0 0%2c1 12%2c20M12%2c2A10%2c10 0 0%2c0 2%2c12A10%2c10 0 0%2c0 12%2c22A10%2c10 0 0%2c0 22%2c12A10%2c10 0 0%2c0 12%2c2M12%2c7A5%2c5 0 0%2c0 7%2c12A5%2c5 0 0%2c0 12%2c17A5%2c5 0 0%2c0 17%2c12A5%2c5 0 0%2c0 12%2c7Z' /%3e%3c/svg%3e"); + } +} + /* Permanently removed buttons */ #viewsManagerToggleButton, #downloadButton, @@ -43,10 +187,51 @@ /* #region Properties Dialog */ -/* Hide irrelevant properties */ -#documentPropertiesDialog > .row:has(#fileNameField), -#documentPropertiesDialog > .row:has(#linearizedField) { - display: none; +#documentPropertiesDialog { + --separator-color: transparent; + + user-select: none; + padding: 1em; + + .row { + line-height: 1.5; + + > span { + font-weight: bold; + opacity: .5; + } + + > p { + user-select: all; + } + } + + /* Hide irrelevant properties */ + > .row:has(#fileNameField), + > .row:has(#linearizedField) { + display: none; + } } /* #endregion */ + +/* #region Viewer Area */ + +.pdfViewer { + .page, + .page > .canvasWrapper, + .page > .canvasWrapper > canvas { + border-radius: 6px; + } + + .page { + border: 1px solid var(--tn-main-border-color); + box-shadow: 7px 7px 15px #00000010; + } +} + +#viewsManager { + display: none; +} + +/* #endregion */ \ No newline at end of file From 945b00030ba79ce8f8d953dadba82cbdfad221dd Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 27 Feb 2026 22:37:07 +0200 Subject: [PATCH 14/15] style/pdf viewer: restyle UI --- packages/pdfjs-viewer/src/custom.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 441fc049c0..606afa4ac7 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -4,6 +4,7 @@ --main-color: var(--tn-main-text-color); --body-bg-color: transparent; --toolbar-border-color: var(--tn-main-border-color); + --toolbar-icon-bg-color: var(--tn-main-text-color); --toolbar-bg-color: transparent; --toolbar-icon-opacity: 1; --toggled-btn-bg-color: var(--tn-hover-item-background-color); @@ -26,7 +27,6 @@ :root #editorUndoBar, :root .dialogButton { font-family: "Inter"; - font-size: 11; } #secondaryToolbar, @@ -70,8 +70,6 @@ /* #region Toolbar */ .toolbarButton { - color: var(--menu-text-color); - &:not(.labeled):active::before { transform: scale(.85) !important; } @@ -81,10 +79,13 @@ border-radius: 6px; color: var(--tn-hover-item-text-color); } + + &.toggled::before { + color: var(--tn-menu-item-icon-color); + } } #findbar { - padding: unset; } #scaleSelectContainer { @@ -115,13 +116,19 @@ } /* Overflow menu */ -#secondaryToolbar { +:root #secondaryToolbar { --toolbar-icon-bg-color: var(--tn-menu-item-icon-color); --toolbar-icon-hover-bg-color: var(--tn-menu-item-icon-color); --toggled-btn-bg-color: transparent; --toggled-btn-color: currentColor; --doorhanger-icon-opacity: 1; padding: var(--tn-menu-padding-size); + + .toolbarButton.labeled { + color: var(--tn-menu-text-color); + + font-size: 13px; + } } /* Horizontal menu dividers */ @@ -146,7 +153,6 @@ #scrollModeButtons .toolbarButton, #spreadModeButtons .toolbarButton { --toggled-hover-active-btn-color: var(--tn-hover-item-background-color); - --toggled-btn-color: var(--tn-menu-item-icon-color); position: relative; &::after { From 676dea33e1d14c11647fedc79790c1c807045766 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 27 Feb 2026 22:45:52 +0200 Subject: [PATCH 15/15] client: fix different issues --- apps/client/src/stylesheets/theme-next/shell.css | 2 +- apps/client/src/widgets/launch_bar/CalendarWidget.css | 1 - apps/client/src/widgets/type_widgets/file/PdfViewer.tsx | 5 ++--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index ba6f5d95b5..4ef72ddf57 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -823,7 +823,7 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i } #left-pane span.fancytree-node.fancytree-active .tree-item-button:hover, -#left-pane span.fancytree-node.fancytree-active.fancy-tree-selected .fancytree-custom-icon:hover { +#left-pane span.fancytree-node.fancytree-active.fancytree-selected .fancytree-custom-icon:hover { box-shadow: var(--left-pane-item-selected-action-button-hover-shadow); } diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.css b/apps/client/src/widgets/launch_bar/CalendarWidget.css index 73ecaccf32..d6b9d22645 100644 --- a/apps/client/src/widgets/launch_bar/CalendarWidget.css +++ b/apps/client/src/widgets/launch_bar/CalendarWidget.css @@ -65,7 +65,6 @@ border: 0; border-inline-start: unset; background-color: var(--menu-background-color); - font-weight: 400; outline: 0; font-weight: 300; font-size: 1.4em; diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx index 6ba24ef812..3d39135c19 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -24,7 +24,6 @@ const VARIABLE_WHITELIST = new Set([ "dropdown-border-color", "dropdown-shadow-opacity", "menu-padding-size", - "dropdown-backdrop-filter", "menu-text-color", "hover-item-background-color", "hover-item-text-color", @@ -77,7 +76,7 @@ function useStyleInjection(iframeRef: RefObject) { const style = doc.createElement('style'); style.id = 'client-root-vars'; - style.textContent = cssVarsToString(getRootCssVariables());; + style.textContent = cssVarsToString(getRootCssVariables()); styleRef.current = style; doc.head.appendChild(style); @@ -128,4 +127,4 @@ function injectFont(font: FontDefinition) { src: url('${font.url}'); } `; -}; \ No newline at end of file +} \ No newline at end of file