184 lines
3.9 KiB
CSS
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;
|
|
}
|