Improved sidebar and message appearance when highlighted

1 files changed, 47 insertions, 27 deletions

diff --git a/theme.css b/theme.css
index ea8de23..e6e8f13 100644
--- a/theme.css
+++ b/theme.css
@@ -72,14 +72,15 @@
     --color--date-marker--fg:     var(--fg-hi);
     --color--date-marker--border: var(--obj);
 
-    --color--msg--bg:        var(--obj-hi);
-    --color--msg--border:    var(--obj);
-    --color--msg--fg:        var(--fg);
-    --color--msg--emph-fg:   var(--fg-lo);
-    --color--msg--meta-fg:   var(--fg-hi);
-    --color--msg--self-bg:   var(--obj);
-    --color--msg--self-fg:   var(--fg-lo);
-    --color--msg--action-fg: var(--fg-hi);
+    --color--msg--bg:          var(--obj-hi);
+    --color--msg--border:      var(--obj);
+    --color--msg--fg:          var(--fg);
+    --color--msg--emph-fg:     var(--fg-lo);
+    --color--msg--meta-fg:     var(--fg-hi);
+    --color--msg--self-bg:     var(--obj);
+    --color--msg--self-fg:     var(--fg-lo);
+    --color--msg--self-border: var(--fg-lo);
+    --color--msg--action-fg:   var(--fg-hi);
 
     --color--channels--title:  var(--fg-lo);
     --color--channels--border: var(--obj);
@@ -308,12 +309,16 @@ body {
 /* SIDEBAR */
 
 #sidebar {
-    padding: var(--dim--container--pad) 0 0;
-    color:   var(--color--sidebar--fg);
+    color: var(--color--sidebar--fg);
 }
 
-.jump-to-input {
-    margin: var(--dim--container--pad);
+#sidebar .logo-container {
+    margin-top: var(--dim--spacing);
+}
+
+.jump-to-input,
+#sidebar .network {
+    margin: var(--dim--spacing) var(--dim--container--pad) 0;
 }
 
 #footer button {
@@ -324,7 +329,16 @@ 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) calc(var(--dim--container--pad) + var(--dim--btn--pad-v));
+    padding: var(--dim--btn--pad-v) var(--dim--container--pad);
+}
+
+#footer button.active,
+.channel-list-item.active {
+    position: relative;
+}
+
+#footer button.active {
+    box-shadow: 0 -2px #fff inset;
 }
 
 #footer button.active,
@@ -335,12 +349,15 @@ body {
     color:            var(--color--sidebar-btn--active-fg);
 }
 
-#footer button.active {
-    box-shadow: 0 -2px #fff inset;
-}
-
-.channel-list-item.active {
-    box-shadow: -2px 0 #fff inset;
+.channel-list-item.active::after {
+    content:          "";
+    display:          block;
+    position:         absolute;
+    top:              0;
+    bottom:           0;
+    left:             calc(var(--dim--container--pad) * -1);
+    width:            2px;
+    background-color: #fff;
 }
 
 .channel-list-item.not-connected,
@@ -557,7 +574,7 @@ textarea.input {
     display:        flex;
     flex-direction: column;
     align-items:    stretch;
-    padding:        var(--dim--container-lg--pad);
+    padding:        var(--dim--container-lg--pad) 0;
 }
 
 #chat .chat-view[data-type="special"] .messages {
@@ -571,6 +588,7 @@ textarea.input {
     grid-template-rows:    auto;
     grid-template-areas:   "time user content";
     margin-top:            calc(var(--dim--spacing) * .5);
+    padding:               0 var(--dim--container-lg--pad);
 }
 
 #chat .ban-list,
@@ -732,11 +750,16 @@ textarea.input {
 #chat .chat-view[data-type="channel"] .msg.highlight {
     border-left:      0;
     background-color: transparent;
+    box-shadow:       2px 0 var(--color--msg--self-border) inset;
+}
+
+#chat .chat-view[data-type="channel"] .msg.highlight .time {
+    padding-left: 0;
+    color:        var(--color--msg--meta-fg);
 }
 
 #chat .chat-view[data-type="channel"] .msg.highlight .content {
     background-color: var(--color--msg--self-bg);
-    box-shadow:       -2px 0 var(--highlight-border-color);
     color:            var(--color--msg--self-fg);
 }
 
@@ -785,12 +808,9 @@ textarea.input {
 }
 
 @media (max-width: 479px) {
-    #chat .messages {
-        padding: var(--dim--container--pad);
-    }
-
-    #chat .msg {
-        padding: 0;
+    #chat .msg,
+    #chat .chat-view[data-type="channel"] .msg.highlight {
+        padding: 0 var(--dim--container--pad);
     }
 }