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.
Daniel Scalzi
parent
6c5e9303b4
commit
a3e7dfc570
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue