Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**************** LOGIN ******************/
- .mfp-bg {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- overflow: hidden;
- position: fixed;
- background: #0b0b0b;
- opacity: 0.8;
- }
- .mfp-wrap {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- position: fixed;
- outline: none !important;
- -webkit-backface-visibility: hidden;
- }
- .mfp-container {
- text-align: center;
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- padding: 0 8px;
- box-sizing: border-box;
- }
- .mfp-container:before {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
- .mfp-auto-cursor .mfp-content {
- cursor: auto;
- }
- .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
- width: 100%;
- cursor: auto;
- }
- .mfp-content {
- position: relative;
- display: inline-block;
- vertical-align: middle;
- margin: 0 auto;
- text-align: left;
- z-index: 999;
- }
- .mfp-s-ready .mfp-preloader {
- display: none;
- }
- .mfp-preloader {
- color: #CCC;
- position: absolute;
- top: 50%;
- width: auto;
- text-align: center;
- margin-top: -0.8em;
- left: 8px;
- right: 8px;
- z-index: 999;
- }
- .login-popup {
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
- box-shadow: 0 0 20px rgba(0,0,0,.4);
- background-color: #fff;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
- position: relative;
- padding: 37px 50px 50px 325px;
- width: auto;
- max-width: 645px;
- margin: 20px auto;
- overflow: hidden;
- }
- .login-popup:before {
- background-image: url(https://i.imgur.com/2JZxwd5.png);
- background-position: -435px -67px;
- left: -95px;
- }
- .login-popup:before, .login-popup:after {
- -webkit-border-radius: 192px/290px;
- -moz-border-radius: 192px/290px;
- border-radius: 192px/290px;
- width: 385px;
- height: 580px;
- position: absolute;
- content: "";
- top: 0;
- display: block;
- bottom: 0;
- margin: auto;
- }
- .login-popup h3 {
- margin-bottom: 30px;
- font-size: 20px;
- line-height: 26px;
- border-bottom: 1px solid rgba(0,0,0,.2);
- padding-bottom: 10px;
- margin-bottom: 25px;
- margin-top: 0;
- }
- .h3, h3 {
- border-color: #3793ff;
- border-style: solid;
- border-width: 0 0 1px;
- color: #1a1a1a;
- font-family: Roboto, sans-serif;
- font-size: 1.6rem;
- font-weight: 400;
- letter-spacing: .3px;
- margin-bottom: 12px;
- padding-bottom: 3px;
- }
- .login-popup .login-form .username-input, .login-popup .login-form .password-input {
- position: relative;
- display: block;
- }
- label {
- color: #1a1a1a;
- cursor: pointer;
- margin-right: 18px;
- }
- .login-popup .login-form .rounded-input {
- padding-right: 40px;
- margin-bottom: 15px;
- background-color: #fff;
- -webkit-border-radius: 48px;
- -moz-border-radius: 48px;
- border-radius: 48px;
- padding: 11px 24px;
- display: block;
- font-family: poppins,Arial,sans-serif;
- font-weight: 300;
- font-size: 14px;
- color: #333;
- border: 1px solid #d4d4d4;
- width: 100%;
- height: 47px;
- -webkit-transition: border-color .2s;
- transition: border-color .2s;
- }
- .login-popup .login-form .username-input i, .login-popup .login-form .password-input i {
- font-size: 18px;
- font-weight: 700;
- color: #d4d4d4;
- position: absolute;
- top: 13px;
- right: 18px;
- cursor: text;
- display: block;
- -webkit-transition: color .2s;
- transition: color .2s;
- }
- .login-popup .login-form .username-input i:before, .login-popup .login-form .password-input i:before {
- font-size: 18px;
- }
- .fa-user:before {
- content: "\f007";
- }
- .fa, .fas {
- font-family: "Font Awesome 5 Pro";
- font-weight: 900;
- }
- .fa, .fab, .fad, .fal, .far, .fas {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- font-style: normal;
- font-variant: normal;
- text-rendering: auto;
- line-height: 1;
- }
- input[type="radio"]:checked, input[type="checkbox"]:checked {
- background-color: #107cc9;
- color: #fff;
- }
- input[type="checkbox"] {
- border-radius: 3px;
- }
- input[type="radio"], input[type="checkbox"] {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- display: inline-block;
- position: relative;
- background-color: #f1f1f1;
- color: #666;
- height: 15px;
- width: 15px;
- border: 0;
- cursor: pointer;
- margin-right: 5px;
- outline: none;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1);
- }
- input[type="radio"] ~ label, input[type="checkbox"] ~ label {
- font: 15px/1.7 'Open Sans', sans-serif;
- color: #333;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- cursor: pointer;
- vertical-align: middle;
- }
- .rounded-button.login {
- background-color: #15253d;
- }
- .login-popup .rounded-button {
- -webkit-border-radius: 48px;
- -moz-border-radius: 48px;
- border-radius: 48px;
- padding: 11px 24px;
- text-decoration: none;
- font-weight: 600;
- font-size: 14px;
- text-transform: uppercase;
- cursor: pointer;
- height: 47px;
- line-height: 21px;
- text-shadow: none;
- text-align: center;
- -webkit-transition: background-color .2s,color .2s;
- transition: background-color .2s,color .2s;
- display: block;
- width: 100%;
- color: #fff;
- }
- .mfp-close-btn-in .mfp-close {
- color: #333;
- }
- button.mfp-close, button.mfp-arrow {
- overflow: visible;
- cursor: pointer;
- background: transparent;
- border: 0;
- -webkit-appearance: none;
- display: block;
- outline: none;
- padding: 0;
- z-index: 999;
- box-shadow: none;
- touch-action: manipulation;
- }
- .mfp-close {
- width: 44px;
- height: 44px;
- line-height: 44px;
- position: absolute;
- right: 0;
- top: 0;
- text-decoration: none;
- text-align: center;
- opacity: 0.65;
- padding: 0 0 18px 10px;
- color: #FFF;
- font-style: normal;
- font-size: 28px;
- font-family: Arial, Baskerville, monospace;
- }
- .login-popup::after {
- background-image: url(https://i.imgur.com/Y6SFLhc.png);
- background-position: 72% center;
- background-repeat: no-repeat;
- left: -95px;
- background-size: 170px;
- }
- .login-popup:before, .login-popup:after {
- -webkit-border-radius: 192px/290px;
- -moz-border-radius: 192px/290px;
- border-radius: 192px/290px;
- width: 385px;
- height: 580px;
- position: absolute;
- content: "";
- top: 0;
- display: block;
- bottom: 0;
- margin: auto;
- }
- .login-pop-up {
- display: none;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement