style/pdf viewer: restyle text boxes

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"> {

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 */