use modern css features (will break UI in old browsers that don't support nesting)

src/frontend/static/style.css

@@ -30,49 +30,55 @@ li form {
   display: inline;
 }
 
-board-game:not(.outcome-winx) .when-outcome-winx,
+board-game {
-board-game:not(.outcome-wino) .when-outcome-wino,
+  &:not(.outcome-winx) .when-outcome-winx,
-board-game:not(.outcome-draw) .when-outcome-draw,
+  &:not(.outcome-wino) .when-outcome-wino,
-board-game:not(.outcome-undecided) .when-outcome-undecided,
+  &:not(.outcome-draw) .when-outcome-draw,
-board-game:not(.autoplayer-x-enabled) .when-autoplayer-x-enabled,
+  &:not(.outcome-undecided) .when-outcome-undecided,
-board-game:not(.autoplayer-x-disabled) .when-autoplayer-x-disabled,
+  &:not(.autoplayer-x-enabled) .when-autoplayer-x-enabled,
-board-game:not(.autoplayer-o-enabled) .when-autoplayer-o-enabled,
+  &:not(.autoplayer-x-disabled) .when-autoplayer-x-disabled,
-board-game:not(.autoplayer-o-disabled) .when-autoplayer-o-disabled,
+  &:not(.autoplayer-o-enabled) .when-autoplayer-o-enabled,
-board-game:not(.game-in-progress) .when-game-in-progress,
+  &:not(.autoplayer-o-disabled) .when-autoplayer-o-disabled,
-board-game:not(.game-not-in-progress) .when-game-not-in-progress {
+  &:not(.game-in-progress) .when-game-in-progress,
-  display: none;
+  &:not(.game-not-in-progress) .when-game-not-in-progress {
-}
+    display: none;
+  }
 
-table.game-board-table {
+  table.game-board-table {
-  border: solid 7px transparent;
+    border: solid 7px transparent;
-  border-collapse: collapse;
+    border-collapse: collapse;
-}
 
-table.game-board-table tbody.game-board td {
+    tbody.game-board {
-  border: solid 6px black;
+      td {
-  padding: 3px;
+        border: solid 6px black;
-}
+        padding: 3px;
+      }
 
-tbody.game-board button,
+      button {
-tbody.game-board button:disabled,
+        &,
-tbody.game-board button:hover {
+        &:disabled,
-  width: 4em;
+        &:hover {
-  height: 4em;
+          width: 4em;
-  border: none;
+          height: 4em;
-  background-color: transparent;
+          border: none;
-  color: transparent;
+          background-color: transparent;
-}
+          color: transparent;
+        }
 
-tbody.game-board button.square-X {
+        &.square-X {
-  background-image: url("x.png");
+          background-image: url("x.png");
-  background-size: 100% 100%;
+          background-size: 100% 100%;
-}
+        }
 
-tbody.game-board button.square-O {
+        &.square-O {
-  background-image: url("o.png");
+          background-image: url("o.png");
-  background-size: 100% 100%;
+          background-size: 100% 100%;
-}
+        }
 
-tbody.game-board button.square-_:enabled {
+        &.square-_:enabled {
-  cursor: pointer;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }