Use rem on login view.

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

View File

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

View File

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