NEUER LOGIN SCREEEEEEEEEEN
This commit is contained in:
hydrant
198
ReallifeGamemode.Client/assets/css/login/styles.css
Normal file
198
ReallifeGamemode.Client/assets/css/login/styles.css
Normal file
@@ -0,0 +1,198 @@
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
padding: 1em .5em;
|
||||
/*background: url("../../img/login/background.jpg") no-repeat;
|
||||
background-size: cover;*/
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 5em;
|
||||
margin-bottom: 2em;
|
||||
background-image: url("../../img/login/logo.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
main {
|
||||
height: auto;
|
||||
max-width: 60ch;
|
||||
padding: 1em;
|
||||
border-radius: .25em;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
main h1, main p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
main h2 span#name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
main .form {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
main .form__row {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main .form__row--streched {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main .form input {
|
||||
width: 100%;
|
||||
padding: 0 .25em;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
main .form input:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
main .form input#password {
|
||||
font-family: "Roboto Mono";
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
padding: .5em 2em .5em .5em;
|
||||
}
|
||||
|
||||
main .form span#password-visibility {
|
||||
width: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
main .form span#password-visibility::before {
|
||||
content: "\f06e";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-size: .9em;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
right: 1.75em;
|
||||
}
|
||||
|
||||
main .form span#password-visibility.hidden::before {
|
||||
content: "\f070";
|
||||
right: 1.82em;
|
||||
}
|
||||
|
||||
main .form button.transparent {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
color: inherit;
|
||||
border: none;
|
||||
margin: unset;
|
||||
padding: unset;
|
||||
margin-left: .5em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main .form button.transparent:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
main .form button[type=submit] {
|
||||
width: 3.25em;
|
||||
background-image: url("../../img/login/enter.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
main .form #alert {
|
||||
margin-top: .5em;
|
||||
padding: .5em;
|
||||
color: #FFF;
|
||||
background-color: rgba(255, 125, 125, 0.25);
|
||||
border: 1px solid rgba(255, 125, 125, 0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
main .form #alert.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
width: 60ch;
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
footer .link-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
list-style: none;
|
||||
}
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
9
ReallifeGamemode.Client/assets/css/login/styles.css.map
Normal file
9
ReallifeGamemode.Client/assets/css/login/styles.css.map
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"styles.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "styles.css"
|
||||
}
|
||||
165
ReallifeGamemode.Client/assets/css/login/styles.scss
Normal file
165
ReallifeGamemode.Client/assets/css/login/styles.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
html { box-sizing: border-box; }
|
||||
*, *::before, *::after { box-sizing: inherit; }
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
padding: 1em .5em;
|
||||
|
||||
background: url('../../img/splash-screen/background.jpg') no-repeat;
|
||||
background-size: cover;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 5em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
background-image: url('../../img/splash-screen/logo.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
main {
|
||||
height: auto;
|
||||
max-width: 60ch;
|
||||
|
||||
padding: 1em;
|
||||
border-radius: .25em;
|
||||
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
|
||||
h1, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
|
||||
span#name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: .25em;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&--streched {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0 .25em;
|
||||
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .125);
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
&#password {
|
||||
font-family: "Roboto Mono";
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
padding: .5em 2em .5em .5em;
|
||||
}
|
||||
}
|
||||
|
||||
span#password-visibility {
|
||||
width: 0;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
&::before {
|
||||
content: "\f06e";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-size: .9em;
|
||||
color: rgba(255, 255, 255, .85);
|
||||
font-weight: 400;
|
||||
|
||||
position: relative;
|
||||
right: 1.75em;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
&::before {
|
||||
content: "\f070";
|
||||
right: 1.82em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.transparent {
|
||||
display: flex;
|
||||
color: inherit;
|
||||
border: none;
|
||||
margin: unset;
|
||||
padding: unset;
|
||||
|
||||
margin-left: .5em;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
&#submit {
|
||||
width: 3.25em;
|
||||
|
||||
background-image: url('../../img/splash-screen/enter.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
height: fit-content;
|
||||
width: 60ch;
|
||||
align-self: center;
|
||||
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
|
||||
color: rgba(255, 255, 255, .5);
|
||||
|
||||
.link-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user