From da61d3d7de5923fc74734830c2516abaa1987341 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Tue, 9 May 2023 16:28:49 -0500
Subject: [PATCH] Better disabled textbox style

---
 src/lib/components/ComfyProperties.svelte | 7 +++++++
 src/lib/widgets/RangeWidget.svelte        | 3 +++
 src/lib/widgets/TextWidget.svelte         | 9 ++++++++-
 src/scss/global.scss                      | 8 ++++++++
 src/scss/ux.scss                          | 5 +++++
 svelte.config.js                          | 8 ++++++++
 6 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 3eaa14a..b85a922 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -465,4 +465,11 @@
         bottom: 0;
         padding: 0.5em; */
  }
+
+ :global(input[type=text]:disabled) {
+     @include disable-input;
+ }
+ :global(textarea:disabled) {
+     @include disable-input;
+ }
 </style>
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index a54a8ab..8cbeb4e 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -126,6 +126,9 @@
 
      :global(input[type=number]) {
          text-overflow: ellipsis;
+         &:disabled {
+             @include disable-input;
+         }
      }
 
      &.mobile {
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index db0a08e..bba0dc1 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -46,10 +46,17 @@
     {/if}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
+
+     :global(input[type=text]:disabled) {
+         @include disable-input;
+     }
+     :global(textarea:disabled) {
+         @include disable-input;
+     }
  }
 
  :global(span.hide) {
diff --git a/src/scss/global.scss b/src/scss/global.scss
index bc14acc..2663526 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -10,3 +10,11 @@ body {
 :root {
     --color-blue-500: #3985f5;
 }
+
+@mixin disable-input {
+    -webkit-text-fill-color: var(--neutral-500);
+    background-color: var(--neutral-200);
+    border-color: var(--neutral-300);
+    box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
+    cursor: not-allowed;
+}
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index b95b463..0a770d3 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -76,6 +76,7 @@ License: GNU General Public License
     --ae-nav-color:hsl(210deg 4% 80%);
     --ae-nav-hover-color:hsl(0deg 0% 4%);
     --ae-input-color:hsl(210deg 4% 80%);
+    --ae-input-disabled-color:hsl(210deg 4% 40%);
     --ae-label-color:hsl(210deg 4% 80%);
     --ae-subgroup-input-color:hsl(0deg 100% 100%);
     --ae-placeholder-color:hsl(214deg 5% 30%);
@@ -463,6 +464,10 @@ select {
 	min-width: unset;
 }
 
+input:disabled, textarea:disabled {
+    -webkit-text-fill-color: var(--ae-input-disabled-color) !important;
+}
+
 select {
     appearance: auto;
 }
diff --git a/svelte.config.js b/svelte.config.js
index bf792da..69f3667 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,4 +1,9 @@
 import sveltePreprocess from "svelte-preprocess";
+import path, { dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const filePath = dirname(fileURLToPath(import.meta.url))
+const scssPath = `./src/scss`
 
 const config = {
   preprocess: [
@@ -8,6 +13,9 @@ const config = {
           debug: true,
         }
       },
+      scss: {
+        prependData: `@import '${scssPath}/global.scss';`
+      }
     })
   ]
 };