styles buttons

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

@@ -13,7 +13,6 @@
         .collapsible {
             background-color: #333333;
             color: black;
-            cursor: pointer;
             margin-top: 10px;
             padding: 18px;
             width: 100%;
@@ -39,6 +38,14 @@
             background: #333333;
             color: #fff
         }
+
+        button:hover {
+            background: #444444;
+        }
+        button:active {
+            background: #222222;
+        }
+
         input {
             margin: 10px;
         }
@@ -106,6 +113,11 @@
             color: #000
         }
 
+
+        .overlayButton:hover {
+            background: transparent;
+        }
+
         .tooltip {
             position: fixed;
             border-radius: 0.5rem;
@@ -171,8 +183,8 @@
             <color-picker id="themeColor"></color-picker>
             <div id="dice-box"></div>
 
-            <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
+            <button style="margin: 10px" id="preview">Preview 🔎</button>
-            <button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
+            <button style="margin: 10px" onclick="saveDice()">Save 💾</button>
             <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
         </div>
         <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
@@ -191,7 +203,7 @@
         <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
             <label for="command">Command </label>
             <input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
-            <button hidden id="roll" onclick="roll()">Roll 🞂</button>
+            <button hidden id="roll" onclick="roll()">Roll 🎲</button>
             <button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
         </div>
 

src/main/resources/templates/results.html

@@ -31,7 +31,7 @@
                     resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> '
                 })
             }
-            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922;	' + resultText
+            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> 🎲	' + resultText
             name.appendChild(node)
             document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
         }