Added styles for active elements on the login view. Made the frame buttons unfocusable by tabbing. Changed the login form from a form to a div, the form element is not what we want to use.

This commit is contained in:
Daniel Scalzi 2018-01-24 17:35:06 -05:00
parent 6c5e9303b4
commit a3e7dfc570
3 changed files with 44 additions and 17 deletions

View File

@ -76,26 +76,35 @@ p {
#frame_btn_close {
background-color: #e74c32;
}
#frame_btn_close:hover {
#frame_btn_close:hover,
#frame_btn_close:focus {
background-color: #FF9A8A;
}
#frame_btn_close:active {
background-color: #ff8d7b;
}
#frame_btn_restoredown {
background-color: #fed045;
}
#frame_btn_restoredown:hover {
#frame_btn_restoredown:hover,
#frame_btn_restoredown:focus {
background-color: #FFE9A9;
}
#frame_btn_restoredown:active {
background-color: #ffde7b;
}
#frame_btn_minimize {
background-color: #96e734;
}
#frame_btn_minimize:hover {
#frame_btn_minimize:hover,
#frame_btn_minimize:focus {
background-color: #D6FFA6;
}
#frame_btn_minimize:active {
background-color: #bfff76;
}
/*******************************************************************************
* *
@ -159,6 +168,9 @@ p {
color: #a2a2a2;
outline: none;
}
#loginForm a:active {
color: #8b8b8b;
}
/* Logo on login form. */
#loginImageSeal {
@ -195,7 +207,7 @@ p {
width: 250px;
margin-bottom: 20px;
border-color: #fff;
color: rgb(197, 197, 197);
color: rgba(255, 255, 255, 0.75);
font-weight: bold;
text-align: center;
box-sizing: border-box;
@ -207,7 +219,7 @@ p {
outline: none;
}
.loginField::-webkit-input-placeholder {
color: rgb(197, 197, 197);
color: rgba(255, 255, 255, 0.75);
font-size: 10px;
letter-spacing: 1px;
text-align: center;
@ -255,6 +267,10 @@ p {
text-shadow: 0px 0px 20px #fff;
outline: none;
}
#loginButton:active {
color: #c7c7c7;
text-shadow: 0px 0px 20px #c7c7c7;
}
#loginSVG {
-webkit-transform: translate3d(0, 0, 0);
overflow: visible;
@ -268,6 +284,12 @@ p {
#loginButton:focus #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #fff);
}
#loginButton:active #loginSVG .arrowLine {
stroke: #c7c7c7;
}
#loginButton:active #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
}
#loginButtonContent {
display: flex;
@ -326,7 +348,7 @@ p {
border: 1px solid #848484;
border-radius: 1px;
background: none;
transition: border-color 0.25s ease;
transition: 0.25s ease;
}
/* On hover and focus, add a grey border color. */
#checkmarkContainer:hover input ~ *,
@ -334,6 +356,11 @@ p {
color: #a2a2a2;
border-color: #a2a2a2;
}
/* On keydown, darken the checkbox a bit. */
#checkmarkContainer input:active ~ *:not(#loginRememberText) {
color: #8d8d8d;
border-color: #8d8d8d;
}
/* For checked -> #checkmarkContainer input:checked ~ * */
/* Create the checkmark/indicator (hidden when not checked). */
.loginCheckmark:after {

View File

@ -1,7 +1,7 @@
<div id="frame_bar">
<div id="frame_btn_dock">
<button class="frame_btn" id="frame_btn_close"></button>
<button class="frame_btn" id="frame_btn_restoredown"></button>
<button class="frame_btn" id="frame_btn_minimize"></button>
<button class="frame_btn" id="frame_btn_close" tabIndex="-1"></button>
<button class="frame_btn" id="frame_btn_restoredown" tabIndex="-1"></button>
<button class="frame_btn" id="frame_btn_minimize" tabIndex="-1"></button>
</div>
</div>

View File

@ -1,6 +1,6 @@
<div id="loginContainer">
<div id="loginContent">
<form id='loginForm'>
<div id='loginForm'>
<img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
<span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
<svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
@ -25,14 +25,14 @@
<span class="loginCheckmark"></span>
</label>
</div>
<button id="loginButton" type="submit">
<button id="loginButton">
<div id="loginButtonContent">
LOGIN
<svg id="loginSVG" viewBox="0 0 24.87 13.97">
<defs>
<style>.cls-1{fill:none;stroke:#FFF;stroke-width:2px;}</style>
<style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
</defs>
<polyline class="cls-1" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
<polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
</svg>
</div>
</button>
@ -43,6 +43,6 @@
<p class="loginDisclaimerText">Your password is sent directly to mojang and never stored.</p>
<p class="loginDisclaimerText">WesterosCraft is not affiliated with Mojang AB.</p>
</div>
</form>
</div>
</div>
</div>