UpdateHEADmaster

1 files changed, 225 insertions, 215 deletions

diff --git a/theme.css b/theme.css
index 974e8d7..c10fb14 100644
--- a/theme.css
+++ b/theme.css
@@ -1,4 +1,4 @@
-@import 'default.css';
+@import "default.css";
 
 :root {
     --gray0: hsl(270deg, 0%, 7%);
@@ -12,83 +12,83 @@
 
     /* * */
 
-    --bg-hi:  var(--gray0);
-    --bg:     var(--gray1);
+    --bg-hi: var(--gray0);
+    --bg: var(--gray1);
 
     --obj-hi: var(--gray2);
-    --obj:    var(--gray3);
+    --obj: var(--gray3);
     --obj-lo: var(--gray4);
 
-    --fg-hi:  var(--gray5);
-    --fg:     var(--gray6);
-    --fg-lo:  var(--gray7);
+    --fg-hi: var(--gray5);
+    --fg: var(--gray6);
+    --fg-lo: var(--gray7);
 
     /* * */
 
-    --color--red:        hsl(0, 91%, 73%);
-    --color--dark-red:   hsl(0, 79%, 64%);
-    --color--brown:      hsl(14, 58%, 59%);
-    --color--orange:     hsl(19, 100%, 76%);
-    --color--blue:       hsl(214, 100%, 76%);
-    --color--dark-blue:  hsl(214, 100%, 57%);
-    --color--yellow:     hsl(38, 100%, 76%);
-    --color--green:      hsl(123, 43%, 66%);
+    --color--red: hsl(0, 91%, 73%);
+    --color--dark-red: hsl(0, 79%, 64%);
+    --color--brown: hsl(14, 58%, 59%);
+    --color--orange: hsl(19, 100%, 76%);
+    --color--blue: hsl(214, 100%, 76%);
+    --color--dark-blue: hsl(214, 100%, 57%);
+    --color--yellow: hsl(38, 100%, 76%);
+    --color--green: hsl(123, 43%, 66%);
     --color--dark-green: hsl(123, 43%, 56%);
-    --color--cyan:       hsl(180, 43%, 66%);
-    --color--dark-cyan:  hsl(180, 43%, 54%);
-    --color--purple:     hsl(267, 69%, 73%);
-    --color--pink:       hsl(294, 69%, 73%);
-    --color--gray:       hsl(0, 0%, 58%);
+    --color--cyan: hsl(180, 43%, 66%);
+    --color--dark-cyan: hsl(180, 43%, 54%);
+    --color--purple: hsl(267, 69%, 73%);
+    --color--pink: hsl(294, 69%, 73%);
+    --color--gray: hsl(0, 0%, 58%);
     --color--light-gray: hsl(204, 5%, 82%);
 
     /* * */
 
-    --color--sidebar--bg:    var(--bg-hi);
-    --color--sidebar--fg:    var(--fg);
+    --color--sidebar--bg: var(--bg-hi);
+    --color--sidebar--fg: var(--fg);
     --color--sidebar--fg-hi: var(--fg-hi);
 
-    --color--window--bg:       var(--bg);
+    --color--window--bg: var(--bg);
     --color--header--title-fg: var(--fg-lo);
 
-    --color--input--bg:    var(--obj);
-    --color--input--fg:    var(--fg-lo);
+    --color--input--bg: var(--obj);
+    --color--input--fg: var(--fg-lo);
     --color--input--ph-fg: var(--fg-hi);
 
-    --color--sidebar-input--bg:    var(--obj-hi);
-    --color--sidebar-input--fg:    var(--fg-lo);
+    --color--sidebar-input--bg: var(--obj-hi);
+    --color--sidebar-input--fg: var(--fg-lo);
     --color--sidebar-input--ph-fg: var(--fg-hi);
 
-    --color--sidebar-btn--bg:        var(--obj-hi);
-    --color--sidebar-btn--fg:        var(--fg);
+    --color--sidebar-btn--bg: var(--obj-hi);
+    --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--bg: var(--obj-hi);
+    --color--header--fg: var(--fg);
     --color--header--title-fg: var(--fg-lo);
 
-    --color--date-marker--fg:     var(--fg-hi);
+    --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--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--msg--action-fg: var(--fg-hi);
 
-    --color--channels--title:  var(--fg-lo);
+    --color--channels--title: var(--fg-lo);
     --color--channels--border: var(--obj);
 
-    --color--cform--bg:      var(--obj-hi);
-    --color--cform--fg:      var(--fg-lo);
-    --color--cform--btn-fg:  var(--fg);
-    --color--cform--ph-fg:   var(--fg-hi);
+    --color--cform--bg: var(--obj-hi);
+    --color--cform--fg: var(--fg-lo);
+    --color--cform--btn-fg: var(--fg);
+    --color--cform--ph-fg: var(--fg-hi);
     --color--cform--nick-bg: var(--obj-lo);
     --color--cform--nick-fg: var(--fg-lo);
 
@@ -98,55 +98,57 @@
     --color--tooltip--bg: var(--obj);
     --color--tooltip--fg: var(--fg-lo);
 
-    --color--popup--bg:            var(--obj-hi);
-    --color--popup--fg:            var(--fg);
-    --color--popup--title-fg:      var(--fg-lo);
-    --color--popup--meta-fg:       var(--fg-hi);
-    --color--popup--border:        var(--obj);
+    --color--popup--bg: var(--obj-hi);
+    --color--popup--fg: var(--fg);
+    --color--popup--title-fg: var(--fg-lo);
+    --color--popup--meta-fg: var(--fg-hi);
+    --color--popup--border: var(--obj);
     --color--popup--item-hover-bg: var(--obj);
     --color--popup--item-hover-fg: var(--fg-lo);
-    --color--popup--msg-bg:        var(--obj);
-    --color--popup--msg-fg:        var(--fg-lo);
+    --color--popup--msg-bg: var(--obj);
+    --color--popup--msg-fg: var(--fg-lo);
 
     /* * */
 
     --dim--spacing: 1rem;
 
-    --dim--container--pad:    .75rem;
+    --dim--container--pad: 0.75rem;
     --dim--container-lg--pad: 1.5rem;
 
     --dim--input--height: 2.2rem;
-    --dim--input--pad-h:  .7rem;
+    --dim--input--pad-h: 0.7rem;
 
-    --dim--btn--pad-v: .6rem;
-    --dim--btn--pad-h: .7rem;
+    --dim--btn--pad-v: 0.6rem;
+    --dim--btn--pad-h: 0.7rem;
 
-    --dim--msg--pad-v: .5rem;
-    --dim--msg--pad-h: .7rem;
+    --dim--msg--pad-v: 0.5rem;
+    --dim--msg--pad-h: 0.7rem;
 
-    --dim--popup--pad:        .3rem;
-    --dim--popup--item-pad-v: .4rem;
-    --dim--popup--item-pad-h: .7rem;
+    --dim--popup--pad: 0.3rem;
+    --dim--popup--item-pad-v: 0.4rem;
+    --dim--popup--item-pad-h: 0.7rem;
 
     /* * */
 
-    --body-bg-color:           var(--color--sidebar--bg);
-    --window-bg-color:         var(--color--window--bg);
-    --window-heading-color:    var(--color--header--title-fg);
-    --body-color:              var(--color--sidebar--fg);
-    --body-color-muted:        var(--color--sidebar--fg-hi);
-    --link-color:              var(--color--yellow);
-    --unread-marker-color:     var(--color--yellow);
-    --date-marker-color:       var(--color--date-marker--fg);
-    --highlight-bg-color:      var(--bg-lo);
-    --highlight-border-color:  var(--color--yellow);
-    --overlay-bg-color:        rgba(0, 0, 0, .75);
-    --button-color:            var(--color--yellow);
+    --body-bg-color: var(--color--sidebar--bg);
+    --window-bg-color: var(--color--window--bg);
+    --window-heading-color: var(--color--header--title-fg);
+    --body-color: var(--color--sidebar--fg);
+    --body-color-muted: var(--color--sidebar--fg-hi);
+    --link-color: var(--color--yellow);
+    --unread-marker-color: var(--color--yellow);
+    --date-marker-color: var(--color--date-marker--fg);
+    --highlight-bg-color: var(--bg-lo);
+    --highlight-border-color: var(--color--yellow);
+    --overlay-bg-color: rgba(0, 0, 0, 0.75);
+    --button-color: var(--color--yellow);
     --button-text-color-hover: #000;
 }
 
 body {
-    font-family:     IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial;
+    font-family: IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto,
+        Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
+        Helvetica Neue, Arial;
     scrollbar-color: var(--color--scrollbar--fg) var(--color--scrollbar--bg);
 }
 
@@ -240,27 +242,27 @@ body {
 
 .window {
     border-radius: 0;
-    box-shadow:    none;
+    box-shadow: none;
 }
 
 .window h1 {
-    color:          var(--fg-lo);
-    font-size:      1em;
-    font-weight:    bold;
+    color: var(--fg-lo);
+    font-size: 1em;
+    font-weight: bold;
     text-transform: uppercase;
 }
 
 .window h2 {
-    margin:         calc(var(--dim--spacing) * 2) 0 0;
+    margin: calc(var(--dim--spacing) * 2) 0 0;
     padding-bottom: 0;
-    border-bottom:  0;
-    color:          var(--fg-lo);
-    font-size:      1em;
+    border-bottom: 0;
+    color: var(--fg-lo);
+    font-size: 1em;
 }
 
 .window h2 small {
-    color:       var(--fg);
-    font-size:   1em;
+    color: var(--fg);
+    font-size: 1em;
     line-height: inherit;
 }
 
@@ -274,15 +276,15 @@ body {
 
 #connect .connect-row {
     align-items: baseline;
-    margin-top:  var(--dim--spacing);
+    margin-top: var(--dim--spacing);
 }
 
 #connect .connect-row + .connect-row {
-    margin-top: calc(var(--dim--spacing) * .5);
+    margin-top: calc(var(--dim--spacing) * 0.5);
 }
 
 #connect label {
-    margin-top:  0;
+    margin-top: 0;
     white-space: nowrap;
 }
 
@@ -302,7 +304,7 @@ body {
 
     #connect .connect-row > .input,
     #connect .connect-row > .input-wrap {
-        margin-top: calc(var(--dim--spacing) * .5);
+        margin-top: calc(var(--dim--spacing) * 0.5);
     }
 }
 
@@ -323,7 +325,7 @@ body {
 
 #footer button {
     border-radius: 0;
-    color:         var(--color--sidebar-btn--fg);
+    color: var(--color--sidebar-btn--fg);
 }
 
 .channel-list-item,
@@ -346,17 +348,17 @@ body {
 #footer button:hover,
 .channel-list-item:hover {
     background-color: var(--color--sidebar-btn--bg);
-    color:            var(--color--sidebar-btn--active-fg);
+    color: var(--color--sidebar-btn--active-fg);
 }
 
 .channel-list-item.active::after {
-    content:          "";
-    display:          block;
-    position:         absolute;
-    top:              0;
-    bottom:           0;
-    left:             calc(var(--dim--container--pad) * -1);
-    width:            2px;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--dim--container--pad) * -1);
+    width: 2px;
     background-color: #fff;
 }
 
@@ -374,11 +376,11 @@ body {
 
 .channel-list-item .badge {
     background-color: var(--color--sidebar-badge--bg);
-    color:            var(--color--sidebar-badge--fg);
+    color: var(--color--sidebar-badge--fg);
 }
 
 #sidebar .network .collapse-network {
-    width:        14px;
+    width: 14px;
     margin-right: 12px;
     padding-left: 0;
 }
@@ -395,17 +397,17 @@ body {
 
 .input,
 #chat .userlist .search {
-    height:        var(--dim--input--height);
-    padding:       0 var(--dim--input--pad-h);
-    transition:    border-color .2s, box-shadow .2s;
-    border:        2px solid transparent;
+    height: var(--dim--input--height);
+    padding: 0 var(--dim--input--pad-h);
+    transition: border-color 0.2s, box-shadow 0.2s;
+    border: 2px solid transparent;
     border-radius: 3px;
-    color:         var(--color--input--fg);
-    line-height:   var(--dim--input--height);
+    color: var(--color--input--fg);
+    line-height: var(--dim--input--height);
 }
 
 .input {
-    margin:           0;
+    margin: 0;
     background-color: var(--color--input--bg);
 }
 
@@ -417,17 +419,17 @@ body {
 
 .jump-to-input::before,
 #chat .count::before {
-    right:       var(--dim--input--pad-h);
-    color:       var(--color--sidebar-input--ph-fg);
-    font-size:   14px;
+    right: var(--dim--input--pad-h);
+    color: var(--color--sidebar-input--ph-fg);
+    font-size: 14px;
     line-height: var(--dim--input--height) !important;
 }
 
 .jump-to-input .input {
-    border:           2px solid transparent;
-    border-radius:    3px;
+    border: 2px solid transparent;
+    border-radius: 3px;
     background-color: var(--color--sidebar-input--bg);
-    color:            var(--color--sidebar-input--fg);
+    color: var(--color--sidebar-input--fg);
 }
 
 .jump-to-input .input::placeholder {
@@ -445,7 +447,7 @@ body {
 }
 
 #chat .userlist .count {
-    height:           var(--dim--input--height);
+    height: var(--dim--input--height);
     background-color: var(--color--sidebar-input--bg);
 }
 
@@ -454,7 +456,9 @@ textarea.input {
 }
 
 .password-container input {
-    padding-right: calc(2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px);
+    padding-right: calc(
+        2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px
+    );
 }
 
 .password-container .reveal-password {
@@ -462,9 +466,9 @@ textarea.input {
 }
 
 .password-container .reveal-password span {
-    width:  calc(var(--dim--input--height) - 2 * 2px);
+    width: calc(var(--dim--input--height) - 2 * 2px);
     height: calc(var(--dim--input--height) - 2 * 2px);
-    color:  var(--color--sidebar-input--fg);
+    color: var(--color--sidebar-input--fg);
 }
 
 .password-container .reveal-password-visible span::before {
@@ -474,15 +478,15 @@ textarea.input {
 /* HEADER */
 
 #chat .header {
-    position:         relative;
-    z-index:          5;
-    border-bottom:    0;
+    position: relative;
+    z-index: 5;
+    border-bottom: 0;
     background-color: var(--color--header--bg);
-    box-shadow:       0 0 2rem rgba(0, 0, 0, .25);
+    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
 }
 
 .header .title {
-    color:       var(--color--header--title-fg);
+    color: var(--color--header--title-fg);
     font-weight: bold;
 }
 
@@ -509,14 +513,15 @@ textarea.input {
 /* USERLIST */
 
 #chat .userlist {
-    padding:     var(--dim--container--pad);
+    padding: var(--dim--container--pad);
     border-left: 0;
-    background:  transparent linear-gradient(to top, transparent, var(--color--sidebar--bg) 80px);
+    background: transparent
+        linear-gradient(to top, transparent, var(--color--sidebar--bg) 80px);
     line-height: inherit;
 }
 
 #chat .user-mode {
-    margin-top:    var(--dim--spacing);
+    margin-top: var(--dim--spacing);
     margin-bottom: 0;
 }
 
@@ -526,7 +531,7 @@ textarea.input {
 
 #chat .user-mode::before,
 #chat .names .user {
-    padding: calc(var(--dim--btn--pad-v) * .5) var(--dim--btn--pad-h);
+    padding: calc(var(--dim--btn--pad-v) * 0.5) var(--dim--btn--pad-h);
 }
 
 #chat .user-mode::before {
@@ -539,7 +544,7 @@ textarea.input {
 
 #chat .userlist .user.active {
     background-color: var(--color--sidebar-btn--bg);
-    color:            var(--color--sidebar-btn--active-fg);
+    color: var(--color--sidebar-btn--active-fg);
 }
 
 @media (max-width: 768px) {
@@ -570,7 +575,7 @@ textarea.input {
     #chat .date-marker,
     #chat .unread-marker {
         margin-right: var(--dim--container--pad);
-        margin-left:  var(--dim--container--pad);
+        margin-left: var(--dim--container--pad);
     }
 }
 
@@ -581,10 +586,10 @@ textarea.input {
 }
 
 #chat .messages {
-    display:        flex;
+    display: flex;
     flex-direction: column;
-    align-items:    stretch;
-    padding:        var(--dim--container-lg--pad) 0;
+    align-items: stretch;
+    padding: var(--dim--container-lg--pad) 0;
 }
 
 #chat .chat-view[data-type="special"] .messages {
@@ -592,13 +597,13 @@ textarea.input {
 }
 
 #chat .msg {
-    display:               grid;
-    align-self:            flex-start;
+    display: grid;
+    align-self: flex-start;
     grid-template-columns: auto auto 1fr;
-    grid-template-rows:    auto;
-    grid-template-areas:   "time user content";
-    margin-top:            calc(var(--dim--spacing) * .5);
-    padding:               0 var(--dim--container-lg--pad);
+    grid-template-rows: auto;
+    grid-template-areas: "time user content";
+    margin-top: calc(var(--dim--spacing) * 0.5);
+    padding: 0 var(--dim--container-lg--pad);
 }
 
 #chat .ban-list,
@@ -612,34 +617,34 @@ textarea.input {
 #chat .from,
 #chat .time {
     align-self: baseline;
-    padding:    0;
-    font-size:  13px;
+    padding: 0;
+    font-size: 13px;
 }
 
 #chat .from,
 #chat .time {
-    width:        auto;
+    width: auto;
     margin-right: var(--dim--spacing);
-    color:        var(--color--msg--meta-fg);
+    color: var(--color--msg--meta-fg);
 }
 
 #chat .content {
-    grid-area:   content;
+    grid-area: content;
     border-left: 0;
-    color:       var(--color--msg--action-fg);
+    color: var(--color--msg--action-fg);
 }
 
 #chat .from {
-    grid-area:          user;
-    min-width:          1.2rem;
-    text-align:         left;
+    grid-area: user;
+    min-width: 1.2rem;
+    text-align: left;
     -webkit-mask-image: none;
-    mask-image:         none;
+    mask-image: none;
 }
 
 #chat .time {
-    grid-area:            time;
-    justify-self:         flex-start;
+    grid-area: time;
+    justify-self: flex-start;
     font-variant-numeric: tabular-nums;
 }
 
@@ -649,9 +654,9 @@ textarea.input {
 }
 
 #chat .msg[data-type="message"] {
-    max-width:             80%;
+    max-width: 80%;
     grid-template-columns: auto 1fr;
-    grid-template-areas:   "user time" "content content";
+    grid-template-areas: "user time" "content content";
 }
 
 #chat .msg[data-type="message"] .time {
@@ -659,11 +664,11 @@ textarea.input {
 }
 
 #chat .msg[data-type="message"] .content {
-    margin-top:       calc(var(--dim--spacing) * .5);
-    padding:          var(--dim--msg--pad-v) var(--dim--msg--pad-h);
+    margin-top: calc(var(--dim--spacing) * 0.5);
+    padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h);
     background-color: var(--color--msg--bg);
-    color:            var(--color--msg--fg);
-    font-size:        15px;
+    color: var(--color--msg--fg);
+    font-size: 15px;
 }
 
 #chat:not(.colored-nicks) .msg[data-type="message"] .content .user {
@@ -681,7 +686,7 @@ textarea.input {
 
 #chat .self[data-type="message"] .content {
     background-color: var(--color--msg--self-bg);
-    color:            var(--color--msg--self-fg);
+    color: var(--color--msg--self-fg);
 }
 
 #chat .msg[data-type="condensed"] {
@@ -694,7 +699,7 @@ textarea.input {
 
 #chat .msg[data-type="monospace_block"] {
     grid-template-columns: auto 1fr;
-    grid-template-areas:   "time user" "content content";
+    grid-template-areas: "time user" "content content";
 }
 
 #chat .msg[data-type="monospace_block"] .content {
@@ -702,14 +707,14 @@ textarea.input {
 }
 
 #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;
+    margin-top: calc(var(--dim--spacing) * 0.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;
-    white-space:      pre;
+    color: var(--color--msg--fg);
+    font-family: monospace;
+    font-size: 15px;
+    white-space: pre;
 }
 
 #chat .msg[data-type="notice"] .content,
@@ -753,7 +758,7 @@ textarea.input {
 }
 
 #chat .msg + .previous-source[data-type="message"] {
-    margin-top: calc(var(--dim--spacing) * .25);
+    margin-top: calc(var(--dim--spacing) * 0.25);
 }
 
 #chat .msg + .previous-source[data-type="message"] .from,
@@ -766,40 +771,41 @@ textarea.input {
 }
 
 #chat .chat-view[data-type="channel"] .msg.highlight {
-    border-left:      0;
+    border-left: 0;
     background-color: transparent;
-    box-shadow:       2px 0 var(--color--msg--self-border) inset;
+    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);
+    color: var(--color--msg--meta-fg);
 }
 
 #chat .chat-view[data-type="channel"] .msg.highlight .content {
     background-color: var(--color--msg--self-bg);
-    color:            var(--color--msg--self-fg);
+    color: var(--color--msg--self-fg);
 }
 
 #chat .preview {
-    margin:     var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1) calc(var(--dim--msg--pad-v) * -1);
+    margin: var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1)
+        calc(var(--dim--msg--pad-v) * -1);
     border-top: 1px solid var(--color--msg--border);
 }
 
 #chat .preview::after {
-    content:   "";
-    display:   block;
-    width:     1px;
+    content: "";
+    display: block;
+    width: 1px;
     min-width: 0;
 }
 
 #chat .toggle-content {
-    flex:             0 0 auto;
-    margin:           0;
-    padding:          var(--dim--msg--pad-h);
-    border-radius:    0;
+    flex: 0 0 auto;
+    margin: 0;
+    padding: var(--dim--msg--pad-h);
+    border-radius: 0;
     background-color: transparent;
-    box-shadow:       none;
+    box-shadow: none;
 }
 
 #chat .toggle-content .toggle-text,
@@ -838,9 +844,9 @@ textarea.input {
 #chat table.channel-list,
 #chat table.ignore-list,
 #chat table.invite-list {
-    width:          100%;
-    margin:         0;
-    table-layout:   fixed;
+    width: 100%;
+    margin: 0;
+    table-layout: fixed;
     border-spacing: 0;
 }
 
@@ -851,7 +857,7 @@ textarea.input {
 #chat table.ignore-list th,
 #chat table.invite-list td,
 #chat table.invite-list th {
-    padding:      var(--dim--container--pad);
+    padding: var(--dim--container--pad);
     border-color: var(--color--channels--border);
 }
 
@@ -859,19 +865,23 @@ textarea.input {
     color: var(--color--channels--title);
 }
 
+#chat table.channel-list .topic {
+    white-space: normal;
+}
+
 #chat table.channel-list .channel {
     width: 20%;
 }
 
 #chat table.channel-list .users {
-    width:      5em;
+    width: 5em;
     text-align: right;
 }
 
 /* SCROLL DOWN BUTTON */
 
 .scroll-down {
-    right:  var(--dim--container-lg--pad);
+    right: var(--dim--container-lg--pad);
     bottom: 0;
 }
 
@@ -884,16 +894,16 @@ textarea.input {
 /* CHAT INPUT */
 
 #form {
-    margin:           var(--dim--container-lg--pad);
-    border-top:       0;
+    margin: var(--dim--container-lg--pad);
+    border-top: 0;
     background-color: var(--color--cform--bg);
-    box-shadow:       0 .5rem 2rem rgba(0, 0, 0, .25);
-    color:            var(--color--cform--ph-fg);
+    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
+    color: var(--color--cform--ph-fg);
 }
 
 #form #nick {
     background-color: var(--color--cform--nick-bg);
-    color:            var(--color--cform--nick-fg);
+    color: var(--color--cform--nick-fg);
 }
 
 #form #input {
@@ -926,22 +936,22 @@ textarea.input {
 #context-menu,
 .mentions-popup,
 .textcomplete-menu {
-    z-index:          2000;
-    padding:          var(--dim--popup--pad);
-    border:           0;
-    border-radius:    0;
+    z-index: 2000;
+    padding: var(--dim--popup--pad);
+    border: 0;
+    border-radius: 0;
     background-color: var(--color--popup--bg);
-    box-shadow:       0 .3rem 1.5rem rgba(0, 0, 0, .4);
-    color:            var(--color--popup--fg);
+    box-shadow: 0 0.3rem 1.5rem rgba(0, 0, 0, 0.4);
+    color: var(--color--popup--fg);
 }
 
 .context-menu-item,
 .textcomplete-item {
-    margin-top:    0;
+    margin-top: 0;
     margin-bottom: 0;
-    padding:       var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h);
+    padding: var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h);
     border-radius: 0;
-    color:         var(--color--popup--fg);
+    color: var(--color--popup--fg);
 }
 
 .textcomplete-item a {
@@ -953,7 +963,7 @@ textarea.input {
 .textcomplete-item:hover,
 .textcomplete-menu .active {
     background-color: var(--color--popup--item-hover-bg);
-    color:            var(--color--popup--item-hover-fg);
+    color: var(--color--popup--item-hover-fg);
 }
 
 .textcomplete-item.active a {
@@ -971,17 +981,17 @@ textarea.input {
 }
 
 .mentions-popup > .mentions-popup-title {
-    align-items:   center;
+    align-items: center;
     margin-bottom: 0;
-    padding:       var(--dim--container--pad);
-    color:         var(--color--popup--title-fg);
-    font-size:     1em;
-    font-weight:   bold;
+    padding: var(--dim--container--pad);
+    color: var(--color--popup--title-fg);
+    font-size: 1em;
+    font-weight: bold;
 }
 
 .mentions-popup > .mentions-popup-title + p {
-    margin:     0;
-    padding:    var(--dim--container--pad);
+    margin: 0;
+    padding: var(--dim--container--pad);
     border-top: 1px solid var(--color--popup--border);
 }
 
@@ -990,27 +1000,27 @@ textarea.input {
 }
 
 .mentions-popup .from {
-    color:     var(--color--popup--title-fg);
+    color: var(--color--popup--title-fg);
     font-size: 13px;
 }
 
 .mentions-popup .time {
-    color:     var(--color--popup--meta-fg);
+    color: var(--color--popup--meta-fg);
     font-size: 13px;
 }
 
 .mentions-popup .msg {
     margin-bottom: 0;
-    padding:       var(--dim--container--pad);
-    border-top:    1px solid var(--color--popup--border);
+    padding: var(--dim--container--pad);
+    border-top: 1px solid var(--color--popup--border);
 }
 
 .mentions-popup .msg .content {
-    margin-top:       calc(var(--dim--spacing) * .5);
-    padding:          var(--dim--msg--pad-v) var(--dim--msg--pad-h);
-    border-radius:    0;
+    margin-top: calc(var(--dim--spacing) * 0.5);
+    padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h);
+    border-radius: 0;
     background-color: var(--color--popup--msg-bg);
-    color:            var(--color--popup--msg-fg);
+    color: var(--color--popup--msg-fg);
 }
 
 @media (max-width: 768px) {
@@ -1022,9 +1032,9 @@ textarea.input {
 /* TOOLTIP */
 
 .tooltipped::after {
-    border-radius:    0;
+    border-radius: 0;
     background-color: var(--color--tooltip--bg);
-    color:            var(--color--tooltip--fg);
+    color: var(--color--tooltip--fg);
 }
 
 .tooltipped-s::before,