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

Use rem on login view.

Browse Source
This commit is contained in:
Daniel Scalzi 2020-05-27 16:54:52 -04:00
parent ab51b84bea
commit 33e454e529
No known key found for this signature in database
GPG Key ID: D18EA3FB4B142A57
2 changed files with 86 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/renderer/components/login/Login.css
View File

@ -6,7 +6,7 @@
/* Styles for dimmer login span. */ /* Styles for dimmer login span. */
.loginSpanDim { .loginSpanDim {
font-size: 12px; font-size: 0.75rem;
color: #848484; color: #848484;
font-weight: bold; font-weight: bold;
} }
@ -41,20 +41,20 @@
#loginCancelButton:hover #loginCancelText, #loginCancelButton:hover #loginCancelText,
#loginCancelButton:focus #loginCancelIcon, #loginCancelButton:focus #loginCancelIcon,
#loginCancelButton:focus #loginCancelText { #loginCancelButton:focus #loginCancelText {
text-shadow: 0px 0px 20px white; text-shadow: 0 0 1.25rem white;
} }
#loginCancelButton:hover #loginCancelIcon, #loginCancelButton:hover #loginCancelIcon,
#loginCancelButton:focus #loginCancelIcon { #loginCancelButton:focus #loginCancelIcon {
box-shadow: 0px 0px 20px white; box-shadow: 0 0 1.25rem white;
} }
#loginCancelButton:active #loginCancelIcon, #loginCancelButton:active #loginCancelIcon,
#loginCancelButton:active #loginCancelText { #loginCancelButton:active #loginCancelText {
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75); text-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.75);
} }
#loginCancelButton:active #loginCancelIcon { #loginCancelButton:active #loginCancelIcon {
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75); box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.75);
} }
#loginCancelButton:disabled { #loginCancelButton:disabled {
pointer-events: none; pointer-events: none;
@ -68,19 +68,19 @@
/* The X in a circle icon for the cancel button. */ /* The X in a circle icon for the cancel button. */
#loginCancelIcon { #loginCancelIcon {
border-radius: 50%; border-radius: 50%;
border: 1px solid white; border: 0.0625rem solid white;
box-sizing: border-box; box-sizing: border-box;
height: 30px; height: 1.875rem;
width: 30px; width: 1.875rem;
font-size: 19px; font-size: 1.1875rem;
line-height: 30px; line-height: 1.875rem;
margin: 0 auto; margin: 0 auto;
margin-bottom: 5px; margin-bottom: 0.3125rem;
transition: 0.25s ease; transition: 0.25s ease;
} }
/* Text for the login cancel button. */ /* Text for the login cancel button. */
#loginCancelText { #loginCancelText {
font-size: 15px; font-size: 0.9375rem;
transition: 0.25s ease; transition: 0.25s ease;
} }
@ -90,7 +90,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
padding: 0px 25px; padding: 0 1.5625rem;
} }
/* Login form. */ /* Login form. */
@ -103,7 +103,7 @@
/* Login form anchor styles. */ /* Login form anchor styles. */
#loginForm a { #loginForm a {
font-size: 12px; font-size: 0.75rem;
color: #848484; color: #848484;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@ -121,26 +121,26 @@
/* Logo on login form. */ /* Logo on login form. */
#loginImageSeal { #loginImageSeal {
border-radius: 50%; border-radius: 50%;
border: 2px solid #cad7e1; border: 0.125rem solid #cad7e1;
background: rgba(1, 2, 1, 0.5); background: rgba(1, 2, 1, 0.5);
height: 125px; height: 7.8125rem;
width: 125px; width: 7.8125rem;
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); box-shadow: 0 0 0.625rem 0 rgb(0, 0, 0);
margin-bottom: 20px; margin-bottom: 1.25rem;
} }
/* Header on login view. */ /* Header on login view. */
#loginSubheader { #loginSubheader {
font-family: 'Avenir Medium'; font-family: 'Avenir Medium';
margin-bottom: 25px; margin-bottom: 1.5625rem;
font-size: 12px; font-size: 0.75rem;
letter-spacing: 1px; letter-spacing: 0.0625rem;
font-weight: bold; font-weight: bold;
} }
/* Add spacing between password field and options bar. */ /* Add spacing between password field and options bar. */
#labelPassword { #labelPassword {
margin-bottom: 13px; margin-bottom: 0.8125rem;
} }
/* Container which contains the forgot and remember options. */ /* Container which contains the forgot and remember options. */
@ -152,7 +152,7 @@
/* Remember option text. */ /* Remember option text. */
#loginRememberText { #loginRememberText {
padding-right: 10px; padding-right: 0.625rem;
transition: 0.25s ease; transition: 0.25s ease;
} }
@ -160,14 +160,15 @@
#loginButton { #loginButton {
background: none; background: none;
font-weight: bold; font-weight: bold;
letter-spacing: 2px; letter-spacing: 0.125rem;
border: none; border: none;
padding: 15px 5px; padding: 0.9375rem 0.3125rem;
margin: 10px 0px; margin: 0.625rem 0;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
right: -20px; right: -1.25rem;
transition: 0.5s ease; transition: 0.5s ease;
font-size: 0.875rem;
} }
#loginButton:disabled { #loginButton:disabled {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
@ -178,31 +179,33 @@
} }
#loginButton:hover, #loginButton:hover,
#loginButton:focus { #loginButton:focus {
text-shadow: 0px 0px 20px #fff; text-shadow: 0 0 1.25rem #fff;
outline: none; outline: none;
} }
#loginButton:active { #loginButton:active {
color: #c7c7c7; color: #c7c7c7;
text-shadow: 0px 0px 20px #c7c7c7; text-shadow: 0 0 1.25rem #c7c7c7;
} }
#loginSVG { #loginSVG {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
overflow: visible; overflow: visible;
transform: rotate(90deg); transform: rotate(90deg);
margin-left: 20px; margin-left: 1.25rem;
transition: 0.25s ease; transition: 0.25s ease;
width: 20px; width: 1.25rem;
height: 20px; height: 1.25rem;
} }
#loginButton:hover #loginSVG, #loginButton:hover #loginSVG,
#loginButton:focus #loginSVG { #loginButton:focus #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #fff); filter: drop-shadow(0 0 0.125rem #fff);
-webkit-filter: drop-shadow(0 0 0.125rem #fff);
} }
#loginButton:active #loginSVG .arrowLine { #loginButton:active #loginSVG .arrowLine {
stroke: #c7c7c7; stroke: #c7c7c7;
} }
#loginButton:active #loginSVG { #loginButton:active #loginSVG {
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7); filter: drop-shadow(0 0 0.125rem #c7c7c7);
-webkit-filter: drop-shadow(0 0 0.125rem #c7c7c7);
} }
#loginButton:disabled #loginSVG .arrowLine { #loginButton:disabled #loginSVG .arrowLine {
stroke: rgba(255, 255, 255, 0.75); stroke: rgba(255, 255, 255, 0.75);
@ -224,8 +227,8 @@
.circle-loader { .circle-loader {
margin-left: 20px; margin-left: 1.25rem;
border: 2px solid rgba(255, 255, 255, 0.5); border: 0.125rem solid rgba(255, 255, 255, 0.5);
border-left-color: #ffffff; border-left-color: #ffffff;
animation-name: loader-spin; animation-name: loader-spin;
animation-duration: 1s; animation-duration: 1s;
@ -235,8 +238,8 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
border-radius: 50%; border-radius: 50%;
width: 16px; width: 1rem;
height: 16px; height: 1rem;
} }
.load-complete { .load-complete {
animation: none; animation: none;
@ -254,14 +257,14 @@
} }
.checkmark:after { .checkmark:after {
opacity: 1; opacity: 1;
height: 8px; height: 0.5rem;
width: 4px; width: 0.25rem;
transform-origin: left top; transform-origin: left top;
border-right: 2px solid #ffffff; border-right: 0.125rem solid #ffffff;
border-top: 2px solid #ffffff; border-top: 0.125rem solid #ffffff;
content: ''; content: '';
left: 2px; left: 0.125rem;
top: 8px; top: 0.5rem;
position: absolute; position: absolute;
} }
@keyframes loader-spin { @keyframes loader-spin {
@ -280,17 +283,17 @@
} }
20% { 20% {
height: 0; height: 0;
width: 4px; width: 0.25rem;
opacity: 1; opacity: 1;
} }
40% { 40% {
height: 8px; height: 0.5rem;
width: 4px; width: 0.25rem;
opacity: 1; opacity: 1;
} }
100% { 100% {
height: 8px; height: 0.5rem;
width: 4px; width: 0.25rem;
opacity: 1; opacity: 1;
} }
} }
@ -298,11 +301,11 @@
/*.spinningCircle { /*.spinningCircle {
margin-left: 20px; margin-left: 1.25rem;
height: 16px; height: 1rem;
width: 16px; width: 1rem;
border-radius: 50%; border-radius: 50%;
border: 2px solid rgba(255,255,255,0); border: 0.125rem solid rgba(255,255,255,0);
border-top-color: #ffffff; border-top-color: #ffffff;
border-right-color: #ffffff; border-right-color: #ffffff;
border-left-color: rgba(255, 255, 255, 0.50); border-left-color: rgba(255, 255, 255, 0.50);
@ -329,12 +332,12 @@
/* Add spacing between register anchor and disclaimer. */ /* Add spacing between register anchor and disclaimer. */
#loginRegisterSpan { #loginRegisterSpan {
margin-bottom: 5px; margin-bottom: 0.3125rem;
} }
/* Disclaimer text styles. */ /* Disclaimer text styles. */
.loginDisclaimerText { .loginDisclaimerText {
font-size: 7px; font-size: 0.4375rem;
color: #848484; color: #848484;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -351,7 +354,7 @@
align-items: center; align-items: center;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
font-size: 22px; font-size: 1.375rem;
-webkit-user-select: none; -webkit-user-select: none;
} }
@ -365,10 +368,10 @@
/* Create a custom checkbox. */ /* Create a custom checkbox. */
.loginCheckmark { .loginCheckmark {
position: relative; position: relative;
height: 10px; height: 0.625rem;
width: 10px; width: 0.625rem;
border: 1px solid #848484; border: 0.0625rem solid #848484;
border-radius: 1px; border-radius: 0.0625rem;
background: none; background: none;
transition: 0.25s ease; transition: 0.25s ease;
} }
@ -399,12 +402,12 @@
/* Style the checkmark/indicator. */ /* Style the checkmark/indicator. */
#checkmarkContainer .loginCheckmark:after { #checkmarkContainer .loginCheckmark:after {
position: absolute; position: absolute;
left: 3.5px; left: 0.21875rem;
top: 0.5px; top: 0.03125rem;
width: 2px; width: 0.125rem;
height: 6px; height: 0.375rem;
border: solid #a2a2a2; border: solid #a2a2a2;
border-width: 0 2px 2px 0; border-width: 0 0.125rem 0.125rem 0;
transform: rotate(45deg); transform: rotate(45deg);
} }
@ -414,7 +417,7 @@
width: 100%; width: 100%;
z-index: 9000; z-index: 9000;
position: absolute; position: absolute;
filter: blur(8px) contrast(0.9) brightness(1.0); filter: blur(0.5rem) contrast(0.9) brightness(1.0);
background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed; background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed;
transform: scale(1.2); transform: scale(1.2);
background-size: cover; background-size: cover;

32
src/renderer/components/login/login-field/LoginField.css
View File

@ -10,20 +10,20 @@
/* SVG icons on the login view. */ /* SVG icons on the login view. */
.loginSVG { .loginSVG {
fill: #fff; fill: #fff;
height: 20px; height: 1.25rem;
width: 20px; width: 1.25rem;
} }
/* Span which displays errors related to login field content. */ /* Span which displays errors related to login field content. */
.loginErrorSpan { .loginErrorSpan {
font-family: 'Avenir Medium'; font-family: 'Avenir Medium';
font-weight: bold; font-weight: bold;
font-size: 8px; font-size: 0.5rem;
color: #ff1b0c; color: #ff1b0c;
width: 100%; width: 100%;
text-align: right; text-align: right;
position: absolute; position: absolute;
top: 7px; top: 0.4375rem;
opacity: 0; opacity: 0;
transition: 0.25s ease; transition: 0.25s ease;
} }
@ -34,19 +34,19 @@
@keyframes shake { @keyframes shake {
10%, 90% { 10%, 90% {
transform: translate3d(-1px, 0, 0); transform: translate3d(-0.0625rem, 0, 0);
} }
20%, 80% { 20%, 80% {
transform: translate3d(2px, 0, 0); transform: translate3d(0.125rem, 0, 0);
} }
30%, 50%, 70% { 30%, 50%, 70% {
transform: translate3d(-4px, 0, 0); transform: translate3d(-0.25rem, 0, 0);
} }
40%, 60% { 40%, 60% {
transform: translate3d(4px, 0, 0); transform: translate3d(0.25rem, 0, 0);
} }
} }
@ -54,18 +54,18 @@
.loginField { .loginField {
font-family: 'Avenir Book'; font-family: 'Avenir Book';
background: none; background: none;
border-width: 1.5px 0px 0px 0px; border-width: 0.09375rem 0 0 0;
border-style: solid; border-style: solid;
width: 250px; width: 15.625rem;
margin-bottom: 20px; margin-bottom: 1.25rem;
border-color: #fff; border-color: #fff;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
padding: 7.5px; padding: 0.46875rem;
font-size: 10px; font-size: 0.625rem;
letter-spacing: 1px; letter-spacing: 0.0625rem;
} }
.loginField:focus { .loginField:focus {
outline: none; outline: none;
@ -75,8 +75,8 @@
} }
.loginField::-webkit-input-placeholder { .loginField::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
font-size: 10px; font-size: 0.625rem;
letter-spacing: 1px; letter-spacing: 0.0625rem;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }