From 353fe8822642a43c0de287578edd2fd251e92bf1 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Tue, 28 Feb 2023 15:37:38 +0530
Subject: [PATCH] Set tertiary colors on buttons that don't need to be visible
 in a very dominant manner

---
 ui/index.html                 |  6 +++---
 ui/media/css/main.css         | 22 +++++++++++++---------
 ui/media/css/themes.css       | 23 +++++++++++++++++++++++
 ui/media/js/main.js           |  2 +-
 ui/plugins/ui/merge.plugin.js |  2 +-
 5 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 4d970dd9..4938e230 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -51,7 +51,7 @@
         <div id="editor">
             <div id="editor-inputs">
                 <div id="editor-inputs-prompt" class="row">
-                    <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>
+                    <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn" class="tertiaryButton">Load from a file</button>
                     <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                     <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
@@ -287,9 +287,9 @@
             <div id="preview-content">
                 <div id="preview-tools">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
-                    <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-download icon"></i> Download All Images</button>
+                    <button id="save-all-images" class="tertiaryButton"><i class="fa-solid fa-download icon"></i> Download All Images</button>
                     <div class="dropdown display-settings">
-                        <button class="dropbtn primaryButton">
+                        <button class="dropbtn tertiaryButton">
                             <i class="fa-solid fa-bars icon"></i>
                             Preview settings
                             <i class="fa-solid fa-angle-down icon"></i>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 2a8cc252..8e8eb3b8 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -193,7 +193,7 @@ code {
     flex: 0 0 70px;
     background: var(--accent-color);
     border: var(--primary-button-border);
-    color: rgb(255, 221, 255);
+    color: var(--accent-text-color);
     width: 100%;
     height: 30pt;
 }
@@ -499,17 +499,21 @@ div.img-preview img {
 .secondaryButton:hover {
     background: rgb(177, 27, 0);
 }
-.useSettings {
-    background: var(--accent-color);
-    border: 1px solid var(--accent-color);
-    color: rgb(255, 221, 255);
+.tertiaryButton {
+    background: var(--tertiary-background-color);
+    color: var(--tertiary-color);
+    border: 1px solid var(--tertiary-border-color);
     padding: 3pt 6pt;
+    border-radius: 5px;
+}
+.tertiaryButton:hover {
+    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    color: var(--accent-text-color);
+}
+.useSettings {
     margin-right: 6pt;
     float: right;
 }
-.useSettings:hover {
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
-}
 .stopTask {
     float: right;
 }
@@ -889,7 +893,7 @@ input::file-selector-button {
 #promptsFromFileBtn {
     font-size: 9pt;
     display: inline;
-    background-color: var(--accent-color);
+    padding: 2pt;
 }
 
 .section-button {
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index 3cb02ab3..0aed83a3 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -27,9 +27,13 @@
     --input-border-size: 1px; 
     --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
     --accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
+    --accent-text-color: rgb(255, 221, 255);
     --primary-button-border: none;
     --input-switch-padding: 1px;
     --input-height: 18px;
+	--tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
+    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
+    --tertiary-color: var(--input-text-color)
 
     /* Main theme color, hex color fallback. */
     --theme-color-fallback: #673AB6;
@@ -48,6 +52,11 @@
     --input-border-color: grey; 
 
     --theme-color-fallback: #aaaaaa;
+
+	--tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (16.8 * var(--value-step))));
+    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (12 * var(--value-step))));
+
+    --accent-text-color: white;
 }
 
 .theme-discord {
@@ -64,6 +73,10 @@
     --input-border-color: var(--input-background-color); 
 
     --theme-color-fallback: #202225;
+
+    --tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3.5 * var(--value-step))));
+    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (4.5 * var(--value-step))));
+    --accent-text-color: white;
 }
 
 .theme-cool-blue {
@@ -81,6 +94,10 @@
     --accent-hue: 212;
 
     --theme-color-fallback: #0056b8;
+
+    --tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3.5 * var(--value-step))));
+    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (4.5 * var(--value-step))));
+    --accent-text-color: #f7fbff;
 }
 
 
@@ -97,6 +114,9 @@
     --input-background-color: var(--background-color3);
 
     --theme-color-fallback: #5300b8;
+
+    --tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3.5 * var(--value-step))));
+    --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (4.5 * var(--value-step))));
 }
 
 .theme-super-dark {
@@ -131,6 +151,9 @@
     --input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
     --input-text-color: #FF0000;
     --input-border-color: #005E05;
+
+    --tertiary-color: white;
+    --accent-text-color: #f7fbff;
 }
 
 
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index c2a187a2..06b55b12 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -864,7 +864,7 @@ function createTask(task) {
                                 <i class="drag-handle fa-solid fa-grip"></i>
                                 <div class="taskStatusLabel">Enqueued</div>
                                 <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
-                                <button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
+                                <button class="tertiaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
                                 <div class="preview-prompt"></div>
                                 <div class="taskConfig">${taskConfig}</div>
                                 <div class="outputMsg"></div>
diff --git a/ui/plugins/ui/merge.plugin.js b/ui/plugins/ui/merge.plugin.js
index 06556d97..87c62d8b 100644
--- a/ui/plugins/ui/merge.plugin.js
+++ b/ui/plugins/ui/merge.plugin.js
@@ -239,7 +239,7 @@
 
     merge.innerHTML = `
     <div class="merge-container panel-box">
-      <div class="merge-input" style="position: relative">
+      <div class="merge-input">
          <p><label for="#mergeModelA">Select Model A:</label></p>
          <input id="mergeModelA" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
          <p><label for="#mergeModelB">Select Model B:</label></p>