@vitrosoftware/common-ui-ts 1.1.97 → 1.1.99

package/css/std/controls/pdf-viewer/viewer.css

@@ -819,25 +819,27 @@
 
 
 :root {
-    --outline-width: 2px;
-    --outline-color: blue;
-    --focus-outline: solid var(--outline-width) var(--outline-color);
-    --hover-outline: dashed var(--outline-width) var(--outline-color);
-    --freetext-line-height: 1.35;
-    --freetext-padding: 2px;
-    --resizer-size: 8px;
-    --resizer-shift: calc( 0px - var(--outline-width) - var(--resizer-size) / 2 - var(--outline-width) / 2 );
-    --resizer-color: white;
-    --editorFreeText-editing-cursor: text;
-    --editorInk-editing-cursor: url('img/cursor-editorInk.svg');
-    /*--editorInk-editing-cursor: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.0189877 13.6645L0.612989 10.4635C0.687989 10.0545 0.884989 9.6805 1.18099 9.3825L9.98199 0.5805C10.756 -0.1925 12.015 -0.1945 12.792 0.5805L14.42 2.2085C15.194 2.9835 15.194 4.2435 14.42 5.0185L5.61599 13.8215C5.31999 14.1165 4.94599 14.3125 4.53799 14.3875L1.33599 14.9815C1.26599 14.9935 1.19799 15.0005 1.12999 15.0005C0.832989 15.0005 0.544988 14.8835 0.330988 14.6695C0.0679874 14.4055 -0.0490122 14.0305 0.0189877 13.6645Z' fill='white'/%3E%3Cpath d='M0.0189877 13.6645L0.612989 10.4635C0.687989 10.0545 0.884989 9.6805 1.18099 9.3825L9.98199 0.5805C10.756 -0.1925 12.015 -0.1945 12.792 0.5805L14.42 2.2085C15.194 2.9835 15.194 4.2435 14.42 5.0185L5.61599 13.8215C5.31999 14.1165 4.94599 14.3125 4.53799 14.3875L1.33599 14.9815C1.26599 14.9935 1.19799 15.0005 1.12999 15.0005C0.832989 15.0005 0.544988 14.8835 0.330988 14.6695C0.0679874 14.4055 -0.0490122 14.0305 0.0189877 13.6645ZM12.472 5.1965L13.632 4.0365L13.631 3.1885L11.811 1.3675L10.963 1.3685L9.80299 2.5285L12.472 5.1965ZM4.31099 13.1585C4.47099 13.1285 4.61799 13.0515 4.73399 12.9345L11.587 6.0815L8.91899 3.4135L2.06599 10.2655C1.94899 10.3835 1.87199 10.5305 1.84099 10.6915L1.36699 13.2485L1.75199 13.6335L4.31099 13.1585Z' fill='black'/%3E%3C/svg%3E%0A") 0 16, pointer;*/
+  --outline-width: 2px;
+  --outline-color: blue;
+  --focus-outline: solid var(--outline-width) var(--outline-color);
+  --hover-outline: dashed var(--outline-width) var(--outline-color);
+  --freetext-line-height: 1.35;
+  --freetext-padding: 2px;
+  --resizer-size: 8px;
+  --resizer-shift: calc(
+    0px - var(--outline-width) - var(--resizer-size) / 2 - var(--outline-width) /
+      2
+  );
+  --resizer-color: white;
+  --editorFreeText-editing-cursor: text;
+  --editorInk-editing-cursor: url(img/cursor-editorInk.svg) 0 16, pointer;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx) {
-    :root {
-        --editorFreeText-editing-cursor: url('img/cursor-editorFreeText.svg');
-        /*--editorFreeText-editing-cursor: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.75H12.5V2.25V1V0.5H12H10.358C9.91165 0.5 9.47731 0.625661 9.09989 0.860442L9.09886 0.861087L8 1.54837L6.89997 0.860979L6.89911 0.860443C6.5218 0.625734 6.08748 0.5 5.642 0.5H4H3.5V1V2.25V2.75H4H5.642C5.66478 2.75 5.6885 2.75641 5.71008 2.76968C5.71023 2.76977 5.71038 2.76986 5.71053 2.76995L6.817 3.461C6.81704 3.46103 6.81709 3.46105 6.81713 3.46108C6.81713 3.46108 6.81713 3.46108 6.81714 3.46109C6.8552 3.48494 6.876 3.52285 6.876 3.567V8V12.433C6.876 12.4771 6.85523 12.515 6.81722 12.5389C6.81715 12.5389 6.81707 12.539 6.817 12.539L5.70953 13.23C5.70941 13.2301 5.70929 13.2302 5.70917 13.2303C5.68723 13.2438 5.6644 13.25 5.641 13.25H4H3.5V13.75V15V15.5H4H5.642C6.08835 15.5 6.52269 15.3743 6.90011 15.1396L6.90086 15.1391L8 14.4526L9.10003 15.14L9.10089 15.1406C9.47831 15.3753 9.91265 15.501 10.359 15.501H12H12.5V15.001V13.751V13.251H12H10.358C10.3352 13.251 10.3115 13.2446 10.2899 13.2313C10.2897 13.2312 10.2896 13.2311 10.2895 13.231L9.183 12.54C9.18298 12.54 9.18295 12.54 9.18293 12.54C9.18291 12.5399 9.18288 12.5399 9.18286 12.5399C9.14615 12.5169 9.125 12.4797 9.125 12.434V8V3.567C9.125 3.52266 9.14603 3.48441 9.18364 3.4606C9.18377 3.46052 9.1839 3.46043 9.18404 3.46035L10.2895 2.76995C10.2896 2.76985 10.2898 2.76975 10.2899 2.76966C10.3119 2.75619 10.3346 2.75 10.358 2.75H12Z' fill='black' stroke='white'/%3E%3C/svg%3E%0A") text;*/
-    }
+  :root {
+    --editorFreeText-editing-cursor: url(img/cursor-editorFreeText.svg) 0 16,
+      text;
+  }
 }
 
 @media screen and (forced-colors: active) {
@@ -1252,97 +1254,104 @@
 }
 
 :root {
-    --dir-factor: 1;
-    --inline-start: left;
-    --inline-end: right;
-    --sidebar-width: 200px;
-    --sidebar-transition-duration: 200ms;
-    --sidebar-transition-timing-function: ease;
-    --toolbar-icon-opacity: 0.7;
-    --doorhanger-icon-opacity: 0.9;
-    --main-color: rgba(12, 12, 13, 1);
-    --body-bg-color: rgba(212, 212, 215, 1);
-    --progressBar-color: rgba(10, 132, 255, 1);
-    --progressBar-bg-color: rgba(221, 221, 222, 1);
-    --progressBar-blend-color: rgba(116, 177, 239, 1);
-    --scrollbar-color: auto;
-    --scrollbar-bg-color: auto;
-    --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
-    --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
-    --sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
-    --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
-    --toolbar-bg-color: rgba(249, 249, 250, 1);
-    --toolbar-border-color: rgba(184, 184, 184, 1);
-    --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
-    --toolbar-border-bottom: none;
-    --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
-    --toolbarSidebar-border-bottom: none;
-    --button-hover-color: rgba(221, 222, 223, 1);
-    --toggled-btn-color: rgba(0, 0, 0, 1);
-    --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
-    --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
-    --toggled-hover-btn-outline: none;
-    --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
-    --dropdown-btn-border: none;
-    --separator-color: rgba(0, 0, 0, 0.3);
-    --field-color: rgba(6, 6, 6, 1);
-    --field-bg-color: rgba(255, 255, 255, 1);
-    --field-border-color: rgba(187, 187, 188, 1);
-    --treeitem-color: rgba(0, 0, 0, 0.8);
-    --treeitem-bg-color: rgba(0, 0, 0, 0.15);
-    --treeitem-hover-color: rgba(0, 0, 0, 0.9);
-    --treeitem-selected-color: rgba(0, 0, 0, 0.9);
-    --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
-    --thumbnail-hover-color: rgba(0, 0, 0, 0.1);
-    --thumbnail-selected-color: rgba(0, 0, 0, 0.2);
-    --doorhanger-bg-color: rgba(255, 255, 255, 1);
-    --doorhanger-border-color: rgba(12, 12, 13, 0.2);
-    --doorhanger-hover-color: rgba(12, 12, 13, 1);
-    --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
-    --doorhanger-separator-color: rgba(222, 222, 222, 1);
-    --dialog-button-border: none;
-    --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
-    --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
-    --loading-icon: url('img/loading.svg');
-    --treeitem-expanded-icon: url('img/treeitem-expanded.svg');
-    --treeitem-collapsed-icon: url('img/treeitem-collapsed.svg');
-    --toolbarButton-editorFreeText-icon: url('img/treeitem-collapsed.svg');
-    --toolbarButton-editorInk-icon: url('img/toolbarButton-editorInk.svg');
-    --toolbarButton-editorStamp-icon: url('img/toolbarButton-editorStamp.svg');
-    --toolbarButton-menuArrow-icon: url('img/toolbarButton-menuArrow.svg');
-    --toolbarButton-sidebarToggle-icon: url('img/toolbarButton-sidebarToggle.svg');
-    --toolbarButton-secondaryToolbarToggle-icon: url('img/toolbarButton-secondaryToolbarToggle.svg');
-    --toolbarButton-pageUp-icon: url('img/toolbarButton-pageUp.svg');
-    --toolbarButton-pageDown-icon: url('img/toolbarButton-pageDown.svg');
-    --toolbarButton-zoomOut-icon: url('img/toolbarButton-zoomOut.svg');
-    --toolbarButton-zoomIn-icon: url('img/toolbarButton-zoomIn.svg');
-    --toolbarButton-presentationMode-icon: url('img/toolbarButton-presentationMode.svg');
-    --toolbarButton-print-icon: url('img/toolbarButton-print.svg');
-    --toolbarButton-openFile-icon: url('img/toolbarButton-openFile.svg');
-    --toolbarButton-download-icon: url('img/toolbarButton-download.svg');
-    --toolbarButton-bookmark-icon: url('img/toolbarButton-bookmark.svg');
-    --toolbarButton-viewThumbnail-icon: url('img/toolbarButton-viewThumbnail.svg');
-    --toolbarButton-viewOutline-icon: url('img/toolbarButton-viewOutline.svg');
-    --toolbarButton-viewAttachments-icon: url('img/toolbarButton-viewAttachments.svg');
-    --toolbarButton-viewLayers-icon: url('img/toolbarButton-viewLayers.svg');
-    --toolbarButton-currentOutlineItem-icon: url('img/toolbarButton-currentOutlineItem.svg');
-    --toolbarButton-search-icon: url('img/toolbarButton-search.svg');
-    --findbarButton-previous-icon: url('img/findbarButton-previous.svg');
-    --findbarButton-next-icon: url('img/findbarButton-next.svg');
-    --secondaryToolbarButton-firstPage-icon: url('img/secondaryToolbarButton-firstPage.svg');
-    --secondaryToolbarButton-lastPage-icon: url('img/secondaryToolbarButton-lastPage.svg');
-    --secondaryToolbarButton-rotateCcw-icon: url('img/secondaryToolbarButton-rotateCcw.svg');
-    --secondaryToolbarButton-rotateCw-icon: url('img/secondaryToolbarButton-rotateCw.svg');
-    --secondaryToolbarButton-selectTool-icon: url('img/secondaryToolbarButton-selectTool.svg');
-    --secondaryToolbarButton-handTool-icon: url('img/secondaryToolbarButton-handTool.svg');
-    --secondaryToolbarButton-scrollPage-icon: url('img/secondaryToolbarButton-scrollPage.svg');
-    --secondaryToolbarButton-scrollVertical-icon: url('img/secondaryToolbarButton-scrollVertical.svg');
-    --secondaryToolbarButton-scrollHorizontal-icon: url('img/secondaryToolbarButton-scrollHorizontal.svg');
-    --secondaryToolbarButton-scrollWrapped-icon: url('img/secondaryToolbarButton-scrollWrapped.svg');
-    --secondaryToolbarButton-spreadNone-icon: url('img/secondaryToolbarButton-spreadNone.svg');
-    --secondaryToolbarButton-spreadOdd-icon: url('img/secondaryToolbarButton-spreadOdd.svg');
-    --secondaryToolbarButton-spreadEven-icon: url('img/secondaryToolbarButton-spreadEven.svg');
-    --secondaryToolbarButton-documentProperties-icon: url('img/secondaryToolbarButton-documentProperties.svg');
+  --dir-factor: 1;
+  --inline-start: left;
+  --inline-end: right;
+
+  --sidebar-width: 200px;
+  --sidebar-transition-duration: 200ms;
+  --sidebar-transition-timing-function: ease;
+
+  --toolbar-icon-opacity: 0.7;
+  --doorhanger-icon-opacity: 0.9;
+
+  --main-color: rgba(12, 12, 13, 1);
+  --body-bg-color: rgba(212, 212, 215, 1);
+  --progressBar-color: rgba(10, 132, 255, 1);
+  --progressBar-bg-color: rgba(221, 221, 222, 1);
+  --progressBar-blend-color: rgba(116, 177, 239, 1);
+  --scrollbar-color: auto;
+  --scrollbar-bg-color: auto;
+  --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
+  --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
+
+  --sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
+  --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
+  --toolbar-bg-color: rgba(249, 249, 250, 1);
+  --toolbar-border-color: rgba(184, 184, 184, 1);
+  --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
+  --toolbar-border-bottom: none;
+  --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0
+      rgba(0, 0, 0, 0.25),
+    0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
+  --toolbarSidebar-border-bottom: none;
+  --button-hover-color: rgba(221, 222, 223, 1);
+  --toggled-btn-color: rgba(0, 0, 0, 1);
+  --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
+  --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
+  --toggled-hover-btn-outline: none;
+  --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
+  --dropdown-btn-border: none;
+  --separator-color: rgba(0, 0, 0, 0.3);
+  --field-color: rgba(6, 6, 6, 1);
+  --field-bg-color: rgba(255, 255, 255, 1);
+  --field-border-color: rgba(187, 187, 188, 1);
+  --treeitem-color: rgba(0, 0, 0, 0.8);
+  --treeitem-bg-color: rgba(0, 0, 0, 0.15);
+  --treeitem-hover-color: rgba(0, 0, 0, 0.9);
+  --treeitem-selected-color: rgba(0, 0, 0, 0.9);
+  --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
+  --thumbnail-hover-color: rgba(0, 0, 0, 0.1);
+  --thumbnail-selected-color: rgba(0, 0, 0, 0.2);
+  --doorhanger-bg-color: rgba(255, 255, 255, 1);
+  --doorhanger-border-color: rgba(12, 12, 13, 0.2);
+  --doorhanger-hover-color: rgba(12, 12, 13, 1);
+  --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
+  --doorhanger-separator-color: rgba(222, 222, 222, 1);
+  --dialog-button-border: none;
+  --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
+  --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
+
+  --loading-icon: url(img/loading.svg);
+  --treeitem-expanded-icon: url(img/treeitem-expanded.svg);
+  --treeitem-collapsed-icon: url(img/treeitem-collapsed.svg);
+  --toolbarButton-editorFreeText-icon: url(img/toolbarButton-editorFreeText.svg);
+  --toolbarButton-editorInk-icon: url(img/toolbarButton-editorInk.svg);
+  --toolbarButton-editorStamp-icon: url(img/toolbarButton-editorStamp.svg);
+  --toolbarButton-menuArrow-icon: url(img/toolbarButton-menuArrow.svg);
+  --toolbarButton-sidebarToggle-icon: url(img/toolbarButton-sidebarToggle.svg);
+  --toolbarButton-secondaryToolbarToggle-icon: url(img/toolbarButton-secondaryToolbarToggle.svg);
+  --toolbarButton-pageUp-icon: url(img/toolbarButton-pageUp.svg);
+  --toolbarButton-pageDown-icon: url(img/toolbarButton-pageDown.svg);
+  --toolbarButton-zoomOut-icon: url(img/toolbarButton-zoomOut.svg);
+  --toolbarButton-zoomIn-icon: url(img/toolbarButton-zoomIn.svg);
+  --toolbarButton-presentationMode-icon: url(img/toolbarButton-presentationMode.svg);
+  --toolbarButton-print-icon: url(img/toolbarButton-print.svg);
+  --toolbarButton-openFile-icon: url(img/toolbarButton-openFile.svg);
+  --toolbarButton-download-icon: url(img/toolbarButton-download.svg);
+  --toolbarButton-bookmark-icon: url(img/toolbarButton-bookmark.svg);
+  --toolbarButton-viewThumbnail-icon: url(img/toolbarButton-viewThumbnail.svg);
+  --toolbarButton-viewOutline-icon: url(img/toolbarButton-viewOutline.svg);
+  --toolbarButton-viewAttachments-icon: url(img/toolbarButton-viewAttachments.svg);
+  --toolbarButton-viewLayers-icon: url(img/toolbarButton-viewLayers.svg);
+  --toolbarButton-currentOutlineItem-icon: url(img/toolbarButton-currentOutlineItem.svg);
+  --toolbarButton-search-icon: url(img/toolbarButton-search.svg);
+  --findbarButton-previous-icon: url(img/findbarButton-previous.svg);
+  --findbarButton-next-icon: url(img/findbarButton-next.svg);
+  --secondaryToolbarButton-firstPage-icon: url(img/secondaryToolbarButton-firstPage.svg);
+  --secondaryToolbarButton-lastPage-icon: url(img/secondaryToolbarButton-lastPage.svg);
+  --secondaryToolbarButton-rotateCcw-icon: url(img/secondaryToolbarButton-rotateCcw.svg);
+  --secondaryToolbarButton-rotateCw-icon: url(img/secondaryToolbarButton-rotateCw.svg);
+  --secondaryToolbarButton-selectTool-icon: url(img/secondaryToolbarButton-selectTool.svg);
+  --secondaryToolbarButton-handTool-icon: url(img/secondaryToolbarButton-handTool.svg);
+  --secondaryToolbarButton-scrollPage-icon: url(img/secondaryToolbarButton-scrollPage.svg);
+  --secondaryToolbarButton-scrollVertical-icon: url(img/secondaryToolbarButton-scrollVertical.svg);
+  --secondaryToolbarButton-scrollHorizontal-icon: url(img/secondaryToolbarButton-scrollHorizontal.svg);
+  --secondaryToolbarButton-scrollWrapped-icon: url(img/secondaryToolbarButton-scrollWrapped.svg);
+  --secondaryToolbarButton-spreadNone-icon: url(img/secondaryToolbarButton-spreadNone.svg);
+  --secondaryToolbarButton-spreadOdd-icon: url(img/secondaryToolbarButton-spreadOdd.svg);
+  --secondaryToolbarButton-spreadEven-icon: url(img/secondaryToolbarButton-spreadEven.svg);
+  --secondaryToolbarButton-documentProperties-icon: url(img/secondaryToolbarButton-documentProperties.svg);
 }
 
 [dir="rtl"]:root {
@@ -1352,48 +1361,50 @@
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --main-color: rgba(249, 249, 250, 1);
-        --body-bg-color: rgba(42, 42, 46, 1);
-        --progressBar-color: rgba(0, 96, 223, 1);
-        --progressBar-bg-color: rgba(40, 40, 43, 1);
-        --progressBar-blend-color: rgba(20, 68, 133, 1);
-        --scrollbar-color: rgba(121, 121, 123, 1);
-        --scrollbar-bg-color: rgba(35, 35, 39, 1);
-        --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
-        --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
-        --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
-        --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
-        --toolbar-bg-color: rgba(56, 56, 61, 1);
-        --toolbar-border-color: rgba(12, 12, 13, 1);
-        --button-hover-color: rgba(102, 102, 103, 1);
-        --toggled-btn-color: rgba(255, 255, 255, 1);
-        --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
-        --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
-        --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
-        --separator-color: rgba(0, 0, 0, 0.3);
-        --field-color: rgba(250, 250, 250, 1);
-        --field-bg-color: rgba(64, 64, 68, 1);
-        --field-border-color: rgba(115, 115, 115, 1);
-        --treeitem-color: rgba(255, 255, 255, 0.8);
-        --treeitem-bg-color: rgba(255, 255, 255, 0.15);
-        --treeitem-hover-color: rgba(255, 255, 255, 0.9);
-        --treeitem-selected-color: rgba(255, 255, 255, 0.9);
-        --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
-        --thumbnail-hover-color: rgba(255, 255, 255, 0.1);
-        --thumbnail-selected-color: rgba(255, 255, 255, 0.2);
-        --doorhanger-bg-color: rgba(74, 74, 79, 1);
-        --doorhanger-border-color: rgba(39, 39, 43, 1);
-        --doorhanger-hover-color: rgba(249, 249, 250, 1);
-        --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
-        --doorhanger-separator-color: rgba(92, 92, 97, 1);
-        --dialog-button-bg-color: rgba(92, 92, 97, 1);
-        --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
-        /* This image is used in <input> elements, which unfortunately means that
+  :root {
+    --main-color: rgba(249, 249, 250, 1);
+    --body-bg-color: rgba(42, 42, 46, 1);
+    --progressBar-color: rgba(0, 96, 223, 1);
+    --progressBar-bg-color: rgba(40, 40, 43, 1);
+    --progressBar-blend-color: rgba(20, 68, 133, 1);
+    --scrollbar-color: rgba(121, 121, 123, 1);
+    --scrollbar-bg-color: rgba(35, 35, 39, 1);
+    --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
+    --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
+
+    --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
+    --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
+    --toolbar-bg-color: rgba(56, 56, 61, 1);
+    --toolbar-border-color: rgba(12, 12, 13, 1);
+    --button-hover-color: rgba(102, 102, 103, 1);
+    --toggled-btn-color: rgba(255, 255, 255, 1);
+    --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
+    --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
+    --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
+    --separator-color: rgba(0, 0, 0, 0.3);
+    --field-color: rgba(250, 250, 250, 1);
+    --field-bg-color: rgba(64, 64, 68, 1);
+    --field-border-color: rgba(115, 115, 115, 1);
+    --treeitem-color: rgba(255, 255, 255, 0.8);
+    --treeitem-bg-color: rgba(255, 255, 255, 0.15);
+    --treeitem-hover-color: rgba(255, 255, 255, 0.9);
+    --treeitem-selected-color: rgba(255, 255, 255, 0.9);
+    --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
+    --thumbnail-hover-color: rgba(255, 255, 255, 0.1);
+    --thumbnail-selected-color: rgba(255, 255, 255, 0.2);
+    --doorhanger-bg-color: rgba(74, 74, 79, 1);
+    --doorhanger-border-color: rgba(39, 39, 43, 1);
+    --doorhanger-hover-color: rgba(249, 249, 250, 1);
+    --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
+    --doorhanger-separator-color: rgba(92, 92, 97, 1);
+    --dialog-button-bg-color: rgba(92, 92, 97, 1);
+    --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
+
+    /* This image is used in <input> elements, which unfortunately means that
      * the `mask-image` approach used with all of the other images doesn't work
      * here; hence why we still have two versions of this particular image. */
-        --loading-icon: url('img/loading-dark.svg');
-    }
+    --loading-icon: url('img/loading-dark.svg');
+  }
 }
 
 @media screen and (forced-colors: active) {

package/css/std/controls/product-title/product-title.css

@@ -12,6 +12,7 @@
 @media (max-width: 800px) {
     .vitro-product-title img {
         margin: 0;
+        max-height: 22px;
     }
 
     .vitro-product-title {

package/css/std/controls/progress-bar/progress-bar.css

@@ -0,0 +1,25 @@
+.vitro-progress-bar {
+    width: 100%;
+    height: 8px;
+    background-color: #E9ECEF;
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+.vitro-bar {
+    width: 0%;
+    height: 100%;
+    background: repeating-linear-gradient( 45deg, #3184FD, #3184FD 8px, #0D6EFD 8px, #0D6EFD 16px );
+    transition: width 0.3s ease;
+    background-size: 46px 46px;
+    animation: progressBar 2s linear infinite;
+}
+
+@keyframes progressBar {
+    from {
+        background-position: 46px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}

package/css/std/controls/scrollbar/scrollbar.css

@@ -33,12 +33,12 @@
 
 :global(.ps__thumb-y) {
     width: 4px !important;
-    right: 3px !important;
+    right: 4px !important;
 }
 
 :global(.ps__thumb-x) {
     height: 4px !important;
-    top: 3px !important;
+    top: 4px !important;
 }
 
 :global(.ps .ps__rail-x):hover, :global(.ps .ps__rail-y):hover, :global(.ps .ps__rail-x):focus, 

package/css/std/controls/search/checkbox-list.css

@@ -1,17 +1,11 @@
 .vitro-checkbox-list {
     border-radius: 4px;
     background: #fff;
-    padding: 12px 0 0 12px;
+    max-width: 307px;
 }
 
-.vitro-checkbox-list .vitro-control {
-    margin-bottom: 8px;
-    margin-right: 12px;
-    width: unset !important;
-}
-
-.vitro-checkbox-list .vitro-control > div {
-    width: unset !important;
+.vitro-checkbox-list :global(.ps) > div:first-child {
+    padding-left: 12px;
 }
 
 .vitro-checkbox-list .vitro-checkbox {

package/css/std/controls/search/search.css

@@ -89,6 +89,28 @@
     background: #F3F8FF !important;
 }
 
+.vitro-button-settings,
+.vitro-button-settings:hover {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border: none;
+    background-size: 100%;
+    background-position: center;
+    margin-left: 8px;
+    background-color: transparent;
+}
+
+.vitro-button-settings {
+    border-radius: 4px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/search-settings.svg');
+}
+
+.vitro-button-settings.vitro-active,
+.vitro-button-settings:hover {
+    background-color: #DCEEFF;
+}
+
 @media (max-width: 800px) {
     .vitro-filter {
         width: 100%;

package/css/std/controls/{search/input.css → search-input/search-input.css}

@@ -1,4 +1,4 @@
-.vitro-control {
+.vitro-search-input {
     height: 32px;
     border-radius: 4px;
     border: 1px solid #C0CAD5;
@@ -7,57 +7,54 @@
     align-items: center;
 }
 
-.vitro-control.vitro-active {
+.vitro-search-input:global(.vitro-active) {
     border: 1px solid #C0CAD5;
 }
 
-.vitro-control.vitro-focus {
+.vitro-search-input:global(.vitro-focus) {
     border: 1px solid #3274E0;
 }
 
-.vitro-control input {
+.vitro-search-input input {
     border: none;
     width: 100%;
+    background: transparent;
 }
 
-.vitro-control input::placeholder {
+.vitro-search-input input::placeholder {
     color: #4A556C;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400 !important;
 }
 
-.vitro-button-search {
+.vitro-search-value-list {
+    flex: 1 1;
+    overflow: hidden;
+}
+
+.vitro-search-input :global(.vitro-button-search),
+.vitro-search-input :global(.vitro-button-search):hover {
     width: 24px;
     height: 24px;
     border: none;
     outline: none;
     flex-shrink: 0;
-    background-color: #fff;
+    background-color: transparent;
     background-size: 100%;
     background-position: center;
     margin-right: 8px;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/search.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/search.svg');
 }
 
-.vitro-button-search:hover,
-.vitro-button-search:active,
-.vitro-button-search:focus {
+.vitro-search-input :global(.vitro-button-search):hover,
+.vitro-search-input :global(.vitro-button-search):active,
+.vitro-search-input :global(.vitro-button-search):focus {
     background-color: #fff;
 }
 
-
-.vitro-search-value-list {
-    display: flex;
-    align-items: center;
-    flex: 1 1;
-    overflow: hidden;
-}
-
 .vitro-button-cancel,
-.vitro-button-settings,
-.vitro-button-cancel:hover,
-.vitro-button-settings:hover {
+.vitro-button-cancel:hover {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
@@ -68,25 +65,13 @@
     background-color: transparent;
 }
 
-.vitro-button-settings {
-    border-radius: 4px;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/search-settings.svg');
-}
-
-.vitro-button-settings.vitro-active,
-.vitro-button-settings:hover {
-    background-color: #DCEEFF;
-}
-
 .vitro-button-cancel {
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/cancel-black.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/cancel-black.svg');
 }
 
 .vitro-search-value {
     border-radius: 4px;
     background: #F7F9FC;
-    display: flex;
-    align-items: center;
     min-width: 0;
     grid-gap: 8px;
     padding: 0 4px;
@@ -104,24 +89,24 @@
 
 .vitro-search-value .vitro-button-cancel {
     margin: 0;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/cancel-dark-grey.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/cancel-dark-grey.svg');
 }
 
 @media (max-width: 800px) {
-    .vitro-control,
-    .vitro-control.vitro-active {
+    .vitro-search-input,
+    .vitro-search-input:global(.vitro-active) {
         border: none;
         padding: 0;
     }
 
-    .vitro-button-search {
+    .vitro-search-input :global(.vitro-button-search) {
         margin: 0;
         height: 32px;
         width: 32px;
         border-radius: 4px;
     }
 
-    .vitro-active.vitro-button-search {
+    :global(.vitro-active):global(.vitro-button-search) {
         background-color: #DCEEFF;
     }
 }

package/css/std/controls/search-value-list/search-value-list.css

@@ -0,0 +1,13 @@
+.vitro-search-input-container {
+    padding: 12px;
+}
+
+.vitro-empty-placeholder {
+    align-items: center;
+    color: #c0cad5;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    padding: 8px 12px;
+}