minor ui workarounds to minimize discrepensies between browsers

ui/src/css/animations.css

@@ -9,11 +9,7 @@
 }
 
 @keyframes halfRotate {
-    from {
-        pointer-events: none;
-    }
     to {
-        pointer-events: none;
         transform: rotate(180deg);
     }
 }

ui/src/css/form.css

@@ -282,6 +282,14 @@ button {
         }
     }
 
+    /* hacky visual alignment workaround for the rotating icon since it renders differently in Chrome and Firefox */
+    &.sm .ri-refresh-line {
+        &::before {
+            font-size: 18px;
+            transform: scale(0.85);
+        }
+    }
+
     &[data-rotate="true"],
     &.rotate {
         i {
@@ -307,7 +315,7 @@ button {
             margin-left: calc(var(--size) / -2);
             padding: 0;
             color: inherit;
-            font-size: 1.5em;
+            font-size: 1.4rem;
             font-weight: normal;
             text-align: center;
             font-family: var(--iconFontFamily);
@@ -316,6 +324,10 @@ button {
                 fadeIn var(--animationSpeed),
                 rotate var(--loaderAnimationSpeed) infinite linear;
         }
+        &.lg::after {
+            --size: 26px;
+            font-size: 1.68rem;
+        }
         & > * {
             opacity: 0;
         }

ui/src/css/vars.css

@@ -138,7 +138,7 @@
 /* dark */
 [data-color-scheme="dark"],
 [data-color-scheme="dark"] .dropdown {
-    --surfaceColor: #1c1c1c;
+    --surfaceColor: #1b1b1b;
     --surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%);
     --surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%);
     --surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%);