* {
|
box-sizing: border-box;
|
margin: 0;
|
padding: 0;
|
font-weight: 300;
|
}
|
|
body {
|
font-family: 'Source Sans Pro', sans-serif;
|
font-size: 12px;
|
}
|
|
.wrapper {
|
/*background: #50a3a2;
|
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
|
background: linear-gradient(to bottom right, #1ABC9C 0%, #53e3a6 100%);
|
opacity: 0.9;*/
|
position: absolute;
|
left: 0;
|
width: 100%;
|
height: 400px;
|
overflow: hidden;
|
}
|
|
.wrapper.form-success .container h1 {
|
-webkit-transform: translateY(85px);
|
-ms-transform: translateY(85px);
|
transform: translateY(85px);
|
}
|
|
.container {
|
max-width: 400px;
|
margin: 0 auto;
|
text-align: center;
|
position: relative;
|
}
|
|
.container .logo {
|
overflow: hidden;
|
padding-bottom: 30px;
|
padding-left: 65px;
|
}
|
|
.container .logo i {
|
font-size: 35px;
|
color: #44a3d7;
|
float: left;
|
/*text-shadow: 4px 3px 0 #1d9d74,80px 80px 0 rgba(0,0,0,0.15);*/
|
}
|
|
.container .logo h1 {
|
padding-top: 2px;
|
padding-left: 15px;
|
float: left;
|
font-size: 22px;
|
font-weight: bold;
|
color: #44a3d7;
|
/*text-shadow: 4px 3px 0 #1ABC9C,90px 80px 0 rgba(0,0,0,0.15);*/
|
}
|
|
.container .logo span {
|
font-size: 30px;
|
font-weight: bold;
|
}
|
|
form {
|
position: relative;
|
z-index: 2;
|
text-align: left;
|
background-color: #285775e6;
|
padding: 50px;
|
border-radius: 5px;
|
box-shadow: 0 0 10px rgba(0,0,0,0.56);
|
}
|
|
form input {
|
font-size: 14px;
|
outline: 0;
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
background-color: #fff;
|
width: 300px;
|
border-radius: 5px;
|
padding: 12px 35px;
|
margin-bottom: 20px;
|
display: block;
|
text-align: left;
|
color: #929191;
|
-webkit-transition-duration: 0.25s;
|
transition-duration: 0.25s;
|
font-weight: 300;
|
}
|
|
form .row {
|
position: relative;
|
overflow: hidden;
|
}
|
|
form i {
|
color: #cbcbcb;
|
top: 13px;
|
/*right: 6px;*/
|
z-index: 99;
|
position: absolute;
|
display: block;
|
width: 30px;
|
height: 30px;
|
text-align: center;
|
font-size: 18px !important;
|
padding-left:8px;
|
}
|
|
form .row .authcode {
|
position: absolute;
|
left: 210px;
|
top: 10px;
|
}
|
|
form button {
|
outline: 0;
|
background-color: #1DA9E0;
|
border: 0;
|
padding: 10px 15px;
|
color: #fff;
|
border-radius: 5px;
|
width: 300px;
|
cursor: pointer;
|
font: 16px/1.5 Lucida Grande,Lucida Sans Unicode,Helvetica Neue,Hiragino Sans GB,Microsoft Yahei,sans-serif;
|
}
|
|
form button:hover {
|
opacity: 0.9;
|
}
|
|
from img {
|
z-index:-1;
|
}
|
|
.bg-bubbles {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
|
.bg-bubbles li {
|
position: absolute;
|
list-style: none;
|
display: block;
|
width: 40px;
|
height: 40px;
|
background-color: rgba(255, 255, 255, 0.15);
|
bottom: -160px;
|
-webkit-animation: square 25s infinite;
|
animation: square 25s infinite;
|
-webkit-transition-timing-function: linear;
|
transition-timing-function: linear;
|
}
|
|
.bg-bubbles li:nth-child(1) {
|
left: 10%;
|
}
|
|
.bg-bubbles li:nth-child(2) {
|
left: 20%;
|
width: 80px;
|
height: 80px;
|
-webkit-animation-delay: 2s;
|
animation-delay: 2s;
|
-webkit-animation-duration: 17s;
|
animation-duration: 17s;
|
}
|
|
.bg-bubbles li:nth-child(3) {
|
left: 25%;
|
-webkit-animation-delay: 4s;
|
animation-delay: 4s;
|
}
|
|
.bg-bubbles li:nth-child(4) {
|
left: 40%;
|
width: 60px;
|
height: 60px;
|
-webkit-animation-duration: 22s;
|
animation-duration: 22s;
|
background-color: rgba(255, 255, 255, 0.25);
|
}
|
|
.bg-bubbles li:nth-child(5) {
|
left: 70%;
|
}
|
|
.bg-bubbles li:nth-child(6) {
|
left: 80%;
|
width: 120px;
|
height: 120px;
|
-webkit-animation-delay: 3s;
|
animation-delay: 3s;
|
background-color: rgba(255, 255, 255, 0.2);
|
}
|
|
.bg-bubbles li:nth-child(7) {
|
left: 32%;
|
width: 160px;
|
height: 160px;
|
-webkit-animation-delay: 7s;
|
animation-delay: 7s;
|
}
|
|
.bg-bubbles li:nth-child(8) {
|
left: 55%;
|
width: 20px;
|
height: 20px;
|
-webkit-animation-delay: 15s;
|
animation-delay: 15s;
|
-webkit-animation-duration: 40s;
|
animation-duration: 40s;
|
}
|
|
.bg-bubbles li:nth-child(9) {
|
left: 25%;
|
width: 10px;
|
height: 10px;
|
-webkit-animation-delay: 2s;
|
animation-delay: 2s;
|
-webkit-animation-duration: 40s;
|
animation-duration: 40s;
|
background-color: rgba(255, 255, 255, 0.3);
|
}
|
|
.bg-bubbles li:nth-child(10) {
|
left: 90%;
|
width: 160px;
|
height: 160px;
|
-webkit-animation-delay: 11s;
|
animation-delay: 11s;
|
}
|
|
@-webkit-keyframes square {
|
0% {
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
|
100% {
|
-webkit-transform: translateY(-700px) rotate(600deg);
|
transform: translateY(-700px) rotate(600deg);
|
}
|
}
|
|
@keyframes square {
|
0% {
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
|
100% {
|
-webkit-transform: translateY(-700px) rotate(600deg);
|
transform: translateY(-700px) rotate(600deg);
|
}
|
}
|
|
button[disabled], button[disabled] button {
|
color: #fff;
|
opacity: 1;
|
cursor: default;
|
}
|
|
.copyright {
|
text-align: center;
|
color: #fff;
|
position: absolute;
|
top: 100%;
|
margin-top: -60px;
|
width: 97%;
|
font-family: Microsoft Yahei;
|
line-height: 25px;
|
font-size: 14px;
|
}
|
|
.login_tips {
|
position: absolute;
|
bottom: 10px;
|
z-index: 99;
|
width: 100%;
|
}
|
|
.tips_msg {
|
height: 30px;
|
line-height: 30px;
|
color: red;
|
margin: 0 auto;
|
border-radius: 5px;
|
width: 300px;
|
font-size: 14px;
|
}
|
|
.tips_msg i {
|
position: relative;
|
top: 0.5px;
|
font-size: 15px;
|
padding-right: 5px;
|
}
|
