Files
chess.js/style.css
2019-04-08 21:52:07 +02:00

184 lines
3.9 KiB
CSS

#game-container {
position: relative;
display: grid;
width: 800px;
height: 1220px;
grid-gap: 10px;
grid-template-areas: "dead-black" "field" "dead-white";
grid-template-rows: 1fr 4fr 1fr;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transition: transform 1s 1s;
-moz-transition: transform 1s 1s;
-ms-transition: transform 1s 1s;
-o-transition: transform 1s 1s;
transition: transform 1s 1s;
}
#game-container.black-turn {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
#game-container .board {
position: relative;
grid-area: field;
}
#game-container .board .col {
display: inline-block;
width: 12.5%;
height: 100%;
}
#game-container .board .col .field {
position: relative;
box-sizing: border-box;
width: 100%;
height: 12.5%;
}
#game-container .board .col .field.white {
background-color: #eee;
}
#game-container .board .col .field.black {
background-color: #000;
}
#game-container .board .col .field.possible-target {
border: 4px solid #f0f;
}
#game-container.focused .board .col .field:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .1);
content: "";
pointer-events: none;
}
#game-container.focused .board .col .field.possible-target:after {
background: transparent;
}
#game-container .figures {
position: relative;
z-index: 1;
pointer-events: none;
grid-area: field;
}
#game-container .figures .figure {
position: absolute;
top: 0;
left: 0;
width: 12.5%;
height: 12.5%;
transition: transform .3s;
}
.figure:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 75%;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
color: #f0f;
content: '';
-webkit-transition: transform 1s 1s;
-moz-transition: transform 1s 1s;
-ms-transition: transform 1s 1s;
-o-transition: transform 1s 1s;
transition: transform 1s 1s;
}
.black-turn .figure:before {
-webkit-transform: translate(-50%, -50%) rotate(-180deg);
-moz-transform: translate(-50%, -50%) rotate(-180deg);
-ms-transform: translate(-50%, -50%) rotate(-180deg);
-o-transform: translate(-50%, -50%) rotate(-180deg);
transform: translate(-50%, -50%) rotate(-180deg);
}
.pawn.white:before {
background-image: url("assets/pawn_white.svg");
}
.rook.white:before {
background-image: url("assets/rook_white.svg");
}
.knight.white:before {
background-image: url("assets/knight_white.svg");
}
.bishop.white:before {
background-image: url("assets/bishop_white.svg");
}
.queen.white:before {
background-image: url("assets/queen_white.svg");
}
.king.white:before {
background-image: url("assets/king_white.svg");
}
.pawn.black:before {
background-image: url("assets/pawn_black.svg");
}
.rook.black:before {
background-image: url("assets/rook_black.svg");
}
.knight.black:before {
background-image: url("assets/knight_black.svg");
}
.bishop.black:before {
background-image: url("assets/bishop_black.svg");
}
.queen.black:before {
background-image: url("assets/queen_black.svg");
}
.king.black:before {
background-image: url("assets/king_black.svg");
}
.dead-figures {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.dead-figures .figure {
position: relative;
width: 100%;
height: 100%;
}
.dead-figures.black {
grid-area: dead-white;
}
.dead-figures.white {
grid-area: dead-black;
}