chat schöner?

ReallifeGamemode.Client/assets/css/chat/checkbox.css

@@ -0,0 +1 @@
+input[type=checkbox].css-checkbox{position:absolute;z-index:-1000;left:-1000px;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0;}input[type=checkbox].css-checkbox+label.css-label{height:20px;width:20px;display:inline-block;background-repeat:no-repeat;background-position:0 0;cursor:pointer;}input[type=checkbox].css-checkbox:checked+label.css-label:after{content:'x';color:white;}label.css-label{background:#7b3784;border-radius:2px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

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

@@ -0,0 +1,92 @@
+*, body, html {
+  padding: 0;
+  margin: 0;
+}
+
+#chat, a, body, html {
+  color: #fff;
+}
+
+body, html {
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+  font-size: 14px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+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-weight: 500;
+  direction: ltr;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ui_element {
+  display: none;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2;
+}
+
+#chat {
+  display: block;
+  z-index: 0;
+  line-height: 1.25;
+  text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
+  letter-spacing: .4px;
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
+#chat ul#chat_messages {
+  height: 17.5em;
+  min-width: 35vw;
+  max-width: 85vw;
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  list-style-type: none;
+  margin-bottom: .25em;
+}
+
+#chat ul#chat_messages > li {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  margin-bottom: .25em;
+}
+
+#chat input#chat_msg {
+  width: 35vw;
+  outline: 0;
+  border: none;
+  border-radius: 3px;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+  padding: .5em;
+}
+
+::-webkit-scrollbar {
+  width: 11px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 17, 0, 0);
+  border-radius: 20px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 17, 0, 0);
+}
+/*# sourceMappingURL=main.css.map */

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

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC;EACZ,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CACV;CAAC;;AAED,AAAA,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC;EACnB,KAAK,EAAE,IACT;CAAC;;AAED,AAAA,IAAI,EAAE,IAAI,CAAC;EACT,sBAAsB,EAAE,WAAW;EACnC,QAAQ,EAAE,MAAM;EAChB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;CAClB;;AAED,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,oIAAoI;EACjJ,SAAS,EAAE,iBAAiB;EAC5B,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,GAAG;CACf;;AAED,AAAA,CAAC,CAAC;EAAE,eAAe,EAAE,IAAI;CAAI;;AAE7B,AAAA,WAAW,CAAC;EACV,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,CACX;CAAC;;AAED,AAAA,KAAK,CAAC;EACJ,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,CAAC;EAEV,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,8EAA8E;EAC3F,cAAc,EAAE,IAAI;EAEpB,UAAU,EAAE,GAAG;EACf,WAAW,EAAE,GAAG;CAmCjB;;AA5CD,AAWE,KAXG,CAWH,EAAE,AAAA,cAAc,CAAC;EACf,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,YAAY;EAEvB,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,MAAM;EAElB,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,KAAK;CAMrB;;AA3BH,AAuBI,KAvBC,CAWH,EAAE,AAAA,cAAc,GAYX,EAAE,CAAC;EACJ,SAAS,EAAE,YAAY;EACvB,aAAa,EAAE,KAAK;CACrB;;AA1BL,AA6BE,KA7BG,CA6BH,KAAK,AAAA,SAAS,CAAC;EACb,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;EAElB,SAAS,EAAE,OAAO;EAClB,WAAW,EAAE,OAAO;EACpB,WAAW,EAAE,OAAO;EAEpB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,kBAAiB;EAE7B,OAAO,EAAE,IAAI;CACd;;AAGH,AAAA,mBAAmB,CAAC;EAClB,KAAK,EAAE,IAAI;CAQZ;;AATD,AAGE,mBAHiB,AAGhB,MAAM,CAAC;EACN,UAAU,EAAE,mBAAmB;EAC/B,aAAa,EAAE,IAAI;CAGpB;;AARH,AAOI,mBAPe,AAGhB,MAAM,AAIJ,MAAM,CAAC;EAAE,UAAU,EAAE,mBAAmB;CAAI",
+    "sources": [
+        "main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}

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

@@ -0,0 +1,89 @@
+*, body, html {
+  padding: 0;
+  margin: 0
+}
+
+#chat, a, body, html {
+  color: #fff
+}
+
+body, html {
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+  font-size: 14px;
+  user-select: none;
+}
+
+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-weight: 500;
+  direction: ltr;
+}
+
+a { text-decoration: none; }
+
+.ui_element {
+  display: none;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2
+}
+
+#chat {
+  display: block;
+  z-index: 0;
+
+  line-height: 1.25;
+  text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
+  letter-spacing: .4px;
+
+  margin-top: 1em;
+  margin-left: 1em;
+
+  ul#chat_messages {
+    height: 17.5em;
+    min-width: 35vw;
+    max-width: 85vw;
+    transform: rotate(0deg);
+
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    list-style-type: none;
+    margin-bottom: .25em;
+  
+    &> li {
+      transform: rotate(0deg);
+      margin-bottom: .25em;
+    }
+  }
+
+  input#chat_msg {
+    width: 35vw;
+    outline: 0;
+    border: none;
+    border-radius: 3px;
+
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    
+    color: white;
+    background: rgba(0, 0, 0, .5);
+    
+    padding: .5em;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 11px;
+
+  &-thumb {
+    background: rgba(255, 17, 0, 0);
+    border-radius: 20px;
+
+    &:hover { background: rgba(255, 17, 0, 0); }
+  }
+}

ReallifeGamemode.Client/assets/css/chat/main_old.css

@@ -0,0 +1,89 @@
+*, body, html {
+    padding: 0;
+    margin: 0
+}
+
+#chat, a, body, html {
+    color: #fff
+}
+
+body, html {
+    -webkit-font-smoothing: antialiased;
+    overflow: hidden;
+    font-size: 14px;
+    -webkit-user-select: none
+}
+
+a {
+    text-decoration: none
+}
+
+.ui_element {
+    display: none;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    z-index: 2
+}
+
+#chat {
+    display: block;
+    z-index: 0;
+    line-height: 24px;
+    font-weight: 700;
+    text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
+    font-family: Myriad Pro,Segoe UI,Verdana,sans-serif;
+    font-size: 16px;
+    letter-spacing: .4px;
+    margin-left: 15px
+}
+
+@media screen and (min-height:1080px) {
+    #chat {
+        font-size: 14px !important;
+        font-weight: 700
+    }
+}
+
+#chat ul#chat_messages {
+    direction: ltr;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 285px;
+    margin-top: 2vh; /*2vh*/
+    transform: rotate(0deg);
+    /*width:37vw; /* old: 37vw*/
+    max-width: 85%;
+    padding: 10px 20px; /* old padding: 10px 20px*/
+    list-style-type: none
+}
+
+    #chat ul#chat_messages > li {
+        transform: rotate(0deg)
+    }
+
+#chat input#chat_msg {
+    color: #fff;
+    background: rgba(0,0,0,.5);
+    outline: 0;
+    border: none;
+    font-family: Myriad Pro,Open Sans,sans-serif;
+    font-size: 18px;
+    line-height: 35px;
+    width: 35vw;
+    padding: 5px 5px 5px 15px
+}
+
+::-webkit-scrollbar {
+    width: 11px;
+    direction: ltr;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 17, 0, 0);
+    border-radius: 20px
+}
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 17, 0, 0)
+    }