108 lines
1.8 KiB
CSS
108 lines
1.8 KiB
CSS
|
*{
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
background: #BDB76B;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
::selection{
|
||
|
|
color: #fff;
|
||
|
|
background: #BDB76B;
|
||
|
|
}
|
||
|
|
.main{
|
||
|
|
height: 265px;
|
||
|
|
width: 320px;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 7px;
|
||
|
|
padding: 20px 25px 0;
|
||
|
|
transition: height 0.2s ease;
|
||
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.main.active{
|
||
|
|
height: 530px;
|
||
|
|
}
|
||
|
|
header h1{
|
||
|
|
font-size: 21px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
header p{
|
||
|
|
margin-top: 5px;
|
||
|
|
color: #575757;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.main .form{
|
||
|
|
margin: 20px 0 25px;
|
||
|
|
}
|
||
|
|
.form :where(input, button){
|
||
|
|
width: 100%;
|
||
|
|
height: 55px;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
transition: 0.1s ease;
|
||
|
|
}
|
||
|
|
.form input{
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 0 17px;
|
||
|
|
border: 1px solid #999;
|
||
|
|
}
|
||
|
|
.form input:focus{
|
||
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
|
||
|
|
}
|
||
|
|
.form input::placeholder{
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.form button{
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 20px;
|
||
|
|
font-size: 17px;
|
||
|
|
background: #BDB76B;
|
||
|
|
transition: .3s;
|
||
|
|
}
|
||
|
|
.form button:hover{
|
||
|
|
box-shadow: 2px 2px 5px #BDB76B;
|
||
|
|
}
|
||
|
|
.qr-code{
|
||
|
|
opacity: 0;
|
||
|
|
display: flex;
|
||
|
|
padding: 33px 0;
|
||
|
|
border-radius: 5px;
|
||
|
|
align-items: center;
|
||
|
|
pointer-events: none;
|
||
|
|
justify-content: center;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
.main.active .qr-code{
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: auto;
|
||
|
|
transition: opacity 0.5s 0.05s ease;
|
||
|
|
}
|
||
|
|
.qr-code img{
|
||
|
|
width: 170px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 430px){
|
||
|
|
.main{
|
||
|
|
height: 255px;
|
||
|
|
padding: 16px 20px;
|
||
|
|
}
|
||
|
|
.main.active{
|
||
|
|
height: 510px;
|
||
|
|
}
|
||
|
|
header p{
|
||
|
|
color: #696969;
|
||
|
|
}
|
||
|
|
.form :where(input, button){
|
||
|
|
height: 52px;
|
||
|
|
}
|
||
|
|
.qr-code img{
|
||
|
|
width: 160px;
|
||
|
|
}
|
||
|
|
}
|