Skip to content

Commit cd5b5aa

Browse files
TMHSDigitalTMHSDigital
committed
Refactor board and pieces CSS for improved styling and clarity
- Updated board.css to enhance square coordinates visibility with better color and positioning. - Added corner markers for last move indication in board.css. - Simplified pieces.css by consolidating styles for white and black pieces, improving visual effects with shadows and colors. - Removed redundant content declarations for piece Unicode characters.
1 parent 14d6307 commit cd5b5aa

File tree

2 files changed

+100
-87
lines changed

2 files changed

+100
-87
lines changed

‎css/board.css‎

Lines changed: 80 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,56 @@
1515
.square::before,
1616
.square::after {
1717
position: absolute;
18-
color: rgba(255, 255, 255, 0.7);
19-
font-size: 0.8rem;
18+
color: rgba(0, 0, 0, 0.6);
19+
font-size: 0.75rem;
20+
font-weight: bold;
2021
z-index: 2;
2122
pointer-events: none;
23+
padding: 0 2px;
24+
border-radius: 2px;
25+
background-color: rgba(255, 255, 255, 0.4);
26+
line-height: 1;
27+
display: var(--show-coords, none);
28+
}
29+
30+
/* Adjust color specifically for dark squares */
31+
.square.dark::before,
32+
.square.dark::after {
33+
color: rgba(255, 255, 255, 0.7);
34+
background-color: rgba(0, 0, 0, 0.3);
2235
}
2336

24-
/* File coordinates (a-h) */
25-
.square[data-col="0"]::before {
26-
content: 'a';
37+
/* File coordinates (a-h) - Positioned slightly inside */
38+
.square::before {
2739
bottom: 2px;
2840
left: 2px;
29-
display: var(--show-coords, none);
3041
}
31-
.square[data-col="1"]::before { content: 'b'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
32-
.square[data-col="2"]::before { content: 'c'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
33-
.square[data-col="3"]::before { content: 'd'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
34-
.square[data-col="4"]::before { content: 'e'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
35-
.square[data-col="5"]::before { content: 'f'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
36-
.square[data-col="6"]::before { content: 'g'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
37-
.square[data-col="7"]::before { content: 'h'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
38-
39-
/* Rank coordinates (1-8) */
40-
.square[data-row="7"][data-col="7"]::after { content: '1'; top: 2px; right: 2px; display: var(--show-coords, none); }
41-
.square[data-row="6"][data-col="7"]::after { content: '2'; top: 2px; right: 2px; display: var(--show-coords, none); }
42-
.square[data-row="5"][data-col="7"]::after { content: '3'; top: 2px; right: 2px; display: var(--show-coords, none); }
43-
.square[data-row="4"][data-col="7"]::after { content: '4'; top: 2px; right: 2px; display: var(--show-coords, none); }
44-
.square[data-row="3"][data-col="7"]::after { content: '5'; top: 2px; right: 2px; display: var(--show-coords, none); }
45-
.square[data-row="2"][data-col="7"]::after { content: '6'; top: 2px; right: 2px; display: var(--show-coords, none); }
46-
.square[data-row="1"][data-col="7"]::after { content: '7'; top: 2px; right: 2px; display: var(--show-coords, none); }
47-
.square[data-row="0"][data-col="7"]::after { content: '8'; top: 2px; right: 2px; display: var(--show-coords, none); }
42+
.square[data-col="0"]::before { content: 'a'; }
43+
.square[data-col="1"]::before { content: 'b'; }
44+
.square[data-col="2"]::before { content: 'c'; }
45+
.square[data-col="3"]::before { content: 'd'; }
46+
.square[data-col="4"]::before { content: 'e'; }
47+
.square[data-col="5"]::before { content: 'f'; }
48+
.square[data-col="6"]::before { content: 'g'; }
49+
.square[data-col="7"]::before { content: 'h'; }
50+
51+
/* Rank coordinates (1-8) - Positioned slightly inside */
52+
.square::after {
53+
top: 2px;
54+
right: 2px;
55+
}
56+
.square[data-row="7"]::after { content: '1'; }
57+
.square[data-row="6"]::after { content: '2'; }
58+
.square[data-row="5"]::after { content: '3'; }
59+
.square[data-row="4"]::after { content: '4'; }
60+
.square[data-row="3"]::after { content: '5'; }
61+
.square[data-row="2"]::after { content: '6'; }
62+
.square[data-row="1"]::after { content: '7'; }
63+
.square[data-row="0"]::after { content: '8'; }
64+
65+
/* Hide file coordinate on a1 and rank coordinate on h8 for less clutter */
66+
.square[data-row="7"][data-col="0"]::before { display: none !important; }
67+
.square[data-row="0"][data-col="7"]::after { display: none !important; }
4868

4969
.square {
5070
display: flex;
@@ -109,11 +129,43 @@
109129
to { box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.8); }
110130
}
111131

112-
/* Last move indication */
113-
.square.last-move-from {
114-
background-color: rgba(173, 216, 230, 0.3);
132+
/* Last move indication - using corner markers */
133+
.square.last-move-from::before,
134+
.square.last-move-to::before,
135+
.square.last-move-from::after,
136+
.square.last-move-to::after {
137+
content: '';
138+
position: absolute;
139+
width: 15%;
140+
height: 15%;
141+
background-color: rgba(70, 130, 180, 0.7); /* Steel Blue */
142+
z-index: 1;
143+
}
144+
145+
/* Top-left corner */
146+
.square.last-move-from::before {
147+
top: 0;
148+
left: 0;
149+
border-bottom-right-radius: 5px;
150+
}
151+
152+
/* Bottom-right corner */
153+
.square.last-move-from::after {
154+
bottom: 0;
155+
right: 0;
156+
border-top-left-radius: 5px;
157+
}
158+
159+
/* Top-right corner */
160+
.square.last-move-to::before {
161+
top: 0;
162+
right: 0;
163+
border-bottom-left-radius: 5px;
115164
}
116165

117-
.square.last-move-to {
118-
background-color: rgba(173, 216, 230, 0.5);
166+
/* Bottom-left corner */
167+
.square.last-move-to::after {
168+
bottom: 0;
169+
left: 0;
170+
border-top-right-radius: 5px;
119171
}

‎css/pieces.css‎

Lines changed: 20 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -30,68 +30,29 @@
3030
/* === Enhanced Unicode Pieces === */
3131

3232
/* White Pieces */
33-
.piece.w.p::before {
34-
content: '\2659';
33+
.piece.w::before {
3534
color: #fff;
36-
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
37-
}
38-
.piece.w.r::before {
39-
content: '\2656';
40-
color: #fff;
41-
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
42-
}
43-
.piece.w.n::before {
44-
content: '\2658';
45-
color: #fff;
46-
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
47-
}
48-
.piece.w.b::before {
49-
content: '\2657';
50-
color: #fff;
51-
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
52-
}
53-
.piece.w.q::before {
54-
content: '\2655';
55-
color: #fff;
56-
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
57-
}
58-
.piece.w.k::before {
59-
content: '\2654';
60-
color: #fff;
61-
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
62-
}
35+
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.6));
36+
}
37+
.piece.w.p::before { content: '\2659'; }
38+
.piece.w.r::before { content: '\2656'; }
39+
.piece.w.n::before { content: '\2658'; }
40+
.piece.w.b::before { content: '\2657'; }
41+
.piece.w.q::before { content: '\2655'; }
42+
.piece.w.k::before { content: '\2654'; }
6343

6444
/* Black Pieces */
65-
.piece.b.p::before {
66-
content: '\265F';
67-
color: #000;
68-
text-shadow: 0 0 2px rgba(255,255,255,0.8);
69-
}
70-
.piece.b.r::before {
71-
content: '\265C';
72-
color: #000;
73-
text-shadow: 0 0 2px rgba(255,255,255,0.8);
74-
}
75-
.piece.b.n::before {
76-
content: '\265E';
77-
color: #000;
78-
text-shadow: 0 0 2px rgba(255,255,255,0.8);
79-
}
80-
.piece.b.b::before {
81-
content: '\265D';
82-
color: #000;
83-
text-shadow: 0 0 2px rgba(255,255,255,0.8);
84-
}
85-
.piece.b.q::before {
86-
content: '\265B';
87-
color: #000;
88-
text-shadow: 0 0 2px rgba(255,255,255,0.8);
89-
}
90-
.piece.b.k::before {
91-
content: '\265A';
92-
color: #000;
93-
text-shadow: 0 0 2px rgba(255,255,255,0.8);
94-
}
45+
.piece.b::before {
46+
color: #111; /* Slightly off-black */
47+
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.7); /* Subtle white glow */
48+
filter: drop-shadow(1px 1px 1px rgba(255,255,255,0.2)); /* Very faint light shadow */
49+
}
50+
.piece.b.p::before { content: '\265F'; }
51+
.piece.b.r::before { content: '\265C'; }
52+
.piece.b.n::before { content: '\265E'; }
53+
.piece.b.b::before { content: '\265D'; }
54+
.piece.b.q::before { content: '\265B'; }
55+
.piece.b.k::before { content: '\265A'; }
9556

9657
/* Move animations */
9758
@keyframes move-piece {

0 commit comments

Comments
 (0)