From 08d1cab25bccfc457e777790d56e61e548474671 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Wed, 12 Apr 2023 15:55:34 +0900
Subject: [PATCH] - update color picker button style - place color and font
 settings side by side

---
 public/index.html | 63 ++++++++++++++++++++++++++++-------------------
 public/style.css  | 29 ++++++++++++++++------
 2 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/public/index.html b/public/index.html
index e13cfa286..0e4ff4c83 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1105,33 +1105,46 @@
                     </div>
 
                 </div>
-                <div id="font-scale-block" class="range-block wide50p">
-                    <div class="range-block-title">
-                        <h4>Font Scale</h4>
+                <hr>
+                <div class="flex-container">
+                    <div id="color-picker-block" class="range-block wide50p">
+                        <div class="flex-container wide100p flexflowcolumn">
+                            <div class="range-block-title">
+                                <h4>UI Colors</h4>
+                            </div>
+                            <div class="flex-container">
+                                <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
+                                <div class="flex1">Main Text</div>
+                            </div>
+
+                            <div class="flex-container">
+                                <toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
+
+                                Italics Text
+                            </div>
+                            <div class="flex-container">
+                                <toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
+
+                                FastUI BG
+                            </div>
+                            <div class="flex-container">
+                                <toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
+
+                                Blur Tint
+                            </div>
+                        </div>
                     </div>
-                    <div class="range-block-range">
-                        <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
+                    <div id="font-scale-block" class="range-block wide50p">
+                        <div class="range-block-title">
+                            <h4>Font Scale</h4>
+                        </div>
+                        <div class="range-block-range">
+                            <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
+                        </div>
+                        <div class="range-block-counter">
+                            <span id="font_scale_counter">select</span>
+                        </div>
                     </div>
-                    <div class="range-block-counter">
-                        <span id="font_scale_counter">select</span>
-                    </div>
-                </div>
-                <div id="color-picker-block" class="range-block">
-                    <div class="range-block-title">
-                        Main Text Color
-                    </div>
-                    <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
-                    <div class="range-block-title">
-                        Italics Text Color
-                    </div>
-                    <toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
-                    <div class="range-block-title">
-                        FastUI BG Color
-                    </div>
-                    <toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
-                    <div class="range-block-title"></div>
-                    Blur Tint Color
-                    <toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
                 </div>
 
 
diff --git a/public/style.css b/public/style.css
index 51af99795..44be329eb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -47,12 +47,17 @@
     --fontScale: 1;
     --mainFontSize: calc(var(--fontScale) * 1rem);
 
+    /*styles for the color picker*/
+    --tool-cool-color-picker-btn-bg: transparent;
+    --tool-cool-color-picker-btn-border-color: transparent;
+
 }
 
 * {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    appearance: auto;
     -moz-appearance: auto;
     scroll-behavior: smooth;
     text-shadow: 0 0 3px black;
@@ -1954,12 +1959,6 @@ h4 {
     margin: 10px 0;
 }
 
-#character_popup h4 {
-    /*     margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 0; */
-}
-
 h5 {
     margin: 5px 0;
 }
@@ -3000,12 +2999,28 @@ label[for="extensions_autoconnect"] {
     width: 100%;
 }
 
+toolcool-color-picker {
+    margin-right: 10px;
+}
+
 .flex-container {
     display: flex;
-    gap: 10px;
+    row-gap: 10px;
     flex-wrap: wrap;
 }
 
+.flex1 {
+    flex: 1;
+}
+
+.flexFlowColumn {
+    flex-flow: column;
+}
+
+.wideMinContent {
+    width: min-content;
+}
+
 .flexWide50p {
     flex: 50%;
 }