refactoring: Styleanpassungen: Spielplan und Knöpfe

kniffel/css/styles.css

@@ -31,6 +31,7 @@
   table {
     width: 100%;
     border-collapse: collapse;
+    background-color: lightblue;
   }
   
   th, td {
@@ -52,4 +53,40 @@
     margin: auto;
     width: 50%;
   }
-  
+ 
+  .button {
+    appearance: button;
+    backface-visibility: hidden;
+    background-color: #405cf5;
+    border-radius: 6px;
+    border-width: 0;
+    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
+    font-size: 100%;
+    height: 44px;
+    line-height: 1.15;
+    margin: 12px 0 0;
+    outline: none;
+    overflow: hidden;
+    padding: 0 25px;
+    position: relative;
+    text-align: center;
+    text-transform: none;
+    transform: translateZ(0);
+    transition: all .2s,box-shadow .08s ease-in;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    width: 20%;
+  }
+
+  .button:disabled {
+    cursor: default;
+  }
+
+  .button:focus {
+    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
+  }

kniffel/index.html

@@ -193,7 +193,7 @@
             </tr>
           </table>
           <br>
-        <input type="button" value="Spiel beenden" onclick="errechneEndergebnisse();">
+        <input class="button" type="button" value="Spiel beenden" onclick="errechneEndergebnisse();">
         <br>
       </div>
     
@@ -227,7 +227,7 @@
         </div>
         <h3>Bitte würfeln und Würfel markieren, welche rausgelegt werden sollen</h6>
         <br>
-        <input type="button" value="Würfeln" onclick="Wuerfel();">
+        <input class="button" type="button" value="Würfeln" onclick="Wuerfel();">
         <br>
         <div class="wuerfel">
           <h3>erlaubte Würfelversuche: </h3>