From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 8 Feb 2025 16:43:39 +0000 (-0500)
Subject: Color picker improvements on mobile
X-Git-Url: https://littlesong.place/gitweb/gitweb.cgi?a=commitdiff_plain;h=fb7cd276eabfee7f7e72d29017457f97af6b564d;p=littlesongplace.git

Color picker improvements on mobile
---

diff --git a/templates/profile.html b/templates/profile.html
index 03960d6..c497fa8 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -53,15 +53,15 @@
     <table>
         <tr>
             <td> <label for="bgcolor">Background</label> </td>
-            <td> <input name="bgcolor" type="text" id="bgcolor-input" value="{{ user_bgcolor or '#e8e6b5' }}" data-coloris oninput="updateColor('--yellow', this.value)"/> </td>
+            <td> <input name="bgcolor" type="text" id="bgcolor-input" value="{{ user_bgcolor or '#e8e6b5' }}" readonly data-coloris oninput="updateColor('--yellow', this.value)"/> </td>
         </tr>
         <tr>
             <td> <label for="fgcolor">Text</label> </td>
-            <td> <input name="fgcolor" type="text" id="fgcolor-input" value="{{ user_fgcolor or '#695c73' }}" data-coloris oninput="updateColor('--black', this.value)"/> </td>
+            <td> <input name="fgcolor" type="text" id="fgcolor-input" value="{{ user_fgcolor or '#695c73' }}" readonly data-coloris oninput="updateColor('--black', this.value)"/> </td>
         </tr>
         <tr>
             <td> <label for="accolor">Accent</label> </td>
-            <td> <input name="accolor" type="text" id="accolor-input" value="{{ user_accolor or '#9373a9' }}" data-coloris oninput="updateColor('--purple', this.value)"/> </td>
+            <td> <input name="accolor" type="text" id="accolor-input" value="{{ user_accolor or '#9373a9' }}" readonly data-coloris oninput="updateColor('--purple', this.value)"/> </td>
         </tr>
         <script>
             function updateColor(name, value) {
@@ -87,7 +87,8 @@
     <button type="button" class="button" onclick="resetColors()">Reset Colors</button>
     <script>
         Coloris({
-          alpha: false
+            alpha: false,
+            focusInput: false,
         });
     </script>