Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Adding focus and hover elements to the login view, minor change to svg style locations.

Browse Source
This commit is contained in:
Daniel Scalzi 2018-01-23 18:07:18 -05:00
parent 45997c17f5
commit 2e4a2be8b4
3 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/css/launcher.css
View File

@ -133,6 +133,8 @@ p {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%;
padding: 0px 25px;
} }
/* Login form. */ /* Login form. */
@ -150,6 +152,12 @@ p {
color: #848484; color: #848484;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
transition: 0.25s ease;
}
#loginForm a:hover,
#loginForm a:focus {
color: #a2a2a2;
outline: none;
} }
/* Logo on login form. */ /* Logo on login form. */
@ -174,6 +182,8 @@ p {
/* SVG icons on the login view. */ /* SVG icons on the login view. */
.loginSVG { .loginSVG {
fill: #fff; fill: #fff;
height: 20px;
width: 20px;
} }
/* Login text input styles. */ /* Login text input styles. */
@ -222,6 +232,7 @@ p {
/* Remember option text. */ /* Remember option text. */
#loginRememberText { #loginRememberText {
padding-right: 10px; padding-right: 10px;
transition: 0.25s ease;
} }
/* Login button styles. */ /* Login button styles. */
@ -239,13 +250,13 @@ p {
right: -20px; right: -20px;
transition: 0.5s ease; transition: 0.5s ease;
} }
#loginButton:hover { #loginButton:hover,
text-shadow: 0px 0px 20px #fff;
}
#loginButton:focus { #loginButton:focus {
text-shadow: 0px 0px 20px #fff;
outline: none; outline: none;
} }
#loginSVG { #loginSVG {
-webkit-transform: translate3d(0, 0, 0);
overflow: visible; overflow: visible;
transform: rotate(90deg); transform: rotate(90deg);
margin-left: 20px; margin-left: 20px;
@ -253,7 +264,8 @@ p {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
#loginButton:hover #loginSVG { #loginButton:hover #loginSVG,
#loginButton:focus #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #fff); -webkit-filter: drop-shadow(0px 0px 2px #fff);
} }
@ -316,14 +328,13 @@ p {
background: none; background: none;
transition: border-color 0.25s ease; transition: border-color 0.25s ease;
} }
/* On mouse-over, add a grey border color. */ /* On hover and focus, add a grey border color. */
#checkmarkContainer:hover input ~ .loginCheckmark { #checkmarkContainer:hover input ~ *,
border-color: #a2a2a2;; #checkmarkContainer input:focus ~ * {
} color: #a2a2a2;
/* When the checkbox is checked, add a grey border color. */ border-color: #a2a2a2;
#checkmarkContainer input:checked ~ .loginCheckmark {
border-color: #a2a2a2;;
} }
/* For checked -> #checkmarkContainer input:checked ~ * */
/* Create the checkmark/indicator (hidden when not checked). */ /* Create the checkmark/indicator (hidden when not checked). */
.loginCheckmark:after { .loginCheckmark:after {
content: ""; content: "";
@ -340,7 +351,7 @@ p {
top: 0.5px; top: 0.5px;
width: 2px; width: 2px;
height: 6px; height: 6px;
border: solid #a2a2a2;; border: solid #a2a2a2;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); transform: rotate(45deg);
} }
@ -567,6 +578,8 @@ p {
height: 12px; height: 12px;
transition: 0.25s ease; transition: 0.25s ease;
cursor: pointer; cursor: pointer;
height: 12px;
width: 25px;
} }
.mediaSVG:hover, .mediaSVG:active { .mediaSVG:hover, .mediaSVG:active {
height: 20px; height: 20px;

13
app/index.ejs
View File

@ -33,7 +33,7 @@
<div id="mediaContent"> <div id="mediaContent">
<div id="internalMedia"> <div id="internalMedia">
<div class="mediaContainer"> <div class="mediaContainer">
<svg id="newsSVG" class="mediaSVG" viewBox="18 14 106.36 104.43" height="20px" width="25px"> <svg id="newsSVG" class="mediaSVG" viewBox="18 14 106.36 104.43">
<defs> <defs>
<style>.cls-2,.cls-3{fill:none;stroke-miterlimit:10;stroke-width:6px;}</style> <style>.cls-2,.cls-3{fill:none;stroke-miterlimit:10;stroke-width:6px;}</style>
</defs> </defs>
@ -54,7 +54,7 @@
<div id="externalMedia"> <div id="externalMedia">
<div class="mediaContainer"> <div class="mediaContainer">
<a href="http://www.westeroscraft.com"> <a href="http://www.westeroscraft.com">
<svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px"> <svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
<g> <g>
<path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/> <path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
<path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/> <path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
@ -64,7 +64,7 @@
</div> </div>
<div class="mediaContainer"> <div class="mediaContainer">
<a href="https://twitter.com/westeroscraft"> <a href="https://twitter.com/westeroscraft">
<svg id="twitterSVG" class="mediaSVG" width="25px" height="20px" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet"> <svg id="twitterSVG" class="mediaSVG" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">
<g> <g>
<path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/> <path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
</g> </g>
@ -73,7 +73,7 @@
</div> </div>
<div class="mediaContainer"> <div class="mediaContainer">
<a href="https://www.instagram.com/westeroscraft/"> <a href="https://www.instagram.com/westeroscraft/">
<svg id="instagramSVG" class="mediaSVG" viewBox="0 0 5040 5040" height="20px" width="25px"> <svg id="instagramSVG" class="mediaSVG" viewBox="0 0 5040 5040">
<defs> <defs>
<radialGradient id="instaFill" cx="30%" cy="107%" r="150%"> <radialGradient id="instaFill" cx="30%" cy="107%" r="150%">
<stop offset="0%" stop-color="#fdf497"/> <stop offset="0%" stop-color="#fdf497"/>
@ -93,7 +93,8 @@
</div> </div>
<div class="mediaContainer"> <div class="mediaContainer">
<a href="https://www.youtube.com/user/WesterosCraft"> <a href="https://www.youtube.com/user/WesterosCraft">
<svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px"> <g> <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
<g>
<path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/> <path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
</g> </g>
</svg> </svg>
@ -101,7 +102,7 @@
</div> </div>
<div class="mediaContainer"> <div class="mediaContainer">
<a href="https://discord.gg/hqdjs3m"> <a href="https://discord.gg/hqdjs3m">
<svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px"> <svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
<g> <g>
<path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/> <path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
</g> </g>

6
app/login.ejs
View File

@ -3,13 +3,13 @@
<form id='loginForm'> <form id='loginForm'>
<img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/> <img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
<span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span> <span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
<svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43" height="20px" width="20px"> <svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
<g> <g>
<path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/> <path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
</g> </g>
</svg> </svg>
<input id="loginUsername" class="loginField" type="text" placeholder="EMAIL"/> <input id="loginUsername" class="loginField" type="text" placeholder="EMAIL"/>
<svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43" height="20px" width="20px"> <svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43">
<g> <g>
<path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/> <path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
</g> </g>
@ -20,8 +20,8 @@
<a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">forgot password?</a> <a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">forgot password?</a>
</span> </span>
<label id="checkmarkContainer"> <label id="checkmarkContainer">
<span id="loginRememberText" class="loginSpanDim">remember me?</span>
<input id="loginRememberOption" type="checkbox"> <input id="loginRememberOption" type="checkbox">
<span id="loginRememberText" class="loginSpanDim">remember me?</span>
<span class="loginCheckmark"></span> <span class="loginCheckmark"></span>
</label> </label>
</div> </div>