133 lines
2.8 KiB
SCSS
133 lines
2.8 KiB
SCSS
.learn__main {
|
|
item {
|
|
width: 70%;
|
|
height: 70%;
|
|
bottom: 15%;
|
|
left: 15%;
|
|
background-size: cover;
|
|
position: absolute;
|
|
transform: translate3d(0, 0, 0);
|
|
z-index: 1;
|
|
transition: all 1s;
|
|
}
|
|
@keyframes soft-hue {
|
|
50%{
|
|
filter: hue-rotate(-20deg);
|
|
}
|
|
}
|
|
@keyframes soft-grow {
|
|
50%{
|
|
transform: scale(1.08);
|
|
}
|
|
}
|
|
@keyframes apple-appear {
|
|
0% {
|
|
opacity: 0.5; transform: scale(0) rotate(-360deg);
|
|
}
|
|
100% {
|
|
opacity: 1; transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
.apple {
|
|
background-image: url(../images/learn/star.png);
|
|
animation: 0.6s ease-in-out 0s 1 forwards apple-appear,
|
|
1.7s ease-in-out 0.7s infinite none soft-grow,
|
|
0.7s ease-in-out 0.7s infinite none soft-hue;
|
|
}
|
|
square.has-item.move-dest {
|
|
background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
|
|
}
|
|
.cg-board square.move-dest.drag-over,
|
|
.cg-board square.move-dest:hover {
|
|
background: rgba(20, 85, 30, 0.3);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
0% {
|
|
opacity: 0;
|
|
filter: blur(15px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
|
|
@keyframes rankGlow {
|
|
50% {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
box-shadow: 0 0 40px rgba(255,255,255,0.7);
|
|
}
|
|
}
|
|
.highlight-2nd-rank & .cg-board::after,
|
|
.highlight-5th-rank & .cg-board::after,
|
|
.highlight-7th-rank & .cg-board::after {
|
|
width: 100%;
|
|
height: 12.5%;
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 12.5%;
|
|
left: 0;
|
|
box-shadow: 0 0 15px rgba(255,255,255,0.2);
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
animation: 1s rankGlow ease-in-out infinite;
|
|
}
|
|
.highlight-7th-rank & .cg-board::after {
|
|
top: 12.5%;
|
|
}
|
|
.highlight-5th-rank & .cg-board::after {
|
|
top: 37.5%;
|
|
}
|
|
#promotion-choice .explanation {
|
|
@extend %popup-shadow;
|
|
background: $c-bg-popup;
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 50%;
|
|
padding: 20px;
|
|
h2 {
|
|
font-size: 2em;
|
|
}
|
|
p {
|
|
font-size: 1.3em;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
.cg-board piece.wriggle::after {
|
|
content: '!';
|
|
}
|
|
.cg-board piece.wriggle::after {
|
|
content: '!';
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-shadow: rgba(0,0,0,0.8) 0 0 3px;
|
|
}
|
|
|
|
.piece-values .cg-board piece::before {
|
|
position:absolute;
|
|
top: 14px;
|
|
right: 4px;
|
|
color: #fff;
|
|
text-shadow: 0 0 9px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1);
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
.piece-values .cg-board piece.queen::before {
|
|
content: '9';
|
|
}
|
|
.piece-values .cg-board piece.rook::before {
|
|
content: '5';
|
|
}
|
|
.piece-values .cg-board piece.bishop::before,
|
|
.piece-values .cg-board piece.knight::before {
|
|
content: '3';
|
|
}
|
|
.piece-values .cg-board piece.pawn::before {
|
|
content: '1';
|
|
}
|
|
}
|