minor color and styles improvements

2026-04-21 17:05:33 +03:00
parent 3c33868ea8
commit 84b50c4869
11 changed files with 45 additions and 35 deletions
--- a/ui/dist/assets/index-B-u8SRs-.css
+++ b/ui/dist/assets/index-B-u8SRs-.css
--- a/ui/dist/assets/index-Cp0MYHN1.js
+++ b/ui/dist/assets/index-Cp0MYHN1.js
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@@ -13,9 +13,9 @@

    <!-- prism -->
    <script src="./libs/prism/prism.js" data-manual></script>
-  <script type="module" crossorigin src="./assets/index-Cj2KMr38.js"></script>
+  <script type="module" crossorigin src="./assets/index-Cp0MYHN1.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
-  <link rel="stylesheet" crossorigin href="./assets/index-CbOtUFMZ.css">
+  <link rel="stylesheet" crossorigin href="./assets/index-B-u8SRs-.css">
 </head>
 <body>
 </body>
--- a/ui/src/css/form.css
+++ b/ui/src/css/form.css
@@ -585,6 +585,7 @@ button {
    &.required label,
    label.required,
    .required > label,
+    label:has(~ .autoexpand-wrapper textarea[required]),
    label:has(~ [required]),
    label:has(~ .input.required) {
        &::after {
@@ -599,6 +600,7 @@ button {
    &.disabled label,
    label.disabled,
    .disabled > label,
+    label:has(~ .autoexpand-wrapper textarea[disabled]),
    label:has(~ [disabled]),
    label:has(~ .input.disabled) {
        color: var(--surfaceTxtDisabledColor);
@@ -672,15 +674,15 @@ button {
 }

 .field-list {
-    label {
-        padding-bottom: 9px;
-    }
    .field-list-content {
        overflow: auto;
        max-height: 500px;
        scrollbar-width: thin;
        color: var(--surfaceTxtColor);
    }
+    label + .field-list-content {
+        margin-top: 8px;
+    }
    .field-list-item {
        display: flex;
        width: 100%;
--- a/ui/src/css/ruleField.css
+++ b/ui/src/css/ruleField.css
@@ -35,8 +35,10 @@
        font-size: var(--smFontSize);
        padding: 8px 10px;
        color: var(--surfaceTxtHintColor);
-        background: var(--surfaceAlt4Color);
-        box-shadow: inset 1px -1px 2px rgba(0,0,0,0.03);
+        background: var(--inputFocusColor);
+        border: 1px solid var(--surfaceAlt5Color);
+        border-top: 0;
+        border-right: 0;
        transition:
            color var(--animationSpeed),
            background var(--animationSpeed);
@@ -44,14 +46,17 @@
        &:active,
        &:focus-visible {
            color: var(--successColor);
-            background: var(--surfaceAlt5Color);
+            background: var(--inputBorderColor);
        }
        &[disabled] {
            cursor: not-allowed;
            color: var(--surfaceTxtDisabledColor);
-            background: var(--surfaceAlt4Color);
+            background: var(--surfaceAlt3Color);
        }
    }
+    .input:focus-within ~ .superuser-toggle {
+        background: var(--inputBorderColor);
+    }
    label {
        position: relative;
        z-index: 2;
--- a/ui/src/css/vars.css
+++ b/ui/src/css/vars.css
@@ -12,9 +12,9 @@
    --primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
    --primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);

-    --secondaryColor: #e8eaee;
-    --secondaryAlt1Color: #dcdfe5;
-    --secondaryAlt2Color: #c4cbd4;
+    --secondaryColor: #e4e8ec;
+    --secondaryAlt1Color: #dbe0e6;
+    --secondaryAlt2Color: #d2d9df;
    --secondaryTxtColor: var(--primaryColor);
    --secondaryTxtHintColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 35%);
    --secondaryTxtDisabledColor: color-mix(in srgb, var(--secondaryTxtColor), transparent 50%);
@@ -55,20 +55,20 @@
    --accentTxtDisabledColor: color-mix(in srgb, var(--accentTxtColor), transparent 50%);

    --surfaceColor: #fff;
-    --surfaceAlt1Color: #f6f7f9;
-    --surfaceAlt2Color: #e8eaee;
-    --surfaceAlt3Color: #dfe2e7;
-    --surfaceAlt4Color: #d9dde2;
-    --surfaceAlt5Color: #d1d6dc;
+    --surfaceAlt1Color: #f8f9fa;
+    --surfaceAlt2Color: #e4e8ec;
+    --surfaceAlt3Color: #dbe0e6;
+    --surfaceAlt4Color: #d2d9df;
+    --surfaceAlt5Color: #cbd4dc;
    --surfaceTxtColor: #25272d;
-    --surfaceTxtHintColor: #6b747b;
-    --surfaceTxtDisabledColor: #abaeba;
+    --surfaceTxtHintColor: #687278;
+    --surfaceTxtDisabledColor: #a2a9ae;
    --surfaceAccentColor: color-mix(in srgb, var(--accentColor), white 80%);
    --surfaceInfoColor: color-mix(in srgb, var(--infoColor), white 80%);
    --surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%);
    --surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%);
    --surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%);
-    --selectionColor: rgba(34, 36, 42, 0.22);
+    --selectionColor: rgba(70, 90, 115, 0.25);
    --inputColor: var(--surfaceAlt2Color);
    --inputFocusColor: var(--surfaceAlt3Color);
    --inputBorderColor: var(--surfaceAlt4Color);
@@ -85,7 +85,7 @@
    /* ---------------- */

    --modalAnimationSpeed: 200ms;
-    --modalOverlayColor: rgba(34, 36, 42, 0.22);
+    --modalOverlayColor: rgba(70, 90, 115, 0.25);

    --tooltipTxtColor: #fff;
    --tooltipSurfaceColor: rgba(34, 36, 36, 0.9);
--- a/ui/src/fields/file/input.js
+++ b/ui/src/fields/file/input.js
@@ -240,7 +240,7 @@ export function input(props) {
            },
        },
        t.div(
-            { className: () => `field ${props.field.required ? "required" : ""}` },
+            { className: () => `field-list ${props.field.required ? "required" : ""}` },
            t.label(
                { htmlFor: uniqueId },
                t.i({ className: app.fieldTypes.file.icon, ariaHidden: true }),
--- a/ui/src/fields/geoPoint/input.js
+++ b/ui/src/fields/geoPoint/input.js
@@ -33,8 +33,8 @@ export function input(data) {
                                id: uniqueId + ".lon",
                                type: "number",
                                step: "any",
-                                min: "-180",
-                                max: "180",
+                                min: -180,
+                                max: 180,
                                placeholder: 0,
                                name: () => data.field.name,
                                required: () => data.field.required,
@@ -53,8 +53,8 @@ export function input(data) {
                                id: uniqueId + ".lat",
                                type: "number",
                                step: "any",
-                                min: "-90",
-                                max: "90",
+                                min: -90,
+                                max: 90,
                                placeholder: 0,
                                name: () => data.field.name,
                                required: () => data.field.required,
--- a/ui/src/fields/relation/input.js
+++ b/ui/src/fields/relation/input.js
@@ -180,7 +180,7 @@ export function input(props) {
            },
        },
        t.div(
-            { className: () => `field ${props.field.required ? "required" : ""}` },
+            { className: () => `field-list ${props.field.required ? "required" : ""}` },
            t.label(
                { htmlFor: uniqueId },
                t.i({ className: app.fieldTypes.relation.icon, ariaHidden: true }),
--- a/ui/src/store.js
+++ b/ui/src/store.js
@@ -357,7 +357,7 @@ function removeErrorState(input, container) {
 watch(
    () => JSON.stringify(app.store.errors) && app.store.errors,
    (errs) => {
-        // search for input or other elements wiht "name" attribute
+        // search for input or other elements with "name" attribute
        const inputs = document.querySelectorAll(`[name]`);

        for (let input of inputs) {
@@ -365,7 +365,8 @@ watch(
                continue;
            }

-            const container = input.closest(".fields") || input.closest(".field");
+            // find the top-most wrapper field element
+            const container = input.closest(".field-list") || input.closest(".fields") || input.closest(".field");
            if (!container) {
                continue;
            }