learn UI WIP
Thibault Duplessis
parent
30fcbec418
commit
6733b7c033
|
|
@ -1,110 +1,3 @@
|
|||
#learn_app .title {
|
||||
display: flex;
|
||||
background: #3893E8;
|
||||
color: #fff;
|
||||
}
|
||||
#learn_app .title h2,
|
||||
#learn_app .title h3 {
|
||||
font-size: 2.3em;
|
||||
margin: 15px 0 5px -3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#learn_app .title img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 5px 8px 5px 5px;
|
||||
}
|
||||
#learn_app .lichess_ground .subtitle {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#learn_app .goal {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
font-size: 1.3em;
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
height: 135px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#learn_app .result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column nowrap;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
min-height: 135px;
|
||||
padding: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@keyframes shadow-glow {
|
||||
50% {
|
||||
box-shadow: 0 0 10px 10px rgba(255,255,255,0.5);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
@keyframes text-shadow-glow {
|
||||
50% {
|
||||
text-shadow: 0 0 10px #fff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
#learn_app .result h2 {
|
||||
animation: text-shadow-glow 1s 1;
|
||||
}
|
||||
#learn_app .result.failed h2,
|
||||
#learn_app .result.next h2 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#learn_app .result:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
#learn_app .result .stars {
|
||||
margin-top: 4px;
|
||||
}
|
||||
#learn_app .result .stars i {
|
||||
margin: 3px;
|
||||
animation: text-shadow-glow 1s 1;
|
||||
}
|
||||
#learn_app .result button {
|
||||
margin: 15px auto 15px auto;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 5px 5px rgba(255,255,255,0.5);
|
||||
animation: shadow-glow 1s infinite;
|
||||
}
|
||||
#learn_app .result.completed {
|
||||
background: #4caf50;
|
||||
color: #fff;
|
||||
}
|
||||
#learn_app .result.completed button {
|
||||
color: #4caf50;
|
||||
}
|
||||
#learn_app .result.failed {
|
||||
background: #dc322f;
|
||||
color: #fff;
|
||||
}
|
||||
#learn_app .result.failed button {
|
||||
color: #dc322f;
|
||||
}
|
||||
@keyframes go-home {
|
||||
from {opacity: 1;}
|
||||
to {opacity: 0.1;}
|
||||
}
|
||||
#learn_app .completed:not(.no-go-home) piece {
|
||||
animation: 0.7s ease-in-out 0.7s go-home;
|
||||
}
|
||||
#learn_app item {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
|
|
@ -154,174 +47,6 @@
|
|||
background: rgba(20, 85, 30, 0.3);
|
||||
}
|
||||
|
||||
#learn_app .screen-overlay {
|
||||
position: fixed;
|
||||
top: -80px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
background: rgba(79, 195, 247, 0.9);
|
||||
z-index: 33;
|
||||
margin: 63px auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
#learn_app .screen-overlay * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#learn_app .screen {
|
||||
margin: 100px auto;
|
||||
background-color: #fff;
|
||||
width: 310px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px;
|
||||
padding-top: 36px;
|
||||
}
|
||||
#learn_app .screen > :nth-child(1) {
|
||||
animation: slideIn 1s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
#learn_app .screen > :nth-child(2) {
|
||||
animation: slideIn 1.5s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
#learn_app .screen > :nth-child(3) {
|
||||
animation: slideIn 2s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
#learn_app .screen > :nth-child(4) {
|
||||
animation: slideIn 2.5s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
#learn_app .screen > :nth-child(5) {
|
||||
animation: slideIn 3s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
#learn_app .screen .stars {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@keyframes star-appear {
|
||||
0% {
|
||||
filter: saturate(1); opacity: 0.5; transform: scale(0) rotate(-360deg);
|
||||
}
|
||||
85% {
|
||||
filter: saturate(1); opacity: 1; transform: scale(1.3) rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
filter: saturate(1); opacity: 1; transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
#learn_app .screen .stars .star-wrap {
|
||||
display: inline-block;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
}
|
||||
#learn_app .screen .stars .star-wrap::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
display: block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
content: '';
|
||||
background-image: url(../images/learn/star.png);
|
||||
background-size: cover;
|
||||
filter: saturate(0);
|
||||
opacity: 0.2;
|
||||
}
|
||||
#learn_app .screen .stars .star {
|
||||
display: inline-block;
|
||||
background-image: url(../images/learn/star.png);
|
||||
background-size: cover;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
opacity: 0;
|
||||
animation: star-appear 2.5s ease-in-out;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
#learn_app .screen .stars .star-wrap:nth-child(2) .star {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
#learn_app .screen .stars .star-wrap:nth-child(3) .star {
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
#learn_app .screen .no-square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 0 auto 22px auto;
|
||||
}
|
||||
#learn_app .screen h1 {
|
||||
font-weight: bold;
|
||||
color: #181818;
|
||||
font-size: 24px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
#learn_app .screen .round-svg {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
padding: 0px;
|
||||
background: #f57c00;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 10px auto;
|
||||
}
|
||||
#learn_app .screen .round-svg img {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
padding: 20px;
|
||||
}
|
||||
#learn_app .screen .score {
|
||||
text-transform: uppercase;
|
||||
color: #0288d1;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
#learn_app .screen .score span {
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Mono';
|
||||
}
|
||||
#learn_app .screen p {
|
||||
color: #999999;
|
||||
font-size: 15px;
|
||||
padding: 0 15%;
|
||||
line-height: 24px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
#learn_app .screen .buttons {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
#learn_app .screen .buttons a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
line-height: 48px;
|
||||
border-radius: 5px;
|
||||
margin: 8px 10% 0 10%;
|
||||
height: 48px;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#learn_app .screen .buttons a {
|
||||
margin-top: 8px;
|
||||
}
|
||||
#learn_app .screen .buttons .next {
|
||||
font-size: 14px;
|
||||
background: #4fc3f7;
|
||||
}
|
||||
#learn_app .screen .buttons .back {
|
||||
font-size: 12px;
|
||||
background: #f57c00;
|
||||
}
|
||||
#learn_app .screen .buttons a:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
#learn_app .screen piece {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -411,63 +136,6 @@
|
|||
content: '1';
|
||||
}
|
||||
|
||||
#learn_app .progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0px;
|
||||
}
|
||||
#learn_app .progress a {
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
border-left: 1px solid #ccc;
|
||||
opacity: 0.8;
|
||||
transition: all 0.13s;
|
||||
}
|
||||
#learn_app .progress a:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
#learn_app .progress a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#learn_app .progress a span {
|
||||
margin: auto;
|
||||
}
|
||||
#learn_app .progress .st3 i:first-child {
|
||||
display: block;
|
||||
}
|
||||
#learn_app .progress a.done {
|
||||
background: #fdd835;
|
||||
}
|
||||
#learn_app .progress a.done {
|
||||
color: #fff!important;
|
||||
background: #4caf50!important;
|
||||
}
|
||||
#learn_app .progress a.active {
|
||||
opacity: 1;
|
||||
color: #fff!important;
|
||||
background: #3893E8!important;
|
||||
}
|
||||
body.dark #learn_app .goal,
|
||||
body.dark #learn_app .progress,
|
||||
body.dark #learn_app .progress a {
|
||||
background: #303030;
|
||||
border-color: #444;
|
||||
color: #aaa;
|
||||
}
|
||||
body.dark #learn_app .goal,
|
||||
body.dark #learn_app .result {
|
||||
border-color: #444;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
#learn_side {
|
||||
border: none;
|
||||
background: transparent!important;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
.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 {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 3px 25px rgba(0,0,0,0.5);
|
||||
}
|
||||
#promotion_choice .explanation h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
#promotion_choice .explanation 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';
|
||||
}
|
||||
}
|
||||
|
|
@ -20,22 +20,22 @@ $mq-col3: $mq-col3-uniboard;
|
|||
'main'
|
||||
'table'
|
||||
'side';
|
||||
grid-row-gap: $block-gap;
|
||||
grid-gap: $block-gap;
|
||||
|
||||
@include breakpoint($mq-col2) {
|
||||
grid-template-columns: $col2-uniboard-width $block-gap $col2-uniboard-table;
|
||||
grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
|
||||
grid-template-rows: fit-content(0);
|
||||
grid-template-areas:
|
||||
'main . table'
|
||||
'side . .';
|
||||
'main table'
|
||||
'side .';
|
||||
&--map {
|
||||
grid-template-areas: 'main . side';
|
||||
grid-template-areas: 'main side';
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($mq-col3) {
|
||||
grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width $block-gap $col3-uniboard-table;
|
||||
grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
|
||||
grid-template-areas:
|
||||
'side . main . table';
|
||||
'side main table';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
@import 'layout';
|
||||
@import 'map';
|
||||
@import 'run';
|
||||
@import 'table';
|
||||
@import 'board';
|
||||
@import 'screen';
|
||||
@import 'side-map';
|
||||
@import 'side-home';
|
||||
|
|
|
|||
|
|
@ -54,14 +54,12 @@
|
|||
}
|
||||
@keyframes soft-bright {
|
||||
50%{
|
||||
filter: brightness(1.1);
|
||||
filter: brightness(0.97);
|
||||
}
|
||||
}
|
||||
&.ongoing {
|
||||
background: $c-primary;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
&.ongoing {
|
||||
animation: 1.7s soft-bright ease-in-out infinite;
|
||||
}
|
||||
&.ongoing:hover {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
.learn__screen-overlay {
|
||||
@extend %fullscreen-mask;
|
||||
background: rgba(79, 195, 247, 0.9);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.learn__screen {
|
||||
@extend %popup-shadow, %box-radius;
|
||||
margin: 150px auto;
|
||||
background-color: #fff;
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding-top: 36px;
|
||||
> :nth-child(1) {
|
||||
animation: slideIn 1s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
> :nth-child(2) {
|
||||
animation: slideIn 1.5s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
> :nth-child(3) {
|
||||
animation: slideIn 2s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
> :nth-child(4) {
|
||||
animation: slideIn 2.5s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
> :nth-child(5) {
|
||||
animation: slideIn 3s cubic-bezier(0.37, 0.82, 0.2, 1);
|
||||
}
|
||||
.stars {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@keyframes star-appear {
|
||||
0% {
|
||||
filter: saturate(1); opacity: 0.5; transform: scale(0) rotate(-360deg);
|
||||
}
|
||||
85% {
|
||||
filter: saturate(1); opacity: 1; transform: scale(1.3) rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
filter: saturate(1); opacity: 1; transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
.stars .star-wrap {
|
||||
display: inline-block;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
}
|
||||
.stars .star-wrap::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
display: block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
content: '';
|
||||
background-image: url(../images/learn/star.png);
|
||||
background-size: cover;
|
||||
filter: saturate(0);
|
||||
opacity: 0.2;
|
||||
}
|
||||
.stars .star {
|
||||
display: inline-block;
|
||||
background-image: url(../images/learn/star.png);
|
||||
background-size: cover;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
opacity: 0;
|
||||
animation: star-appear 2.5s ease-in-out;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.stars .star-wrap:nth-child(2) .star {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
.stars .star-wrap:nth-child(3) .star {
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
.no-square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
margin: 0 auto 22px auto;
|
||||
}
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
color: #181818;
|
||||
font-size: 24px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.round-svg {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
padding: 0px;
|
||||
background: #f57c00;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 10px auto;
|
||||
}
|
||||
.round-svg img {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
padding: 20px;
|
||||
}
|
||||
.score {
|
||||
text-transform: uppercase;
|
||||
color: #0288d1;
|
||||
font-size: .85em;
|
||||
display: block;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.score span {
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Mono';
|
||||
}
|
||||
p {
|
||||
color: #999999;
|
||||
padding: 0 15%;
|
||||
line-height: 24px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.buttons {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 23px;
|
||||
a {
|
||||
@extend %box-radius;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
line-height: 48px;
|
||||
margin: 8px 10% 0 10%;
|
||||
height: 48px;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
a {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.next {
|
||||
font-size: .9em;
|
||||
background: #4fc3f7;
|
||||
}
|
||||
.back {
|
||||
font-size: .85em;
|
||||
background: #f57c00;
|
||||
}
|
||||
a:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
[data-icon] {
|
||||
@extend %data-icon-middle;
|
||||
}
|
||||
}
|
||||
piece {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
.back,
|
||||
.categ > h2 {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.3em;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-indent: 15px;
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
}
|
||||
.back {
|
||||
display: flex;
|
||||
color: $c-font;
|
||||
}
|
||||
.back img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
opacity: 0.9;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
/* background: rgba(56, 147, 232, 1); */
|
||||
background: rgba(120, 120, 120, 1);
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -27,10 +27,7 @@
|
|||
background: rgba(120, 120, 120, 0.2);
|
||||
}
|
||||
.categ > h2 {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
body.dark .categ > h2 {
|
||||
border-color: #444;
|
||||
border-top: $border;
|
||||
}
|
||||
.categ > h2:hover {
|
||||
background: rgba(56, 147, 232, 0.2);
|
||||
|
|
@ -54,45 +51,46 @@
|
|||
display: none;
|
||||
}
|
||||
.stage {
|
||||
@extend %roboto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: 0.13s;
|
||||
font-size: 1.3em;
|
||||
font-family: 'Roboto';
|
||||
font-weight: 300;
|
||||
font-size: 1.1em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.stage img,
|
||||
.stage i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0.9;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.stage i::before {
|
||||
font-size: 30px;
|
||||
}
|
||||
.stage.active {
|
||||
background: rgba(56, 147, 232, 0.2);
|
||||
}
|
||||
.stage.active img {
|
||||
background: rgba(56, 147, 232, 1);
|
||||
}
|
||||
.stage.done:hover {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
.stage.done img {
|
||||
background: #4caf50;
|
||||
}
|
||||
.stage.future:hover {
|
||||
background: rgba(245, 124, 0, 0.2);
|
||||
}
|
||||
.stage.future img {
|
||||
opacity: 0.7;
|
||||
background: rgba(245, 124, 0, 1);
|
||||
}
|
||||
.stage:hover {
|
||||
filter: brightness(0.9);
|
||||
color: $c-font;
|
||||
|
||||
img,
|
||||
i {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
opacity: 0.9;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
i::before {
|
||||
font-size: 30px;
|
||||
}
|
||||
&.active {
|
||||
background: rgba(56, 147, 232, 0.2);
|
||||
}
|
||||
&.active img {
|
||||
background: rgba(56, 147, 232, 1);
|
||||
}
|
||||
&.done:hover {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
&.done img {
|
||||
background: #4caf50;
|
||||
}
|
||||
&.future:hover {
|
||||
background: rgba(245, 124, 0, 0.2);
|
||||
}
|
||||
&.future img {
|
||||
opacity: 0.7;
|
||||
background: rgba(245, 124, 0, 1);
|
||||
}
|
||||
&:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
.learn__table {
|
||||
align-self: center;
|
||||
|
||||
.wrap {
|
||||
@extend %box-neat, %box-radius-force;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
background: #3893E8;
|
||||
color: #fff;
|
||||
h2,
|
||||
h3 {
|
||||
font-size: 2.3em;
|
||||
margin: 15px 0 5px -3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 5px 8px 5px 5px;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.goal {
|
||||
background: #fff;
|
||||
border: $border;
|
||||
border-top: none;
|
||||
padding: $block-gap;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: column nowrap;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
min-height: 135px;
|
||||
padding: 0;
|
||||
font-size: 2em;
|
||||
|
||||
@keyframes shadow-glow {
|
||||
50% {
|
||||
box-shadow: 0 0 10px 10px rgba(255,255,255,0.5);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
@keyframes text-shadow-glow {
|
||||
50% {
|
||||
text-shadow: 0 0 10px #fff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
animation: text-shadow-glow 1s 1;
|
||||
}
|
||||
&.failed h2,
|
||||
&.next h2 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
&:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.stars {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.stars i {
|
||||
margin: 3px;
|
||||
animation: text-shadow-glow 1s 1;
|
||||
}
|
||||
button {
|
||||
margin: 15px auto 15px auto;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 5px 5px rgba(255,255,255,0.5);
|
||||
animation: shadow-glow 1s infinite;
|
||||
}
|
||||
&.completed {
|
||||
background: #4caf50;
|
||||
color: #fff;
|
||||
}
|
||||
&.completed button {
|
||||
color: #4caf50;
|
||||
}
|
||||
&.failed {
|
||||
background: #dc322f;
|
||||
color: #fff;
|
||||
}
|
||||
&.failed button {
|
||||
color: #dc322f;
|
||||
}
|
||||
@keyframes go-home {
|
||||
from {opacity: 1;}
|
||||
to {opacity: 0.1;}
|
||||
}
|
||||
&.completed:not(.no-go-home) piece {
|
||||
animation: 0.7s ease-in-out 0.7s go-home;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0px;
|
||||
a {
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
border-left: 1px solid #ccc;
|
||||
opacity: 0.8;
|
||||
transition: all 0.13s;
|
||||
}
|
||||
a:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
a span {
|
||||
margin: auto;
|
||||
}
|
||||
.st3 i:first-child {
|
||||
display: block;
|
||||
}
|
||||
a.done {
|
||||
background: #fdd835;
|
||||
}
|
||||
a.done {
|
||||
color: #fff!important;
|
||||
background: #4caf50!important;
|
||||
}
|
||||
a.active {
|
||||
opacity: 1;
|
||||
color: #fff!important;
|
||||
background: #3893E8!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ function renderInStage(ctrl) {
|
|||
m('img', {
|
||||
src: s.image
|
||||
}),
|
||||
m('h3', ctrl.trans.noarg(s.title))
|
||||
m('span', ctrl.trans.noarg(s.title))
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ module.exports = function(opts, trans) {
|
|||
m.redraw.strategy("diff");
|
||||
|
||||
return {
|
||||
opts: opts,
|
||||
stage: stage,
|
||||
level: level,
|
||||
vm: vm,
|
||||
|
|
|
|||
|
|
@ -34,33 +34,36 @@ module.exports = function(ctrl) {
|
|||
var level = ctrl.level;
|
||||
|
||||
return m('div', {
|
||||
class: 'learn learn-run ' + stage.cssClass + ' ' + level.blueprint.cssClass +
|
||||
class: 'learn learn--run ' + stage.cssClass + ' ' + level.blueprint.cssClass +
|
||||
(level.vm.starting ? ' starting' : '') +
|
||||
(level.vm.completed && !level.blueprint.nextButton ? ' completed' : '') +
|
||||
(level.vm.lastStep ? ' last-step' : '') +
|
||||
(level.blueprint.showPieceValues ? ' piece-values' : '')
|
||||
}, [
|
||||
ctrl.vm.stageStarting() ? stageStarting(ctrl) : null,
|
||||
ctrl.vm.stageCompleted() ? stageComplete(ctrl) : null,
|
||||
m('div.lichess_board_wrap', [
|
||||
m('div.lichess_board', chessground.view(ground.instance)),
|
||||
m('div.learn__side', ctrl.opts.side.view()),
|
||||
m('div.learn__main.main-board', [
|
||||
ctrl.vm.stageStarting() ? stageStarting(ctrl) : null,
|
||||
ctrl.vm.stageCompleted() ? stageComplete(ctrl) : null,
|
||||
chessground.view(ground.instance),
|
||||
renderPromotion(ctrl, level),
|
||||
]),
|
||||
m('div.lichess_ground', [
|
||||
m('div.title', [
|
||||
m('img', {
|
||||
src: stage.image
|
||||
}),
|
||||
m('div.text', [
|
||||
m('h2', ctrl.trans.noarg(stage.title)),
|
||||
m('p.subtitle', ctrl.trans.noarg(stage.subtitle))
|
||||
])
|
||||
]),
|
||||
level.vm.failed ? renderFailed(ctrl) : (
|
||||
level.vm.completed ? renderCompleted(ctrl, level) :
|
||||
m('div.goal', util.withLinebreaks(ctrl.trans.noarg(level.blueprint.goal)))
|
||||
),
|
||||
renderProgress(ctrl.progress)
|
||||
m('div.learn__table', [
|
||||
m('div.wrap', [
|
||||
m('div.title', [
|
||||
m('img', {
|
||||
src: stage.image
|
||||
}),
|
||||
m('div.text', [
|
||||
m('h2', ctrl.trans.noarg(stage.title)),
|
||||
m('p.subtitle', ctrl.trans.noarg(stage.subtitle))
|
||||
])
|
||||
]),
|
||||
level.vm.failed ? renderFailed(ctrl) : (
|
||||
level.vm.completed ? renderCompleted(ctrl, level) :
|
||||
m('div.goal', util.withLinebreaks(ctrl.trans.noarg(level.blueprint.goal)))
|
||||
),
|
||||
renderProgress(ctrl.progress)
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ module.exports = function(ctrl) {
|
|||
var stage = ctrl.stage;
|
||||
var next = ctrl.getNext();
|
||||
var score = ctrl.stageScore();
|
||||
return m('div.screen-overlay', {
|
||||
return m('div.learn__screen-overlay', {
|
||||
onclick: function(e) {
|
||||
if (e.target.classList.contains('screen-overlay')) m.route('/');
|
||||
if (e.target.classList.contains('learn__screen-overlay')) m.route('/');
|
||||
}
|
||||
},
|
||||
m('div.screen', [
|
||||
m('div.learn__screen', [
|
||||
m('div.stars', makeStars(scoring.getStageRank(stage, score))),
|
||||
m('h1', ctrl.trans('stageXComplete', stage.id)),
|
||||
m('span.score', [
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ var m = require('mithril');
|
|||
var util = require('../util');
|
||||
|
||||
module.exports = function(ctrl) {
|
||||
return m('div.screen-overlay', {
|
||||
return m('div.learn__screen-overlay', {
|
||||
onclick: ctrl.hideStartingPane
|
||||
},
|
||||
m('div.screen', [
|
||||
m('div.learn__screen', [
|
||||
m('h1', ctrl.trans('stageX', ctrl.stage.id) + ': ' + ctrl.trans.noarg(ctrl.stage.title)),
|
||||
ctrl.stage.illustration,
|
||||
m('p', util.withLinebreaks(ctrl.trans.noarg(ctrl.stage.intro))),
|
||||
|
|
|
|||
Loading…
Reference in New Issue