UI: general improvements (#8837)

2026-02-28 17:43:36 +01:00 · 2026-02-27 22:47:22 +02:00 · 2026-02-27 22:47:22 +02:00 · d56f106964
commit d56f106964
parent 680cd8118f 676dea33e1
14 changed files with 365 additions and 57 deletions
--- 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;
 }

--- 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);
 }

@ -689,9 +683,10 @@ 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 !important;
+    background: transparent;
    color: var(--custom-color, var(--left-pane-item-selected-color));
 }

@ -704,6 +699,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: "";
@ -718,6 +721,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;
@ -780,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%;
@ -791,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:
@ -799,10 +822,41 @@ 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.fancytree-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 {
+    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;
--- 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));
 }
@ -185,7 +197,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,20 +207,15 @@ 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 {
    font-family: "boxicons";
-    content: "\eb43";
-    border: 1px solid var(--main-border-color);
+    content: "\ef05";
+    border: 1px solid var(--main-text-color);
    border-radius: 3px;
 }

--- 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;
--- 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 > * {
--- 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 {
--- 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,13 @@
    border: 0;
    border-inline-start: unset;
    background-color: var(--menu-background-color);
-    font-weight: bold;
    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 +87,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 {
--- a/apps/client/src/widgets/layout/NoteTitleActions.css
+++ b/apps/client/src/widgets/layout/NoteTitleActions.css
@ -4,10 +4,11 @@ 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;
+        width: 100%;
        max-width: var(--max-content-width);
        flex-direction: column;
        gap: 0.5em;
--- 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;
--- 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 {
--- 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;
+    }
 }
--- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
@ -1,13 +1,36 @@
 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"
+    "main-text-color",
+    "theme-style",
+    "menu-background-color",
+    "dropdown-backdrop-filter",
+    "dropdown-border-radius",
+    "dropdown-border-color",
+    "dropdown-shadow-opacity",
+    "menu-padding-size",
+    "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<HTMLAttributes<HTMLIFrameElement>, "tabIndex"> {
@ -55,8 +78,12 @@ function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>) {
        style.id = 'client-root-vars';
        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.
@ -92,3 +119,12 @@ function cssVarsToString(vars: Record<string, string>) {
        .map(([k, v]) => `  ${k}: ${v};`)
        .join('\n')}\n}`;
 }
+
+function injectFont(font: FontDefinition) {
+    return `
+        @font-face {
+            font-family: '${font.name}';
+            src: url('${font.url}');
+        }
+    `;
+}
--- 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;
+    }
 }
--- a/packages/pdfjs-viewer/src/custom.css
+++ b/packages/pdfjs-viewer/src/custom.css
@ -1,31 +1,181 @@
-: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-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);
+    --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";
+}

-    .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 {
+    &: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);
+    }
+
+    &.toggled::before {
+        color: var(--tn-menu-item-icon-color);
+    }
+}
+
+#findbar {
+}
+
+#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 */
+: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 */
+: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);
+    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 +193,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 */