File: /var/www/html/www.winghung.com/wp-content/plugins/login-with-ajax/templates/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;
}
}
}