|
|
@ -1,5 +1,4 @@ |
|
|
|
body { |
|
|
|
body { |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
width: 100vw; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
height: 100vh; |
|
|
|
margin: 0; |
|
|
|
margin: 0; |
|
|
@ -13,6 +12,9 @@ body { |
|
|
|
); |
|
|
|
); |
|
|
|
background-size: 200% 200%; |
|
|
|
background-size: 200% 200%; |
|
|
|
animation: gradient-move 15s ease alternate infinite; |
|
|
|
animation: gradient-move 15s ease alternate infinite; |
|
|
|
|
|
|
|
font-family: Roboto; |
|
|
|
|
|
|
|
-webkit-text-size-adjust: 100%; |
|
|
|
|
|
|
|
-webkit-font-smoothing: antialiased; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes gradient-move { |
|
|
|
@keyframes gradient-move { |
|
|
@ -30,3 +32,110 @@ body { |
|
|
|
left: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
button { |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
background-color: #3498db; |
|
|
|
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
padding: 10px 0; |
|
|
|
|
|
|
|
margin: 10px 0; |
|
|
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp * { |
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp { |
|
|
|
|
|
|
|
display: grid; |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
margin: auto; |
|
|
|
|
|
|
|
width: 800px; |
|
|
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp.short { |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
width: 300px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp .label { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: 20px; |
|
|
|
|
|
|
|
left: 12px; |
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
transform-origin: 0 0; |
|
|
|
|
|
|
|
transform: translate3d(0, 0, 0); |
|
|
|
|
|
|
|
transition: all 0.2s ease; |
|
|
|
|
|
|
|
pointer-events: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp .focus-bg { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: 0; |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
|
|
transform: scaleX(0); |
|
|
|
|
|
|
|
transform-origin: left; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input { |
|
|
|
|
|
|
|
-webkit-appearance: none; |
|
|
|
|
|
|
|
-moz-appearance: none; |
|
|
|
|
|
|
|
appearance: none; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
font-family: inherit; |
|
|
|
|
|
|
|
padding: 16px 12px 0 12px; |
|
|
|
|
|
|
|
height: 56px; |
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.02); |
|
|
|
|
|
|
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); |
|
|
|
|
|
|
|
color: #000; |
|
|
|
|
|
|
|
transition: all 0.15s ease; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:hover { |
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
|
|
|
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:not(:-moz-placeholder-shown) + .label { |
|
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
transform: translate3d(0, -12px, 0) scale(0.75); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:not(:-ms-input-placeholder) + .label { |
|
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
transform: translate3d(0, -12px, 0) scale(0.75); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:not(:placeholder-shown) + .label { |
|
|
|
|
|
|
|
color: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
|
|
transform: translate3d(0, -12px, 0) scale(0.75); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:focus { |
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
outline: none; |
|
|
|
|
|
|
|
box-shadow: inset 0 -2px 0 #0077FF; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:focus + .label { |
|
|
|
|
|
|
|
color: #0077FF; |
|
|
|
|
|
|
|
transform: translate3d(0, -12px, 0) scale(0.75); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inp input:focus + .label + .focus-bg { |
|
|
|
|
|
|
|
transform: scaleX(1); |
|
|
|
|
|
|
|
transition: all 0.1s ease; |
|
|
|
|
|
|
|
} |