SCSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@mixin shadow ($level) {
@if $level == 1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} @else if $level == 2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
} @else if $level == 3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
} @else if $level == 4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} @else if $level == 5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
}
$bar_active_color: #fff;
$bar_inactive_color: #444;
$placeholder_active_color: #fff;
$placeholder_inactive_color: #aaa;
$button_bg_color: #E65100;
$button_text_color: #fff;
$link_color: #fff;
$link_hover_color: #fff;
$image_url: 'https://images5.alphacoders.com/382/382418.jpg';
body{
background-image: url($image_url);
background-repeat: no-repeat;
background-size:cover;
background-position: bottom;
padding-top:100px;
padding-bottom:100px;
font-family: 'Roboto', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body *{
box-sizing: border-box;
outline: none;
}
.logo{
width: 346px;
height: 124px;
background-position: center;
margin-bottom:50px;
background-image: url('http://cosplaymygame.com/images/series-logo/warcraft-logo.png');
display:block;
span{
font-size:20px;
color: lighten(red, 10%);
}
}
.auth{
width:414px;
background-color: rgba(1,1,1,0.6);
padding:40px;
margin:0 auto;
border-radius: 2px;
position: relative;
z-index:999;
@include shadow(2);
.form-control{
position:relative;
margin-bottom: 15px;
input[type="text"],
input[type="password"]{
width:100%;
border:none;
background-color: transparent;
height:40px;
font-size:16px;
font-weight:400;
color:#fff;
position:relative;
z-index:2;
border-bottom: 2px solid $bar_inactive_color;
// Start autofill hack
&:-webkit-autofill {
transition: background-color 999999s ease-in-out 0s;
-webkit-text-fill-color: #fff;
}
&:-webkit-autofill:focus {
-webkit-transition: background-color 999999s ease-in-out 0s;
-moz-transition: background-color 999999s ease-in-out 0s;
-ms-transition: background-color 999999s ease-in-out 0s;
-o-transition: background-color 999999s ease-in-out 0s;
transition: background-color 999999s ease-in-out 0s;
-webkit-text-fill-color: #fff;
}
&:focus{
~ label{
z-index:3; //autofill hack (label ontopof form)
}
}
&.active{
~ label{
z-index:3;
}
}
// End autofill hack
&:focus{
~ .bar{
&:before,
&:after{
background-color: $bar_active_color;
width: 50%;
}
}
~ label{
transform: translate(-12%, -50%) scale(0.75);
color:$placeholder_active_color;
}
}
&.active{
~ label{
transform: translate(-12%, -50%) scale(0.75);
}
}
}
// Bar Setup
.bar{
&:before,
&:after{
content:"";
position:absolute;
bottom:0;
height:2px;
width:0;
transition: .2s ease;
z-index:2;
}
&:before{
left:50%;
}
&:after{
right:50%;
}
}
// Label Setup
label{
line-height:40px;
position:absolute;
z-index:1;
top:0;
left:0;
font-size: 16px;
transition: 0.2s ease;
z-index: 1;
color:$placeholder_inactive_color;
}
}
.actions{
margin-top:50px;
input[type="submit"]{
display:block;
width:100%;
padding:10px 0;
background-color: $button_bg_color;
border:none;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
color: $button_text_color;
cursor: pointer;
margin-bottom: 10px;
@include shadow(1);
&:hover{
background-color: lighten($button_bg_color, 10%);
}
}
a{
text-align:center;
display: block;
color:$link_color;
text-decoration:none;
padding:10px 0;
font-weight:500;
&:hover{
color:$link_hover_color;
}
}
}
.auth-confirm{
background-color:lighten(red, 50%);
border-radius: 2px;
text-align:center;
color: red;
padding:20px;
@include shadow(1);
h1{
font-size:21px;
margin-bottom: 20px;
}
p{
line-height:21px;
}
a{
background-color:red;
border-radius: 2px;
padding: 10px 5px;
text-transform: uppercase;
display:block;
font-size: 14px;
color:$link_color;
text-decoration:none;
margin-top:20px;
@include shadow(1);
&:hover{
background-color: $link_hover_color;
}
}
i{
font-size: 70px;
color: lighten(red, 40%);
}
}
}
.auth-bottom{
position: fixed;
bottom:0;
left:0;
right:0;
background-color: rgba(1,1,1,0.6);
padding:20px;
z-index:2;
@include shadow(5);
a{
display: block;
color:$link_color;
text-decoration:none;
padding:10px 0;
font-weight:500;
&:hover{
color: $link_hover_color;
}
&.facebook-login{
span{
float:left;
margin-right: 5px;
font-size: 16px;
color: $link_hover_color;
}
}
}
.auth-bottom-container{
max-width:600px;
margin: 0 auto;
}
.auth-bottom-left{
float:left;
}
.auth-bottom-right{
float:right;
}
}
input:-webkit-autofill,
select:-webkit-autofill
textarea:-webkit-autofill {
background: transparent;
background-color: transparent;
}
// Mist
#fog {
width: 100%;
height: 400px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/62476/smoke.png) no-repeat;
-webkit-animation: 40s FOG infinite;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:-1;
}
@keyframes FOG {
0% {background-position:left;}
30% {opacity:.7;}
80% {opacity: 1;}
100%{background-position:right; opacity:1;}
}
@-moz-keyframes FOG {
0% {background-position:left;}
30% {opacity:.7;}
80% {opacity: .9;}
100%{background-position:right; opacity:1;}
}
@-webkit-keyframes FOG {
0% {background-position:left;}
30% {opacity:.5;}
80% {opacity: .8;}
100%{background-position:right; opacity:1;}
}
3 Responses