.rl-view-model { &.RL-Login, &.RL-AdminLogin { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 450px; z-index: 5; } } @glass-color: #fff !important; @glass-error-color: #f76260 !important; @glass-m-color: rgba(255, 255, 255, .8) !important; .b-login-content { .loginFormWrapper { position: relative; .descWrapper { margin-bottom: 10px; text-align: center; .desc { font-size: 30px; color: var(--loading-color); text-shadow: var(--loading-text-shadow); } } .loginForm { background-color: var(--login-bg-color, rgba(0, 0, 0, .5)); border: var(--login-border, 1px solid rgba(255, 255, 255, .2)); border-radius: var(--login-border-radius); box-shadow: var(--login-box-shadow); margin: 0; } .input-append .add-on i, .loginForm, .legend, .e-checkbox-icon, .g-ui-link, .language-button { color: var(--login-color, @glass-m-color); text-shadow: none !important; } .controls, .control-group { margin-bottom: 25px; } .wrapper { padding: 40px 40px 20px 40px; } .controls { .inputLoginForm, .inputEmail, .inputLogin, .inputPassword, .inputAdditionalCode { font-size: 18px; height: 40px; line-height: 20px; padding-left: 12px; padding-right: 12px; } .inputEmail, .inputPassword { padding-right: 35px; } input { border: 1px solid none !important; background: none !important; outline: none !important; text-shadow: none !important; box-shadow: none !important; color: @glass-color; border-color: @glass-m-color; &:placeholder { color: @glass-color; text-shadow: none !important; } &:focus, &:hover { border-color: @glass-color; } } .btn { border: 1px solid none !important; background: none !important; outline: none !important; text-shadow: none !important; box-shadow: none !important; color: @glass-color; border-color: @glass-m-color; text-transform: uppercase; font-size: 13px; &:hover, &:active{ border-color: @glass-color; } } &.error { .input-append .add-on i { color: @glass-error-color; } input { color: @glass-error-color; border-color: @glass-error-color; } } } .signMeLabel .e-checkbox { margin-top: 5px; } .input-append .add-on { position: relative; height: 30px; background: none; margin-left: -35px; z-index: 1000; border: 0; } .input-append .add-on i { font-size: 17px; line-height: 29px; outline: none !important; box-shadow: none !important; &.login-submit-icon{ font-size: 24px; padding-top: 2px; cursor: pointer; } } .controls.error .add-on i, .control-group.error .add-on i { color: #b94a48; } } .buttonLogin { margin: 0; } .alert { position: absolute; left: 0; right: 0; z-index: 1; } .flag-selector { margin-bottom: 0; } .language-buttons { margin-top: 5px; } .language-button { padding: 5px; outline: none; } .e-mobile-switcher { color: var(--login-switch-color, #333); margin-top: 8px; text-align: center; a { color: var(--login-switch-color, #333); text-decoration: underline; &:hover { filter: brightness(1.5); } } } } @media screen and (max-width: 480px) { .b-login-content .loginFormWrapper { .wrapper { padding: 30px 4vw 10px; } } } @keyframes loginRotation { to {transform: rotate(1turn);} } .submitting-pane { position: relative; &.submitting:before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(---spinner-bg, rgba(0,0,0,.3)); border-radius: var(--login-border-radius); z-index: 1051; border-radius: 8px; } html &.submitting:after{ content: ''; position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; border: 8px solid transparent; border-color: transparent; border-top-color: var(--spinner-color, #fff); animation: loginRotation 1s infinite ease-in-out; border-radius: 50%; z-index: 1052; } } .btn-submit-icon-wrp { border: none; background: none; display: inline-block; margin: 0; padding: 0; outline: none; cursor: pointer; }