mirror of
https://github.com/R0m1k3/chesspreview.git
synced 2026-10-11 17:28:39 +02:00
Fix chessboard square dimensions
This commit is contained in:
1 parent
3dd0aa9a09
commit
638d19fe6f
1 file changed
+2
-2
+2
-2
@@ -23,8 +23,8 @@ h1,h2 { font-family:'Playfair Display',serif;margin:4px 0 0;font-weight:600; } h
|
|||||||
.board-area { display:flex; gap:16px; align-items:stretch; }
|
.board-area { display:flex; gap:16px; align-items:stretch; }
|
||||||
.eval-bar { width:18px; position:relative; display:flex;flex-direction:column;gap:8px; }.eval-number { font:9px 'DM Mono',monospace; writing-mode:vertical-rl;transform:rotate(180deg);height:34px; }.eval-track { background:var(--ink);flex:1;position:relative;overflow:hidden; }.eval-white { position:absolute;bottom:0;width:100%;background:var(--cream);transition:height .55s cubic-bezier(.2,.8,.2,1); }
|
.eval-bar { width:18px; position:relative; display:flex;flex-direction:column;gap:8px; }.eval-number { font:9px 'DM Mono',monospace; writing-mode:vertical-rl;transform:rotate(180deg);height:34px; }.eval-track { background:var(--ink);flex:1;position:relative;overflow:hidden; }.eval-white { position:absolute;bottom:0;width:100%;background:var(--cream);transition:height .55s cubic-bezier(.2,.8,.2,1); }
|
||||||
.board-shell { width:min(100%,calc(100vh - 220px)); aspect-ratio:1; box-shadow:0 25px 50px rgba(55,43,27,.18),0 2px 0 rgba(255,255,255,.4) inset; border:7px solid #292a24; }
|
.board-shell { width:min(100%,calc(100vh - 220px)); aspect-ratio:1; box-shadow:0 25px 50px rgba(55,43,27,.18),0 2px 0 rgba(255,255,255,.4) inset; border:7px solid #292a24; }
|
||||||
.board { display:grid;grid-template-columns:repeat(8,1fr);position:relative;width:100%;height:100%;border:1px solid #10110f; }
|
.board { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));position:relative;width:100%;height:100%;border:1px solid #10110f; }
|
||||||
.square { border:0; padding:0; position:relative; display:grid;place-items:center;cursor:pointer; overflow:hidden; }.square.light{background:#d8d0bc}.square.dark{background:#67725e}.square:hover:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.11)}
|
.square { border:0; padding:0; min-width:0;min-height:0;position:relative; display:grid;place-items:center;cursor:pointer; overflow:hidden; }.square.light{background:#d8d0bc}.square.dark{background:#67725e}.square:hover:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.11)}
|
||||||
.square.last:before { content:'';position:absolute;inset:0;background:rgba(214,169,67,.34); }.square.selected { box-shadow:inset 0 0 0 4px rgba(244,190,70,.78); }.square.best { box-shadow:inset 0 0 0 3px rgba(199,109,69,.65); }
|
.square.last:before { content:'';position:absolute;inset:0;background:rgba(214,169,67,.34); }.square.selected { box-shadow:inset 0 0 0 4px rgba(244,190,70,.78); }.square.best { box-shadow:inset 0 0 0 3px rgba(199,109,69,.65); }
|
||||||
.piece { font-family:'Times New Roman',serif;font-size:clamp(32px,5.8vw,74px);line-height:1;position:relative;z-index:2;cursor:grab;user-select:none;filter:drop-shadow(0 3px 1px rgba(0,0,0,.22));transition:transform .12s; }.piece:hover{transform:translateY(-2px)}.white-piece{color:#f6f0e2;text-shadow:-1px -1px 0 #191b17,1px -1px 0 #191b17,-1px 1px 0 #191b17,1px 1px 0 #191b17}.black-piece{color:#171914;text-shadow:0 1px 0 rgba(255,255,255,.17)}
|
.piece { font-family:'Times New Roman',serif;font-size:clamp(32px,5.8vw,74px);line-height:1;position:relative;z-index:2;cursor:grab;user-select:none;filter:drop-shadow(0 3px 1px rgba(0,0,0,.22));transition:transform .12s; }.piece:hover{transform:translateY(-2px)}.white-piece{color:#f6f0e2;text-shadow:-1px -1px 0 #191b17,1px -1px 0 #191b17,-1px 1px 0 #191b17,1px 1px 0 #191b17}.black-piece{color:#171914;text-shadow:0 1px 0 rgba(255,255,255,.17)}
|
||||||
.target { width:18%;height:18%;border-radius:50%;background:rgba(18,23,17,.35);position:absolute;z-index:3;pointer-events:none; }.target.capture { width:76%;height:76%;background:transparent;border:5px solid rgba(18,23,17,.35); }
|
.target { width:18%;height:18%;border-radius:50%;background:rgba(18,23,17,.35);position:absolute;z-index:3;pointer-events:none; }.target.capture { width:76%;height:76%;background:transparent;border:5px solid rgba(18,23,17,.35); }
|
||||||
|
|||||||
Reference in new issue
Block a user