new schema and indexes ui

ui/src/scss/_accordion.scss

@@ -121,11 +121,19 @@
     .accordion {
         border-radius: 0;
         margin: -1px 0 0;
+        &:has(+ .accordion.active) {
+           border-bottom-left-radius: var(--baseRadius);
+           border-bottom-right-radius: var(--baseRadius);
+        }
     }
     & > .accordion.active,
     & > .accordion-wrapper > .accordion.active {
         margin: var(--smSpacing) 0;
         border-radius: var(--baseRadius);
+        + .accordion {
+            border-top-left-radius: var(--baseRadius);
+            border-top-right-radius: var(--baseRadius);
+        }
     }
     & > .accordion:first-child,
     & > .accordion-wrapper:first-child > .accordion {

ui/src/scss/_base.scss

@@ -323,6 +323,10 @@ a,
     }
 }
 
+.no-pointer-events {
+    pointer-events: none;
+}
+
 .block {
     @extend %block;
 }
@@ -354,6 +358,10 @@ a,
     border: 1px solid var(--baseAlt1Color);
 }
 
+.shadowize {
+    @include shadowize();
+}
+
 .clearfix {
     @extend %block;
     clear: both;
@@ -451,16 +459,17 @@ a,
 
 .label {
     --labelVPadding: 3px;
-    --labelHPadding: 8px;
+    --labelHPadding: 9px;
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     vertical-align: top;
     gap: 5px;
     padding: var(--labelVPadding) var(--labelHPadding);
-    min-height: 23px;
+    min-height: 24px;
     max-width: 100%;
     text-align: center;
-    line-height: 1;
+    line-height: var(--smLineHeight);
     font-size: var(--smFontSize);
     background: var(--baseAlt2Color);
     color: var(--txtPrimaryColor);
@@ -562,33 +571,9 @@ a.thumb:not(.thumb-active) {
     row-gap: 5px;
     margin: 0 0 var(--xsSpacing);
     font-weight: 600;
-    font-size: var(--smFontSize);
+    font-size: var(--baseFontSize);
     line-height: var(--smLineHeight);
     color: var(--txtHintColor);
-    text-transform: uppercase;
-}
-
-.drag-handle {
-    outline: 0;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: left;
-    color: var(--txtDisabledColor);
-    transition: color var(--baseAnimationSpeed);
-    &:before,
-    &:after {
-        content: '\ef77';
-        font-family: var(--iconFontFamily);
-        font-size: 18px;
-        line-height: 1;
-        width: 7px;
-        text-align: center;
-    }
-    &:focus-visible,
-    &:hover,
-    &:active {
-        color: var(--txtPrimaryColor);
-    }
 }
 
 .logo {
@@ -622,6 +607,37 @@ a.thumb:not(.thumb-active) {
     }
 }
 
+.drag-handle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-shrink: 0;
+    color: var(--txtDisabledColor);
+    user-select: none;
+    cursor: pointer;
+    transition: color var(--baseAnimationSpeed),
+                transform var(--baseAnimationSpeed),
+                opacity var(--baseAnimationSpeed),
+                visibility var(--baseAnimationSpeed);
+    &:before{
+        content: "\ef77";
+        line-height: 1;
+        font-family: var(--iconFontFamily);
+        padding-right: 5px;
+        text-shadow: 5px 0px currentColor;
+    }
+    &:hover,
+    &:focus-visible {
+        color: var(--txtHintColor);
+    }
+    &:active {
+        transition-duration: var(--activeAnimationSpeed);
+        color: var(--txtPrimaryColor);
+    }
+}
+
 .loader {
     --loaderSize: 32px;
 

ui/src/scss/_dropdown.scss

@@ -56,15 +56,15 @@
 
         // states
         &.selected {
-            background: var(--baseAlt1Color);
+            background: var(--baseAlt2Color);
         }
         &:focus-visible,
         &:hover {
-            background: var(--baseAlt2Color);
+            background: var(--baseAlt1Color);
         }
         &:active {
             transition-duration: var(--activeAnimationSpeed);
-            background: var(--baseAlt3Color);
+            background: var(--baseAlt2Color);
         }
         &.disabled {
             color: var(--txtDisabledColor);

ui/src/scss/_form.scss

@@ -509,8 +509,15 @@ select {
         .btn {
             margin-right: -5px;
         }
-        & ~ %input {
-            padding-right: 35px;
+        &:not(.prefix) ~ %input {
+            padding-right: 45px;
+        }
+        &.prefix {
+            right: auto;
+            left: var(--hPadding);
+            & ~ %input {
+                padding-left: 45px;
+            }
         }
     }
     label ~ .form-field-addon {

ui/src/scss/_schema_field.scss

@@ -0,0 +1,75 @@
+.schema-field {
+    @extend %block;
+    position: relative;
+    margin: 0 0 var(--xsSpacing);
+    &.drag-over {
+        opacity: 0.5;
+    }
+}
+.schema-field-header {
+    position: relative;
+    display: flex;
+    width: 100%;
+    gap: 10px;
+    align-items: center;
+    justify-content: stretch;
+    %input,
+    .form-field-addon {
+        min-height: var(--btnHeight);
+    }
+    .form-field {
+        margin: 0;
+    }
+    .options-trigger {
+        i {
+            transition: transform var(--baseAnimationSpeed);
+        }
+        &.active {
+            i {
+                transform: rotate(58deg);
+            }
+        }
+    }
+    .drag-handle-wrapper {
+        position: absolute;
+        top: 0;
+        left: auto;
+        right: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+    .drag-handle {
+        padding: 0 5px;
+        transform: translateX(5px);
+        @include hide();
+    }
+    .form-field-single-multiple-select {
+        width: 100px;
+        flex-shrink: 0;
+        .dropdown {
+            min-width: 0;
+        }
+    }
+
+    // states
+    &:hover,
+    &:active {
+        .drag-handle {
+            transform: translateX(0px);
+            @include show();
+        }
+    }
+}
+.schema-field-dropdown {
+    padding: var(--smSpacing);
+    max-height: none;
+    overflow: visible;
+    z-index: 999;
+}
+.schema-field-options {
+    margin-top: -10px;
+    background: var(--bodyColor);
+    padding: var(--smSpacing);
+    border-radius: var(--baseRadius);
+}

ui/src/scss/_tabs.scss

@@ -3,7 +3,7 @@ $tabContentAnimationSpeed: 0.2s;
 
 @keyframes tabChange {
     0% {
-        opacity: 0.5;
+        opacity: 0.7;
     }
     100% {
         opacity: 1;

ui/src/scss/_vars.scss

@@ -17,14 +17,14 @@
     --baseAlt3Color: #c6cdd7;
     --baseAlt4Color: #a5b0c0;
 
-    --infoColor:       #3da9fc;
-    --infoAltColor:    #d2ecfe;
-    --successColor:    #2aac76;
-    --successAltColor: #d2f4e6;
-    --dangerColor:     #e13756;
-    --dangerAltColor:  #fcdee4;
-    --warningColor:    #ff8e3c;
-    --warningAltColor: #ffeadb;
+    --infoColor:       #5499e8;
+    --infoAltColor:    #cee2f8;
+    --successColor:    #32ad84;
+    --successAltColor: #c4eedc;
+    --dangerColor:     #e34562;
+    --dangerAltColor:  #f7cad2;
+    --warningColor:    #ff944d;
+    --warningAltColor: #ffd4b8;
 
     --overlayColor:   rgba(53, 71, 104, 0.25);
     --tooltipColor:   rgba(0, 0, 0, 0.85);
@@ -64,9 +64,9 @@
     --activeAnimationSpeed: 70ms;
     --entranceAnimationSpeed: 250ms;
 
-    --baseRadius: 3px;
+    --baseRadius: 6px;
     --lgRadius:   12px;
-    --btnRadius:  3px;
+    --btnRadius:  6px;
 
     // https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
     accent-color: var(--primaryColor);

ui/src/scss/main.scss

@@ -39,3 +39,5 @@
 @import 'flatpickr';
 
 @import 'docs_panel';
+
+@import 'schema_field';