121 lines
2.3 KiB
CSS
121 lines
2.3 KiB
CSS
.game-board {
|
|
--ratio: 0.9;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"rank board opponent-side-board"
|
|
"rank board player-info"
|
|
"rank board player-side-board"
|
|
". file .";
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: repeat(3, 1fr) auto;
|
|
background-color: #444;
|
|
gap: 5px;
|
|
place-self: center;
|
|
color: beige;
|
|
}
|
|
|
|
.board {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"A9 B9 C9 D9 E9 F9 G9 H9 I9"
|
|
"A8 B8 C8 D8 E8 F8 G8 H8 I8"
|
|
"A7 B7 C7 D7 E7 F7 G7 H7 I7"
|
|
"A6 B6 C6 D6 E6 F6 G6 H6 I6"
|
|
"A5 B5 C5 D5 E5 F5 G5 H5 I5"
|
|
"A4 B4 C4 D4 E4 F4 G4 H4 I4"
|
|
"A3 B3 C3 D3 E3 F3 G3 H3 I3"
|
|
"A2 B2 C2 D2 E2 F2 G2 H2 I2"
|
|
"A1 B1 C1 D1 E1 F1 G1 H1 I1";
|
|
grid-template-columns: repeat(9, 1fr);
|
|
grid-template-rows: repeat(9, 1fr);
|
|
background-color: #444444;
|
|
gap: 3px;
|
|
max-height: 80vmin;
|
|
aspect-ratio: var(--ratio);
|
|
}
|
|
|
|
.board[data-perspective="Player2"] {
|
|
grid-template-areas:
|
|
"I1 H1 G1 F1 E1 D1 C1 B1 A1"
|
|
"I2 H2 G2 F2 E2 D2 C2 B2 A2"
|
|
"I3 H3 G3 F3 E3 D3 C3 B3 A3"
|
|
"I4 H4 G4 F4 E4 D4 C4 B4 A4"
|
|
"I5 H5 G5 F5 E5 D5 C5 B5 A5"
|
|
"I6 H6 G6 F6 E6 D6 C6 B6 A6"
|
|
"I7 H7 G7 F7 E7 D7 C7 B7 A7"
|
|
"I8 H8 G8 F8 E8 D8 C8 B8 A8"
|
|
"I9 H9 G9 F9 E9 D9 C9 B9 A9";
|
|
}
|
|
|
|
|
|
.tile {
|
|
display: grid;
|
|
place-content: center;
|
|
aspect-ratio: var(--ratio);
|
|
background-color: beige;
|
|
transition: filter linear 0.25s;
|
|
}
|
|
|
|
.tile[data-selected] {
|
|
filter: invert(0.8);
|
|
}
|
|
|
|
.ruler {
|
|
color: beige;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.ruler.vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.board[data-perspective="Player2"] .ruler {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.board[data-perspective="Player2"] .ruler.vertical {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.side-board {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 3rem);
|
|
place-items: end start;
|
|
gap: 5px;
|
|
padding: 0.25rem;
|
|
background: linear-gradient(45deg, beige, white);
|
|
}
|
|
|
|
.side-board.opponent {
|
|
place-items: start;
|
|
}
|
|
|
|
.side-board:empty {
|
|
content: 'Captured Pieces';
|
|
}
|
|
|
|
.player-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-content: stretch;
|
|
}
|
|
|
|
@media all and (max-width: 900px) {
|
|
.game-board {
|
|
grid-template-areas:
|
|
". opponent-side-board ."
|
|
"rank board player-info"
|
|
". file ."
|
|
". player-side-board .";
|
|
grid-template-rows: auto 1fr auto auto;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.side-board {
|
|
min-height: 2rem;
|
|
}
|
|
}
|