added backup apis and tests

ui/src/scss/_alert.scss

@@ -113,11 +113,16 @@
         @include shadowize();
     }
 }
-body:not(.overlay-active) {
-    .app-sidebar ~ .app-body .toasts-wrapper {
-        left: var(--appSidebarWidth);
+
+@media screen and (min-width: 980px) {
+    body:not(.overlay-active):has(.app-sidebar) {
+        .toasts-wrapper {
+            left: var(--appSidebarWidth);
+        }
     }
-    .app-sidebar ~ .app-body .page-sidebar ~ .toasts-wrapper {
-        left: calc(var(--appSidebarWidth) + var(--pageSidebarWidth));
+    body:not(.overlay-active):has(.page-sidebar) {
+        .toasts-wrapper {
+            left: calc(var(--appSidebarWidth) + var(--pageSidebarWidth));
+        }
     }
 }

ui/src/scss/_base.scss

@@ -511,9 +511,10 @@ a,
 .thumb {
     --thumbSize: 40px;
 
-    flex-shrink: 0;
-    position: relative;
     display: inline-flex;
+    vertical-align: top;
+    position: relative;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     line-height: 1;
@@ -772,7 +773,7 @@ a.thumb:not(.thumb-active) {
             align-items: center;
             margin: -1px -5px -1px 0;
             &.nonintrusive {
-                @include hide();
+                opacity: 0;
                 transform: translateX(5px);
                 transition: transform var(--baseAnimationSpeed),
                             opacity var(--baseAnimationSpeed),
@@ -780,9 +781,12 @@ a.thumb:not(.thumb-active) {
             }
         }
         &:hover,
+        &:focus-visible,
+        &:focus-within,
         &:active {
+            background: var(--bodyColor);
             .actions.nonintrusive {
-                @include show();
+                opacity: 1;
                 transform: translateX(0);
             }
         }
@@ -807,13 +811,28 @@ a.thumb:not(.thumb-active) {
         }
     }
 
+    .list-item-placeholder {
+        color: var(--txtHintColor);
+    }
+
     .list-item-btn {
         padding: 5px;
         min-height: auto;
     }
 
+    .list-item-placeholder,
+    .list-item-btn {
+        &:hover,
+        &:focus-visible,
+        &:focus-within,
+        &:active {
+            background: none;
+        }
+    }
+
     &.list-compact {
         .list-item {
+            gap: 10px;
             min-height: 40px;
         }
     }

ui/src/scss/_form.scss

@@ -15,6 +15,7 @@ button {
     position: relative;
     z-index: 1;
     display: inline-flex;
+    vertical-align: top;
     align-items: center;
     justify-content: center;
     outline: 0;
@@ -238,6 +239,8 @@ button {
         }
     }
     &.btn-xs {
+        padding-left: 7px;
+        padding-right: 7px;
         min-width: var(--xsBtnHeight);
         min-height: var(--xsBtnHeight);
     }
@@ -1108,6 +1111,11 @@ select {
         transition: background var(--baseAnimationSpeed);
         .list-item {
             border-top: 1px solid var(--baseAlt2Color);
+            &:hover,
+            &:focus-visible,
+            &:active {
+                background: none;
+            }
             &.selected {
                 background: var(--baseAlt2Color);
             }

ui/src/scss/_vars.scss

@@ -26,7 +26,7 @@
     --warningColor:    #ff944d;
     --warningAltColor: #ffd4b8;
 
-    --overlayColor:   rgba(53, 71, 104, 0.25);
+    --overlayColor:   rgba(53, 71, 104, 0.28);
     --tooltipColor:   rgba(0, 0, 0, 0.85);
     --shadowColor:    rgba(0, 0, 0, 0.06);