Added rules for settings and connection forms, added rules for MOTD

1 files changed, 102 insertions, 3 deletions

diff --git a/theme.css b/theme.css
index 1265c9d..1eeef98 100644
--- a/theme.css
+++ b/theme.css
@@ -1,3 +1,5 @@
+@import 'default.css';
+
 :root {
     --gray0: hsl(270, 0%, 7%);
     --gray1: hsl(270, 0%, 10%);
@@ -226,6 +228,69 @@ body {
     box-shadow:    none;
 }
 
+.window h1 {
+    color:          var(--fg-lo);
+    font-size:      1em;
+    font-weight:    bold;
+    text-transform: uppercase;
+}
+
+.window h2 {
+    margin:         calc(var(--dim--spacing) * 2) 0 0;
+    padding-bottom: 0;
+    border-bottom:  0;
+    color:          var(--fg-lo);
+    font-size:      1em;
+}
+
+.window h2 small {
+    color:       var(--fg);
+    font-size:   1em;
+    line-height: inherit;
+}
+
+.window h1 + *,
+.window h2 + *,
+.window h2 + .sr-only + * {
+    margin-top: var(--dim--spacing);
+}
+
+/* CONNECT FORM */
+
+#connect .connect-row {
+    align-items: baseline;
+    margin-top:  var(--dim--spacing);
+}
+
+#connect .connect-row + .connect-row {
+    margin-top: calc(var(--dim--spacing) * .5);
+}
+
+#connect label {
+    margin-top:  0;
+    white-space: nowrap;
+}
+
+#connect .btn {
+    margin-top: calc(var(--dim--spacing) * 2);
+}
+
+#connect .connect-row > .input,
+#connect .connect-row > .input-wrap {
+    width: 100%;
+}
+
+@media (max-width: 479px) {
+    #connect .connect-row + .connect-row {
+        margin-top: var(--dim--spacing);
+    }
+
+    #connect .connect-row > .input,
+    #connect .connect-row > .input-wrap {
+        margin-top: calc(var(--dim--spacing) * .5);
+    }
+}
+
 /* SIDEBAR */
 
 #sidebar {
@@ -245,7 +310,7 @@ body {
 .channel-list-item,
 .channel-list-item[data-type="lobby"],
 .jump-to-results .channel-list-item[data-type="lobby"] {
-    padding: var(--dim--btn--pad-v) var(--dim--container--pad);
+    padding: var(--dim--btn--pad-v) calc(var(--dim--container--pad) + var(--dim--btn--pad-v));
 }
 
 #footer button.active,
@@ -329,6 +394,24 @@ textarea.input {
     min-height: var(--dim--input--height);
 }
 
+.password-container input {
+    padding-right: calc(2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px);
+}
+
+.password-container .reveal-password {
+    right: var(--dim--input--pad-h);
+}
+
+.password-container .reveal-password span {
+    width:  calc(var(--dim--input--height) - 2 * 2px);
+    height: calc(var(--dim--input--height) - 2 * 2px);
+    color:  var(--color--sidebar-input--fg);
+}
+
+.password-container .reveal-password-visible span::before {
+    color: var(--color--red);
+}
+
 /* HEADER */
 
 #chat .header {
@@ -438,8 +521,9 @@ textarea.input {
 }
 
 #chat .time {
-    grid-area:    time;
-    justify-self: flex-start;
+    grid-area:            time;
+    justify-self:         flex-start;
+    font-variant-numeric: tabular-nums;
 }
 
 #chat .from:empty,
@@ -486,6 +570,21 @@ textarea.input {
     width:          100%;
 }
 
+#chat .msg[data-type="monospace_block"] {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:   "time user" "content content";
+}
+
+#chat .msg[data-type="monospace_block"] .text {
+    margin-top:       calc(var(--dim--spacing) * .5);
+    padding:          var(--dim--msg--pad-v) var(--dim--msg--pad-h);
+    border-radius:    0;
+    background-color: var(--color--msg--bg);
+    color:            var(--color--msg--fg);
+    font-family:      monospace;
+    font-size:        15px;
+}
+
 #chat .msg[data-type="away"] .content,
 #chat .msg[data-type="back"] .content,
 #chat .msg[data-type="condensed"] .content,