php-chess/html/static/styles.css

66 lines
1.1 KiB
CSS
Raw Permalink Normal View History

2024-10-19 13:32:46 +00:00
* {
box-sizing: border-box;
}
.board {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.square {
width: 12.5%;
height: 12.5%;
position: relative;
2024-10-19 13:32:46 +00:00
}
.square.black {
background-color: brown;
}
.square.white {
background-color: lightgoldenrodyellow;
}
.square.movePossible:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
background: green;
width: 25%;
height: 25%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
2024-10-31 21:31:19 +00:00
.square.white.lastMove {
background-color: lightgreen;
}
.square.black.lastMove {
background-color: yellowgreen;
}
.board.interactive:not(.moveSelection) .square.black.hasMoves .doesnotexist, .square.black.source {
2024-10-19 13:32:46 +00:00
background-color: green;
}
2024-10-31 21:31:19 +00:00
.board.interactive:not(.moveSelection) .square.white.hasMoves .doesnotexist, .square.white.source {
background-color: mediumseagreen;
2024-10-19 13:32:46 +00:00
}
.piece {
width: 100%;
height: 100%;
position: relative;
}
.piece img {
width: 100%;
z-index: 10;
}