From 21dc2545b8499a49ab76387bb4268876d21dde11 Mon Sep 17 00:00:00 2001
From: Luke <luke@life-of-german.org>
Date: Wed, 21 Apr 2021 17:06:51 +0000
Subject: [PATCH] =?UTF-8?q?inputhelper=20sch=C3=B6ner=20gemacht?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/inputhelper/style.css          | 210 ++++++++++--------
 1 file changed, 113 insertions(+), 97 deletions(-)

diff --git a/ReallifeGamemode.Client/assets/css/inputhelper/style.css b/ReallifeGamemode.Client/assets/css/inputhelper/style.css
index 830931f3..5f9b84a8 100644
--- a/ReallifeGamemode.Client/assets/css/inputhelper/style.css
+++ b/ReallifeGamemode.Client/assets/css/inputhelper/style.css
@@ -1,122 +1,138 @@
 html {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    user-select: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  user-select: none;
 }
 
 *, *::before, *::after {
-    -webkit-box-sizing: inherit;
-    box-sizing: inherit;
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 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;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    font-weight: 400;
-    color: #FFF;
-    
+  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;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-weight: 400;
+  color: #FFF;   
 }
 
 main {
-    height: auto;
-    position: relative;
-    min-width: 50ch;
-    max-width: 35vw;
-    padding: 1em;
-    border-radius: .25em;
-    font-size: 1em;
-    line-height: 1.25;
-    background-color: rgba(0, 0, 0, 0.5);
-    
+  height: auto;
+  max-height: 60vh;
+  position: relative;
+  min-width: 45ch;
+  max-width: 30vw;
+  padding: 1em;
+  border-radius: .25em;
+  font-size: 1em;
+  line-height: 1.25;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-    main a#close {
-        position: absolute;
-        right: 1em;
-        top: 1em;
-        height: 1em;
-        width: 1em;
-        opacity: 0.25;
-        
+  main a#close {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+    height: 1em;
+    width: 1em;
+    opacity: 0.25;
+  }
+
+    main a#close:hover {
+      opacity: 1;
     }
 
-        main a#close:hover {
-            opacity: 1;
-        }
-
-        main a#close:before, main a#close:after {
-            content: ' ';
-            position: absolute;
-            left: .5em;
-            height: 1em;
-            width: 2px;
-            background-color: #FFF;
-            border-radius: 1px;
-        }
-
-        main a#close:before {
-            -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
-        }
-
-        main a#close:after {
-            -webkit-transform: rotate(-45deg);
-            transform: rotate(-45deg);
-        }
-
-    main h1, main p {
-        margin: 0;
+    main a#close:before, main a#close:after {
+      content: ' ';
+      position: absolute;
+      left: .5em;
+      height: 1em;
+      width: 2px;
+      background-color: #FFF;
+      border-radius: 1px;
     }
 
-    main h1 {
-        font-size: 1.5em;
-        line-height: 1;
-        margin-bottom: .125em;
-        padding-right: 1em;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+    main a#close:before {
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
     }
 
-    main p {
-        margin-bottom: 1em;
-        line-height: 1.125;
+    main a#close:after {
+      -webkit-transform: rotate(-45deg);
+      transform: rotate(-45deg);
     }
 
-    main .form {
-        margin-top: .25em;
+  main h1, main p {
+    margin: 0;
+  }
+
+  main h1 {
+    font-size: 1.5em;
+    line-height: 1.125;
+    margin-bottom: .25em;
+    padding-right: 1em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  main p {
+    margin-bottom: .5em;
+    line-height: 1.125;
+    max-height: 12em;
+    overflow-y: auto;
+    padding-right: .5em;
+    word-break: break-word;
+  }
+
+  main p::-webkit-scrollbar {
+    width: 5px;
+  }
+  
+  main p::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, .125);
+    border-radius: 3px;
+  }
+  
+  main p::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .125);
+    border-radius: 3px;
+  }
+
+  main .form {
+    margin-top: .25em;
+  }
+
+    main .form input {
+      width: 100%;
+      padding: .5em;
+      font-family: "Roboto Mono";
+      font-weight: 500;
+      font-size: 1em;
+      border: none;
+      border-radius: 5px;
+      background-color: rgba(0, 0, 0, 0.125);
+      color: inherit;
     }
 
-        main .form input {
-            width: 100%;
-            padding: .5em;
-            font-family: "Roboto Mono";
-            font-weight: 500;
-            font-size: 1em;
-            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:focus {
+        outline-width: 0;
+      }