src/main/resources/META-INF/resources/vendor/color-picker.js

@@ -63,7 +63,6 @@ class ColorPicker extends HTMLElement {
 				.rgba-display-wrapper {
 					height: 100%;
 					padding: 1.25em;
-					text-align: center;
 				}
 				#rgba-display {
 					font-family: "Courier New", monospace;
@@ -73,11 +72,11 @@ class ColorPicker extends HTMLElement {
 					display: inline;
 					border: none;
 					border-radius: 0.2em;
+					margin-bottom: 2.5em;
 					letter-spacing: 0.1em;
-					width: 5em;
+					width: 8em;
 					max-width: 100%;
 					font-variant-numeric: tabular-nums;
-					text-align: center;
 				}
 				input[type=range] {
 					width: 100%;
@@ -133,17 +132,13 @@ class ColorPicker extends HTMLElement {
         this.lightnessInput = this.shadowRoot.getElementById( 'lightness' );
         this.colorPreview = this.shadowRoot.getElementById( 'color-preview' );
         this.rgbaDisplay = this.shadowRoot.getElementById( 'rgba-display' );
-        this.rgbaDisplay.onkeyup = (event) => {
-            if(event.keyCode === 13) {
-                this.setColor( this.rgbaDisplay.value );
-            }
-        }
 
         // Create a temporary canvas to read color values.
         let tempCanvas = document.createElement( 'canvas' );
         tempCanvas.height = 1;
         tempCanvas.width = 1;
         this.tempCanvasCTX = tempCanvas.getContext( '2d', { willReadFrequently: true } );
+
     }
 
 

src/main/resources/templates/pub/index.html

@@ -160,11 +160,7 @@
                 <option value="wooden">Wooden</option>
             </select>
             <br/>
-            <color-picker id="themeColor"></color-picker><br/>
+            <color-picker value="#cd72fe" id="themeColor"></color-picker><br/>
-            <button style="margin-bottom: 20px" onclick="saveDice()">Save</button><button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
-            <div popover id="save-dice-hint" class="tooltip">
-                This saves your current theme and theme color for current Name
-            </div>
         </div><br/>
         <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
         <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
@@ -223,15 +219,12 @@
         }
     }
 
-    function saveDice() {
-        localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
-        localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
-    }
-
     let coll = document.getElementsByClassName("collapsible");
 
     for (let i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
+            localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
+            localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
             const content = this.nextElementSibling;
             if (content.style.display === "block") {
                 content.style.display = "none";