Temporary loginOffline styles fixes

This commit is contained in:
MrSandMan 2022-07-31 11:07:31 +03:00
parent 9c69a99f7e
commit b038b30ec6
2 changed files with 68 additions and 2 deletions

View File

@ -677,6 +677,72 @@ body, button {
display: initial; display: initial;
} }
/* Login Offline button styles. */
#loginOfflineButton {
background: none;
font-weight: bold;
letter-spacing: 2px;
border: none;
padding: 15px 5px;
margin: 10px 0px;
cursor: pointer;
position: relative;
right: -20px;
transition: 0.5s ease;
}
#loginOfflineutton:disabled {
color: rgba(255, 255, 255, 0.75);
pointer-events: none;
}
#loginOfflineButton[loading] {
color: #fff;
}
#loginOfflineButton:hover,
#loginOfflineButton:focus {
text-shadow: 0px 0px 20px #fff;
outline: none;
}
#loginOfflineButton:active {
color: #c7c7c7;
text-shadow: 0px 0px 20px #c7c7c7;
}
#loginSVG {
-webkit-transform: translate3d(0, 0, 0);
overflow: visible;
transform: rotate(90deg);
margin-left: 20px;
transition: 0.25s ease;
width: 20px;
height: 20px;
}
#loginOfflineButton:hover #loginSVG,
#loginOfflineButton:focus #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #fff);
}
#loginOfflineButton:active #loginSVG .arrowLine {
stroke: #c7c7c7;
}
#loginOfflineButton:active #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
}
#loginOfflineButton:disabled #loginSVG .arrowLine {
stroke: rgba(255, 255, 255, 0.75);
}
#loginOfflineButtonContent {
display: flex;
align-items: center;
}
#loginOfflineButton .circle-loader,
#loginOfflineButton[loading] #loginSVG {
display: none;
}
#loginOfflineButton[loading] .circle-loader,
#loginOfflineButton #loginSVG {
display: initial;
}
.circle-loader { .circle-loader {
margin-left: 20px; margin-left: 20px;

View File

@ -6,12 +6,12 @@
</button> </button>
</div> </div>
<div id="loginContent"> <div id="loginContent">
<form id="loginForm"> <form id="loginForm" style="margin-top: 2.5em;">
<span id="loginSubheader">OFFLINE LOGIN</span> <span id="loginSubheader">OFFLINE LOGIN</span>
<div class="loginFieldContainer"> <div class="loginFieldContainer">
<input id="loginOfflineUsername" class="loginField" type="text" placeholder="USERNAME"/> <input id="loginOfflineUsername" class="loginField" type="text" placeholder="USERNAME"/>
</div> </div>
<button id="loginOfflineButton" enabled> <button id="loginOfflineButton" class="loginButton" enabled>
<div id="loginOfflineButtonContent"> <div id="loginOfflineButtonContent">
LOGIN LOGIN
<svg id="loginSVG" viewBox="0 0 24.87 13.97"> <svg id="loginSVG" viewBox="0 0 24.87 13.97">