123 lines
2.5 KiB
CSS
123 lines
2.5 KiB
CSS
.game-board {
|
|
--ratio: 0.9;
|
|
display: grid;
|
|
grid-template-columns: min-content repeat(9, minmax(2rem, 4rem)) max-content;
|
|
grid-template-rows: auto repeat(9, 1fr) auto;
|
|
background-color: #444;
|
|
gap: 3px;
|
|
place-self: center;
|
|
}
|
|
|
|
.board {
|
|
display: grid;
|
|
grid-column: span 10;
|
|
grid-row: span 10;
|
|
grid-template-areas:
|
|
"rank A9 B9 C9 D9 E9 F9 G9 H9 I9"
|
|
"rank A8 B8 C8 D8 E8 F8 G8 H8 I8"
|
|
"rank A7 B7 C7 D7 E7 F7 G7 H7 I7"
|
|
"rank A6 B6 C6 D6 E6 F6 G6 H6 I6"
|
|
"rank A5 B5 C5 D5 E5 F5 G5 H5 I5"
|
|
"rank A4 B4 C4 D4 E4 F4 G4 H4 I4"
|
|
"rank A3 B3 C3 D3 E3 F3 G3 H3 I3"
|
|
"rank A2 B2 C2 D2 E2 F2 G2 H2 I2"
|
|
"rank A1 B1 C1 D1 E1 F1 G1 H1 I1"
|
|
". file file file file file file file file file";
|
|
grid-template-columns: subgrid;
|
|
grid-template-rows: subgrid;
|
|
background-color: #444444;
|
|
max-height: 100%;
|
|
aspect-ratio: var(--ratio);
|
|
}
|
|
|
|
.board[data-perspective="Player2"] {
|
|
grid-template-areas:
|
|
"rank I1 H1 G1 F1 E1 D1 C1 B1 A1"
|
|
"rank I2 H2 G2 F2 E2 D2 C2 B2 A2"
|
|
"rank I3 H3 G3 F3 E3 D3 C3 B3 A3"
|
|
"rank I4 H4 G4 F4 E4 D4 C4 B4 A4"
|
|
"rank I5 H5 G5 F5 E5 D5 C5 B5 A5"
|
|
"rank I6 H6 G6 F6 E6 D6 C6 B6 A6"
|
|
"rank I7 H7 G7 F7 E7 D7 C7 B7 A7"
|
|
"rank I8 H8 G8 F8 E8 D8 C8 B8 A8"
|
|
"rank I9 H9 G9 F9 E9 D9 C9 B9 A9"
|
|
". file file file file file file file file file";
|
|
}
|
|
|
|
|
|
.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 {
|
|
grid-row: span 9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
place-content: space-between;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.side-board .player-area {
|
|
display: grid;
|
|
place-items: stretch;
|
|
}
|
|
|
|
.side-board .hand {
|
|
display: grid;
|
|
border: 1px solid #ccc;
|
|
grid-template-columns: repeat(auto-fill, 3rem);
|
|
grid-template-rows: 3rem;
|
|
place-items: center start;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.controls {
|
|
grid-column: span 11;
|
|
|
|
display: flex;
|
|
}
|
|
|
|
.controls .history {
|
|
|
|
}
|
|
|
|
@media all and (max-width: 1000px) {
|
|
.game-board {
|
|
grid-template-columns: min-content repeat(9, minmax(2rem, 4rem));
|
|
grid-template-rows: repeat(9, 1fr) auto max-content;
|
|
}
|
|
|
|
.side-board {
|
|
grid-row: unset;
|
|
grid-column: span 10;
|
|
flex-direction: row;
|
|
}
|
|
}
|