🏠 Root
/
home
/
artorgp
/
www
/
wp-content
/
plugins
/
login-with-ajax
/
templates
/
Editing: login-with-ajax.scss
// Basic Styles for all Themes .lwa-wrapper { --icon-pwd-show : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke="%23222"><circle cx="12" cy="12" r="3.5"/><path d="M20.188 10.9343c.3882.4713.5823.7069.5823 1.0657 0 .3588-.1941.5944-.5823 1.0657C18.7679 14.7899 15.6357 18 12 18c-3.63573 0-6.76794-3.2101-8.18803-4.9343-.38816-.4713-.58224-.7069-.58224-1.0657 0-.3588.19408-.5944.58224-1.0657C5.23206 9.21014 8.36427 6 12 6c3.6357 0 6.7679 3.21014 8.188 4.9343Z"/></g></svg>'); --icon-pwd-hide : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23222" fill-rule="evenodd" d="M15.9202 12.7988C15.9725 12.5407 16 12.2736 16 12c0-2.20914-1.7909-4-4-4-.2736 0-.5407.02746-.7988.07977l.9227.92274c1.5583.06332 2.8103 1.31529 2.8736 2.87359l.9227.9227Zm-6.52709-2.2845C9.14295 10.9523 9 11.4595 9 12c0 1.6569 1.3431 3 3 3 .5405 0 1.0477-.143 1.4857-.3931l.7263.7263C13.5784 15.7545 12.8179 16 12 16c-2.20914 0-4-1.7909-4-4 0-.8179.24547-1.5784.66676-2.21201l.72635.72631Z" clip-rule="evenodd"/><path fill="%23222" fill-rule="evenodd" d="m16.1537 17.2751-.7344-.7345c-1.064.579-2.2206.9594-3.4193.9594-1.6718 0-3.26184-.7401-4.63286-1.7265-1.36708-.9835-2.47408-2.1817-3.16922-3.0257-.42436-.5152-.46818-.6043-.46818-.7478 0-.1435.04382-.2326.46818-.7478.66929-.8126 1.72038-1.95357 3.0178-2.91516l-.71433-.71433C5.16991 8.63072 4.10383 9.79349 3.42604 10.6164l-.05881.0712c-.33052.3994-.63749.7703-.63749 1.3124s.30696.913.63749 1.3124l.05881.0712c.72495.8802 1.8941 2.1491 3.35708 3.2017C8.24216 17.635 10.0361 18.5 12 18.5c1.5101 0 2.9196-.5114 4.1537-1.2249ZM9.18993 6.06861C10.0698 5.71828 11.0135 5.5 12 5.5c1.9639 0 3.7579.865 5.2169 1.91472 1.463 1.05255 2.6321 2.32151 3.3571 3.20168l.0588.0712c.3305.3994.6375.7703.6375 1.3124s-.307.913-.6375 1.3124l-.0588.0712c-.4805.5833-1.156 1.3374-1.9829 2.0861l-.7081-.708c.7957-.7161 1.4508-1.4453 1.9191-2.0139.4244-.5152.4682-.6043.4682-.7478 0-.1435-.0438-.2326-.4682-.7478-.6951-.844-1.8021-2.04219-3.1692-3.02574C15.2619 7.24007 13.6718 6.5 12 6.5c-.6944 0-1.3747.12768-2.03103.34765l-.77904-.77904Z" clip-rule="evenodd"/><path stroke="%23222" d="m5 2 16 16"/></svg>'); position: relative !important; .lwa-is-working { opacity: 0.2 !important; pointer-events: none; cursor: progress; } .lwa-loading { position: absolute !important; width: 100% !important; height: 100% !important; background: url(loading.svg) 50% 45% no-repeat !important; left: 0 !important; top: 0 !important; background-size: 150px 150px !important; pointer-events: none; } } .lwa { // Note that this is a span, allowing something like a DIV to enjoy JS functionality without the styling like in AJAXify span.lwa-status { padding: 15px !important; margin-bottom: 20px !important; border: 1px solid transparent !important; border-radius: 2.5px !important; display: none !important; &.lwa-status-invalid, &.lwa-status-confirm { display: block !important; } &.lwa-status-invalid { color: #842029 !important; background-color: #f8d7da !important; border-color: #f5c2c7 !important; } &.lwa-status-confirm { color: #0f5132 !important; background-color: #d1e7dd !important; border-color: #badbcc !important; } > :first-child { margin-bottom: 0 !important; } > :first-child { margin-bottom: 0 !important; } } /* for regular admin login form */ .login.lwa-status { border-left: 4px solid #72aee6; padding: 12px; margin-left: 0; margin-bottom: 20px; background-color: #fff; box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); word-wrap: break-word; &.lwa-status-invalid, &.error { border-left-color: #d63638; } &.lwa-status-success, &.success { border-left-color: #28a745; } } /* Titles */ .lwa-title { font-weight: bold !important; font-size: 18px !important; margin-bottom: 15px !important; } .hidden { visibility: hidden !important; display: none !important; } .lwa-hr { display: flex; align-items: center; text-align: center; margin : 20px 5px; color : #777; &::before, &::after { content: ''; flex: 1; border-bottom: 1px solid #777; } &:not(:empty)::before { margin-right: 15px; } &:not(:empty)::after { margin-left: 15px; } } } //#lwa-1.lwa-bones, #lwa-2.lwa-bones, #lwa-3.lwa-bones, .lwa-bones { @import "../assets/css/pixelbones"; --avatar-size : 60px; --avatar-rounded : 50%; --links-case : none; .lwa { margin-bottom: 10px !important; p { margin-bottom: 20px !important; } } .lwa.lwa-login { /* Links */ .lwa-links a { display: block !important; margin: 8px 0 0 0 !important; padding: 0 !important; text-transform: var(--links-case) !important; } /*Forgotten password*/ .lwa-remember { margin-top: 10px !important; display: none; } /*Registration*/ .lwa-register { margin-top: 10px !important; display: none; } /*OpenID specific*/ .lwa-register hr { display: block !important; } .lwa-register #openid_identifier { width: auto !important; } .grid-container.submit { text-align: left !important; grid-template-columns: 50% 1fr !important; max-width : 100% !important; padding: 0 !important; } .grid-container.submit .lwa-links { text-align: right !important; } } // logged out theme - all templates from LWA share this (currently) .lwa-logged-in { --links-case : lowercase; /*Logged In CSS*/ .lwa-avatar { padding: 0 !important; margin: 0 !important; } .lwa-avatar.rounded img { border-radius: var(--avatar-rounded) !important; } .lwa-info a { text-transform: var(--links-case) !important; } .lwa-info > p { margin: 0 0 2px !important; padding: 0 !important; } .grid-container { text-align: left !important; grid-template-columns: calc(var(--avatar-size) + 10px) 1fr !important; padding: 0 !important; } &.vertical { text-align: center !important; .grid-container { display: block !important; width : 100% !important; text-align: center !important; } .grid-container > div { margin : 0 0 20px 0 !important; } .lwa-avatar img { display : block !important; margin : 0 auto 0 !important; } } } // Minimalistic Theme .lwa-minimalistic { .input-field { position: relative !important; margin-bottom: 10px !important; label { font-size: 80% !important; position: absolute !important; top: calc(50% - 10px) !important; left: 0 !important; opacity: 0 !important; transition: all .3s ease !important; } input[type=text], input[type=password] { padding: 10px 0 0 !important; height: 50px !important; border: none !important; border-bottom: solid 1px var(--border-color-softer) !important; background: transparent !important; box-sizing: border-box !important; transition: all .3s linear !important; border-radius: 0 !important; &:focus { border: 0 !important; border-bottom: solid 1px var(--border-color) !important; outline: 0 !important; box-shadow: 0 2px 6px -8px var(--border-color-normal) !important; } } input:not(:placeholder-shown) { padding: 28px 0 12px 0 !important; } input:not(:placeholder-shown) + label { transform: translateY(-20px) !important; opacity: .7 !important; } } } } // Modal Theme // .lwa-modal-overlay { // Variables $speed: 0.6s; $delay: ($speed * .5); $easing: cubic-bezier(.55, 0, .1, 1); display : none; &.active { display: block !important; } // Overlay -- only show for tablet and up @media only screen and (min-width: 40rem) { align-items: center !important; justify-content: center !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 999999 !important; background-color: rgba(#000, 0.6) !important; opacity: 0 !important; visibility: hidden !important; backface-visibility: hidden !important; transition: opacity $speed $easing, visibility $speed $easing !important; -webkit-transition: opacity $speed $easing, visibility $speed $easing !important; transition-delay: $delay !important; &.active { display: flex !important; opacity: 1 !important; visibility: visible !important; } } // Modal .lwa-modal-popup { display: flex !important; align-items: start !important; justify-content: center !important; position: relative !important; margin: 0 !important; background-color: #fff !important; width: 100% !important; max-width: 750px !important; min-height: 200px !important; max-height: 98% !important; padding: 10px !important; border-radius: 3px !important; opacity: 0 !important; overflow-y: auto !important; visibility: hidden !important; box-shadow: 0 2px 10px rgba(#000, 0.1) !important; backface-visibility: hidden !important; transform: scale(1.2) !important; transition: all $speed $easing !important; z-index: 99999 !important; // close modal > header { box-sizing: border-box; width: 100%; border-bottom: 1px solid #dedede; margin: 0; padding: 10px 0 7px 15px; .lwa-modal-title { font-size: 24px !important; line-height: 1.3 !important; padding: 0 32px 0 0 !important; margin: 0 !important; a { color: var(--text-color-normal) !important; &:hover { text-decoration: underline; } } } } // close modal .lwa-close-modal { position: absolute !important; cursor: pointer !important; top: 15px !important; right: 15px !important; opacity: 0 !important; backface-visibility: hidden !important; transition: opacity $speed $easing, visibility $speed $easing !important; -webkit-transition: opacity $speed $easing, visibility $speed $easing !important; transition-delay: $delay !important; } svg { width: 17.5px !important; height: 17.5px !important; } // content .lwa-modal-content { opacity: 0 !important; backface-visibility: hidden !important; transition: opacity $speed $easing !important; transition-delay: $delay !important; width:100% !important; margin:20px 5px 5px !important; .lwa-form .lwa-title { display:block !important; } form { margin-bottom: 0 !important; } } &.active { visibility: visible !important; opacity: 1 !important; transform: scale(1) !important; .lwa-modal-content, .lwa-close-modal { opacity: 1 !important; } } > footer { width: 100% !important; border-top: 1px solid #dedede !important; > div { padding: 10px 25px !important; button, .button { margin: 0 !important; } } } /** * Mobile styling for popups */ @media only screen and (max-width: 39.99rem) { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-height: 100% !important; -webkit-overflow-scrolling: touch !important; border-radius: 0 !important; transform: scale(1.1) !important; padding: 10px !important; .lwa-close-modal { top: 10px !important; right: 10px !important; svg{ width:28px !important; height:28px !important; } } } } } // Classic Template .lwa-wrapper { .lwa-classic-vanilla { .lwa-form, .lwa-register > form { grid-row-gap: 10px !important; > * { grid-column-gap: 10px !important; } } .lwa-links-register-inline-cancel { align-self: center !important; } .lwa-links > * { display: block !important; } .lwa-links > label { margin-bottom: 0 !important; } .lwa-links label .label-body { display: inline-block !important; padding-left: 10px !important; font-size: 85% !important; vertical-align: top !important; } .lwa-remember-email input { width: 96% !important; } .lwa-remember-email { margin-bottom:10px !important; } .lwa-title { font-size:110% !important; } } .lwa-classic, .lwa-classic-vanilla { .lwa-register > form p:nth-child(-n + 2) { display: block !important; margin-bottom:10px !important; } .lwa-register .lwa-submit-button { display: block !important; } .lwa-remember-email label { border: 0 !important; clip: rect(1px 1px 1px 1px) !important; /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .lwa-form, .lwa-register > form { display: grid; // can't be important or it won't slide grid-template-rows: 1fr !important; > * { display: grid !important; grid-template-columns: 1fr 3fr !important; } .input-field label { align-self: center !important; } } } .lwa-classic { .lwa-register .lwa-submit-button { grid-template-columns: 1fr 1fr 2fr !important; } } }
Save
Cancel
