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