ptut-vhost/webpack/scss/layout.scss

210 lines
3.3 KiB
SCSS
Raw Normal View History

2018-02-22 14:17:07 +00:00
@import 'constants';
* {
2018-02-20 16:48:32 +00:00
margin: 0;
padding: 0;
}
body{
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: 'Fira Sans';
}
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;
color: $primary-color;
overflow: hidden;
overflow-y: auto;
2018-02-22 14:17:07 +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;
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: 5;
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-02-22 14:17:07 +00:00
#cont404{
display: flex;
position: fixed;
top: calc( 50% - #{$c404-bubble-width / 2} - 2em );
left: calc( 50% - #{$c404-bubble-width / 2} - 2em );
width: #{$c404-bubble-width};
height: $c404-bubble-width;
padding: 2em;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 5px #ddd;
border-radius: 50% / 50%;
font-size: 3vh;
color: #444;
flex-direction: column;
justify-content: space-around;
align-items: center;
p{
text-align: center;
}
svg{
path{ fill: #888 !important; }
transform: translateY(0em) scale(2);
cursor: pointer;
transition: transform .2s ease-in-out;
&:hover{
transform: translateY(-.5em) scale(2);
path{ fill: #222 !important; }
}
}
}