style/pdf viewer: tweak the find bar

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<HTMLAttributes<HTMLIFrameElement>, "tabIndex"> {

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 {