updated rule field styles

ui/src/components/collections/CollectionRulesTab.svelte

@@ -11,7 +11,7 @@
     let showFiltersInfo = false;
 </script>
 
-<div class="block m-b-sm handle" class:fade={!showFiltersInfo}>
+<div class="block m-b-sm handle">
     <div class="flex txt-sm txt-hint m-b-5">
         <p>
             All rules follow the

ui/src/components/collections/RuleField.svelte

@@ -4,6 +4,7 @@
 
 <script>
     import { tick } from "svelte";
+    import { scale } from "svelte/transition";
     import Field from "@/components/base/Field.svelte";
 
     export let collection = null;
@@ -57,44 +58,49 @@
         name={formKey}
         let:uniqueId
     >
-        <label for={uniqueId}>
-            <span class="txt" class:txt-hint={isAdminOnly}>
-                {label}
-            </span>
-            <span class="label label-sm">
-                {isAdminOnly ? "Admins only" : "Custom rule"}
-            </span>
+        <div class="input-wrapper">
+            <label for={uniqueId}>
+                <span class="txt" class:txt-hint={isAdminOnly}>
+                    {label}
+                    {isAdminOnly ? "- Admins only" : ""}
+                </span>
+                {#if !isAdminOnly}
+                    <button
+                        type="button"
+                        class="btn  btn-sm btn-transparent btn-hint lock-toggle"
+                        on:click={lock}
+                    >
+                        <i class="ri-lock-line" />
+                        <span class="txt">Set Admins only</span>
+                    </button>
+                {/if}
+            </label>
+
+            <svelte:component
+                this={ruleInputComponent}
+                id={uniqueId}
+                bind:this={editorRef}
+                bind:value={rule}
+                baseCollection={collection}
+                disabled={isAdminOnly}
+                placeholder={!isAdminOnly ? "Leave empty to grant everyone access..." : ""}
+            />
 
             {#if isAdminOnly}
                 <button
                     type="button"
-                    class="btn btn-sm btn-transparent btn-success lock-toggle"
+                    class="unlock-overlay"
+                    aria-label="Unlock and set custom rule"
+                    transition:scale|local={{ duration: 100, start: 0.9 }}
                     on:click={unlock}
                 >
-                    <i class="ri-lock-unlock-line" />
-                    <span class="txt">Enable custom rule</span>
-                </button>
-            {:else}
-                <button
-                    type="button"
-                    class="btn  btn-sm btn-transparent btn-hint lock-toggle"
-                    on:click={lock}
-                >
-                    <i class="ri-lock-line" />
-                    <span class="txt">Set Admins only</span>
+                    <div class="icon">
+                        <i class="ri-lock-unlock-line" />
+                    </div>
+                    <small class="txt">Unlock and set custom rule</small>
                 </button>
             {/if}
-        </label>
-
-        <svelte:component
-            this={ruleInputComponent}
-            id={uniqueId}
-            bind:this={editorRef}
-            bind:value={rule}
-            baseCollection={collection}
-            disabled={isAdminOnly}
-            placeholder={!isAdminOnly ? "Leave empty to grant everyone access..." : ""}
-        />
+        </div>
 
         <div class="help-block">
             <slot {isAdminOnly} />
@@ -102,7 +108,7 @@
     </Field>
 {/if}
 
-<style>
+<style lang="scss">
     label .label {
         margin: -5px 0;
         background: rgba(53, 71, 104, 0.12);
@@ -120,4 +126,64 @@
     :global(.rule-field .code-editor .cm-placeholder) {
         font-family: var(--baseFontFamily);
     }
+    .input-wrapper {
+        position: relative;
+    }
+    .unlock-overlay {
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: var(--baseRadius);
+        background: rgba(255, 255, 255, 0.3);
+        outline: 0;
+        cursor: pointer;
+        text-decoration: none;
+        color: var(--successColor);
+        border: 2px solid var(--baseAlt1Color);
+        transition: border-color var(--baseAnimationSpeed);
+        i {
+            font-size: inherit;
+        }
+        .icon {
+            color: var(--successColor);
+            font-size: 1.15rem;
+            line-height: 1;
+            font-weight: normal;
+            margin-top: var(--smLineHeight);
+            transition: transform var(--baseAnimationSpeed);
+        }
+        .txt {
+            opacity: 0;
+            font-size: var(--xsFontSize);
+            font-weight: 600;
+            line-height: var(--smLineHeight);
+            margin-bottom: 7px;
+            transform: scale(0.95);
+            transition: transform var(--baseAnimationSpeed), opacity var(--baseAnimationSpeed);
+        }
+        &:hover,
+        &:focus-visible,
+        &:active {
+            border-color: var(--baseAlt2Color);
+            .icon {
+                transform: translateY(-3px) scale(1.1);
+            }
+            .txt {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+        &:active {
+            transition-duration: var(--activeAnimationSpeed);
+            border-color: var(--baseAlt3Color);
+        }
+    }
 </style>