* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #efefef; font-family: Ubuntu; font-size: 13px; color: #fff; } img { vertical-align: top; } a { color: #fff; } a:hover { text-decoration: underline; color: #ffee58; } .style { width: 100%; float: left; } .form-login-wrapp { width: 360px; left: 50%; margin-left: -180px; background: #fff; position: absolute; top: 100px; border-radius: 4px; overflow: hidden; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.55); } .form-login-wrapp.animated .logo-form-wr { perspective: 250px; } .form-login-wrapp.animated .logo-form-wr div { animation: rotate 3s infinite linear; } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-moz-keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(0deg); } } .logo-form-wr { padding: 30px 0; } .logo-form-wr div { transition: 1s; margin: 0 auto; width: 68px; height: 68px; background: url("../login-img/logo.png") 50% 50% no-repeat; } .start-form { background: #aacf38 url("../login-img/bg.png") 50% 0 no-repeat; } .start-form form { padding: 50px 30px 30px 30px; float: left; width: 100%; } .inputs-wrapp { position: relative; } .inputs-wrapp .help-block { display: none; } .inputs-wrapp .form-group { width: 100%; float: left; position: relative; } .inputs-wrapp .form-group:first-child input { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top: 1px solid #fff; } .inputs-wrapp .form-group:last-child input { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; } .inputs-wrapp .form-group label { position: absolute; color: #bdbdbd; height: 14px; top: 50%; margin-top: -7px; left: 37px; } .inputs-wrapp .form-group input { width: 100%; float: left; border: 1px solid #fff; border-top: 1px solid #e0e0e0; outline: none !important; background: #fff; height: 38px; padding-left: 37px; padding-right: 5px; } .inputs-wrapp .form-group input:focus + label { display: none; } .inputs-wrapp .form-group.has-error input { border: 1px solid #ff4081; } .inputs-wrapp .form-group.has-success label { display: none !important; } .inputs-wrapp .form-group:before { width: 37px; height: 100%; position: absolute; left: 0; top: 0; content: ''; } .inputs-wrapp .form-group.field-loginform-username:before { background: url("../login-img/user-ico.png") 50% 50% no-repeat; } .inputs-wrapp .form-group.field-loginform-password:before { background: url("../login-img/pass-ico.png") 50% 50% no-repeat; } .checks-wrapp { text-align: center; margin-top: 19px; } .checks-wrapp input { display: none; } .checks-wrapp input + label { position: relative; padding-left: 27px; cursor: pointer; line-height: 16px; color: #fff; } .checks-wrapp input + label span { position: absolute; width: 16px; height: 16px; top: -0; left: 0; background: #b6df48; border-radius: 1px; cursor: pointer; } .checks-wrapp input + label span:before { width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ''; display: none; } .checks-wrapp input:hover + label span:before { display: block; background: -moz-radial-gradient(center, ellipse cover, rgba(164, 254, 105, 0) 0%, #a4fe69 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(164, 254, 105, 0) 0%, #a4fe69 100%); background: radial-gradient(ellipse at center, rgba(164, 254, 105, 0) 0%, #a4fe69 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4fe69', endColorstr='#a4fe69',GradientType=1 ); } .checks-wrapp input:checked + label span:before { display: block; background: url("../login-img/check.png") 50% 50% no-repeat; } .button-wr { margin-top: 21px; } .button-wr button { margin: 0 auto; width: 165px; height: 38px; line-height: 38px; outline: none !important; border: none !important; background: #ffee58; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.55); text-align: center; font-size: 14px; color: #444444; text-transform: uppercase; font-weight: 700; border-radius: 4px; display: block; cursor: pointer; } .button-wr button:hover { box-shadow: none; } .button-wr button:active { background: #ffc444; } .form-login-wrapp.shop .logo-form-wr div { background: url("../login-img/logo-shop.png") 50% 50% no-repeat; } .form-login-wrapp.shop .start-form { background: #a73d97 url("../login-img/bg-shop.png") 50% 0 no-repeat; } .form-login-wrapp.shop .checks-wrapp input + label span { background: #c451b3; } .form-login-wrapp.shop .checks-wrapp input:hover + label span:before { background: -moz-radial-gradient(center, ellipse cover, rgba(223, 133, 212, 0) 0%, #df85d4 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(223, 133, 212, 0) 0%, #df85d4 100%); background: radial-gradient(ellipse at center, rgba(223, 133, 212, 0) 0%, #df85d4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00df85d4', endColorstr='#df85d4',GradientType=1 ); } .form-login-wrapp.shop .checks-wrapp input:checked + label span:before { display: block; background: url("../login-img/check-shop.png") 50% 50% no-repeat; } /*# sourceMappingURL=login-new.css.map */