@vitrosoftware/common-ui-ts 1.1.97 → 1.1.98

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/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/system-exception-dialog/img/error.svg

@@ -0,0 +1,40 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 36.6663C24.6023 36.6663 28.769 34.8008 31.7851 31.7848C34.8012 28.7687 36.6667 24.602 36.6667 19.9997C36.6667 15.3973 34.8012 11.2307 31.7851 8.21456C28.769 5.19849 24.6023 3.33301 20 3.33301C15.3977 3.33301 11.231 5.19849 8.21489 8.21456C5.19883 11.2307 3.33334 15.3973 3.33334 19.9997C3.33334 24.602 5.19883 28.7687 8.21489 31.7848C11.231 34.8008 15.3977 36.6663 20 36.6663Z" fill="url(#paint0_linear_3514_163576)"/>
+<g filter="url(#filter0_ddii_3514_163576)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1162 14.116C14.6044 13.6279 15.3959 13.628 15.884 14.1162L19.9992 18.2322L24.1162 14.116C24.6044 13.6279 25.3959 13.628 25.884 14.1162C26.3721 14.6044 26.372 15.3959 25.8838 15.884L21.7674 19.9996L25.8839 24.1161C26.372 24.6043 26.372 25.3957 25.8839 25.8839C25.3957 26.372 24.6043 26.372 24.1161 25.8839L20 21.7678L15.8839 25.8839C15.3957 26.372 14.6043 26.372 14.1161 25.8839C13.628 25.3957 13.628 24.6043 14.1161 24.1161L18.2318 20.0004L14.116 15.8838C13.6279 15.3956 13.628 14.6041 14.1162 14.116Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_ddii_3514_163576" x="8.8638" y="10.6961" width="22.2724" height="22.2724" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.305387"/>
+<feGaussianBlur stdDeviation="0.458081"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3514_163576"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.83232"/>
+<feGaussianBlur stdDeviation="2.4431"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_3514_163576" result="effect2_dropShadow_3514_163576"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3514_163576" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.610775"/>
+<feGaussianBlur stdDeviation="0.152694"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.32549 0 0 0 0 0.321569 0 0 0 0 0.533333 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_3514_163576"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.610775"/>
+<feGaussianBlur stdDeviation="0.610775"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.572549 0 0 0 0 0.564706 0 0 0 0 0.933333 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect3_innerShadow_3514_163576" result="effect4_innerShadow_3514_163576"/>
+</filter>
+<linearGradient id="paint0_linear_3514_163576" x1="10.0013" y1="9.99707" x2="32.5013" y2="42.4971" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F95C60"/>
+<stop offset="1" stop-color="#B3161A"/>
+</linearGradient>
+</defs>
+</svg>

package/css/std/controls/system-exception-dialog/system-exception-dialog.css

@@ -0,0 +1,119 @@
+.vitro-system-exception-dialog {
+    width: 618px;
+}
+
+.vitro-system-exception-dialog h1 {
+    font-size: 18px;
+    line-height: 150%;
+}
+
+.vitro-image {
+    flex-shrink: 0;
+    height: 40px;
+    width: 40px;
+    margin-right: 8px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/system-exception-dialog/img/error.svg');
+}
+
+.vitro-exception {
+    max-height: 98px !important;
+    margin-top: 16px;
+    background-color: #F7F9FC;
+    color: #D13438;
+    font-size: 12px;
+    line-height: 18px;
+    border-radius: 4px;
+    border: 1px solid rgba(228, 230, 236, 0.5);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-exception :global(.ps__rail-x),
+.vitro-exception :global(.ps__rail-y) {
+    background-color: #F7F9FC !important;
+}
+
+.vitro-exception :global(.ps__rail-x) {
+    border-top: 1px solid #F5F6FA;
+}
+
+.vitro-exception :global(.ps__rail-y) {
+    border-left: 1px solid #F5F6FA;
+}
+
+.vitro-scrollbar-content {
+    padding: 8px 12px;
+}
+
+.vitro-label {
+    font-size: 14px;
+    line-height: 150%;
+    color: #222D44;
+    margin-bottom: 4px;
+    white-space: normal;
+}
+
+.vitro-input {
+    margin: 0;
+    height: 118px;
+}
+
+.vitro-input textarea {
+    resize: none;
+    height: 100%;
+    font-size: 12px;
+    padding: 8px 12px;
+}
+
+.vitro-flex {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.vitro-flex span:nth-child(3) {
+    color: #2A63F6;
+    margin-left: 4px;
+}
+
+.vitro-settings-list {
+    width: 100%;
+    padding: 0 24px 16px 24px;
+}
+
+.vitro-checkbox {
+    margin-bottom: 0;
+    width: unset;
+}
+
+@media (max-width: 800px) {
+    .vitro-settings-list {
+        padding: 0 16px 16px 16px;
+    }
+}
+
+@media (max-width: 370px) {
+    .vitro-flex span:nth-child(2) {
+        display: none;
+    }
+
+    .vitro-flex span:nth-child(3) {
+        color: #222D44;
+        margin: 0;
+    }
+}
+
+@media (max-height: 620px) {
+    .vitro-exception {
+        display: none;
+    }
+}
+
+@media (max-height: 480px) {
+    .vitro-input {
+        height: 72px;
+    }
+}

package/css/std/controls/time-picker/time-picker.css

@@ -84,7 +84,7 @@
     padding: 0 6px;
     background: transparent;
     background-image: linear-gradient(#fff, #fff);
-    background-size: 100% 2px;
+    background-size: 100% 3px;
     background-position: 0 calc(50% + 3px);
     background-repeat: no-repeat;
     z-index: 1;
@@ -112,9 +112,6 @@
     line-height: 135%;
     margin-top: 2px;
     width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
 }
 
 .vitro-focus .vitro-error-text {

package/css/std/controls/tree-view/tree-view.css

@@ -10,6 +10,10 @@
     padding-top: 8px;
 }
 
+:global(.ps) :global(.jstree-container-ul) {
+    padding-bottom: 12px;
+}
+
 .vitro-tree-view {
     height: 100%;
 }

package/css/std/controls/uploader/uploader.css

@@ -329,21 +329,10 @@
     pointer-events: none;
 }
 
-.vitro-progress {
-    width: 100%;
-    background-color: #E9ECEF;
-    border-radius: 4px;
-    overflow: hidden;
+.vitro-progress-bar {
     margin-top: 8px;
 }
 
-.vitro-uploader .vitro-progress-bar {
-    width: 0%;
-    height: 8px;
-    background: repeating-linear-gradient( 45deg, #3184FD, #3184FD 8px, #0D6EFD 8px, #0D6EFD 16px );
-    transition: width 1s ease;
-}
-
 :global(.vitro-display-none) {
     display: none;
 }

package/css/std/controls/view/view.css

@@ -1,6 +1,5 @@
 .vitro-view {
     flex: 1 1;
-    padding: 16px;
     overflow: hidden;
 }
 
@@ -8,3 +7,11 @@
     width: 100%;
     flex-grow: 1;
 }
+
+.vitro-tab :global(.nav) {
+    padding: 16px 16px 0 16px;
+}
+
+.vitro-tab > :global(.vitro-content) {
+    overflow: hidden;
+}

package/css/std/controls/view-part/view-part.css

@@ -1,8 +1,3 @@
-.vitro-view-part {
-    margin-left: -16px;
-    margin-right: -16px;
-}
-
 .vitro-view-part:last-child {
     flex-grow: 1;
     max-height: 100%;