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 {