mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
120 lines
2.0 KiB
CSS
120 lines
2.0 KiB
CSS
/* ==========================================================================
|
|
|
|
LET'S GET STARTED!
|
|
|
|
========================================================================== */
|
|
|
|
body, input, select, button {
|
|
font-size: 100%;
|
|
line-height: 1.5;
|
|
font-family: 'Montserrat', 'Proxima Nova', sans-serif;
|
|
color: #ccc;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
=BASE
|
|
========================================================================== */
|
|
|
|
.hide {
|
|
/*display: none;*/
|
|
}
|
|
|
|
input {
|
|
padding: 1em;
|
|
background: #222;
|
|
border: none;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
transition: all .15s ease;
|
|
}
|
|
|
|
input:hover {
|
|
background: #252525;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: #2962FF;
|
|
outline: none;
|
|
}
|
|
|
|
.label--magic {
|
|
position: relative;
|
|
margin: 0 0 1.5em;
|
|
display: block;
|
|
}
|
|
|
|
.label--magic > span {
|
|
position: absolute;
|
|
z-index: 2;
|
|
color: #555;
|
|
margin: 1em .625em;
|
|
padding: 0 .375em;
|
|
cursor: pointer;
|
|
top: 0;
|
|
transform-origin: 0 50%;
|
|
transition: all .3s ease;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.label--magic > input {
|
|
position: relative;
|
|
}
|
|
|
|
.label--magic input:focus {
|
|
background: #252525;
|
|
}
|
|
|
|
.label--magic input:focus + span,
|
|
.label--magic input:not(:focus):valid + span {
|
|
transform: scale(.8);
|
|
background: #252525;
|
|
top: -2em;
|
|
}
|
|
|
|
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1em;
|
|
border: none;
|
|
color: white;
|
|
background: #2962FF;
|
|
cursor: pointer;
|
|
transition: all .15s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background: #2979FF;
|
|
}
|
|
|
|
|
|
|
|
/* ==========================================================================
|
|
=LOGIN OVERLAY
|
|
========================================================================== */
|
|
|
|
.login-overlay {
|
|
position: fixed;
|
|
padding: 0;
|
|
margin: 0;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
z-index: 9;
|
|
}
|
|
|
|
.login-panel {
|
|
width: 300px;
|
|
padding: 2em;
|
|
margin: 2em auto;
|
|
background: #111;
|
|
}
|
|
|
|
.login-icon {
|
|
max-width: 50%;
|
|
margin: 0 auto 1.5em;
|
|
display: block;
|
|
} |