Commit 362236ac authored by Mahmoud Aglan's avatar Mahmoud Aglan

fix: chess coords inside squares like Chess.com, clean board edge

Coordinates now inside squares with contrasting colors:
- Rank numbers: top-left of left column, alternating light/dark
- File letters: bottom-right of bottom row, alternating dark/light
- No separate border/padding needed
- Board: no thick border, just subtle shadow
- Clean minimal look matching Chess.com mobile
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 8b37cdcf
......@@ -95,8 +95,6 @@
flex: 1;
min-width: 0;
direction: ltr;
padding-left: 22px;
padding-bottom: 22px;
}
.board-wrapper::before {
......@@ -122,13 +120,12 @@
grid-template-rows: repeat(8, 1fr);
width: 100%;
height: 100%;
border-radius: 6px;
border-radius: 4px;
overflow: hidden;
user-select: none;
touch-action: none;
direction: ltr;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
border: 3px solid #3d3d3d;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.square {
......@@ -214,42 +211,55 @@
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
/* Coordinate labels - outside board in border */
/* Coordinate labels - inside squares like Chess.com */
.board-coords-file, .board-coords-rank {
position: absolute;
display: flex;
font-family: var(--font-en);
font-size: 12px;
font-size: 11px;
font-weight: 700;
pointer-events: none;
z-index: 6;
}
.board-coords-file {
bottom: -22px;
bottom: 2px;
left: 0;
right: 0;
}
.board-coords-file span {
flex: 1;
text-align: center;
color: #aaa;
text-align: right;
padding-right: 3px;
}
.board-coords-file span:nth-child(odd) {
color: var(--board-dark);
}
.board-coords-file span:nth-child(even) {
color: var(--board-light);
}
.board-coords-rank {
top: 0;
bottom: 0;
left: -20px;
left: 2px;
flex-direction: column;
}
.board-coords-rank span {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
align-items: flex-start;
padding-top: 2px;
}
.board-coords-rank span:nth-child(odd) {
color: var(--board-light);
}
.board-coords-rank span:nth-child(even) {
color: var(--board-dark);
}
/* Arrow Canvas */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment