2018-02-22 14:17:07 +00:00
|
|
|
@import 'constants';
|
|
|
|
|
2018-02-20 14:53:31 +00:00
|
|
|
* {
|
2018-02-20 16:48:32 +00:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2018-02-20 14:53:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
body{
|
|
|
|
position: fixed;
|
|
|
|
display: block;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
2018-03-13 13:15:06 +00:00
|
|
|
font-size: 17px;
|
2018-03-01 12:16:22 +00:00
|
|
|
font-family: 'Fira Sans';
|
2018-03-14 11:44:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
&.loading{
|
|
|
|
|
2018-03-14 11:50:58 +00:00
|
|
|
@keyframes fadein{
|
|
|
|
from{ opacity: 0; }
|
|
|
|
to{ opacity: 1; }
|
|
|
|
}
|
|
|
|
|
2018-03-14 11:44:11 +00:00
|
|
|
background: #dee6ec;
|
|
|
|
|
|
|
|
&:after{
|
|
|
|
content: "Chargement en cours";
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
position: fixed;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
font-size: 4vw;
|
|
|
|
|
2018-03-14 11:50:58 +00:00
|
|
|
opacity: 0;
|
|
|
|
|
2018-03-14 11:44:11 +00:00
|
|
|
text-shadow: 2px 2px 0 #fff;
|
|
|
|
|
|
|
|
transform: translateX(-50%) translateY(-50%);
|
2018-03-14 11:50:58 +00:00
|
|
|
|
|
|
|
animation: fadein 1s ease-in-out alternate infinite;
|
2018-03-14 11:44:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
2018-02-20 21:56:34 +00:00
|
|
|
}
|
|
|
|
|
2018-02-22 14:17:07 +00:00
|
|
|
|
|
|
|
|
|
|
|
#WRAPPER{
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
2018-02-28 12:00:51 +00:00
|
|
|
background: $bg-color;
|
2018-03-01 12:16:22 +00:00
|
|
|
color: $primary-color;
|
2018-03-03 21:18:36 +00:00
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
overflow-y: auto;
|
2018-02-22 14:17:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-03-03 15:21:41 +00:00
|
|
|
#WRAPPER.login{
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-around;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
#LOGIN_REDIRECT{
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-around;
|
|
|
|
align-items: center;
|
|
|
|
|
2018-03-05 16:38:51 +00:00
|
|
|
button{
|
|
|
|
font-size: 1.3em;
|
|
|
|
}
|
|
|
|
|
2018-03-06 17:02:04 +00:00
|
|
|
& > span{
|
2018-03-03 15:21:41 +00:00
|
|
|
display: block;
|
|
|
|
text-align: center;
|
|
|
|
margin: 1em;
|
|
|
|
|
|
|
|
color: $form-invalid-color;
|
|
|
|
|
|
|
|
&.valid{ color: $form-valid-color; }
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
transition: opacity .2s ease-in-out;
|
|
|
|
|
|
|
|
&.invalid, &.valid{
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
2018-03-06 17:02:04 +00:00
|
|
|
|
2018-03-11 15:14:12 +00:00
|
|
|
$easter-egg-timeout: 10;
|
2018-03-06 17:02:04 +00:00
|
|
|
|
|
|
|
div.icon{
|
|
|
|
display: block;
|
|
|
|
width: 5em;
|
|
|
|
height: 5em;
|
|
|
|
margin-bottom: 1em;;
|
|
|
|
|
|
|
|
background: url('/asset/svg/icon.svg') center center no-repeat;
|
|
|
|
background-size: auto 100%;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
// disable user-select
|
|
|
|
-webkit-user-select: none; /* Chrome all / Safari all */
|
|
|
|
-moz-user-select: none; /* Firefox all */
|
|
|
|
-ms-user-select: none; /* IE 10+ */
|
|
|
|
user-select: none; /* Likely future */
|
|
|
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
transition: transform 1s ease-in-out;
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
transform: rotate(90deg);
|
|
|
|
background-size: auto 50%;
|
|
|
|
|
|
|
|
transition: transform 1s ease-in-out #{$easter-egg-timeout + 3}s,
|
|
|
|
background-size 1s ease-in-out #{$easter-egg-timeout + 5}s;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
div.title{
|
|
|
|
color: $primary-color;
|
|
|
|
font-size: 1.2em;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
|
|
|
transform: scale(1) translateX(0);
|
|
|
|
|
|
|
|
transition: transform .2s ease-in-out;
|
|
|
|
|
|
|
|
& > i{
|
|
|
|
display: inline-block;
|
|
|
|
font-style: normal;
|
|
|
|
color: $primary-color;
|
|
|
|
|
|
|
|
opacity: 1;
|
|
|
|
transform: scale(1);
|
|
|
|
|
|
|
|
transition: opacity .2s ease-in-out,
|
|
|
|
transform .2s ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
& > b{
|
|
|
|
display: inline-block;
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
transform: scale(1);
|
|
|
|
|
|
|
|
transition: transform .2s ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
div.icon:hover + div.title{
|
|
|
|
|
|
|
|
transform: translateX(1.3em) scale(.5);
|
|
|
|
|
|
|
|
transition: transform 1s ease-in-out #{$easter-egg-timeout + 2}s;
|
|
|
|
|
|
|
|
& > i {
|
|
|
|
opacity: .1;
|
|
|
|
transform: scale(.9);
|
|
|
|
|
|
|
|
transition: opacity 1s ease-in-out #{$easter-egg-timeout}s,
|
|
|
|
transform 1s ease-in-out #{.2 + $easter-egg-timeout}s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
& > b {
|
|
|
|
transform: scale(3);
|
|
|
|
|
|
|
|
transition: transform 1s ease-in-out #{$easter-egg-timeout + 2}s;
|
|
|
|
}
|
|
|
|
}
|
2018-03-03 15:21:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2018-03-08 14:07:16 +00:00
|
|
|
body.body404{
|
|
|
|
|
|
|
|
filter: url('/asset/svg/filter.svg#goo-rocket');
|
|
|
|
background-color: #333;
|
|
|
|
}
|
|
|
|
|
2018-02-22 14:17:07 +00:00
|
|
|
#cont404{
|
|
|
|
display: flex;
|
|
|
|
position: fixed;
|
2018-03-08 14:07:16 +00:00
|
|
|
top: calc( 50% - #{$c404-bubble-width / 2} - 4em );
|
|
|
|
left: calc( 50% - #{$c404-bubble-width / 2} - 4em );
|
2018-02-22 14:17:07 +00:00
|
|
|
width: #{$c404-bubble-width};
|
|
|
|
height: $c404-bubble-width;
|
|
|
|
|
2018-03-08 14:07:16 +00:00
|
|
|
padding: 4em;
|
2018-02-22 14:17:07 +00:00
|
|
|
|
|
|
|
|
|
|
|
flex-direction: column;
|
2018-03-08 14:07:16 +00:00
|
|
|
justify-content: space-between;
|
2018-02-22 14:17:07 +00:00
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
p{
|
|
|
|
text-align: center;
|
2018-03-08 14:07:16 +00:00
|
|
|
z-index: 100;
|
2018-02-22 14:17:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-03-08 14:07:16 +00:00
|
|
|
border-radius: 50%;
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
font-size: 3vh;
|
|
|
|
color: #444;
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes rocket-round{
|
|
|
|
// 0%{ transform: rotate(360deg) translateY(0) rotate(0deg); }
|
|
|
|
// 10%{ transform: rotate(360deg) translateY(#{-$c404-bubble-width * .5}) translateY(+1vh) rotate(0deg); }
|
|
|
|
// 20%{ transform: rotate(350deg) translateY(#{-$c404-bubble-width}) rotate(-45deg); }
|
|
|
|
// 25%{ transform: rotate(350deg) translateY(#{-$c404-bubble-width*1.1}) rotate(-120deg); }
|
|
|
|
0%{ transform: rotate(360deg) translateY(#{-$c404-bubble-width}) rotate(-90deg); }
|
|
|
|
// 35%{ transform: rotate(320deg) translateY(#{-$c404-bubble-width}) rotate(-90deg); }
|
|
|
|
100%{ transform: rotate(0deg) translateY(#{-$c404-bubble-width*1.05}) rotate(-120deg); }
|
|
|
|
}
|
|
|
|
|
|
|
|
#rocket{
|
|
|
|
display: flex;
|
|
|
|
width: 20vh;
|
|
|
|
height: 20vh;
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
background: inherit;
|
|
|
|
|
|
|
|
animation: rocket-round 30s linear infinite;
|
|
|
|
|
|
|
|
z-index: 99;
|
|
|
|
|
|
|
|
a:after{
|
|
|
|
content: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
& svg{
|
|
|
|
transform: scale(2);
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
path{
|
|
|
|
fill: #333 !important;
|
|
|
|
transition: fill .2s ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
2018-02-22 14:17:07 +00:00
|
|
|
|
|
|
|
&:hover{
|
2018-03-08 14:07:16 +00:00
|
|
|
& svg{
|
|
|
|
path{ fill: rgb(238, 89, 20) !important; }
|
|
|
|
}
|
2018-02-22 14:17:07 +00:00
|
|
|
}
|
|
|
|
}
|
2018-03-08 14:07:16 +00:00
|
|
|
|
2018-02-22 14:17:07 +00:00
|
|
|
}
|
2018-03-03 15:21:41 +00:00
|
|
|
|
2018-05-13 22:57:57 +00:00
|
|
|
.downloadButton{
|
|
|
|
text-decoration: none;
|
|
|
|
color: #3f4a5e;
|
|
|
|
box-shadow: 0px 0px 1px 1px #7f8d9b;
|
|
|
|
background: whitesmoke;
|
|
|
|
padding: 10px;
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
2018-03-03 15:21:41 +00:00
|
|
|
|
|
|
|
|