brille gesäubert

ReallifeGamemode.Client/assets/css/chat/main.scss

@@ -1,3 +1,7 @@
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: inherit; }
+
+
 *, body, html {
   padding: 0;
   margin: 0
@@ -16,7 +20,7 @@ body, html {
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: calc(.7em + .4vw);
+  font-size: calc(.75em + .3vw);
   font-weight: 500;
   direction: ltr;
 }
@@ -43,25 +47,28 @@ a { text-decoration: none; }
   margin-left: 1em;
 
   ul#chat_messages {
-    height: 17.5em;
-    min-width: 35vw;
-    max-width: 85vw;
+    height: 16.45em;
+    min-width: 50ch;
+    max-width: calc(60vw + 10px);
     transform: rotate(0deg);
 
     overflow-y: auto;
     overflow-x: hidden;
+    word-break: break-all;
 
     list-style-type: none;
     margin-bottom: .25em;
   
     &> li {
       transform: rotate(0deg);
-      margin-bottom: .25em;
+      margin-bottom: .125em;
+
+      &:last-child { margin-bottom: .25em; }
     }
   }
 
   input#chat_msg {
-    width: 35vw;
+    width: 60vw;
     outline: 0;
     border: none;
     border-radius: 3px;
@@ -78,11 +85,11 @@ a { text-decoration: none; }
 }
 
 ::-webkit-scrollbar {
-  width: 11px;
+  width: 10px;
 
   &-thumb {
     background: rgba(255, 17, 0, 0);
-    border-radius: 20px;
+    border-radius: 3px;
 
     &:hover { background: rgba(255, 17, 0, 0); }
   }