minor style improvements (inspired by gamja)

index.html

@@ -11,8 +11,10 @@
     <header>
       <div class="status"></div>
       <div class="grow"></div>
-      <div class="channel-buttons"></div>
-      <a class="show-log" role="button">Log</a>
+      <div class="channel-buttons">
+        <a class="tab tab-login" role="button" data-channel="\login">login</a>
+        <a class="tab tab-log" role="button" data-channel="\log">log</a>
+      </div>
     </header>
     <div class="channels">
       <div data-channel="\login">

style.css

@@ -13,9 +13,13 @@ body {
   --shoutbox-header-bg: #ececec;
   --shoutbox-link-color: #ce1919;
   --shoutbox-tab-activity-color: #ce1919;
-  --shoutbox-tab-current-color: #097ba1;
+  --shoutbox-tab-fg: black;
+  --shoutbox-tab-selected-bg: #808080;
+  --shoutbox-tab-selected-fg: white;
   --shoutbox-message-date-color: #949494;
   --shoutbox-message-author-color: #777777;
+  --shoutbox-message-bg1: #ffffff;
+  --shoutbox-message-bg2: #f8f8f8;
 }
 
 /* Shoutbox-only style */
@@ -32,7 +36,7 @@ body {
   display: flex;
   align-items: center;
   background: var(--shoutbox-header-bg);
-  border: 1px solid var(--shoutbox-border-color);
+  border: none;
   gap: 4px;
   padding: 0 4px;
 }
@@ -59,31 +63,28 @@ body {
   padding: 4px;
 }
 
-#v5shoutbox .channel-buttons button {
-  border: 1px solid var(--shoutbox-border-color);
-  border-radius: 3px;
+#v5shoutbox a.tab {
+  padding: 4px 8px;
+  display: inline-block;
+  vertical-align: top;
+  cursor: pointer;
+  user-select: none;
+  font-family: monospace;
+  color: var(--shoutbox-tab-fg);
 }
 
-#v5shoutbox .channel-buttons button:nth-child(1) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0;
-}
-#v5shoutbox .channel-buttons button:nth-child(2) {
-  border-radius: 0;
-  border-right: 0;
-}
-#v5shoutbox .channel-buttons button:nth-child(3) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+#v5shoutbox a.tab:hover {
+  text-decoration: none;
 }
 
-#v5shoutbox .channel-buttons *.bg-activity {
+#v5shoutbox a.tab.current {
+  background: var(--shoutbox-tab-selected-bg);
+  color: var(--shoutbox-tab-selected-fg);
+}
+
+#v5shoutbox a.tab.bg-activity {
   color: var(--shoutbox-tab-activity-color);
 }
-#v5shoutbox .channel-buttons *.current {
-  color: var(--shoutbox-tab-current-color);
-}
 
 #v5shoutbox .channels {
   flex: 1;
@@ -116,16 +117,21 @@ body {
 }
 
 #v5shoutbox .message {
-  line-height: 1.5;
+  line-height: 1.4;
   display: flex;
-  border-top: 1px solid var(--shoutbox-border-color);
+  background: var(--shoutbox-message-bg1);
+  padding: 3px 0 0 0;
+}
+
+#v5shoutbox .message:nth-child(2n) {
+  background: var(--shoutbox-message-bg2);
 }
 
 #v5shoutbox .message .message-author {
   margin-right: 6px;
   font-size: 0.9em;
   color: var(--shoutbox-message-author-color);
-  min-width: 70px;
+  min-width: 80px;
   text-align: right;
   flex-shrink: 0;
 }

v5shoutbox.js

@@ -85,6 +85,7 @@ let shoutbox = new function() {
     /* Channel views */
     this.eChannels = root.querySelector(".channels");
     this.eChannelButtons = root.querySelector(".channel-buttons");
+    this.eLoginTab = root.querySelector(".tab-login");
     /* Debugging tools */
     this.eLog = root.querySelector(".log");
     this.eStatus = root.querySelector(".status");
@@ -105,14 +106,12 @@ let shoutbox = new function() {
       e.preventDefault();
       shoutbox.post();
     });
-    this.eChannelButtons.querySelectorAll("button").forEach(b => {
-      b.addEventListener("click", () => {
-        shoutbox.selectChannel(b.dataset.channel);
-      });
-    });
-    root.querySelector(".show-log").addEventListener("click", () => {
+    root.querySelector(".tab-log").addEventListener("click", () => {
       this.selectChannel("\\log");
     });
+    root.querySelector(".tab-login").addEventListener("click", () => {
+      this.selectChannel("\\login");
+    });
 
     window.addEventListener("focus", () => {
       shoutbox.focused = true;
@@ -151,12 +150,17 @@ let shoutbox = new function() {
     const running = irc.isRunning();
     if(irc.isOnRemoteChannel()) {
       const c = irc.currentChannel();
-      this.eStatus.textContent = c + ": " + irc.channels.get(c).header;
+      this.eStatus.textContent = ": " + irc.channels.get(c).header;
+      let code = document.createElement("code");
+      code.appendChild(document.createTextNode(c));
+      this.eStatus.insertBefore(code, this.eStatus.childNodes[0]);
     }
     else {
       this.eStatus.textContent = irc.stateString();
     }
+
     this.eShoutboxForm.style.display = running ? "flex" : "none";
+    this.eLoginTab.style.display = running ? "none" : "inline-block";
 
     const name = irc.currentChannel();
     for(const e of this.eChannels.children)
@@ -202,6 +206,19 @@ let shoutbox = new function() {
            .find(e => e.dataset.channel === channel);
   }
 
+  this.addChannelButton = function(button) {
+    /* Insert new tab button before special tabs */
+    let firstSpecial = Array.from(this.eChannelButtons.children).find(e =>
+      e.dataset.channel.startsWith("\\")) || null;
+    this.eChannelButtons.insertBefore(button, firstSpecial);
+  }
+
+  this.clearChannelButtons = function(button) {
+    let special = Array.from(this.eChannelButtons.children).filter(e =>
+      e.dataset.channel.startsWith("\\"));
+    this.eChannelButtons.replaceChildren(special);
+  }
+
   this.createChannel = function(channel) {
     if(!availableChannels.includes(channel))
       return;
@@ -214,10 +231,11 @@ let shoutbox = new function() {
     view.style.display = "none";
     this.eChannels.appendChild(view);
 
-    let button = document.createElement("button");
+    let button = document.createElement("a");
+    button.classList.add("tab");
     button.appendChild(document.createTextNode(channel));
     button.dataset.channel = channel;
-    this.eChannelButtons.appendChild(button);
+    this.addChannelButton(button);
 
     button.addEventListener("click", () => {
       shoutbox.selectChannel(button.dataset.channel);

widget.html

@@ -2,8 +2,10 @@
   <header>
     <div class="status"></div>
     <div class="grow"></div>
-    <div class="channel-buttons"></div>
-    <a class="show-log" role="button">Log</a>
+    <div class="channel-buttons">
+      <a class="tab tab-login" role="button" data-channel="\login">login</a>
+      <a class="tab tab-log" role="button" data-channel="\log">log</a>
+    </div>
   </header>
   <div class="channels">
     <div data-channel="\login">