src/frontend/static/style.css

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