.container {
|
max-width: 400px;
|
width: auto;
|
margin: auto;
|
overflow: hidden;
|
}
|
input {
|
display: block;
|
width: 290px;
|
line-height: 40px;
|
padding: 10px;
|
box-sizing: border-box;
|
outline: none;
|
border: 1px solid #c8cccf;
|
border-radius: 4px;
|
color: #6a6f77;
|
}
|
#msg {
|
position: absolute;
|
bottom: 60px;
|
left: 0;
|
width: 100%;
|
background-color: rgba(0, 0, 0, 0.3);
|
line-height: 40px;
|
font-size: 14px;
|
color: #fff;
|
text-align: center;
|
z-index: 999;
|
}
|
|
.msgError {
|
color: #ff4c05 !important;
|
}
|
|
.msgSuccess {
|
color: #52ccba !important;
|
}
|
|
/* a:link,
|
a:visited,
|
a:hover,
|
a:active {
|
margin-left: 100px;
|
color: #0366d6;
|
} */
|
.block {
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
|
.sliderContainer {
|
position: relative;
|
text-align: center;
|
width: 400px;
|
height: 40px;
|
line-height: 40px;
|
margin-top: 15px;
|
background: #f7f9fa;
|
color: #45494c;
|
border: 1px solid #e4e7eb;
|
}
|
|
.sliderContainer_active .slider {
|
height: 38px;
|
top: -1px;
|
border: 1px solid #1991fa;
|
}
|
|
.sliderContainer_active .sliderMask {
|
height: 38px;
|
border-width: 1px;
|
}
|
|
.sliderContainer_success .slider {
|
height: 38px;
|
top: -1px;
|
border: 1px solid #52ccba;
|
background-color: #52ccba !important;
|
}
|
|
.sliderContainer_success .sliderMask {
|
height: 38px;
|
border: 1px solid #52ccba;
|
background-color: #d2f4ef;
|
}
|
|
.sliderContainer_success .sliderIcon {
|
background-position: 0 -40px !important;
|
}
|
|
.sliderContainer_fail .slider {
|
height: 38px;
|
top: -1px;
|
border: 1px solid #f57a7a;
|
background-color: #f57a7a !important;
|
}
|
|
.sliderContainer_fail .sliderMask {
|
height: 38px;
|
border: 1px solid #f57a7a;
|
background-color: #fce1e1;
|
}
|
|
.sliderContainer_fail .sliderIcon {
|
background-position: 0 -83px !important;
|
}
|
.sliderContainer_active .sliderText,
|
.sliderContainer_success .sliderText,
|
.sliderContainer_fail .sliderText {
|
display: none;
|
}
|
|
.sliderMask {
|
position: absolute;
|
left: 0;
|
top: 0;
|
height: 40px;
|
border: 0 solid #1991fa;
|
background: #d1e9fe;
|
}
|
|
.slider {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 40px;
|
height: 40px;
|
background: #fff;
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
|
cursor: pointer;
|
transition: background 0.2s linear;
|
}
|
|
.slider:hover {
|
background: #1991fa;
|
}
|
|
.slider:hover .sliderIcon {
|
background-position: 0 -40px;
|
}
|
|
.sliderIcon {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: url("./img/right.jpg");
|
background-size: 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
|
.refreshIcon {
|
position: absolute;
|
right: 5px;
|
top: 5px;
|
width: 25px;
|
height: 25px;
|
cursor: pointer;
|
background: url("./img//refresh.png");
|
background-size: 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
z-index: 1;
|
}
|
