aviate/reallife-gamemode
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login screen light modus

Browse Source
This commit is contained in:
hydrant
2020-05-05 18:31:15 +02:00
parent d21b30bcf0
commit 1b140a6119
7 changed files with 71 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
ReallifeGamemode.Client/assets/css/login/styles.css
View File

@@ -35,8 +35,8 @@ body {
width: fit-content;
margin: 0 auto;
padding: 1em .5em;
/*background: url("../../img/login/background.jpg") no-repeat;
background-size: cover;*/
/*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;
@@ -90,7 +90,7 @@ main .form__row--streched {
justify-content: space-between;
}
main .form input {
main form input {
width: 100%;
padding: 0 .25em;
border: none;
@@ -99,18 +99,18 @@ main .form input {
color: inherit;
}
main .form input:focus {
main form input:focus {
outline-width: 0;
}
main .form input#password {
main form input#password {
font-family: "Roboto Mono";
font-weight: 500;
font-size: 1em;
padding: .5em 2em .5em .5em;
}
main .form span#password-visibility {
main form span#password-visibility {
width: 0;
display: -webkit-box;
display: -ms-flexbox;
@@ -119,7 +119,7 @@ main .form span#password-visibility {
align-self: center;
}
main .form span#password-visibility::before {
main form span#password-visibility::before {
content: "\f06e";
font-family: "Font Awesome 5 Free";
font-size: .9em;
@@ -129,12 +129,12 @@ main .form span#password-visibility::before {
right: 1.75em;
}
main .form span#password-visibility.hidden::before {
main form span#password-visibility.hidden::before {
content: "\f070";
right: 1.82em;
}
main .form button.transparent {
main form button.transparent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -146,11 +146,11 @@ main .form button.transparent {
background: transparent;
}
main .form button.transparent:focus {
main form button.transparent:focus {
outline-width: 0;
}
main .form button[type=submit] {
main form button.transparent#submit {
width: 3.25em;
background-image: url("../../img/login/enter.png");
background-repeat: no-repeat;
@@ -158,7 +158,7 @@ main .form button[type=submit] {
background-size: contain;
}
main .form #alert {
main form #alert {
margin-top: .5em;
padding: .5em;
color: #FFF;
@@ -167,7 +167,7 @@ main .form #alert {
border-radius: 5px;
}
main .form #alert.hidden {
main form #alert.hidden {
display: none;
visibility: hidden;
}
@@ -195,4 +195,38 @@ footer .link-list {
justify-content: space-around;
list-style: none;
}
body.light {
color: #555;
}
body.light main {
background-color: rgba(255, 255, 255, 0.25);
}
body.light header {
background-image: url("../../img/login/logo-light.png");
}
body.light form input {
background-color: rgba(255, 255, 255, 0.125);
}
body.light form span#password-visibility::before {
color: rgba(0, 0, 0, 0.85);
}
body.light form button.transparent#submit {
background-image: url("../../img/login/enter-dark.png");
}
body.light form #alert {
color: #BD5252;
background-color: rgba(255, 125, 125, 0.05);
border: 1px solid rgba(255, 125, 125, 0.075);
}
body.light footer {
color: rgba(0, 0, 0, 0.5);
}
/*# sourceMappingURL=styles.css.map */

8
ReallifeGamemode.Client/assets/html/login/login.html
View File

@@ -11,7 +11,7 @@
<link rel="stylesheet" href="../../font/roboto-mono/include_500.css">
</head>
<body>
<body class="light">
<header></header>
<main>
@@ -27,7 +27,7 @@
<span id="password-visibility" class="hidden"></span>
</div>
<button type="submit" class="transparent" id="submit-login"></button>
<button type="submit" class="transparent" id="submit"></button>
</div>
<div id="alert" class="hidden">
Das Passwort kennen wir hier nicht.
@@ -38,8 +38,8 @@
<footer>
<ul class="link-list">
<li class="link-list__item">Forum: <a href="https://gtav.log.ac">gtav.log.ac</a></li>
<li class="link-list__item">TeamSpeak: <a href="https://gtav.log.ac">ts.log.ac</a></li>
<li class="link-list__item">Forum: <a href="#">gtav.log.ac</a></li>
<li class="link-list__item">TeamSpeak: <a href="#">ts.log.ac</a></li>
</ul>
</footer>

8
ReallifeGamemode.Client/assets/html/login/register.html
View File

@@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../font/roboto-mono/include_500.css">
</head>
<body>
<body class="light">
<header></header>
<main>
@@ -32,7 +32,7 @@
<span id="password-visibility" class="hidden"></span>
</div>
<button type="submit" class="transparent" id="submit-register"></button>
<button type="submit" class="transparent" id="submit"></button>
</div>
<div id="alert" class="hidden">
Das Passwort kennen wir hier nicht.
@@ -43,8 +43,8 @@
<footer>
<ul class="link-list">
<li class="link-list__item">Forum: <a href="https://gtav.log.ac">gtav.log.ac</a></li>
<li class="link-list__item">TeamSpeak: <a href="https://gtav.log.ac">ts.log.ac</a></li>
<li class="link-list__item">Forum: <a href="#">gtav.log.ac</a></li>
<li class="link-list__item">TeamSpeak: <a href="#">ts.log.ac</a></li>
</ul>
</footer>

BIN
ReallifeGamemode.Client/assets/img/login/enter-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
ReallifeGamemode.Client/assets/img/login/logo-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
ReallifeGamemode.Client/assets/js/login/application.js
View File

@@ -30,4 +30,8 @@ function showError(error) {
var errorText = $("#alert");
errorText.removeClass("hidden");
errorText.text(error);
}
function disableLightMode() {
$("body").removeClass("light");
}