diff --git a/src/frontend/static/style.css b/src/frontend/static/style.css index 25d5b7d..4847de6 100644 --- a/src/frontend/static/style.css +++ b/src/frontend/static/style.css @@ -30,49 +30,55 @@ li form { display: inline; } -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; -} +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; + } -table.game-board-table { - border: solid 7px transparent; - border-collapse: collapse; -} + table.game-board-table { + border: solid 7px transparent; + border-collapse: collapse; -table.game-board-table tbody.game-board td { - border: solid 6px black; - padding: 3px; -} + tbody.game-board { + td { + border: solid 6px black; + padding: 3px; + } -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; -} + button { + &, + &:disabled, + &:hover { + width: 4em; + height: 4em; + border: none; + background-color: transparent; + color: transparent; + } -tbody.game-board button.square-X { - background-image: url("x.png"); - background-size: 100% 100%; -} + &.square-X { + background-image: url("x.png"); + background-size: 100% 100%; + } -tbody.game-board button.square-O { - background-image: url("o.png"); - background-size: 100% 100%; -} + &.square-O { + background-image: url("o.png"); + background-size: 100% 100%; + } -tbody.game-board button.square-_:enabled { - cursor: pointer; + &.square-_:enabled { + cursor: pointer; + } + } + } + } }