refactoring/cleanup / beta

shotclock.css

@@ -1,3 +1,4 @@
+/* generics */
 body {
     background-color: black;
     color: #f12f12;
@@ -34,68 +35,67 @@ td {
     vertical-align: center;
     font-size: 5vh;
 }
-ul li {
-    list-style-position: inside;
-}
 
-tr.player-score {
-    height: 50%;
+/* player */
+.player-name {
+    border: 1vh solid transparent;
 }
-td.player-score {
+.player-name.active {
+    border: 1vh solid #f12f12;
+    border-radius: 25px;
+}
+.player-score {
+    height: 50%;
     font-size: 30vh;
     font-family: 'Seven segment', sans-serif;
 }
-td.player-extension {
-    background-color: #00f120;
-    border-radius: 25px;
-}
-td.player-extension.inactive {
+.player-extension {
     background-color: #f12f12;
     color: grey;
+    border-radius: 25px;
+}
+.player-extension.active {
+    background-color: #00f120;
+    color: #f12f12;
 }
 
-td.display {
+/* display */
+.display {
     width: 60%;
 }
-tr.display-time {
-    height: 80%;
-}
-#display-time {
-    font-size: 50vh;
-    font-family: 'Seven segment', sans-serif;
-}
-#display-bar {
-    border-radius: 25px;
-    background: linear-gradient(90deg, rgba(0,0,0,1) -200%, rgba(255,0,0,1) -200%, rgba(0,241,32,1) 100%);
-}
-
-.controls {
-    height: 20%;
-}
-.controls td {
-    padding: 2vh;
-    font-size: 20vh;
-}
-
-.invisible {
-    display: none !important;
-}
-.settings-inputs td {
-    width: 50%;
-}
-#welcome-confirm img {
-    height: 30vh;
-}
-
-.player-name td {
-    border: 1vh solid transparent;
-}
-.player-name.active td{
-    border: 1vh solid #f12f12;
-    border-radius: 25px;
-}
 .display-break.active{
     background-image: url("12ball.png");
     background-size: contain;
     background-repeat: no-repeat;
-}
+}
+.display-timer {
+    height: 80%;
+    font-size: 50vh;
+    font-family: 'Seven segment', sans-serif;
+}
+.display-bar {
+    border-radius: 25px;
+    background: linear-gradient(90deg, rgba(0,0,0,1) -200%, rgba(255,0,0,1) -200%, rgba(0,241,32,1) 100%);
+}
+
+/* controls */
+.controls td {
+    padding: 2vh;
+    font-size: 20vh;
+}
+
+/* modal welcome */
+#welcome-confirm {
+    height: 10vh;
+    margin: 5vh;
+}
+
+
+.settings-inputs td {
+    width: 50%;
+}
+
+/* helpers */
+.invisible {
+    display: none !important;
+}