From 08e69d405c4ab6d13de8853c35fdd476d5aac301 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 07:38:49 +0200 Subject: [PATCH 1/9] style/pdf viewer: tweak the find bar --- .../widgets/type_widgets/file/PdfViewer.tsx | 4 +++- packages/pdfjs-viewer/src/custom.css | 22 +++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx index 3d39135c19..c56f00d03f 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -30,7 +30,9 @@ const VARIABLE_WHITELIST = new Set([ "menu-item-icon-color", "input-focus-outline-color", "input-background-color", - "input-text-color" + "input-text-color", + "ck-editor-toolbar-button-on-background", + "ck-editor-toolbar-button-on-color", ]); interface PdfViewerProps extends Pick, "tabIndex"> { diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 606afa4ac7..0f74f03716 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -33,7 +33,8 @@ #documentPropertiesDialog, #findbar.doorHanger, .doorHangerRight, -#printServiceDialog { +#printServiceDialog, +:root :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar { border: 1px solid var(--tn-dropdown-border-color); border-radius: var(--tn-dropdown-border-radius); background-color: var(--tn-menu-background-color); @@ -85,7 +86,24 @@ } } -#findbar { +:root #findbar { + --toolbar-height: 40px; + padding: 0 4px; + + .toggleButton.toolbarLabel, + .toolbarButton { + height: calc(var(--toolbar-height) - 12px); + padding-inline: 10px; + border-radius: 6px; + aspect-ratio: unset; + } + + .toggleButton.toolbarLabel { + --main-color: var(--tn-ck-color-text); + --button-hover-color: var(--tn-hover-item-background-color); + --toggled-btn-bg-color: var(--tn-ck-editor-toolbar-button-on-background); + --toggled-btn-color: var(--tn-ck-editor-toolbar-button-on-color); + } } #scaleSelectContainer { From 2a875f838601f70f555fcfc443e4098980a1780e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 08:03:27 +0200 Subject: [PATCH 2/9] style/pdf viewer: restyle text boxes --- .../widgets/type_widgets/file/PdfViewer.tsx | 10 ++++++ packages/pdfjs-viewer/src/custom.css | 31 +++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx index c56f00d03f..bb9b97494d 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -33,6 +33,16 @@ const VARIABLE_WHITELIST = new Set([ "input-text-color", "ck-editor-toolbar-button-on-background", "ck-editor-toolbar-button-on-color", + "input-text-color", + "input-background-color", + "input-hover-background", + "input-hover-color", + "input-focus-background", + "input-focus-color", + "input-focus-outline-color", + "input-placeholder-color", + "input-selection-background", + "input-selection-text-color" ]); interface PdfViewerProps extends Pick, "tabIndex"> { diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 0f74f03716..42453d6eb9 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -66,6 +66,37 @@ --selected-outline-color: var(--tn-main-text-color); } +/* Text boxes */ +input { + --field-border-color: transparent; + --field-bg-color: var(--tn-input-background-color); + --field-color: var(--tn-input-text-color); + --input-horizontal-padding: 8px; + + border-radius: 4px !important; + + &:hover { + --field-bg-color: var(--tn-input-hover-background); + --field-color: var(--tn-input-hover-color); + } + + &:focus { + border-color: transparent !important; + outline: 2px solid var(--tn-input-focus-outline-color); + --field-bg-color: var(--tn-input-focus-background); + --field-color: var(--tn-input-focus-color); + } + + &::placeholder { + color: var(--tn-input-placeholder-color) + } + + &::selection { + background-color: var(--tn-input-selection-background); + color: var(--tn-input-selection-text-color); + } +} + /* #endregion */ /* #region Toolbar */ From 79439f6435baa7c2c732a9998aab4fdfe19b7f40 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 08:28:37 +0200 Subject: [PATCH 3/9] style/pdf viewer: tweak the find bar --- .../widgets/type_widgets/file/PdfViewer.tsx | 3 ++- packages/pdfjs-viewer/src/custom.css | 27 +++++++++++++++++++ 2 files changed, 29 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 bb9b97494d..8f3516c4cd 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -42,7 +42,8 @@ const VARIABLE_WHITELIST = new Set([ "input-focus-outline-color", "input-placeholder-color", "input-selection-background", - "input-selection-text-color" + "input-selection-text-color", + "dropdown-item-icon-destructive-color" ]); interface PdfViewerProps extends Pick, "tabIndex"> { diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 42453d6eb9..005c7c4c20 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -119,8 +119,21 @@ input { :root #findbar { --toolbar-height: 40px; + padding: 0 4px; + /* Search input */ + .loadingInput { + margin-inline-end: 8px; + } + + /* Search input - no results */ + #findInputContainer #findInput[data-status="notFound"] { + --tn-input-focus-outline-color: var(--tn-dropdown-item-icon-destructive-color); + background: inherit; + } + + /* Option buttons */ .toggleButton.toolbarLabel, .toolbarButton { height: calc(var(--toolbar-height) - 12px); @@ -129,12 +142,26 @@ input { aspect-ratio: unset; } + /* Toggable option buttons */ .toggleButton.toolbarLabel { --main-color: var(--tn-ck-color-text); --button-hover-color: var(--tn-hover-item-background-color); --toggled-btn-bg-color: var(--tn-ck-editor-toolbar-button-on-background); --toggled-btn-color: var(--tn-ck-editor-toolbar-button-on-color); } + + /* Search status text */ + #findbarMessageContainer #findResultsCount, + #findMsg { + background-color: transparent; + color: var(--tn-main-text-color); + opacity: .5; + }; + + /* Not found message */ + #findMsg[data-status="notFound"] { + color: var(--tn-dropdown-item-icon-destructive-color); + } } #scaleSelectContainer { From bf748cee242d0383c4dc63dcc7c320805c850555 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 08:44:50 +0200 Subject: [PATCH 4/9] style/pdf viewer: tweak toolbar --- packages/pdfjs-viewer/src/custom.css | 32 ++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 005c7c4c20..6243961fef 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -101,25 +101,49 @@ input { /* #region Toolbar */ +#toolbarContainer { + padding-inline: 12px; +} + .toolbarButton { + border-radius: 6px; + &: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); + &.toggled { + /* Icon-only button */ + &:not(.labeled) { + background: var(--tn-ck-editor-toolbar-button-on-background); + + &&::before { + background: var(--tn-ck-editor-toolbar-button-on-color); + } + } + + &::before { + color: var(--tn-menu-item-icon-color); + } } } +.verticalToolbarSeparator, +.splitToolbarButtonSeparator { + --separator-color: transparent; +} + +.verticalToolbarSeparator { + margin-inline: 4px; +} :root #findbar { --toolbar-height: 40px; - + padding: 0 4px; /* Search input */ From 5f7c26eed33d49285cdef8c20622cfb77a2a4400 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 08:56:42 +0200 Subject: [PATCH 5/9] style/pdf viewer: tweak document properties dialog button --- packages/pdfjs-viewer/src/custom.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 6243961fef..8741f9d878 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -317,6 +317,12 @@ input { > .row:has(#linearizedField) { display: none; } + + #documentPropertiesClose { + /* TODO: restyle */ + border-radius: 6px; + cursor: pointer; + } } /* #endregion */ From d1fac8f0e2841224249b95f53dae13c869cfaad8 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 10:18:25 +0200 Subject: [PATCH 6/9] client/pdf viewer: remove the CSS variable whitelist --- .../widgets/type_widgets/file/PdfViewer.tsx | 36 +------------------ 1 file changed, 1 insertion(+), 35 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx index 8f3516c4cd..8561b2c468 100644 --- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx +++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx @@ -12,40 +12,6 @@ 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", - "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", - "ck-editor-toolbar-button-on-background", - "ck-editor-toolbar-button-on-color", - "input-text-color", - "input-background-color", - "input-hover-background", - "input-hover-color", - "input-focus-background", - "input-focus-color", - "input-focus-outline-color", - "input-placeholder-color", - "input-selection-background", - "input-selection-text-color", - "dropdown-item-icon-destructive-color" -]); - interface PdfViewerProps extends Pick, "tabIndex"> { iframeRef?: RefObject; /** Note: URLs are relative to /pdfjs/web. */ @@ -119,7 +85,7 @@ function getRootCssVariables() { for (let i = 0; i < styles.length; i++) { const prop = styles[i]; - if (prop.startsWith('--') && VARIABLE_WHITELIST.has(prop.substring(2))) { + if (prop.startsWith('--')) { vars[`--tn-${prop.substring(2)}`] = styles.getPropertyValue(prop).trim(); } } From d70f5d3ed68dbc5f1aec0ff9c69414757ec69025 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 13:33:48 +0200 Subject: [PATCH 7/9] style/pdf viewer: several tweaks --- packages/pdfjs-viewer/src/custom.css | 62 ++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 3 deletions(-) diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 8741f9d878..7e55ab50f7 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -3,6 +3,8 @@ :root { --main-color: var(--tn-main-text-color); --body-bg-color: transparent; + --outline-color: var(--tn-input-focus-outline-color); + --focus-ring-color: var(--tn-input-focus-outline-color); --toolbar-border-color: var(--tn-main-border-color); --toolbar-icon-bg-color: var(--tn-main-text-color); --toolbar-bg-color: transparent; @@ -34,7 +36,9 @@ #findbar.doorHanger, .doorHangerRight, #printServiceDialog, -:root :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar { +:root :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar, +#viewerContainer .editToolbar .colorPicker .dropdown, +#editorUndoBar { border: 1px solid var(--tn-dropdown-border-color); border-radius: var(--tn-dropdown-border-radius); background-color: var(--tn-menu-background-color); @@ -64,6 +68,8 @@ :root .colorPicker { --hover-outline-color: var(--tn-input-focus-outline-color); --selected-outline-color: var(--tn-main-text-color); + + outline-offset: 3px; } /* Text boxes */ @@ -74,6 +80,7 @@ input { --input-horizontal-padding: 8px; border-radius: 4px !important; + font-size: .8rem !important; &:hover { --field-bg-color: var(--tn-input-hover-background); @@ -168,7 +175,7 @@ input { /* Toggable option buttons */ .toggleButton.toolbarLabel { - --main-color: var(--tn-ck-color-text); + --main-color: var(--tn-main-text-color); --button-hover-color: var(--tn-hover-item-background-color); --toggled-btn-bg-color: var(--tn-ck-editor-toolbar-button-on-background); --toggled-btn-color: var(--tn-ck-editor-toolbar-button-on-color); @@ -223,10 +230,13 @@ input { --toggled-btn-color: currentColor; --doorhanger-icon-opacity: 1; padding: var(--tn-menu-padding-size); + width: auto; + min-width: 220px; + max-width: 400px; .toolbarButton.labeled { color: var(--tn-menu-text-color); - + padding-inline-end: 12px; font-size: 13px; } } @@ -346,4 +356,50 @@ input { display: none; } +:root :is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar { + --editor-toolbar-hover-bg-color: var(--tn-hover-item-background-color); + --editor-toolbar-hover-fg-color: var(--tn-hover-item-text-color); + --editor-toolbar-hover-outline: transparent; + + padding: 4px; + + .divider { + display: none; + } + + .buttons { + gap: 2px; + + > * { + border-radius: 6px !important; + } + + .deleteButton::before { + background-color: var(--tn-dropdown-item-icon-destructive-color); + } + } +} + +#viewerContainer .editToolbar .colorPicker .dropdown { + padding: 12px 6px; + + &::before { + display: block; + position: absolute; + content: ""; + inset: 0; + border: 1px solid var(--tn-dropdown-border-color); + border-radius: var(--tn-dropdown-border-radius); + backdrop-filter: var(--tn-dropdown-backdrop-filter); + z-index: -1; + } +} + +#editorUndoBar { + --message-bar-fg-color: var(--tn-main-text-color); + --message-bar-icon-color: var(--tn-menu-item-icon-color); + --undo-button-border: transparent; + padding-inline: 20px; +} + /* #endregion */ \ No newline at end of file From b1b9a4461e520842ac9d74b94a776f70756b9753 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 14:45:35 +0200 Subject: [PATCH 8/9] style/pdf viewer: several tweaks --- packages/pdfjs-viewer/src/custom.css | 40 +++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 7e55ab50f7..425b9aa45c 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -3,7 +3,7 @@ :root { --main-color: var(--tn-main-text-color); --body-bg-color: transparent; - --outline-color: var(--tn-input-focus-outline-color); + --outline-color: gray; --focus-ring-color: var(--tn-input-focus-outline-color); --toolbar-border-color: var(--tn-main-border-color); --toolbar-icon-bg-color: var(--tn-main-text-color); @@ -28,7 +28,7 @@ :root #toolbarContainer #toolbarViewer input, :root #editorUndoBar, :root .dialogButton { - font-family: "Inter"; + font-family: Inter, sans-serif; } #secondaryToolbar, @@ -73,14 +73,15 @@ } /* Text boxes */ -input { +input:not([type]), +input[type="number"] { --field-border-color: transparent; --field-bg-color: var(--tn-input-background-color); --field-color: var(--tn-input-text-color); --input-horizontal-padding: 8px; border-radius: 4px !important; - font-size: .8rem !important; + font-size: .85rem !important; &:hover { --field-bg-color: var(--tn-input-hover-background); @@ -104,6 +105,22 @@ input { } } +input[type="color"] { + border: 0; + outline: 0; + background: transparent; + border-radius: 4px; + + &:hover { + opacity: .75; + } + + &:focus { + outline: 2px solid var(--tn-input-focus-outline-color); + outline-offset: 2px; + } +} + /* #endregion */ /* #region Toolbar */ @@ -192,17 +209,27 @@ input { /* Not found message */ #findMsg[data-status="notFound"] { color: var(--tn-dropdown-item-icon-destructive-color); + opacity: 1; } } +#toolbarContainer #toolbarViewer #pageNumber { + font-size: 12px; + font-weight: 600; +} + #scaleSelectContainer { --dropdown-btn-bg-color: transparent; - --button-hover-color: var(--tn-hover-item-background-color); + --button-hover-color: transparent; border-radius: 6px; select:focus { background: var(--tn-main-background-color); } + + &:hover { + background-color: var(--tn-hover-item-background-color); + } } /* Toolbar editor dropdowns */ @@ -237,7 +264,8 @@ input { .toolbarButton.labeled { color: var(--tn-menu-text-color); padding-inline-end: 12px; - font-size: 13px; + padding-block: 6px; + font-size: .9em; } } From 326adc019645c26c18b40f9e81cb510165d7de3e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Sat, 28 Feb 2026 16:35:51 +0200 Subject: [PATCH 9/9] style/pdf viewer: fixes --- packages/pdfjs-viewer/src/custom.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 425b9aa45c..3bfca86f0f 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -17,6 +17,7 @@ --spreadHorizontalWrapped-margin-LR: 4px; color-scheme: var(--tn-theme-style); + font-size: 16px; } :root button, @@ -125,6 +126,12 @@ input[type="color"] { /* #region Toolbar */ +#toolbarContainer select.scaleSelect, +#toolbarContainer input.pageNumber { + height: calc(var(--toolbar-height) - 8px); + padding-block: 0; +} + #toolbarContainer { padding-inline: 12px; } @@ -223,11 +230,8 @@ input[type="color"] { --button-hover-color: transparent; border-radius: 6px; - select:focus { - background: var(--tn-main-background-color); - } - - &:hover { + &:hover, + &:focus-within{ background-color: var(--tn-hover-item-background-color); } } @@ -265,7 +269,7 @@ input[type="color"] { color: var(--tn-menu-text-color); padding-inline-end: 12px; padding-block: 6px; - font-size: .9em; + font-size: .9rem; } }