From 2a875f838601f70f555fcfc443e4098980a1780e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sat, 28 Feb 2026 08:03:27 +0200
Subject: [PATCH] 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<HTMLAttributes<HTMLIFrameElement>, "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 */