global chat via socket.io

[browser-rts.git] / public / scifi.css

diff --git a/public/scifi.css b/public/scifi.css
index 3c6c0b732baf7b06f368ff20c397cc12b78a807f..4dc0085d4cdd56aa6f0de71c2e1b05449db8dc8a 100644 (file)
--- a/public/scifi.css
+++ b/public/scifi.css
@@ -6,6 +6,7 @@
     --green-border: #32821c;
     --red-border: #821c1c;
     --red-bg: #381818;
+    --hl-text: #6ac9db;
 }
 
 input {
@@ -37,7 +38,7 @@ h1, h2, h3 {
     border-bottom-width: 2px;
     padding-left: 10px;
     margin-top: 0;
-    color :#6ac9db;
+    color: var(--hl-text);
     text-shadow: 0 0 2px #6ac9db;
 }
 h1 {
@@ -332,3 +333,43 @@ form > div {
 .rate-of-change.danger::before {
   content: '\25BC ';
 }
+
+#chat {
+  margin-top: 2rem;
+  background-color: var(--page-bg);
+  padding: 1rem;
+  --aug-border-all: 1px;
+  --aug-border-bg: var(--border);
+}
+
+#chat-messages {
+  height: 200px;
+  overflow: auto;
+  padding: 0 1rem;
+}
+.chat-message {
+  padding: 4px;
+}
+.chat-message:nth-child(even) {
+  background-color: #0d2329;
+}
+.chat-message .from {
+  color: var(--hl-text);
+}
+.chat-message .sent_at {
+  color: #444;
+  font-size: 0.6rem;
+}
+#chat-form {
+  margin: 0;
+}
+#chat-form .col {
+  margin: 0;
+}
+#chat-form input {
+    flex-grow: 3;
+    flex-basis: 100%;
+}
+#chat-form button {
+  max-width: 150px;
+}