danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Style game state indicator

Browse Source
This commit is contained in:
Daniel Barber 2018-04-07 18:54:20 -04:00
parent d86d94dc70
commit 5bc43465ff
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/_board.scss
View File

@ -23,7 +23,7 @@
border-collapse: unset; border-collapse: unset;
border-radius: 2.8%; border-radius: 2.8%;
border-spacing: 1px; border-spacing: 1px;
box-shadow: 0 (var(--board-size) / 200) (var(--board-size) / 40) $board-shadow-color; box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color;
color: $white-square-color; color: $white-square-color;
height: var(--board-size); height: var(--board-size);
padding: calc(var(--board-size) / 20); padding: calc(var(--board-size) / 20);
@ -97,11 +97,29 @@
} }
.board-game-state { .board-game-state {
align-items: center;
bottom: 0; bottom: 0;
color: white; color: $foreground-color;
display: flex;
font-size: calc(var(--board-size) / 30);
height: 5%; height: 5%;
position: absolute; position: absolute;
width: 90%; width: 90%;
&.checkmate,
&.stalemate {
align-items: center;
background-color: $game-state-background-color;
border-radius: calc(var(--board-size) / 75);
box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color,
inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
display: flex;
height: 7.5%;
justify-content: center;
left: calc(50% - 15%);
top: calc(50% - 3.5%);
width: 30%;
}
} }
.board-label { .board-label {

2
assets/css/_variables.scss
View File

@ -18,6 +18,8 @@ $white-square-color: #bbb;
$selected-square-color: #0cf; $selected-square-color: #0cf;
$available-square-color: #6f0; $available-square-color: #6f0;
$game-state-background-color: darken($black-square-color, 10%);
$square-outline-color: darken($black-square-color, 20%); $square-outline-color: darken($black-square-color, 20%);
$selected-outline-color: lighten($selected-square-color, 20%); $selected-outline-color: lighten($selected-square-color, 20%);
$available-outline-color: rgba(lighten($available-square-color, 20%), 0.5); $available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);