Restyle readonly vs editable state of form fields

sillsdev · Jan 13, 2025 · 8c0f605 · 8c0f605
1 parent 3ba1768
commit 8c0f605
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 27 deletions.
diff --git a/frontend/viewer/src/app.postcss b/frontend/viewer/src/app.postcss
@@ -112,20 +112,3 @@
 .AppBar :has(> [slot="actions"]) {
   flex-grow: 0;
 }
-
-/* the input must also be disabled, otherwise it will be editable*/
-.input-readonly {
-    &.TextField, .TextField {
-        opacity: 1;
-
-        input, textarea {
-            /* enable standard text selection */
-            pointer-events: auto;
-            cursor: text;
-        }
-
-        .append {
-            display: none;
-        }
-    }
-}
diff --git a/frontend/viewer/src/lib/activity/ActivityView.svelte b/frontend/viewer/src/lib/activity/ActivityView.svelte
@@ -88,7 +88,7 @@
                    value={JSON.stringify(selectedRow.changes, null, 4)}
                    disabled
                    multiline
-                   class="input-readonly"
+                   class="readonly field"
                    classes={{input: 'h-80'}}/>
       {/if}
     </div>

diff --git a/frontend/viewer/src/lib/entry-editor/field.postcss b/frontend/viewer/src/lib/entry-editor/field.postcss
@@ -24,15 +24,30 @@
       @apply col-span-2 pl-4;
     }
 
-    .readonly {
-      &.TextField, .TextField {
-        opacity: 1;
-
-        input {
-          /* enable standard text selection */
-          pointer-events: auto;
-          cursor: text;
-        }
+    &.TextField, .TextField {
+      [class~="border"] {
+        filter: contrast(0.95);
+        border-radius: 0;
+        border-style: none;
+        border-bottom-style: solid;
+        @apply !shadow-none;
+        border-color: hsl(var(--color-surface-content) / 30%);
+      }
+    }
+
+    &.readonly.TextField, .readonly.TextField, .readonly .TextField {
+      /* prevent other "disabled-state styles" from impacting readability */
+      opacity: 1;
+
+      [class~="border"] {
+        border-color: hsl(var(--color-surface-content) / 20%);
+        background: transparent;
+      }
+
+      input {
+        /* enable standard text selection */
+        pointer-events: auto;
+      }
 
       .append, .prepend {
         display: none;