22 lines
1.2 KiB
CSS
22 lines
1.2 KiB
CSS
:root{
|
|
--cell-size: 60px;
|
|
}
|
|
body{font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;}
|
|
.hidden{display:none}
|
|
header{background:#222;color:#fff;padding:10px}
|
|
main{padding:16px}
|
|
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
|
|
.board{display:flex;flex-direction:column;gap:0 /* no gap between rows */; /* remove outer border so cell borders touch */ width:calc(var(--cell-size)*8);}
|
|
.row{display:flex;gap:0 /* no gap between cells */}
|
|
.row .cell { width:var(--cell-size); height:var(--cell-size); }
|
|
/* Make sizing include borders so borders don't add extra space */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
/* For grid-rendered boards (JS sets display:grid on .board), let cells stretch to the grid track size.
|
|
For row-based rendering, `.row .cell` provides fixed sizing. */
|
|
.board > .cell { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f0d9b5; border:1px solid #b58863; margin:0; }
|
|
.cell.light { background: #f0d9b5; }
|
|
.cell.dark { background: #b58863; }
|
|
.board.flipped{transform:rotate(180deg)}
|
|
.piece{width:48px;height:48px}
|
|
.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
|
|
.controls button{margin-left:8px}
|