NEUER LOGIN SCREEEEEEEEEEN

2020-05-04 23:03:39 +02:00
parent b61c57a2d1
commit 36cacd4775
47 changed files with 18613 additions and 47 deletions
--- a/ReallifeGamemode.Client/assets/css/login/styles.scss
+++ b/ReallifeGamemode.Client/assets/css/login/styles.scss
@@ -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;
+  }
+}