added select readonly prop and updated the disabled schema field state

ui/src/scss/_form.scss

@@ -955,6 +955,7 @@ select {
     &:not(.disabled) .selected-container:hover {
         cursor: pointer;
     }
+    &.readonly,
     &.disabled {
         color: var(--txtHintColor);
         pointer-events: none;
@@ -978,6 +979,9 @@ select {
             }
         }
     }
+    &.disabled {
+        color: var(--txtDisabledColor);
+    }
 
     // dropdown
     .txt-missing {

ui/src/scss/_schema_field.scss

@@ -30,7 +30,7 @@
     .separator {
         width: 1px;
         height: $minHeight;
-        background: var(--baseAlt2Color);
+        background: rgba(#000, 0.06);
     }
     .drag-handle-wrapper {
         position: absolute;
@@ -81,7 +81,6 @@
             @include show();
         }
     }
-
 }
 
 .schema-field-options {
@@ -111,4 +110,17 @@
             }
         }
     }
+    &.deleted {
+        .schema-field-header {
+            background: var(--bodyColor);
+        }
+        .markers,
+        .separator {
+            opacity: 0.5;
+        }
+        %input {
+            background: none;
+            box-shadow: none;
+        }
+    }
 }