Minor appearance improvements/fixes

1 files changed, 39 insertions, 11 deletions

diff --git a/theme.css b/theme.css
index 78c3c90..99cdf43 100644
--- a/theme.css
+++ b/theme.css
@@ -62,6 +62,9 @@
     --color--sidebar-btn--fg:        var(--fg);
     --color--sidebar-btn--active-fg: var(--fg-lo);
 
+    --color--sidebar-badge--bg: var(--obj);
+    --color--sidebar-badge--fg: var(--fg-lo);
+
     --color--header--bg:       var(--obj-hi);
     --color--header--fg:       var(--fg);
     --color--header--title-fg: var(--fg-lo);
@@ -339,6 +342,23 @@ body {
     box-shadow: -2px 0 #fff inset;
 }
 
+.channel-list-item.not-connected,
+.channel-list-item.parted-channel {
+    color: var(--color--red);
+}
+
+.channel-list-item.not-connected.active,
+.channel-list-item.not-connected:hover,
+.channel-list-item.parted-channel.active,
+.channel-list-item.parted-channel:hover {
+    color: var(--color--red);
+}
+
+.channel-list-item .badge {
+    background-color: var(--color--sidebar-badge--bg);
+    color:            var(--color--sidebar-badge--fg);
+}
+
 #sidebar .network .collapse-network {
     width:        14px;
     margin-right: 12px;
@@ -443,9 +463,8 @@ textarea.input {
 }
 
 .header .title {
-    color:        var(--color--header--title-fg);
-    font-size:    16px;
-    font-weight:  bold;
+    color:       var(--color--header--title-fg);
+    font-weight: bold;
 }
 
 #chat button.mentions,
@@ -472,6 +491,12 @@ textarea.input {
     margin-top: 0;
 }
 
+@media (max-width: 768px) {
+    .header .topic {
+        font-size: 14px;
+    }
+}
+
 /* CHAT GENERAL */
 
 #chat .user {
@@ -566,10 +591,11 @@ textarea.input {
 }
 
 #chat .from {
-    grid-area:  user;
-    min-width:  1.2em;
-    text-align: left;
-    mask-image: none;
+    grid-area:          user;
+    min-width:          1.2rem;
+    text-align:         center;
+    -webkit-mask-image: none;
+    mask-image:         none;
 }
 
 #chat .time {
@@ -620,9 +646,7 @@ textarea.input {
 }
 
 #chat .msg[data-type="condensed"] {
-    display:        flex;
-    flex-direction: column;
-    width:          100%;
+    display: block;
 }
 
 #chat .msg[data-type="monospace_block"] {
@@ -744,7 +768,7 @@ textarea.input {
 
 @media (max-width: 768px) {
     #chat .msg[data-type="message"] {
-        max-width: none;
+        max-width: 90%;
     }
 }
 
@@ -833,6 +857,10 @@ textarea.input {
     .public #form #nick {
         display: none;
     }
+
+    #form #input {
+        font-size: 14px;
+    }
 }
 
 @media (max-width: 479px) {