src/frontend/static/style.css

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