try taxifahrer & add new Inputdesign(noch nicht ready)

ReallifeGamemode.Client/assets/css/inputhelper/style.css

@@ -1,49 +1,131 @@
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
+html {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
-#black {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
-	background-color: rgba(0, 0, 0, .3);
+*, *::before, *::after {
+    -webkit-box-sizing: inherit;
+    box-sizing: inherit;
 }
 
-.input-main {
-	display: block;
-	width: 70%;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	
-	background-color: rgba(0, 0, 0, .8);
-	padding: 10px;
+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;
+    
 }
 
-.input-main h1 {
-	color: white;
-	font-size: 24px;
-	font-family: "Arial";
-	font-weight: lighter;
-	margin-bottom: 5px;
+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);
+    
 }
 
-.input-main input {
-	width: 100%;
-	background-color: black;
-	outline: 0;
-	border: grey 1px solid;
-	color: white;
-	padding: 5px;
-	font-size: 20px;
-	font-family: "Arial";
-	font-weight: lighter;
-}
+    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: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 h1 {
+        font-size: 1.5em;
+        line-height: 1;
+        margin-bottom: .125em;
+        padding-right: 1em;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    main p {
+        margin-bottom: 1em;
+        line-height: 1.125;
+    }
+
+    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:focus {
+                outline-width: 0;
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+