From 72a65218beee85309bbae90ab27ad51645325cb8 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 18:04:41 -0700
Subject: [PATCH] updated some of the styling and positioning of some stuff

---
 ui/media/main.css | 50 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 47896983..20f8726a 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -9,11 +9,13 @@
 
     --text-color: #eee;
 
-    --input-text-color: #ccc;
-    --input-background-color: hsl(225, 11.1%, 14%); 
-    --input-border-color: hsl(225, 11.1%, 10%); 
+    --input-text-color: black;
+    --input-background-color: #e9e9ed; 
+    --input-border-color: #8f8f9d; 
 
-    /* non-theme stuff */
+    /* other */
+    --input-border-radius: 4px;
+    --input-border-size: 1px; 
     --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
     --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
 }
@@ -36,7 +38,7 @@
 */
 
 /* Discord Theme */
-/* 
+/*  
 :root {
     --background-color1: #36393f;
     --background-color2: #2f3136;
@@ -47,10 +49,30 @@
     --accent-lightness: 65%;
     --make-image-border: none;
 
+    --input-border-size: 2px; 
     --input-background-color: #202225; 
     --input-border-color: var(--input-background-color); 
-}
-*/
+} */
+
+/* Dillerm Theme */
+/* :root {
+    --main-hue: 222;
+	--main-saturation: 18%;
+	--value-base: 19%;
+	--value-step: 3%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
+    
+    --accent-hue: 212;
+    --make-image-border: none;
+    
+    --input-border-size: 1px; 
+    --input-background-color: var(--background-color3);
+	--input-text-color: #ccc;
+	--input-border-color: var(--background-color4);
+} */
 
 
 * {
@@ -75,6 +97,7 @@ label {
 #prompt {
     width: 100%;
     height: 65pt;
+    font-size: 13px;
 }
 .image_preview_container {
     /* display: none; */
@@ -530,11 +553,11 @@ select {
 input,
 select,
 textarea {
-    border-radius: 6px;
+    border-radius: var(--input-border-radius);
     padding: 4px;
     accent-color: var(--accent-color);
     background: var(--input-background-color);
-    border: 2px solid var(--input-border-color); 
+    border: var(--input-border-size) solid var(--input-border-color); 
     color: var(--input-text-color);
 }
 
@@ -554,6 +577,15 @@ textarea[disabled] {
     opacity: 0.5;
 }
 
+input[type="file"] {
+    width: 100%;
+    padding: 2px;
+}
+
+input::file-selector-button {
+    padding: 0px 4px;
+}
+
 /* input[type="range"] {
     -webkit-appearance: none;
     appearance: none;