165 lines
3.0 KiB
CSS
165 lines
3.0 KiB
CSS
.con-img {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.con-img > img {
|
|
height: 100%;
|
|
width: auto;
|
|
min-height: 100vw;
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
.con-img > img {
|
|
width: 100% !important;
|
|
max-width: 100vw;
|
|
height: auto;
|
|
min-height: auto;
|
|
max-height: 100vh;
|
|
}
|
|
}
|
|
|
|
.c-login {
|
|
position: absolute;
|
|
width: 100%;
|
|
transform: translateY(-50%);
|
|
top: 50%;
|
|
right: 0;
|
|
margin: 0 auto
|
|
}
|
|
|
|
.frm-login {
|
|
max-width: 100%;
|
|
margin: 0 25px;
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 568px) {
|
|
.frm-login {
|
|
max-width: 380px !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.c-login {
|
|
right: 100px;
|
|
width: 420px;
|
|
}
|
|
|
|
.frm-login {
|
|
max-width: 100% !important
|
|
}
|
|
}
|
|
|
|
.ws-login {
|
|
box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
|
|
background-color: #fff;
|
|
border-radius: var(--radius);
|
|
padding: 55px 35px;
|
|
}
|
|
|
|
.ws-login .c_logo {
|
|
height: 60px
|
|
}
|
|
|
|
.ws-login .title {
|
|
color: var(--color-primary)
|
|
}
|
|
|
|
.ws-login .ico {
|
|
position: absolute;
|
|
top: 40%;
|
|
transform: translateY(-50%)
|
|
}
|
|
|
|
.ws-login input {
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.ws-login .title, .ws-login .desc {
|
|
}
|
|
|
|
.ws-login .hint {
|
|
font-size: .82rem;
|
|
}
|
|
|
|
|
|
.frm-inline.search button {
|
|
padding: 4px 15px;
|
|
}
|
|
|
|
.frm-inline button {
|
|
margin-left: calc(var(--radius) * -1);
|
|
}
|
|
|
|
.frm-inline input {
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border-color);
|
|
padding: 10px 12px;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
color: var(--text-color-primary)
|
|
}
|
|
|
|
.frm-group {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
|
|
.frm-input, .frm-header {
|
|
padding: 0 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.frm-input {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.frm-input label {
|
|
color: var(--text-color-primary);
|
|
font-size: .92rem;
|
|
margin-bottom: 2px;
|
|
font-weight: 500
|
|
}
|
|
|
|
.frm-input input, .frm-input .aselect {
|
|
width: 100%;
|
|
border-bottom: 1px solid #444C6185;
|
|
background-color: #fff;
|
|
transition: .3s all ease-in-out;
|
|
font-size: .9rem;
|
|
font-weight: 400
|
|
}
|
|
|
|
.frm-input .con-aselect input {
|
|
border-radius: var(--radius);
|
|
padding: 0 15px;
|
|
border: 1px solid #444C6185
|
|
}
|
|
|
|
.frm-input input {
|
|
min-height: 35px;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.frm-input .line {
|
|
position: absolute;
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 0;
|
|
background-color: var(--color-primary);
|
|
transition: width .4s cubic-bezier( 0.19, 0.6, 0.86, 0.01 )
|
|
}
|
|
|
|
.frm-input input:focus + .line, .frm-input input:hover + .line {
|
|
width: 100%;
|
|
}
|
|
|
|
.frm-input .c-input:not(.line) input:hover, .frm-input .c-input:not(.line) input:focus, .frm-input .con-aselect.active .aselect {
|
|
border-color: var(--color-primary);
|
|
} |