ptut-vhost/webpack/scss/layout.scss

254 lines
4.2 KiB
SCSS

@import 'constants';
* {
margin: 0;
padding: 0;
}
body{
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 17px;
font-family: 'Fira Sans';
}
#WRAPPER{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $bg-color;
color: $primary-color;
overflow: hidden;
overflow-y: auto;
}
#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;
button{
font-size: 1.3em;
}
& > span{
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;
}
}
$easter-egg-timeout: 10;
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;
}
}
}
}
body.body404{
filter: url('/asset/svg/filter.svg#goo-rocket');
background-color: #333;
}
#cont404{
display: flex;
position: fixed;
top: calc( 50% - #{$c404-bubble-width / 2} - 4em );
left: calc( 50% - #{$c404-bubble-width / 2} - 4em );
width: #{$c404-bubble-width};
height: $c404-bubble-width;
padding: 4em;
flex-direction: column;
justify-content: space-between;
align-items: center;
p{
text-align: center;
z-index: 100;
}
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;
}
}
&:hover{
& svg{
path{ fill: rgb(238, 89, 20) !important; }
}
}
}
}