add connected/disconnected text

[mudsync.git] / data / web-static / css / main.css

diff --git a/data/web-static/css/main.css b/data/web-static/css/main.css
index 67113ca530720b4de1de7e5b10a0153e46e5106d..e965980607836f3cde9a33b92283984f29c9bc38 100644 (file)
--- a/data/web-static/css/main.css
+++ b/data/web-static/css/main.css
@@ -23,27 +23,101 @@ body {
     border: 0px;
     margin: 0px;
     font-family: 'Inconsolata', monospace;
+    font-size: 12pt;
 }
 
+span.pre-ish {
+    font-size: 12pt;
+    white-space: pre-wrap;
+}
+
+ul {
+    margin-top: .25em;
+    margin-bottom: .25em;
+    padding: 0px;
+    list-style: none;
+}
+
+ul li:before {
+    content: "\2022";
+    margin-right: 1ch;
+    margin-left: 1ch;
+    font-weight: bold;
+}
+
+
 #stream-metabox {
-    flex: 1;
+    flex-direction: column;
+    display: flex;
     min-height: 85vh;
     max-height: 85vh;
     background-color: #d5d5d5;
-    padding: 10px;
-    overflow-y: scroll;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+    overflow-y: auto;
+}
+
+/*
+ Alignment hack:
+   http://stackoverflow.com/a/37515194
+*/
+#stream-metabox > :first-child {
+    margin-top: auto !important;
+}
+
+#stream {
+    background-color: #fbfbfb;
+    padding-bottom: .25em;
 }
 
+
+.stream-entry {
+    background-color: #fdfdfd;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border-left-style: solid;
+    border-left-width: 2px;
+    border-left-color: #7b7b7b;
+    margin-top: .5em;
+    margin-bottom: 0px;
+    margin-left: -2px;
+    margin-right: 0px;
+}
+
+.stream-entry p {
+    margin-top: .25em;
+    margin-bottom: 0px;
+}
+
+
+.self-sent {
+    color: #494949;
+    border-left-color: #b4b4b4;
+}
+
+#connection-status.connected {
+    color: #88be7e;
+}
+
+#connection-status.disconnected {
+    color: #be8b7e;
+}
+\f
+
 #input-metabox {
     flex: 1;
     min-height: 15vh;
     max-height: 15vh;
     background-color: #414141;
     color: #d5d5d5;
-    padding: 10px;
+    padding: 15px;
 }
 
-input {
+#input-metabox input {
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     border-bottom-left-radius: 8px;
@@ -52,4 +126,6 @@ input {
     background-color: #ffffff;
     padding: 5px;
     width: 75%;
-}
\ No newline at end of file
+    font-family: 'Inconsolata', monospace;
+    font-size: 12pt;
+}