From 4763ebbb2854aa004b98ac56d3264602ce6b04ea Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 23 Feb 2022 16:40:54 -0800
Subject: [PATCH] Start moving CSS to components

---
 client/components/App.vue                   |  118 ++
 client/components/Channel.vue               |   37 +
 client/components/ChannelWrapper.vue        |   38 +
 client/components/Chat.vue                  |  122 ++
 client/components/ChatInput.vue             |   80 +
 client/components/ChatUserList.vue          |   87 +
 client/components/ContextMenu.vue           |   25 +
 client/components/DateMarker.vue            |   28 +
 client/components/JoinChannel.vue           |   17 +
 client/components/LinkPreview.vue           |  126 ++
 client/components/Mentions.vue              |    8 +-
 client/components/MessageList.vue           |   29 +-
 client/components/MessageSearchForm.vue     |   25 +-
 client/components/MessageTypes/whois.vue    |   17 +
 client/components/NetworkForm.vue           |   63 +-
 client/components/NetworkList.vue           |   78 +-
 client/components/NetworkLobby.vue          |   67 +-
 client/components/ParsedMessage.vue         |    4 +
 client/components/Sidebar.vue               |   65 +
 client/components/SidebarToggle.vue         |   32 +
 client/components/Special/ListChannels.vue  |   11 +
 client/components/VersionChecker.vue        |   65 +
 client/components/Windows/Changelog.vue     |   18 +
 client/components/Windows/Connect.vue       |    1 -
 client/components/Windows/Help.vue          |   69 +
 client/components/Windows/SearchResults.vue |   11 +-
 client/components/Windows/Settings.vue      |   95 +-
 client/components/Windows/SignIn.vue        |   34 +
 client/css/chat-and-search.css              |   52 +
 client/css/chat-messages.css                |   42 +
 client/css/colored-nicks.css                |   32 +
 client/css/icons.css                        |  307 +++
 client/css/irc-message-styles.css           |  620 ++++++
 client/css/special-channels.css             |   19 +
 client/css/style.css                        | 1915 +------------------
 client/themes/morning.css                   |   20 -
 36 files changed, 2419 insertions(+), 1958 deletions(-)
 create mode 100644 client/css/chat-and-search.css
 create mode 100644 client/css/chat-messages.css
 create mode 100644 client/css/colored-nicks.css
 create mode 100644 client/css/icons.css
 create mode 100644 client/css/irc-message-styles.css
 create mode 100644 client/css/special-channels.css

diff --git a/client/components/App.vue b/client/components/App.vue
index e02a10e7..9c057576 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -16,6 +16,124 @@
 	</div>
 </template>
 
+<style>
+@import "../css/icons.css";
+@import "../css/chat-and-search.css";
+@import "../css/chat-messages.css";
+
+/* Global styles */
+.container {
+	padding: 0 15px;
+	margin-bottom: 20px;
+	width: var(--page-content-width);
+	align-self: center;
+	touch-action: pan-y;
+}
+
+.window li,
+.window p,
+.window label,
+#settings .error {
+	font-size: 14px;
+}
+
+.window {
+	background: var(--window-bg-color);
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	position: relative;
+	overflow-y: auto;
+	height: 100%;
+	scrollbar-width: thin;
+	overscroll-behavior: contain;
+	-webkit-overflow-scrolling: touch;
+}
+
+#loading,
+#chat .chat-view {
+	/* flexbox does not seem to scroll without doing this */
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+}
+
+.window h1 {
+	font-size: 36px;
+}
+
+.window h2 {
+	border-bottom: 1px solid currentcolor;
+	color: var(--window-heading-color);
+	font-size: 22px;
+	margin: 30px 0 10px;
+	padding-bottom: 7px;
+}
+
+.window h2 small {
+	font-size: 16px;
+	line-height: 30px;
+}
+
+.window h3 {
+	color: var(--window-heading-color);
+	font-size: 18px;
+	margin: 20px 0 10px;
+}
+
+.window#chat-container {
+	/*
+		Chat has its own scrollbar, so remove the one on parent
+		This caused a performance issue in Chrome
+	*/
+	overflow: hidden;
+}
+
+/* Form elements */
+/* stylelint-disable selector-no-vendor-prefix */
+
+#chat-container ::-moz-placeholder {
+	color: #b7c5d1;
+	opacity: 0.75;
+}
+
+#chat-container ::-webkit-input-placeholder {
+	color: #b7c5d1;
+	opacity: 0.75;
+}
+
+#chat-container :-ms-input-placeholder {
+	color: #b7c5d1;
+	opacity: 0.75;
+}
+
+/* stylelint-enable selector-no-vendor-prefix */
+
+.emoji {
+	font-size: 1.4em;
+	vertical-align: text-top;
+	line-height: 1;
+}
+
+/* Correctly handle multiple successive whitespace characters.
+   For example: user has quit ( ===> L   O   L <=== )  */
+
+.header .topic,
+#chat .msg[data-type="action"] .content,
+#chat .msg[data-type="message"] .content,
+#chat .msg[data-type="monospace_block"] .content,
+#chat .msg[data-type="notice"] .content,
+#chat .ctcp-message,
+#chat .part-reason,
+#chat .quit-reason,
+#chat .new-topic,
+#chat table.channel-list .topic {
+	white-space: pre-wrap;
+}
+</style>
+
 <script>
 const constants = require("../js/constants");
 import eventbus from "../js/eventbus";
diff --git a/client/components/Channel.vue b/client/components/Channel.vue
index 72551f9b..d4b12993 100644
--- a/client/components/Channel.vue
+++ b/client/components/Channel.vue
@@ -27,6 +27,43 @@
 	</ChannelWrapper>
 </template>
 
+<style scoped>
+.channel-list-item .close-tooltip {
+	flex-shrink: 0;
+	line-height: 1;
+}
+
+.channel-list-item .close {
+	width: 18px;
+	height: 18px;
+	display: none;
+	transition: opacity 0.2s, background-color 0.2s;
+}
+
+.channel-list-item .close::before {
+	font-size: 20px;
+	font-weight: normal;
+	display: inline-block;
+	line-height: 16px;
+	text-align: center;
+	content: "×";
+	color: #fff;
+}
+
+.channel-list-item.active .close {
+	opacity: 0.4;
+	display: unset;
+}
+
+.channel-list-item.active .close:hover {
+	opacity: 1;
+}
+
+.channel-list-item .name {
+	mask-image: var(--fade-long-text);
+}
+</style>
+
 <script>
 import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index 572881bc..1e80d33c 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -32,6 +32,44 @@
 	</div>
 </template>
 
+<style scoped>
+.channel-list-item .not-connected-tooltip,
+.channel-list-item .not-secure-tooltip,
+.channel-list-item .parted-channel-tooltip {
+	margin: 0 8px;
+}
+
+.channel-list-item.not-secure {
+	color: #f39c12;
+}
+
+.channel-list-item.not-secure:hover,
+.channel-list-item.not-secure.active {
+	color: #f8c572;
+}
+
+.channel-list-item.not-connected,
+.channel-list-item.parted-channel {
+	color: #e74c3c;
+}
+
+.channel-list-item.not-connected:hover,
+.channel-list-item.not-connected.active,
+.channel-list-item.parted-channel:hover,
+.channel-list-item.parted-channel.active {
+	color: #f1978e;
+}
+
+.channel-list-item.is-muted {
+	opacity: 0.5;
+}
+
+.channel-list-item::before {
+	width: 14px;
+	margin-right: 12px;
+	line-height: 18px;
+}
+</style>
 <script>
 import eventbus from "../js/eventbus";
 import isChannelCollapsed from "../js/helpers/isChannelCollapsed";
diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 9838d1b6..93429830 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -120,6 +120,128 @@
 	</div>
 </template>
 
+<style scoped>
+@import "../css/special-channels.css";
+@import "../css/colored-nicks.css";
+
+#chat.hide-motd .msg[data-command="motd"] {
+	display: none !important;
+}
+
+#user-visible-error {
+	font-size: 14px;
+	line-height: 1.5;
+	font-weight: 600;
+	padding: 10px;
+	word-spacing: 3px;
+	text-transform: uppercase;
+	background: #e74c3c;
+	color: #fff;
+	text-align: center;
+	cursor: pointer;
+}
+
+.scroll-down {
+	position: absolute;
+	bottom: 16px;
+	right: 16px;
+	z-index: 2;
+	pointer-events: none;
+	opacity: 0;
+	transform: translateY(16px);
+	transition: transform 0.2s, opacity 0.2s;
+	cursor: pointer;
+}
+
+.scroll-down-shown {
+	opacity: 1;
+	transform: none;
+	pointer-events: auto;
+}
+
+.scroll-down-arrow {
+	width: 36px;
+	height: 36px;
+	line-height: 34px;
+	border-radius: 50%;
+	background: var(--window-bg-color);
+	color: var(--button-color);
+	border: 2px solid var(--button-color);
+	text-align: center;
+	transition: background 0.2s, color 0.2s;
+	box-shadow: 0 6px 10px 0 rgb(0 0 0 / 15%);
+}
+
+.scroll-down:hover .scroll-down-arrow {
+	background: var(--button-color);
+	color: var(--button-text-color-hover);
+}
+
+.scroll-down-arrow::after {
+	content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
+}
+
+#chat .chat-view[data-type="special"] table th {
+	word-break: normal;
+}
+
+.topic-container {
+	position: relative;
+	flex-grow: 1;
+	padding-left: 10px;
+}
+
+.header .topic.empty {
+	min-width: 0;
+}
+
+.header .topic-input {
+	color: inherit;
+	background: transparent;
+	border: 1px solid #cdd3da;
+	border-radius: 2px;
+	padding-right: 37px;
+	padding-left: 10px;
+	width: 100%;
+	height: 35px;
+	overflow: hidden;
+	font-size: 14px;
+	line-height: normal;
+	outline: none;
+}
+
+.topic-container .save-topic {
+	position: absolute;
+	top: 6px;
+	right: 0;
+}
+
+.topic-container .save-topic span {
+	font-size: 16px;
+	color: #607992;
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	appearance: none;
+}
+
+.topic-container .save-topic span:hover {
+	opacity: 0.6;
+}
+
+/deep/ table.channel-list .channel,
+/deep/ table.channel-list .topic,
+/deep/ table.ban-list .hostmask,
+/deep/ table.ban-list .banned_by,
+/deep/ table.ban-list .banned_at,
+/deep/ table.ignore-list .hostmask,
+/deep/ table.ignore-list .when {
+	text-align: left;
+}
+</style>
 <script>
 import socket from "../js/socket";
 import eventbus from "../js/eventbus";
diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 0d01f2d8..51f45157 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -51,6 +51,86 @@
 	</form>
 </template>
 
+<style scoped>
+#upload-progressbar {
+	background: var(--upload-progressbar-color);
+	box-shadow: 0 0 10px var(--upload-progressbar-color);
+	width: 0%;
+	height: 2px;
+	visibility: hidden;
+	position: absolute;
+	top: -1px; /* put it on top of #form's border */
+	left: 0;
+}
+
+#upload-progressbar.upload-progressbar-visible {
+	visibility: visible;
+	transition: 0.3s width ease-in-out;
+}
+
+#form {
+	flex: 0 0 auto;
+	border: 0;
+	border-top: 1px solid #e7e7e7;
+	border-radius: 0;
+	margin: 0;
+	padding: 6px;
+	background: white;
+	display: flex;
+	align-items: flex-end;
+	position: relative;
+}
+
+#form #nick {
+	background: #f6f6f6;
+	color: #666;
+	font-size: 13px;
+	margin: 4px;
+	line-height: 24px;
+	padding: 0 8px;
+	border-radius: 2px;
+	display: none;
+}
+
+.public #form #nick {
+	display: block;
+}
+
+#form #input {
+	background: transparent;
+	border: none;
+	font: inherit;
+	min-height: 19px; /* Required when computing input height at char deletion */
+	height: 19px;
+	max-height: 95px; /* min-height/height x number of lines maximum */
+	line-height: 19px; /* should match height */
+	outline: none;
+	margin: 5px;
+	padding: 0;
+	resize: none;
+	flex: 1 0 auto;
+	align-self: center;
+	touch-action: pan-y;
+}
+
+#form #upload-input {
+	display: none;
+}
+
+#form #upload,
+#form #submit {
+	color: #607992;
+	font-size: 14px;
+	height: 32px;
+	width: 32px;
+	flex: 0 0 auto;
+}
+
+#form #upload[disabled],
+#form #submit[disabled] {
+	opacity: 0.5;
+}
+</style>
 <script>
 import Mousetrap from "mousetrap";
 import {wrapCursor} from "undate";
diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index 7eaa7c8b..952372bf 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -54,6 +54,93 @@
 	</aside>
 </template>
 
+<style scoped>
+#chat .userlist {
+	border-left: 1px solid #e7e7e7;
+	width: 180px;
+	display: none;
+	flex-direction: column;
+	flex-shrink: 0;
+	touch-action: pan-y;
+}
+
+#chat .userlist .count {
+	background: #fafafa;
+	height: 45px;
+	flex-shrink: 0;
+	position: relative;
+}
+
+#chat .userlist .search {
+	color: var(--body-color);
+	appearance: none;
+	border: 0;
+	background: none;
+	font: inherit;
+	outline: 0;
+	padding: 13px;
+	padding-right: 30px;
+	width: 100%;
+}
+
+#chat .userlist .names {
+	flex-grow: 1;
+	overflow: auto;
+	overflow-x: hidden;
+	padding-bottom: 10px;
+	width: 100%;
+	touch-action: pan-y;
+	scrollbar-width: thin;
+	overscroll-behavior: contain;
+	-webkit-overflow-scrolling: touch;
+}
+
+#chat .names .user {
+	display: block;
+	line-height: 1.6;
+	padding: 0 16px;
+	white-space: nowrap;
+}
+
+#chat .user-mode {
+	margin-bottom: 15px;
+}
+
+#chat .user-mode::before {
+	background: var(--window-bg-color);
+	color: var(--body-color-muted);
+	display: block;
+	font-size: 0.85em;
+	line-height: 1.6;
+	padding: 5px 16px;
+	position: sticky;
+	top: 0;
+}
+
+#chat .user-mode.owner::before {
+	content: "Owners";
+}
+
+#chat .user-mode.admin::before {
+	content: "Administrators";
+}
+
+#chat .user-mode.op::before {
+	content: "Operators";
+}
+
+#chat .user-mode.half-op::before {
+	content: "Half-Operators";
+}
+
+#chat .user-mode.voice::before {
+	content: "Voiced";
+}
+
+#chat .user-mode.normal::before {
+	content: "Users";
+}
+</style>
 <script>
 import {filter as fuzzyFilter} from "fuzzy";
 import Username from "./Username.vue";
diff --git a/client/components/ContextMenu.vue b/client/components/ContextMenu.vue
index 60ff51be..8c0c6acb 100644
--- a/client/components/ContextMenu.vue
+++ b/client/components/ContextMenu.vue
@@ -38,6 +38,31 @@
 	</div>
 </template>
 
+<style scoped>
+#context-menu-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+	background: transparent;
+}
+
+.passthrough {
+	pointer-events: none;
+}
+
+.passthrough > * {
+	pointer-events: auto;
+}
+
+.context-menu-divider {
+	height: 1px;
+	margin: 6px 0;
+	background-color: rgb(0 0 0 / 10%);
+}
+</style>
 <script>
 import {
 	generateUserContextMenu,
diff --git a/client/components/DateMarker.vue b/client/components/DateMarker.vue
index 4b6fa37c..34a4f12e 100644
--- a/client/components/DateMarker.vue
+++ b/client/components/DateMarker.vue
@@ -6,6 +6,34 @@
 	</div>
 </template>
 
+<style scoped>
+.date-marker {
+	position: relative;
+	text-align: center;
+	margin: 0 10px;
+	z-index: 0;
+	font-weight: bold;
+	font-size: 12px;
+}
+
+.date-marker::before {
+	position: absolute;
+	z-index: -1;
+	content: "";
+	left: 0;
+	right: 0;
+	top: 50%;
+	border-top: 1px solid var(--date-marker-color);
+}
+
+.date-marker-text::before {
+	content: attr(aria-label);
+	background-color: var(--window-bg-color);
+	color: var(--date-marker-color);
+	padding: 0 10px;
+}
+</style>
+
 <script>
 import dayjs from "dayjs";
 import calendar from "dayjs/plugin/calendar";
diff --git a/client/components/JoinChannel.vue b/client/components/JoinChannel.vue
index 129d5383..7009eade 100644
--- a/client/components/JoinChannel.vue
+++ b/client/components/JoinChannel.vue
@@ -35,6 +35,23 @@
 	</form>
 </template>
 
+<style scoped>
+.join-form {
+	padding: 0 18px 8px;
+}
+
+.join-form .input {
+	display: block;
+	margin: 5px auto;
+}
+
+.join-form .btn {
+	display: block;
+	width: 100%;
+	margin: auto;
+}
+</style>
+
 <script>
 import socket from "../js/socket";
 
diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue
index 9ae10b74..edb4e773 100644
--- a/client/components/LinkPreview.vue
+++ b/client/components/LinkPreview.vue
@@ -129,6 +129,132 @@
 	</div>
 </template>
 
+<style scoped>
+#chat .preview {
+	display: flex; /* Fix odd margin added by inline-flex in .toggle-content */
+}
+
+#chat .toggle-content {
+	background: #f6f6f6;
+	border-radius: 5px;
+	max-width: 100%;
+	margin: 0;
+	margin-top: 6px;
+	overflow: hidden;
+	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+	display: inline-flex !important;
+	align-items: flex-start;
+	white-space: normal;
+}
+
+/* This applies to images of preview-type-image and thumbnails of preview-type-link */
+#chat .toggle-content img {
+	max-width: 100%;
+	max-height: 128px;
+	display: block;
+	cursor: zoom-in;
+}
+
+#chat .toggle-content pre.prefetch-error {
+	padding: 0;
+	margin: 0;
+	color: inherit;
+	background-color: transparent;
+}
+
+#chat .toggle-content .prefetch-error {
+	display: none;
+}
+
+#chat .toggle-content.opened .prefetch-error {
+	display: inline;
+}
+
+/* This applies to thumbnails of preview-type-link only */
+#chat .toggle-content .thumb {
+	max-height: 54px;
+	max-width: 96px;
+}
+
+#chat .toggle-type-error,
+#chat .toggle-content .toggle-text {
+	padding: 8px 10px;
+}
+
+#chat .toggle-content .toggle-text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-align: initial;
+}
+
+#chat .toggle-content.opened .toggle-text {
+	white-space: normal;
+}
+
+#chat .toggle-content .head {
+	display: flex;
+	align-items: flex-start;
+	font-weight: bold;
+}
+
+#chat .toggle-type-error,
+#chat .toggle-text .body {
+	color: #717171;
+}
+
+#chat .toggle-text a {
+	color: inherit;
+}
+
+#chat .toggle-text .overflowable {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-grow: 1;
+}
+#chat .toggle-content .more {
+	color: var(--link-color);
+	font-weight: normal;
+	margin-left: 10px;
+	flex-shrink: 0;
+}
+
+#chat .toggle-content .more:hover {
+	text-decoration: underline;
+}
+
+#chat .toggle-content .more::after {
+	content: " " attr(aria-label);
+}
+
+#chat .toggle-content .more-caret {
+	display: inline-block;
+	transition: transform 0.2s;
+}
+
+#chat .toggle-content .more-caret::before {
+	content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
+}
+
+#chat audio {
+	width: 600px;
+	max-width: 100%;
+}
+
+#chat .toggle-type-video {
+	max-width: 640px;
+}
+
+#chat video {
+	max-width: 100%;
+	max-height: 240px;
+}
+
+/* Do not display an empty div when there are no previews. Useful for example in
+part/quit messages where we don't load previews (adds a blank line otherwise) */
+#chat .preview:empty {
+	display: none;
+}
+</style>
 <script>
 import eventbus from "../js/eventbus";
 import friendlysize from "../js/helpers/friendlysize";
diff --git a/client/components/Mentions.vue b/client/components/Mentions.vue
index 54759bff..03af259d 100644
--- a/client/components/Mentions.vue
+++ b/client/components/Mentions.vue
@@ -58,9 +58,15 @@
 	</div>
 </template>
 
-<style>
+<style scoped>
 #mentions-popup-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 	z-index: 8;
+	background: transparent;
 }
 
 .mentions-popup {
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index cd298a6c..63f2677c 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="chat" class="chat" tabindex="-1">
-		<div v-show="channel.moreHistoryAvailable" class="show-more">
+		<div v-show="channel.moreHistoryAvailable" class="how-more">
 			<button
 				ref="loadMoreButton"
 				:disabled="channel.historyLoading || !$store.state.isConnected"
@@ -57,6 +57,33 @@
 	</div>
 </template>
 
+<style scoped>
+#chat .unread-marker {
+	position: relative;
+	text-align: center;
+	margin: 0 10px;
+	z-index: 0;
+	font-weight: bold;
+	font-size: 12px;
+}
+
+#chat .unread-marker::before {
+	position: absolute;
+	z-index: -1;
+	content: "";
+	left: 0;
+	right: 0;
+	top: 50%;
+	border-top: 1px solid var(--unread-marker-color);
+}
+
+#chat .unread-marker-text::before {
+	content: "New messages";
+	background-color: var(--window-bg-color);
+	color: var(--unread-marker-color);
+	padding: 0 10px;
+}
+</style>
 <script>
 const constants = require("../js/constants");
 import eventbus from "../js/eventbus";
diff --git a/client/components/MessageSearchForm.vue b/client/components/MessageSearchForm.vue
index 6f22fce3..3cc5c6e8 100644
--- a/client/components/MessageSearchForm.vue
+++ b/client/components/MessageSearchForm.vue
@@ -22,16 +22,16 @@
 	</form>
 </template>
 
-<style>
-form.message-search {
+<style scoped>
+.message-search {
 	display: flex;
 }
 
-form.message-search .input-wrapper {
+.message-search .input-wrapper {
 	display: flex;
 }
 
-form.message-search input {
+.message-search input {
 	width: 100%;
 	height: auto !important;
 	margin: 7px 0;
@@ -41,21 +41,21 @@ form.message-search input {
 	appearance: none;
 }
 
-form.message-search input::placeholder {
+.message-search input::placeholder {
 	color: rgba(0, 0, 0, 0.35);
 }
 
-@media (min-width: 480px) {
-	form.message-search input {
+@media (min-width: var(--page-content-width)) {
+	.message-search input {
 		min-width: 140px;
 	}
 
-	form.message-search input:focus {
+	.message-search input:focus {
 		min-width: 220px;
 	}
 }
 
-form.message-search .input-wrapper {
+.message-search .input-wrapper {
 	position: absolute;
 	top: 45px;
 	left: 0;
@@ -66,15 +66,14 @@ form.message-search .input-wrapper {
 	background: var(--window-bg-color);
 }
 
-form.message-search .input-wrapper input {
+.message-search .input-wrapper input {
 	margin: 7px;
 }
 
-form.message-search.opened .input-wrapper {
+.message-search.opened .input-wrapper {
 	height: 50px;
 }
-
-#chat form.message-search button {
+.message-search button {
 	display: flex;
 	color: #607992;
 }
diff --git a/client/components/MessageTypes/whois.vue b/client/components/MessageTypes/whois.vue
index 5a080788..1e23254c 100644
--- a/client/components/MessageTypes/whois.vue
+++ b/client/components/MessageTypes/whois.vue
@@ -111,6 +111,23 @@
 	</span>
 </template>
 
+<style scoped>
+.whois {
+	display: grid;
+	grid-template-columns: max-content auto;
+	margin: 0;
+}
+
+.whois dt {
+	grid-column-start: 1;
+	margin-right: 20px;
+}
+
+.whois dd {
+	grid-column-start: 2;
+}
+</style>
+
 <script>
 import localetime from "../../js/helpers/localetime";
 import ParsedMessage from "../ParsedMessage.vue";
diff --git a/client/components/NetworkForm.vue b/client/components/NetworkForm.vue
index 7eefaefd..7981b6ae 100644
--- a/client/components/NetworkForm.vue
+++ b/client/components/NetworkForm.vue
@@ -407,32 +407,83 @@ the server tab on new connection"
 	</div>
 </template>
 
-<style>
-#connect .connect-auth {
+<style scoped>
+.connect-row {
+	display: flex;
+}
+.connect-auth {
 	display: block;
 	margin-bottom: 10px;
 }
 
-#connect .connect-auth .opt {
+.connect-auth .opt {
 	display: block;
 	width: 100%;
 }
 
-#connect .connect-auth input {
+.connect-auth input {
 	margin: 3px 10px 0 0;
 }
 
-#connect .connect-sasl-external {
+.connect-sasl-external {
 	padding: 10px;
 	border-radius: 2px;
 	background-color: #d9edf7;
 	color: #31708f;
 }
 
-#connect .connect-sasl-external pre {
+.connect-sasl-external pre {
 	margin: 0;
 	user-select: text;
 }
+
+.connect-row > .input,
+.connect-row > .input-wrap {
+	flex-grow: 1;
+}
+
+label {
+	width: 25%;
+	flex-shrink: 0;
+	margin-top: 11px;
+}
+
+.tls {
+	width: 100%;
+	display: block;
+	margin-top: 6px;
+}
+
+.tls input,
+input[name="proxyEnabled"] {
+	margin: 3px 10px 0 0;
+}
+
+#connect\:host,
+#connect\:proxyHost {
+	width: 70%;
+}
+
+#connect\:port,
+#connect\:proxyPort {
+	width: 25%;
+}
+
+#connect\:portseparator,
+#connect\:proxyPortSeparator {
+	width: 5%;
+	text-align: center;
+	display: inline-block;
+}
+
+.btn {
+	margin-top: 15px;
+	width: 100%;
+}
+
+#connect\:proxyEnabled[type="checkbox"]:is(:checked) {
+	margin-bottom: 10px;
+}
 </style>
 
 <script>
diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 4cd2fe11..e25d6578 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -74,7 +74,6 @@
 				:id="'network-' + network.uuid"
 				:key="network.uuid"
 				:class="{
-					collapsed: network.isCollapsed,
 					'not-connected': !network.status.connected,
 					'not-secure': !network.status.secure,
 				}"
@@ -134,7 +133,7 @@
 	</div>
 </template>
 
-<style>
+<style scoped>
 .jump-to-input {
 	margin: 8px;
 	position: relative;
@@ -193,6 +192,81 @@
 .jump-to-results .channel-list-item[data-type="lobby"]::before {
 	content: "\f233";
 }
+
+/* Remove background on hovered/active channel when sorting/drag-and-dropping */
+.ui-sortable-ghost,
+.ui-sortable-dragging .channel-list-item,
+.ui-sortable-dragging,
+.ui-sortable-dragging:hover,
+.ui-sortable-dragging.active,
+.ui-sortable-dragging-touch-cue .channel-list-item,
+.ui-sortable-dragging-touch-cue,
+.ui-sortable-dragging-touch-cue:hover,
+.ui-sortable-dragging-touch-cue.active {
+	background: transparent;
+}
+
+.ui-sortable-ghost::after,
+.ui-sortable-dragging-touch-cue:not(.ui-sortable-dragging)::after {
+	background: var(--body-bg-color);
+	border: 1px dashed #99a2b4;
+	border-radius: 6px;
+	content: " ";
+	display: block;
+	position: absolute;
+	left: 10px;
+	top: 0;
+	bottom: 0;
+	right: 10px;
+}
+
+.ui-sortable-dragging-touch-cue:not(.ui-sortable-ghost)::after {
+	background: transparent;
+}
+
+#sidebar .network {
+	position: relative;
+	margin-bottom: 20px;
+	touch-action: pan-y;
+}
+
+#sidebar .empty {
+	flex-grow: 1;
+	line-height: 1.6;
+	padding: 40px 20px;
+	text-align: center;
+}
+
+/deep/ .channel-list-item .badge {
+	flex-shrink: 0;
+	line-height: 1;
+}
+
+/deep/ .channel-list-item .badge {
+	background: rgb(255 255 255 / 6%);
+	border-radius: 3px;
+	color: #afb6c0;
+	font-size: 10px;
+	padding: 4px 6px;
+	transition: background-color 0.2s, color 0.2s;
+}
+
+/deep/ .channel-list-item .badge:empty {
+	display: none;
+}
+
+/deep/ .channel-list-item .badge.highlight {
+	background: #fff;
+	color: #49505a;
+}
+
+/deep/ .channel-list-item .name {
+	position: relative;
+	flex-grow: 1;
+	overflow: hidden;
+	white-space: nowrap;
+	margin-right: 5px;
+}
 </style>
 
 <script>
diff --git a/client/components/NetworkLobby.vue b/client/components/NetworkLobby.vue
index 1b94c22d..e556e0dd 100644
--- a/client/components/NetworkLobby.vue
+++ b/client/components/NetworkLobby.vue
@@ -5,7 +5,7 @@
 			:aria-controls="'network-' + network.uuid"
 			:aria-label="getExpandLabel(network)"
 			:aria-expanded="!network.isCollapsed"
-			class="collapse-network"
+			:class="['collapse-network', {collapsed: network.isCollapsed}]"
 			@click.stop="onCollapseClick"
 		>
 			<span class="collapse-network-icon" />
@@ -45,6 +45,71 @@
 	</ChannelWrapper>
 </template>
 
+<style scoped>
+.collapse-network {
+	width: 40px;
+	opacity: 0.4;
+	padding-left: 11px;
+	transition: opacity 0.2s;
+	flex-shrink: 0;
+}
+
+.collapse-network-icon {
+	display: block;
+	width: 20px;
+	height: 20px;
+	transition: transform 0.2s;
+}
+
+.collapsed .collapse-network-icon {
+	transform: rotate(-90deg);
+}
+
+.collapse-network-icon::before {
+	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
+	color: #fff;
+}
+
+.collapse-network:hover {
+	opacity: 1;
+}
+
+.channel-list-item[data-type="lobby"] .add-channel {
+	border-radius: 3px;
+	width: 18px;
+	height: 18px;
+	opacity: 0.4;
+	transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
+}
+
+.channel-list-item[data-type="lobby"] .add-channel::before {
+	font-size: 20px;
+	font-weight: normal;
+	display: inline-block;
+	line-height: 16px;
+	text-align: center;
+	content: "+";
+	color: #fff;
+}
+
+.channel-list-item[data-type="lobby"] .add-channel:hover {
+	opacity: 1;
+}
+
+.channel-list-item[data-type="lobby"] .add-channel.opened {
+	/* translateZ(0) enables hardware acceleration, this is to avoid jittering when animating */
+	transform: rotate(45deg) translateZ(0);
+}
+
+.channel-list-item[data-type="lobby"]:hover,
+.channel-list-item[data-type="lobby"].active {
+	color: #c0f8c3;
+}
+.add-channel-tooltip {
+	flex-shrink: 0;
+	line-height: 1;
+}
+</style>
 <script>
 import collapseNetwork from "../js/helpers/collapseNetwork";
 import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
diff --git a/client/components/ParsedMessage.vue b/client/components/ParsedMessage.vue
index 842cbb34..10384cf9 100644
--- a/client/components/ParsedMessage.vue
+++ b/client/components/ParsedMessage.vue
@@ -1,3 +1,7 @@
+<style scoped>
+@import "../css/irc-message-styles.css";
+</style>
+
 <script>
 import parse from "../js/helpers/parse";
 
diff --git a/client/components/Sidebar.vue b/client/components/Sidebar.vue
index 6a7a23f7..17ded978 100644
--- a/client/components/Sidebar.vue
+++ b/client/components/Sidebar.vue
@@ -79,6 +79,71 @@
 	</aside>
 </template>
 
+<style scoped>
+#sidebar {
+	display: none;
+	flex-direction: column;
+	width: 220px;
+	max-height: 100%;
+	will-change: transform;
+	color: #b7c5d1; /* same as .channel-list-item color */
+}
+
+#sidebar .scrollable-area {
+	overflow-x: auto;
+	flex-grow: 1;
+	touch-action: pan-y;
+	scrollbar-width: thin;
+	overscroll-behavior: contain;
+	-webkit-overflow-scrolling: touch;
+}
+
+#sidebar .logo-container {
+	text-align: center;
+}
+
+#sidebar .logo,
+#sidebar .logo-inverted {
+	height: 45px;
+}
+
+#sidebar .logo {
+	display: none;
+}
+
+#footer {
+	height: 45px;
+	font-size: 14px;
+	flex-shrink: 0;
+	display: flex;
+	justify-content: center;
+}
+
+#footer button {
+	color: #b7c5d1;
+	display: inline-block;
+	width: 45px;
+	height: 100%;
+	border-radius: 5px;
+}
+
+#footer button:hover,
+#footer button.active {
+	color: #fff;
+}
+
+#footer .help.notified::after {
+	content: "\f021";
+	position: absolute;
+	bottom: 10px;
+	right: 7px;
+	padding: 2px;
+	font-size: 10px;
+	border-radius: 50%;
+	color: var(--link-color);
+	background: var(--body-bg-color);
+}
+</style>
 <script>
 import NetworkList from "./NetworkList.vue";
 
diff --git a/client/components/SidebarToggle.vue b/client/components/SidebarToggle.vue
index 6e0a7319..a9be0c04 100644
--- a/client/components/SidebarToggle.vue
+++ b/client/components/SidebarToggle.vue
@@ -2,6 +2,38 @@
 	<button class="lt" aria-label="Toggle channel list" @click="$store.commit('toggleSidebar')" />
 </template>
 
+<style scoped>
+/* Channel list button stays fixed when scrolling... */
+.lt {
+	position: fixed;
+}
+
+/* ... Except on chat windows, relative to include the notification dot */
+.lt {
+	position: relative;
+}
+
+/* Notification dot on the top right corner of the menu icon */
+.lt::after {
+	content: "";
+	position: absolute;
+	top: 9px;
+	right: 7px;
+	background-color: #e74c3c;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 2px solid var(--window-bg-color);
+	opacity: 0;
+	transition: opacity 0.2s;
+	background-clip: padding-box; /* Fix border-radius bleeding color */
+}
+
+#viewport.notified .lt::after {
+	opacity: 1;
+}
+</style>
+
 <script>
 export default {
 	name: "SidebarToggle",
diff --git a/client/components/Special/ListChannels.vue b/client/components/Special/ListChannels.vue
index bc415346..cdb85dd9 100644
--- a/client/components/Special/ListChannels.vue
+++ b/client/components/Special/ListChannels.vue
@@ -18,6 +18,17 @@
 	</table>
 </template>
 
+<style scoped>
+#chat table.channel-list .channel {
+	width: 80px;
+}
+
+#chat table.channel-list .users {
+	text-align: center;
+	width: 50px;
+}
+</style>
+
 <script>
 import ParsedMessage from "../ParsedMessage.vue";
 
diff --git a/client/components/VersionChecker.vue b/client/components/VersionChecker.vue
index 129861a8..d382ca86 100644
--- a/client/components/VersionChecker.vue
+++ b/client/components/VersionChecker.vue
@@ -35,6 +35,71 @@
 	</div>
 </template>
 
+<style scoped>
+#version-checker {
+	display: flex;
+	align-items: center;
+	padding: 10px;
+	margin-bottom: 16px;
+	border-radius: 2px;
+	transition: color 0.2s, background-color 0.2s;
+}
+
+#version-checker p,
+#version-checker button {
+	margin-bottom: 0;
+}
+
+#version-checker p {
+	flex: 1;
+	padding-top: 6px;
+	padding-bottom: 6px;
+}
+
+#version-checker::before {
+	margin-left: 6px;
+	margin-right: 12px;
+	font-size: 1.2em;
+}
+
+#version-checker.loading {
+	background-color: #d9edf7;
+	color: #31708f;
+}
+
+#version-checker.loading::before {
+	content: "\f253"; /* https://fontawesome.com/icons/hourglass-end?style=solid */
+}
+
+#version-checker.new-version,
+#version-checker.new-packages {
+	color: #8a6d3b;
+	background-color: #fcf8e3;
+}
+
+#version-checker.new-version::before,
+#version-checker.new-packages::before {
+	content: "\f164"; /* https://fontawesome.com/icons/thumbs-up?style=solid */
+}
+
+#version-checker.error {
+	color: #a94442;
+	background-color: #f2dede;
+}
+
+#version-checker.error::before {
+	content: "\f06a"; /* http://fontawesome.io/icon/exclamation-circle/ */
+}
+
+#version-checker.up-to-date {
+	background-color: #dff0d8;
+	color: #3c763d;
+}
+
+#version-checker.up-to-date::before {
+	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
+}
+</style>
 <script>
 import socket from "../js/socket";
 
diff --git a/client/components/Windows/Changelog.vue b/client/components/Windows/Changelog.vue
index 32fbc708..7c2d8fbf 100644
--- a/client/components/Windows/Changelog.vue
+++ b/client/components/Windows/Changelog.vue
@@ -42,6 +42,24 @@
 	</div>
 </template>
 
+<style scoped>
+.changelog-text {
+	line-height: 1.5;
+}
+
+.changelog-text p {
+	margin-bottom: 16px;
+}
+
+h3 {
+	font-size: 20px;
+	border-bottom: 1px solid currentcolor;
+	color: var(--window-heading-color);
+	margin: 30px 0 10px;
+	padding-bottom: 7px;
+}
+</style>
+
 <script>
 import socket from "../../js/socket";
 import SidebarToggle from "../SidebarToggle.vue";
diff --git a/client/components/Windows/Connect.vue b/client/components/Windows/Connect.vue
index 11fc5661..ca93356b 100644
--- a/client/components/Windows/Connect.vue
+++ b/client/components/Windows/Connect.vue
@@ -1,7 +1,6 @@
 <template>
 	<NetworkForm :handle-submit="handleSubmit" :defaults="defaults" :disabled="disabled" />
 </template>
-
 <script>
 import socket from "../../js/socket";
 import NetworkForm from "../NetworkForm.vue";
diff --git a/client/components/Windows/Help.vue b/client/components/Windows/Help.vue
index 2fd029a5..8401e480 100644
--- a/client/components/Windows/Help.vue
+++ b/client/components/Windows/Help.vue
@@ -829,6 +829,75 @@
 	</div>
 </template>
 
+<style scoped>
+#help .website-link::before,
+#help .documentation-link::before,
+#help .report-issue-link::before {
+	display: inline-block;
+	margin-right: 5px;
+
+	/* These 2 directives are loosely taken from .fa-fw */
+	width: 1.35em;
+	text-align: center;
+}
+
+#help .website-link::before {
+	content: "\f0ac"; /* http://fontawesome.io/icon/globe/ */
+}
+#help .documentation-link::before {
+	content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */
+}
+#help .report-issue-link::before {
+	content: "\f188"; /* http://fontawesome.io/icon/bug/ */
+}
+
+#help .help-version-title {
+	display: flex;
+	justify-content: space-between;
+}
+
+#help .help-item {
+	display: table-row;
+	font-size: 14px;
+}
+
+#help .help-item .subject,
+#help .help-item .description {
+	display: table-cell;
+	padding-bottom: 15px;
+}
+
+#help .help-item .subject {
+	white-space: nowrap;
+	padding-right: 15px;
+}
+
+#help .help-item .subject.gesture {
+	font-weight: bold;
+}
+
+#help .help-item .description p {
+	margin-bottom: 0;
+}
+
+kbd {
+	display: inline-block;
+	font-family: inherit;
+	line-height: 1em;
+	min-width: 28px; /* Ensure 1-char keys have the same width */
+	margin: 0 1px;
+	padding: 4px 6px;
+	color: #444;
+	text-align: center;
+	text-shadow: 0 1px 0 #fff;
+	background-color: white;
+	background-image: linear-gradient(180deg, rgb(0 0 0 / 5%), transparent);
+	border: 1px solid #bbb;
+	border-radius: 4px;
+	box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
+}
+</style>
+
 <script>
 import SidebarToggle from "../SidebarToggle.vue";
 import VersionChecker from "../VersionChecker.vue";
diff --git a/client/components/Windows/SearchResults.vue b/client/components/Windows/SearchResults.vue
index 4401e136..4ba336d1 100644
--- a/client/components/Windows/SearchResults.vue
+++ b/client/components/Windows/SearchResults.vue
@@ -85,10 +85,19 @@
 	</div>
 </template>
 
-<style>
+<style scoped>
+@import "../../css/chat-and-search.css";
+@import "../../css/colored-nicks.css";
 .channel-name {
 	font-weight: 700;
 }
+
+.chat-view[data-type="search-results"] .search-status {
+	display: flex;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+}
 </style>
 
 <script>
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index ce90a66b..860f14bd 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -374,7 +374,7 @@ This may break orientation if your browser does not support that."
 						Custom highlights
 						<span
 							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="If a message contains any of these comma-separated 
+							aria-label="If a message contains any of these comma-separated
 expressions, it will trigger a highlight."
 						>
 							<button class="extra-help" />
@@ -398,8 +398,8 @@ expressions, it will trigger a highlight."
 						Highlight exceptions
 						<span
 							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="If a message contains any of these comma-separated 
-expressions, it will not trigger a highlight even if it contains 
+							aria-label="If a message contains any of these comma-separated
+expressions, it will not trigger a highlight even if it contains
 your nickname or expressions defined in custom highlights."
 						>
 							<button class="extra-help" />
@@ -530,10 +530,97 @@ your nickname or expressions defined in custom highlights."
 	</div>
 </template>
 
-<style>
+<style scoped>
 textarea#user-specified-css-input {
 	height: 100px;
 }
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+
+#settings .apple-push-unsupported,
+#settings .settings-sync-panel {
+	padding: 10px;
+	margin-bottom: 16px;
+	border-radius: 2px;
+	background-color: #d9edf7;
+	color: #31708f;
+}
+
+#settings .settings-sync-panel p:last-child {
+	margin-bottom: 0;
+}
+
+#settings .settings-sync-panel .btn {
+	color: #007bff;
+	border-color: #007bff;
+	margin-bottom: 0;
+}
+
+#settings .settings-sync-panel .btn:hover,
+#settings .settings-sync-panel .btn:focus {
+	background-color: #007bff;
+	color: #fff;
+}
+
+#settings .settings-sync-panel .btn:active,
+#settings .settings-sync-panel .btn:focus {
+	box-shadow: 0 0 0 3px rgb(0 123 255 / 50%);
+}
+
+#settings .apple-push-unsupported a {
+	color: inherit;
+	text-decoration: underline;
+}
+
+#settings .opt {
+	display: block;
+	padding: 5px 0 5px 1px;
+}
+
+#settings .opt input {
+	margin-right: 6px;
+}
+
+#settings h2 .extra-help {
+	font-size: 0.8em;
+}
+
+#settings #play {
+	font-size: 14px;
+	transition: opacity 0.2s;
+	color: var(--window-heading-color);
+}
+
+#settings #play:hover {
+	opacity: 0.8;
+}
+
+#settings #change-password .error,
+#settings #change-password .success {
+	margin-bottom: 1em;
+}
+
+#settings #change-password .error {
+	color: #e74c3c;
+}
+
+#settings #change-password .success {
+	color: #2ecc40;
+}
+
+#settings .error {
+	color: #e74c3c;
+	margin-top: 0.2em;
+}
 </style>
 
 <script>
diff --git a/client/components/Windows/SignIn.vue b/client/components/Windows/SignIn.vue
index 0d95ced9..9c54b50a 100644
--- a/client/components/Windows/SignIn.vue
+++ b/client/components/Windows/SignIn.vue
@@ -55,6 +55,40 @@
 	</div>
 </template>
 
+<style scoped>
+.container {
+	flex: 1 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+label {
+	display: block;
+	margin-top: 10px;
+	width: 100%;
+}
+
+.btn {
+	margin-top: 25px;
+}
+
+.error {
+	color: #e74c3c;
+	margin-top: 1em;
+	width: 100%;
+}
+
+.password-container {
+	width: 100%;
+}
+
+.password-container .reveal-password {
+	top: 31px;
+}
+</style>
+
 <script>
 import storage from "../../js/localStorage";
 import socket from "../../js/socket";
diff --git a/client/css/chat-and-search.css b/client/css/chat-and-search.css
new file mode 100644
index 00000000..52621469
--- /dev/null
+++ b/client/css/chat-and-search.css
@@ -0,0 +1,52 @@
+#chat {
+	overflow: hidden;
+	flex: 1 0 auto;
+	position: relative;
+}
+
+#chat .chat-view {
+	display: flex;
+	flex-direction: column;
+}
+
+#chat .show-more {
+	padding: 10px;
+	padding-top: 15px;
+	padding-bottom: 0;
+	width: 100%;
+}
+
+#chat .show-more .btn {
+	width: 100%;
+	margin: 0;
+}
+
+#chat .messages {
+	padding: 10px 0;
+	touch-action: pan-y;
+}
+
+.header .topic {
+	color: var(--body-color-muted);
+	margin-left: 8px;
+	word-break: break-all;
+	flex-grow: 1;
+	overflow: hidden;
+	font-size: 14px;
+	flex-shrink: 99999999;
+	min-width: 25px;
+	mask-image: var(--fade-long-text);
+}
+
+#chat .header {
+	border-bottom: 1px solid #e7e7e7;
+}
+
+.header .title {
+	font-size: 15px;
+	padding-left: 6px;
+	flex-shrink: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
diff --git a/client/css/chat-messages.css b/client/css/chat-messages.css
new file mode 100644
index 00000000..f13dde82
--- /dev/null
+++ b/client/css/chat-messages.css
@@ -0,0 +1,42 @@
+
+#chat .time,
+#chat .from,
+#chat .content {
+	padding: 3px 0;
+	flex: 0 0 auto;
+}
+
+#chat .msg {
+	word-wrap: break-word;
+	word-break: break-word; /* Webkit-specific */
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+}
+
+#chat .time {
+	color: var(--body-color-muted);
+	padding-left: 10px;
+	width: 55px;
+	font-variant-numeric: tabular-nums;
+	box-sizing: content-box; /* highlights have a border-left */
+}
+
+#chat .from {
+	padding-right: 10px;
+	text-align: right;
+	width: 134px;
+	overflow: hidden;
+	white-space: nowrap;
+	position: relative;
+}
+
+#chat .content {
+	flex: 1 1 auto;
+	min-width: 0;
+	padding-left: 10px;
+	padding-right: 6px;
+	border-left: 1px solid #f6f6f6;
+	overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
+	text-align: left; /* so RTL text will still be aligned left, not right */
+}
diff --git a/client/css/colored-nicks.css b/client/css/colored-nicks.css
new file mode 100644
index 00000000..a8d924e3
--- /dev/null
+++ b/client/css/colored-nicks.css
@@ -0,0 +1,32 @@
+#chat.colored-nicks .user.color-1 { color: #107ead; }
+#chat.colored-nicks .user.color-2 { color: #a86500; }
+#chat.colored-nicks .user.color-3 { color: #008a3c; }
+#chat.colored-nicks .user.color-4 { color: #e00096; }
+#chat.colored-nicks .user.color-5 { color: #f0000c; }
+#chat.colored-nicks .user.color-6 { color: #000094; }
+#chat.colored-nicks .user.color-7 { color: #006441; }
+#chat.colored-nicks .user.color-8 { color: #00566e; }
+#chat.colored-nicks .user.color-9 { color: #e6006b; }
+#chat.colored-nicks .user.color-10 { color: #0d8766; }
+#chat.colored-nicks .user.color-11 { color: #006b3b; }
+#chat.colored-nicks .user.color-12 { color: #00857e; }
+#chat.colored-nicks .user.color-13 { color: #00465b; }
+#chat.colored-nicks .user.color-14 { color: #eb005a; }
+#chat.colored-nicks .user.color-15 { color: #e62600; }
+#chat.colored-nicks .user.color-16 { color: #0f8546; }
+#chat.colored-nicks .user.color-17 { color: #e60067; }
+#chat.colored-nicks .user.color-18 { color: #eb002b; }
+#chat.colored-nicks .user.color-19 { color: #eb003f; }
+#chat.colored-nicks .user.color-20 { color: #007a56; }
+#chat.colored-nicks .user.color-21 { color: #095092; }
+#chat.colored-nicks .user.color-22 { color: #000bde; }
+#chat.colored-nicks .user.color-23 { color: #008577; }
+#chat.colored-nicks .user.color-24 { color: #00367d; }
+#chat.colored-nicks .user.color-25 { color: #007e9e; }
+#chat.colored-nicks .user.color-26 { color: #006119; }
+#chat.colored-nicks .user.color-27 { color: #007ea8; }
+#chat.colored-nicks .user.color-28 { color: #3c8500; }
+#chat.colored-nicks .user.color-29 { color: #e6007e; }
+#chat.colored-nicks .user.color-30 { color: #c75300; }
+#chat.colored-nicks .user.color-31 { color: #eb0400; }
+#chat.colored-nicks .user.color-32 { color: #e60082; }
diff --git a/client/css/icons.css b/client/css/icons.css
new file mode 100644
index 00000000..2a6c0606
--- /dev/null
+++ b/client/css/icons.css
@@ -0,0 +1,307 @@
+#viewport .lt::before,
+#viewport .rt::before,
+#chat button.mentions::before,
+#chat button.close::before,
+#chat button.menu::before,
+#chat button.search::before,
+.channel-list-item::before,
+#footer .icon,
+#chat .count::before,
+#connect .extra-help,
+#settings .extra-help,
+#settings #play::before,
+#form #upload::before,
+#form #submit::before,
+#chat .msg[data-type="away"] .from::before,
+#chat .msg[data-type="back"] .from::before,
+#chat .msg[data-type="invite"] .from::before,
+#chat .msg[data-type="join"] .from::before,
+#chat .msg[data-type="kick"] .from::before,
+#chat .msg[data-type="login"] .from::before,
+#chat .msg[data-type="logout"] .from::before,
+#chat .msg[data-type="part"] .from::before,
+#chat .msg[data-type="quit"] .from::before,
+#chat .msg[data-type="topic"] .from::before,
+#chat .msg[data-type="mode_channel"] .from::before,
+#chat .msg[data-type="mode_user"] .from::before,
+#chat .msg[data-type="mode"] .from::before,
+#chat .msg[data-command="motd"] .from::before,
+#chat .msg[data-command="help"] .from::before,
+#chat .msg[data-command="info"] .from::before,
+#chat .msg[data-type="ctcp"] .from::before,
+#chat .msg[data-type="ctcp_request"] .from::before,
+#chat .msg[data-type="whois"] .from::before,
+#chat .msg[data-type="nick"] .from::before,
+#chat .msg[data-type="action"] .from::before,
+#chat .msg[data-type="plugin"] .from::before,
+#chat .msg[data-type="raw"] .from::before,
+#chat .msg-statusmsg span::before,
+#chat .msg-shown-in-active span::before,
+#chat .toggle-button::after,
+#chat .toggle-content .more-caret::before,
+#chat .scroll-down-arrow::after,
+#chat .topic-container .save-topic span::before,
+#version-checker::before,
+.context-menu-item::before,
+#help .website-link::before,
+#help .documentation-link::before,
+#help .report-issue-link::before,
+#image-viewer .previous-image-btn::before,
+#image-viewer .next-image-btn::before,
+#image-viewer .open-btn::before,
+.channel-list-item .not-secure-icon::before,
+.channel-list-item .not-connected-icon::before,
+.channel-list-item .parted-channel-icon::before,
+.jump-to-input::before,
+.password-container .reveal-password span,
+#sidebar .collapse-network-icon::before {
+	font: normal normal normal 14px/1 FontAwesome;
+	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+#viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ }
+#viewport .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
+#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
+#chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
+#chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
+#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
+
+.context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
+.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
+.context-menu-close::before { content: "\f00d"; /* http://fontawesome.io/icon/times/ */ }
+.context-menu-list::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
+.context-menu-disconnect::before { content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */ }
+.context-menu-connect::before { content: "\f0c1"; /* https://fontawesome.com/icons/link?style=solid */ }
+.context-menu-action-whois::before { content: "\f05a"; /* http://fontawesome.io/icon/info-circle/  */ }
+.context-menu-action-ignore::before { content: "\f506"; /* https://fontawesome.com/icons/user-slash?style=solid  */ }
+.context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
+.context-menu-action-set-mode::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
+.context-menu-action-revoke-mode::before { content: "\f068"; /* http://fontawesome.io/icon/minus/ */ }
+.context-menu-network::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ }
+.context-menu-edit::before { content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */ }
+.context-menu-clear-history::before { content: "\f1f8"; /* https://fontawesome.com/icons/trash?style=solid */ }
+.context-menu-mute::before { content: "\f6a9"; /* https://fontawesome.com/v5.15/icons/volume-mute?style=solid */ }
+
+.channel-list-item .not-secure-icon::before {
+	content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
+}
+
+.channel-list-item .not-connected-icon::before,
+.channel-list-item .parted-channel-icon::before {
+	content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */
+}
+
+.context-menu-query::before,
+.context-menu-action-query::before,
+.channel-list-item[data-type="query"]::before {
+	content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */
+}
+
+.context-menu-chan::before,
+.channel-list-item[data-type="channel"]::before { content: "\f086"; /* http://fontawesome.io/icon/comments/ */ }
+
+.channel-list-item[data-type="special"]::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
+
+.channel-list-item.has-draft:not(.active):not([data-type="lobby"])::before {
+	content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */
+}
+
+#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
+#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
+#footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
+
+#form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ }
+#form #submit::before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ }
+
+#chat .msg[data-type="away"] .from::before,
+#chat .msg[data-type="back"] .from::before {
+	content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */
+	color: #7f8c8d;
+}
+
+#chat .msg[data-type="invite"] .from::before {
+	content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="login"] .from::before {
+	content: "\f007"; /* https://fontawesome.com/icons/user?style=solid */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="logout"] .from::before {
+	content: "\f007"; /* https://fontawesome.com/icons/user?style=solid */
+	color: #ff4136;
+}
+
+#chat .msg[data-type="part"] .from::before,
+#chat .msg[data-type="quit"] .from::before {
+	content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
+	color: #ff4136;
+	display: inline-block;
+	transform: rotate(180deg);
+}
+
+#chat .msg[data-type="topic"] .from::before {
+	content: "\f0a1"; /* http://fontawesome.io/icon/bullhorn/ */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="mode_channel"] .from::before,
+#chat .msg[data-type="mode_user"] .from::before,
+#chat .msg[data-type="mode"] .from::before {
+	content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */
+	color: #2ecc40;
+}
+
+#chat .msg[data-command="motd"] .from::before {
+	content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */
+	color: var(--body-color-muted);
+}
+
+#chat .msg[data-command="help"] .from::before {
+	content: "\f059"; /* https://fontawesome.com/icons/question-circle?style=solid */
+	color: var(--body-color-muted);
+}
+
+#chat .msg[data-command="info"] .from::before {
+	content: "\f05a"; /* https://fontawesome.com/icons/info-circle?style=solid */
+	color: var(--body-color-muted);
+}
+
+#chat .msg[data-type="ctcp"] .from::before,
+#chat .msg[data-type="ctcp_request"] .from::before {
+	content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */
+	color: var(--body-color-muted);
+}
+
+#chat .msg[data-type="whois"] .from::before {
+	content: "\f007"; /* http://fontawesome.io/icon/user/ */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="nick"] .from::before {
+	content: "\f007"; /* http://fontawesome.io/icon/user/ */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="join"] .from::before {
+	content: "\f2f6"; /* https://fontawesome.com/icons/sign-in-alt?style=solid */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="kick"] .from::before {
+	content: "\f05e"; /* http://fontawesome.io/icon/ban/ */
+	color: #ff4136;
+}
+
+#chat .msg[data-type="raw"] .from::before {
+	content: "\f101"; /* https://fontawesome.com/icons/angle-double-right?style=solid */
+}
+
+#chat .msg.self[data-type="raw"] .from::before {
+	content: "\f359"; /* https://fontawesome.com/icons/arrow-alt-circle-left?style=solid */
+	color: #2ecc40;
+}
+
+#chat .msg[data-type="action"] .from::before {
+	content: "\f005"; /* http://fontawesome.io/icon/star/ */
+}
+
+#chat .msg[data-type="plugin"] .from::before {
+	content: "\f1e6"; /* http://fontawesome.io/icon/plug/ */
+	transform: rotate(45deg);
+	display: inline-block;
+	padding: 1px;
+}
+
+#chat .msg-statusmsg,
+#chat .msg-shown-in-active {
+	cursor: help;
+	margin-right: 5px;
+}
+
+#chat .msg-statusmsg span::before,
+#chat .msg-shown-in-active span::before {
+	font-size: 10px;
+	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
+}
+
+#chat .msg-statusmsg {
+	border-radius: 2px;
+	padding: 2px 4px;
+	background-color: #ff9e18;
+	color: #222;
+}
+
+#chat .toggle-button {
+	display: inline-block;
+	transition: opacity 0.2s, transform 0.2s;
+
+	/* These 2 directives are loosely taken from .fa-fw */
+	width: 1.35em;
+	text-align: center;
+}
+
+#chat .toggle-button::after {
+	content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
+}
+
+#chat .count::before {
+	color: #cfcfcf;
+	content: "\f002"; /* http://fontawesome.io/icon/search/ */
+	position: absolute;
+	right: 13px;
+	line-height: 45px;
+}
+
+#connect .extra-help::before,
+#settings .extra-help::before {
+	content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
+}
+
+#settings #play::before {
+	content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
+	margin-right: 9px;
+}
+
+#image-viewer .previous-image-btn::before {
+	content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
+}
+
+#image-viewer .next-image-btn::before {
+	content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
+}
+
+#image-viewer .open-btn::before {
+	content: "\f35d"; /* https://fontawesome.com/icons/external-link-alt?style=solid */
+}
+
+
+#viewport .lt,
+#viewport .rt,
+#chat button.mentions,
+#chat button.search,
+#chat button.menu,
+#chat button.close {
+	color: #607992;
+	display: flex;
+	font-size: 14px;
+	line-height: 1;
+	height: 36px;
+	width: 36px;
+	margin-top: 6px;
+	flex-shrink: 0;
+}
+
+#viewport .lt::before,
+#viewport .rt::before,
+#chat button.mentions::before,
+#chat button.search::before,
+#chat button.menu::before,
+#chat button.close::before {
+	width: 36px;
+	line-height: 36px; /* Fix alignment in Microsoft Edge */
+}
diff --git a/client/css/irc-message-styles.css b/client/css/irc-message-styles.css
new file mode 100644
index 00000000..e26e02ef
--- /dev/null
+++ b/client/css/irc-message-styles.css
@@ -0,0 +1,620 @@
+/**
+  * IRC Message Styling
+  * Colours are credit to http://clrs.cc/
+  */
+  .irc-fg0 {
+	color: #fff;
+}
+.irc-fg1 {
+	color: #000;
+}
+.irc-fg2 {
+	color: #001f3f;
+}
+.irc-fg3 {
+	color: #2ecc40;
+}
+.irc-fg4 {
+	color: #ff4136;
+}
+.irc-fg5 {
+	color: #85144b;
+}
+.irc-fg6 {
+	color: #b10dc9;
+}
+.irc-fg7 {
+	color: #ff851b;
+}
+.irc-fg8 {
+	color: #ffdc00;
+}
+.irc-fg9 {
+	color: #01ff70;
+}
+.irc-fg10 {
+	color: #39cccc;
+}
+.irc-fg11 {
+	color: #7fdbff;
+}
+.irc-fg12 {
+	color: #0074d9;
+}
+.irc-fg13 {
+	color: #f012be;
+}
+.irc-fg14 {
+	color: #aaa;
+}
+.irc-fg15 {
+	color: #ddd;
+}
+.irc-bg0 {
+	background: #fff;
+}
+.irc-bg1 {
+	background: #000;
+}
+.irc-bg2 {
+	background: #001f3f;
+}
+.irc-bg3 {
+	background: #2ecc40;
+}
+.irc-bg4 {
+	background: #ff4136;
+}
+.irc-bg5 {
+	background: #85144b;
+}
+.irc-bg6 {
+	background: #b10dc9;
+}
+.irc-bg7 {
+	background: #ff851b;
+}
+.irc-bg8 {
+	background: #ffdc00;
+}
+.irc-bg9 {
+	background: #01ff70;
+}
+.irc-bg10 {
+	background: #39cccc;
+}
+.irc-bg11 {
+	background: #7fdbff;
+}
+.irc-bg12 {
+	background: #0074d9;
+}
+.irc-bg13 {
+	background: #f012be;
+}
+.irc-bg14 {
+	background: #aaa;
+}
+.irc-bg15 {
+	background: #ddd;
+}
+
+/* https://modern.ircdocs.horse/formatting.html#colors-16-98 */
+.irc-fg16 {
+	color: #470000;
+}
+.irc-fg17 {
+	color: #472100;
+}
+.irc-fg18 {
+	color: #474700;
+}
+.irc-fg19 {
+	color: #324700;
+}
+.irc-fg20 {
+	color: #004700;
+}
+.irc-fg21 {
+	color: #00472c;
+}
+.irc-fg22 {
+	color: #004747;
+}
+.irc-fg23 {
+	color: #002747;
+}
+.irc-fg24 {
+	color: #000047;
+}
+.irc-fg25 {
+	color: #2e0047;
+}
+.irc-fg26 {
+	color: #470047;
+}
+.irc-fg27 {
+	color: #47002a;
+}
+.irc-fg28 {
+	color: #740000;
+}
+.irc-fg29 {
+	color: #743a00;
+}
+.irc-fg30 {
+	color: #747400;
+}
+.irc-fg31 {
+	color: #517400;
+}
+.irc-fg32 {
+	color: #007400;
+}
+.irc-fg33 {
+	color: #007449;
+}
+.irc-fg34 {
+	color: #007474;
+}
+.irc-fg35 {
+	color: #004074;
+}
+.irc-fg36 {
+	color: #000074;
+}
+.irc-fg37 {
+	color: #4b0074;
+}
+.irc-fg38 {
+	color: #740074;
+}
+.irc-fg39 {
+	color: #740045;
+}
+.irc-fg40 {
+	color: #b50000;
+}
+.irc-fg41 {
+	color: #b56300;
+}
+.irc-fg42 {
+	color: #b5b500;
+}
+.irc-fg43 {
+	color: #7db500;
+}
+.irc-fg44 {
+	color: #00b500;
+}
+.irc-fg45 {
+	color: #00b571;
+}
+.irc-fg46 {
+	color: #00b5b5;
+}
+.irc-fg47 {
+	color: #0063b5;
+}
+.irc-fg48 {
+	color: #0000b5;
+}
+.irc-fg49 {
+	color: #7500b5;
+}
+.irc-fg50 {
+	color: #b500b5;
+}
+.irc-fg51 {
+	color: #b5006b;
+}
+.irc-fg52 {
+	color: #f00;
+}
+.irc-fg53 {
+	color: #ff8c00;
+}
+.irc-fg54 {
+	color: #ff0;
+}
+.irc-fg55 {
+	color: #b2ff00;
+}
+.irc-fg56 {
+	color: #0f0;
+}
+.irc-fg57 {
+	color: #00ffa0;
+}
+.irc-fg58 {
+	color: #0ff;
+}
+.irc-fg59 {
+	color: #008cff;
+}
+.irc-fg60 {
+	color: #00f;
+}
+.irc-fg61 {
+	color: #a500ff;
+}
+.irc-fg62 {
+	color: #f0f;
+}
+.irc-fg63 {
+	color: #ff0098;
+}
+.irc-fg64 {
+	color: #ff5959;
+}
+.irc-fg65 {
+	color: #ffb459;
+}
+.irc-fg66 {
+	color: #ffff71;
+}
+.irc-fg67 {
+	color: #cfff60;
+}
+.irc-fg68 {
+	color: #6fff6f;
+}
+.irc-fg69 {
+	color: #65ffc9;
+}
+.irc-fg70 {
+	color: #6dffff;
+}
+.irc-fg71 {
+	color: #59b4ff;
+}
+.irc-fg72 {
+	color: #5959ff;
+}
+.irc-fg73 {
+	color: #c459ff;
+}
+.irc-fg74 {
+	color: #f6f;
+}
+.irc-fg75 {
+	color: #ff59bc;
+}
+.irc-fg76 {
+	color: #ff9c9c;
+}
+.irc-fg77 {
+	color: #ffd39c;
+}
+.irc-fg78 {
+	color: #ffff9c;
+}
+.irc-fg79 {
+	color: #e2ff9c;
+}
+.irc-fg80 {
+	color: #9cff9c;
+}
+.irc-fg81 {
+	color: #9cffdb;
+}
+.irc-fg82 {
+	color: #9cffff;
+}
+.irc-fg83 {
+	color: #9cd3ff;
+}
+.irc-fg84 {
+	color: #9c9cff;
+}
+.irc-fg85 {
+	color: #dc9cff;
+}
+.irc-fg86 {
+	color: #ff9cff;
+}
+.irc-fg87 {
+	color: #ff94d3;
+}
+.irc-fg88 {
+	color: #000;
+}
+.irc-fg89 {
+	color: #131313;
+}
+.irc-fg90 {
+	color: #282828;
+}
+.irc-fg91 {
+	color: #363636;
+}
+.irc-fg92 {
+	color: #4d4d4d;
+}
+.irc-fg93 {
+	color: #656565;
+}
+.irc-fg94 {
+	color: #818181;
+}
+.irc-fg95 {
+	color: #9f9f9f;
+}
+.irc-fg96 {
+	color: #bcbcbc;
+}
+.irc-fg97 {
+	color: #e2e2e2;
+}
+.irc-fg98 {
+	color: #fff;
+}
+.irc-bg16 {
+	background-color: #470000;
+}
+.irc-bg17 {
+	background-color: #472100;
+}
+.irc-bg18 {
+	background-color: #474700;
+}
+.irc-bg19 {
+	background-color: #324700;
+}
+.irc-bg20 {
+	background-color: #004700;
+}
+.irc-bg21 {
+	background-color: #00472c;
+}
+.irc-bg22 {
+	background-color: #004747;
+}
+.irc-bg23 {
+	background-color: #002747;
+}
+.irc-bg24 {
+	background-color: #000047;
+}
+.irc-bg25 {
+	background-color: #2e0047;
+}
+.irc-bg26 {
+	background-color: #470047;
+}
+.irc-bg27 {
+	background-color: #47002a;
+}
+.irc-bg28 {
+	background-color: #740000;
+}
+.irc-bg29 {
+	background-color: #743a00;
+}
+.irc-bg30 {
+	background-color: #747400;
+}
+.irc-bg31 {
+	background-color: #517400;
+}
+.irc-bg32 {
+	background-color: #007400;
+}
+.irc-bg33 {
+	background-color: #007449;
+}
+.irc-bg34 {
+	background-color: #007474;
+}
+.irc-bg35 {
+	background-color: #004074;
+}
+.irc-bg36 {
+	background-color: #000074;
+}
+.irc-bg37 {
+	background-color: #4b0074;
+}
+.irc-bg38 {
+	background-color: #740074;
+}
+.irc-bg39 {
+	background-color: #740045;
+}
+.irc-bg40 {
+	background-color: #b50000;
+}
+.irc-bg41 {
+	background-color: #b56300;
+}
+.irc-bg42 {
+	background-color: #b5b500;
+}
+.irc-bg43 {
+	background-color: #7db500;
+}
+.irc-bg44 {
+	background-color: #00b500;
+}
+.irc-bg45 {
+	background-color: #00b571;
+}
+.irc-bg46 {
+	background-color: #00b5b5;
+}
+.irc-bg47 {
+	background-color: #0063b5;
+}
+.irc-bg48 {
+	background-color: #0000b5;
+}
+.irc-bg49 {
+	background-color: #7500b5;
+}
+.irc-bg50 {
+	background-color: #b500b5;
+}
+.irc-bg51 {
+	background-color: #b5006b;
+}
+.irc-bg52 {
+	background-color: #f00;
+}
+.irc-bg53 {
+	background-color: #ff8c00;
+}
+.irc-bg54 {
+	background-color: #ff0;
+}
+.irc-bg55 {
+	background-color: #b2ff00;
+}
+.irc-bg56 {
+	background-color: #0f0;
+}
+.irc-bg57 {
+	background-color: #00ffa0;
+}
+.irc-bg58 {
+	background-color: #0ff;
+}
+.irc-bg59 {
+	background-color: #008cff;
+}
+.irc-bg60 {
+	background-color: #00f;
+}
+.irc-bg61 {
+	background-color: #a500ff;
+}
+.irc-bg62 {
+	background-color: #f0f;
+}
+.irc-bg63 {
+	background-color: #ff0098;
+}
+.irc-bg64 {
+	background-color: #ff5959;
+}
+.irc-bg65 {
+	background-color: #ffb459;
+}
+.irc-bg66 {
+	background-color: #ffff71;
+}
+.irc-bg67 {
+	background-color: #cfff60;
+}
+.irc-bg68 {
+	background-color: #6fff6f;
+}
+.irc-bg69 {
+	background-color: #65ffc9;
+}
+.irc-bg70 {
+	background-color: #6dffff;
+}
+.irc-bg71 {
+	background-color: #59b4ff;
+}
+.irc-bg72 {
+	background-color: #5959ff;
+}
+.irc-bg73 {
+	background-color: #c459ff;
+}
+.irc-bg74 {
+	background-color: #f6f;
+}
+.irc-bg75 {
+	background-color: #ff59bc;
+}
+.irc-bg76 {
+	background-color: #ff9c9c;
+}
+.irc-bg77 {
+	background-color: #ffd39c;
+}
+.irc-bg78 {
+	background-color: #ffff9c;
+}
+.irc-bg79 {
+	background-color: #e2ff9c;
+}
+.irc-bg80 {
+	background-color: #9cff9c;
+}
+.irc-bg81 {
+	background-color: #9cffdb;
+}
+.irc-bg82 {
+	background-color: #9cffff;
+}
+.irc-bg83 {
+	background-color: #9cd3ff;
+}
+.irc-bg84 {
+	background-color: #9c9cff;
+}
+.irc-bg85 {
+	background-color: #dc9cff;
+}
+.irc-bg86 {
+	background-color: #ff9cff;
+}
+.irc-bg87 {
+	background-color: #ff94d3;
+}
+.irc-bg88 {
+	background-color: #000;
+}
+.irc-bg89 {
+	background-color: #131313;
+}
+.irc-bg90 {
+	background-color: #282828;
+}
+.irc-bg91 {
+	background-color: #363636;
+}
+.irc-bg92 {
+	background-color: #4d4d4d;
+}
+.irc-bg93 {
+	background-color: #656565;
+}
+.irc-bg94 {
+	background-color: #818181;
+}
+.irc-bg95 {
+	background-color: #9f9f9f;
+}
+.irc-bg96 {
+	background-color: #bcbcbc;
+}
+.irc-bg97 {
+	background-color: #e2e2e2;
+}
+.irc-bg98 {
+	background-color: #fff;
+}
+
+.irc-bold {
+	font-weight: bold;
+}
+
+.irc-underline {
+	text-decoration: underline;
+}
+
+.irc-strikethrough {
+	text-decoration: line-through;
+}
+
+.irc-underline.irc-strikethrough {
+	text-decoration: underline line-through;
+}
+
+.irc-italic {
+	font-style: italic;
+}
diff --git a/client/css/special-channels.css b/client/css/special-channels.css
new file mode 100644
index 00000000..8af19901
--- /dev/null
+++ b/client/css/special-channels.css
@@ -0,0 +1,19 @@
+#chat table.channel-list,
+#chat table.ban-list,
+#chat table.invite-list,
+#chat table.ignore-list {
+	margin: 5px 10px;
+	width: calc(100% - 30px);
+}
+
+#chat table.channel-list th,
+#chat table.ban-list th,
+#chat table.invite-list th,
+#chat table.ignore-list th,
+#chat table.channel-list td,
+#chat table.ban-list td,
+#chat table.invite-list td {
+	padding: 5px;
+	vertical-align: top;
+	border-bottom: #eee 1px solid;
+}
diff --git a/client/css/style.css b/client/css/style.css
index 864451f7..b4de304d 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -40,6 +40,12 @@
 
 	/* Color of the progress bar that appears as a file is being uploaded to the server. Defaults to button color */
 	--upload-progressbar-color: var(--button-color);
+
+	/* Used to fade out long text in channel list and topic */
+	--fade-long-text: linear-gradient(to left, transparent, black 20px);
+
+	/* Used for connect, settings, help pages */
+	--page-content-width: 480px;
 }
 
 ::placeholder {
@@ -70,17 +76,6 @@ img {
 	vertical-align: middle;
 }
 
-.sr-only {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	margin: -1px;
-	padding: 0;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	border: 0;
-}
-
 abbr[title] {
 	cursor: help;
 }
@@ -176,23 +171,6 @@ pre {
 	border-radius: 4px;
 }
 
-kbd {
-	display: inline-block;
-	font-family: inherit;
-	line-height: 1em;
-	min-width: 28px; /* Ensure 1-char keys have the same width */
-	margin: 0 1px;
-	padding: 4px 6px;
-	color: #444;
-	text-align: center;
-	text-shadow: 0 1px 0 #fff;
-	background-color: white;
-	background-image: linear-gradient(180deg, rgb(0 0 0 / 5%), transparent);
-	border: 1px solid #bbb;
-	border-radius: 4px;
-	box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
-}
-
 p {
 	margin: 0 0 10px;
 }
@@ -248,14 +226,6 @@ p {
 	text-transform: none;
 }
 
-.container {
-	padding: 0 15px;
-	margin-bottom: 20px;
-	width: 480px;
-	align-self: center;
-	touch-action: pan-y;
-}
-
 #js-copy-hack,
 #loading pre,
 #help .container,
@@ -284,306 +254,6 @@ p {
 	display: inline-block;
 }
 
-/* Icons */
-
-#viewport .lt::before,
-#viewport .rt::before,
-#chat button.mentions::before,
-#chat button.close::before,
-#chat button.menu::before,
-#chat button.search::before,
-.channel-list-item::before,
-#footer .icon,
-#chat .count::before,
-#connect .extra-help,
-#settings .extra-help,
-#settings #play::before,
-#form #upload::before,
-#form #submit::before,
-#chat .msg[data-type="away"] .from::before,
-#chat .msg[data-type="back"] .from::before,
-#chat .msg[data-type="invite"] .from::before,
-#chat .msg[data-type="join"] .from::before,
-#chat .msg[data-type="kick"] .from::before,
-#chat .msg[data-type="login"] .from::before,
-#chat .msg[data-type="logout"] .from::before,
-#chat .msg[data-type="part"] .from::before,
-#chat .msg[data-type="quit"] .from::before,
-#chat .msg[data-type="topic"] .from::before,
-#chat .msg[data-type="mode_channel"] .from::before,
-#chat .msg[data-type="mode_user"] .from::before,
-#chat .msg[data-type="mode"] .from::before,
-#chat .msg[data-command="motd"] .from::before,
-#chat .msg[data-command="help"] .from::before,
-#chat .msg[data-command="info"] .from::before,
-#chat .msg[data-type="ctcp"] .from::before,
-#chat .msg[data-type="ctcp_request"] .from::before,
-#chat .msg[data-type="whois"] .from::before,
-#chat .msg[data-type="nick"] .from::before,
-#chat .msg[data-type="action"] .from::before,
-#chat .msg[data-type="plugin"] .from::before,
-#chat .msg[data-type="raw"] .from::before,
-#chat .msg-statusmsg span::before,
-#chat .msg-shown-in-active span::before,
-#chat .toggle-button::after,
-#chat .toggle-content .more-caret::before,
-#chat .scroll-down-arrow::after,
-#chat .topic-container .save-topic span::before,
-#version-checker::before,
-.context-menu-item::before,
-#help .website-link::before,
-#help .documentation-link::before,
-#help .report-issue-link::before,
-#image-viewer .previous-image-btn::before,
-#image-viewer .next-image-btn::before,
-#image-viewer .open-btn::before,
-.channel-list-item .not-secure-icon::before,
-.channel-list-item .not-connected-icon::before,
-.channel-list-item .parted-channel-icon::before,
-.jump-to-input::before,
-.password-container .reveal-password span,
-#sidebar .collapse-network-icon::before {
-	font: normal normal normal 14px/1 FontAwesome;
-	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-#viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ }
-#viewport .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
-#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
-#chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
-#chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
-#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
-
-.context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
-.context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
-.context-menu-close::before { content: "\f00d"; /* http://fontawesome.io/icon/times/ */ }
-.context-menu-list::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
-.context-menu-disconnect::before { content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */ }
-.context-menu-connect::before { content: "\f0c1"; /* https://fontawesome.com/icons/link?style=solid */ }
-.context-menu-action-whois::before { content: "\f05a"; /* http://fontawesome.io/icon/info-circle/  */ }
-.context-menu-action-ignore::before { content: "\f506"; /* https://fontawesome.com/icons/user-slash?style=solid  */ }
-.context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
-.context-menu-action-set-mode::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
-.context-menu-action-revoke-mode::before { content: "\f068"; /* http://fontawesome.io/icon/minus/ */ }
-.context-menu-network::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ }
-.context-menu-edit::before { content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */ }
-.context-menu-clear-history::before { content: "\f1f8"; /* https://fontawesome.com/icons/trash?style=solid */ }
-.context-menu-mute::before { content: "\f6a9"; /* https://fontawesome.com/v5.15/icons/volume-mute?style=solid */ }
-
-.channel-list-item .not-secure-icon::before {
-	content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
-}
-
-.channel-list-item .not-connected-icon::before,
-.channel-list-item .parted-channel-icon::before {
-	content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */
-}
-
-.context-menu-query::before,
-.context-menu-action-query::before,
-.channel-list-item[data-type="query"]::before {
-	content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */
-}
-
-.context-menu-chan::before,
-.channel-list-item[data-type="channel"]::before { content: "\f086"; /* http://fontawesome.io/icon/comments/ */ }
-
-.channel-list-item[data-type="special"]::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
-
-.channel-list-item.has-draft:not(.active):not([data-type="lobby"])::before {
-	content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */
-}
-
-#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
-#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
-#footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
-
-#form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ }
-#form #submit::before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ }
-
-#chat .msg[data-type="away"] .from::before,
-#chat .msg[data-type="back"] .from::before {
-	content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */
-	color: #7f8c8d;
-}
-
-#help .website-link::before,
-#help .documentation-link::before,
-#help .report-issue-link::before {
-	display: inline-block;
-	margin-right: 5px;
-
-	/* These 2 directives are loosely taken from .fa-fw */
-	width: 1.35em;
-	text-align: center;
-}
-
-#help .website-link::before { content: "\f0ac"; /* http://fontawesome.io/icon/globe/ */ }
-#help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
-#help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
-
-#chat .msg[data-type="invite"] .from::before {
-	content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="login"] .from::before {
-	content: "\f007"; /* https://fontawesome.com/icons/user?style=solid */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="logout"] .from::before {
-	content: "\f007"; /* https://fontawesome.com/icons/user?style=solid */
-	color: #ff4136;
-}
-
-#chat .msg[data-type="part"] .from::before,
-#chat .msg[data-type="quit"] .from::before {
-	content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
-	color: #ff4136;
-	display: inline-block;
-	transform: rotate(180deg);
-}
-
-#chat .msg[data-type="topic"] .from::before {
-	content: "\f0a1"; /* http://fontawesome.io/icon/bullhorn/ */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="mode_channel"] .from::before,
-#chat .msg[data-type="mode_user"] .from::before,
-#chat .msg[data-type="mode"] .from::before {
-	content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */
-	color: #2ecc40;
-}
-
-#chat .msg[data-command="motd"] .from::before {
-	content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */
-	color: var(--body-color-muted);
-}
-
-#chat .msg[data-command="help"] .from::before {
-	content: "\f059"; /* https://fontawesome.com/icons/question-circle?style=solid */
-	color: var(--body-color-muted);
-}
-
-#chat .msg[data-command="info"] .from::before {
-	content: "\f05a"; /* https://fontawesome.com/icons/info-circle?style=solid */
-	color: var(--body-color-muted);
-}
-
-#chat .msg[data-type="ctcp"] .from::before,
-#chat .msg[data-type="ctcp_request"] .from::before {
-	content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */
-	color: var(--body-color-muted);
-}
-
-#chat .msg[data-type="whois"] .from::before {
-	content: "\f007"; /* http://fontawesome.io/icon/user/ */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="nick"] .from::before {
-	content: "\f007"; /* http://fontawesome.io/icon/user/ */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="join"] .from::before {
-	content: "\f2f6"; /* https://fontawesome.com/icons/sign-in-alt?style=solid */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="kick"] .from::before {
-	content: "\f05e"; /* http://fontawesome.io/icon/ban/ */
-	color: #ff4136;
-}
-
-#chat .msg[data-type="raw"] .from::before {
-	content: "\f101"; /* https://fontawesome.com/icons/angle-double-right?style=solid */
-}
-
-#chat .msg.self[data-type="raw"] .from::before {
-	content: "\f359"; /* https://fontawesome.com/icons/arrow-alt-circle-left?style=solid */
-	color: #2ecc40;
-}
-
-#chat .msg[data-type="action"] .from::before {
-	content: "\f005"; /* http://fontawesome.io/icon/star/ */
-}
-
-#chat .msg[data-type="plugin"] .from::before {
-	content: "\f1e6"; /* http://fontawesome.io/icon/plug/ */
-	transform: rotate(45deg);
-	display: inline-block;
-	padding: 1px;
-}
-
-#chat .msg-statusmsg,
-#chat .msg-shown-in-active {
-	cursor: help;
-	margin-right: 5px;
-}
-
-#chat .msg-statusmsg span::before,
-#chat .msg-shown-in-active span::before {
-	font-size: 10px;
-	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
-}
-
-#chat .msg-statusmsg {
-	border-radius: 2px;
-	padding: 2px 4px;
-	background-color: #ff9e18;
-	color: #222;
-}
-
-#chat .toggle-button {
-	display: inline-block;
-	transition: opacity 0.2s, transform 0.2s;
-
-	/* These 2 directives are loosely taken from .fa-fw */
-	width: 1.35em;
-	text-align: center;
-}
-
-#chat .toggle-button::after {
-	content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
-}
-
-#chat .count::before {
-	color: #cfcfcf;
-	content: "\f002"; /* http://fontawesome.io/icon/search/ */
-	position: absolute;
-	right: 13px;
-	line-height: 45px;
-}
-
-#connect .extra-help::before,
-#settings .extra-help::before {
-	content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
-}
-
-#settings #play::before {
-	content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
-	margin-right: 9px;
-}
-
-#image-viewer .previous-image-btn::before {
-	content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
-}
-
-#image-viewer .next-image-btn::before {
-	content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
-}
-
-#image-viewer .open-btn::before {
-	content: "\f35d"; /* https://fontawesome.com/icons/external-link-alt?style=solid */
-}
-
-/* End icons */
-
 #viewport {
 	display: flex;
 	height: 100%;
@@ -601,101 +271,14 @@ p {
 	opacity: 0.6;
 }
 
-#viewport .lt,
-#viewport .rt,
-#chat button.mentions,
-#chat button.search,
-#chat button.menu,
-#chat button.close {
-	color: #607992;
-	display: flex;
-	font-size: 14px;
-	line-height: 1;
-	height: 36px;
-	width: 36px;
-	margin-top: 6px;
-	flex-shrink: 0;
-}
-
-#viewport .lt::before,
-#viewport .rt::before,
-#chat button.mentions::before,
-#chat button.search::before,
-#chat button.menu::before,
-#chat button.close::before {
-	width: 36px;
-	line-height: 36px; /* Fix alignment in Microsoft Edge */
-}
-
-/* Channel list button stays fixed when scrolling... */
-#viewport .lt {
-	position: fixed;
-}
-
-/* ... Except on chat windows, relative to include the notification dot */
-#viewport #chat .lt {
-	position: relative;
-}
-
-/* Notification dot on the top right corner of the menu icon */
-#viewport .lt::after {
-	content: "";
-	position: absolute;
-	top: 9px;
-	right: 7px;
-	background-color: #e74c3c;
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 2px solid var(--window-bg-color);
-	opacity: 0;
-	transition: opacity 0.2s;
-	background-clip: padding-box; /* Fix border-radius bleeding color */
-}
-
-#viewport.notified .lt::after {
-	opacity: 1;
-}
-
 #viewport.userlist-open #chat .userlist {
 	display: flex;
 }
 
-#sidebar {
-	display: none;
-	flex-direction: column;
-	width: 220px;
-	max-height: 100%;
-	will-change: transform;
-	color: #b7c5d1; /* same as .channel-list-item color */
-}
-
 #viewport.menu-open #sidebar {
 	display: flex;
 }
 
-#sidebar .scrollable-area {
-	overflow-x: auto;
-	flex-grow: 1;
-	touch-action: pan-y;
-	scrollbar-width: thin;
-	overscroll-behavior: contain;
-	-webkit-overflow-scrolling: touch;
-}
-
-#sidebar .logo-container {
-	text-align: center;
-}
-
-#sidebar .logo,
-#sidebar .logo-inverted {
-	height: 45px;
-}
-
-#sidebar .logo {
-	display: none;
-}
-
 .channel-list-item,
 #sidebar .empty {
 	font-size: 14px;
@@ -709,8 +292,6 @@ p {
 }
 
 /* Channels/queries must be white on hover and active */
-#footer button:hover,
-#footer button.active,
 .channel-list-item:hover,
 .channel-list-item.active {
 	color: #fff;
@@ -730,50 +311,6 @@ background on hover (unless active) */
 	cursor: default;
 }
 
-/* Remove background on hovered/active channel when sorting/drag-and-dropping */
-.ui-sortable-ghost,
-.ui-sortable-dragging .channel-list-item,
-.ui-sortable-dragging,
-.ui-sortable-dragging:hover,
-.ui-sortable-dragging.active,
-.ui-sortable-dragging-touch-cue .channel-list-item,
-.ui-sortable-dragging-touch-cue,
-.ui-sortable-dragging-touch-cue:hover,
-.ui-sortable-dragging-touch-cue.active {
-	background: transparent;
-}
-
-.ui-sortable-ghost::after,
-.ui-sortable-dragging-touch-cue:not(.ui-sortable-dragging)::after {
-	background: var(--body-bg-color);
-	border: 1px dashed #99a2b4;
-	border-radius: 6px;
-	content: " ";
-	display: block;
-	position: absolute;
-	left: 10px;
-	top: 0;
-	bottom: 0;
-	right: 10px;
-}
-
-.ui-sortable-dragging-touch-cue:not(.ui-sortable-ghost)::after {
-	background: transparent;
-}
-
-#sidebar .network {
-	position: relative;
-	margin-bottom: 20px;
-	touch-action: pan-y;
-}
-
-#sidebar .empty {
-	flex-grow: 1;
-	line-height: 1.6;
-	padding: 40px 20px;
-	text-align: center;
-}
-
 .channel-list-item[data-type="lobby"] {
 	color: #84ce88;
 	font-size: 15px;
@@ -787,202 +324,6 @@ background on hover (unless active) */
 	overflow: hidden;
 }
 
-.channel-list-item[data-type="lobby"]:hover,
-.channel-list-item[data-type="lobby"].active {
-	color: #c0f8c3;
-}
-
-.channel-list-item .not-connected-tooltip,
-.channel-list-item .not-secure-tooltip,
-.channel-list-item .parted-channel-tooltip {
-	margin: 0 8px;
-}
-
-.channel-list-item.not-secure {
-	color: #f39c12;
-}
-
-.channel-list-item.not-secure:hover,
-.channel-list-item.not-secure.active {
-	color: #f8c572;
-}
-
-.channel-list-item.not-connected,
-.channel-list-item.parted-channel {
-	color: #e74c3c;
-}
-
-.channel-list-item.not-connected:hover,
-.channel-list-item.not-connected.active,
-.channel-list-item.parted-channel:hover,
-.channel-list-item.parted-channel.active {
-	color: #f1978e;
-}
-
-.channel-list-item.is-muted {
-	opacity: 0.5;
-}
-
-.channel-list-item::before {
-	width: 14px;
-	margin-right: 12px;
-	line-height: 18px;
-}
-
-.channel-list-item .name {
-	position: relative;
-	flex-grow: 1;
-	overflow: hidden;
-	white-space: nowrap;
-	margin-right: 5px;
-}
-
-.header .topic,
-.channel-list-item .name {
-	mask-image: linear-gradient(to left, transparent, black 20px);
-}
-
-.channel-list-item .badge,
-#sidebar .add-channel-tooltip,
-.channel-list-item .close-tooltip {
-	flex-shrink: 0;
-	line-height: 1;
-}
-
-.channel-list-item .badge {
-	background: rgb(255 255 255 / 6%);
-	border-radius: 3px;
-	color: #afb6c0;
-	font-size: 10px;
-	padding: 4px 6px;
-	transition: background-color 0.2s, color 0.2s;
-}
-
-.channel-list-item .badge:empty {
-	display: none;
-}
-
-.channel-list-item .badge.highlight {
-	background: #fff;
-	color: #49505a;
-}
-
-.channel-list-item .close {
-	width: 18px;
-	height: 18px;
-	display: none;
-	transition: opacity 0.2s, background-color 0.2s;
-}
-
-.channel-list-item .close::before {
-	font-size: 20px;
-	font-weight: normal;
-	display: inline-block;
-	line-height: 16px;
-	text-align: center;
-	content: "×";
-	color: #fff;
-}
-
-.channel-list-item.active .close {
-	opacity: 0.4;
-	display: unset;
-}
-
-.channel-list-item.active .close:hover {
-	opacity: 1;
-}
-
-.channel-list-item[data-type="lobby"] .add-channel {
-	border-radius: 3px;
-	width: 18px;
-	height: 18px;
-	opacity: 0.4;
-	transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
-}
-
-.channel-list-item[data-type="lobby"] .add-channel::before {
-	font-size: 20px;
-	font-weight: normal;
-	display: inline-block;
-	line-height: 16px;
-	text-align: center;
-	content: "+";
-	color: #fff;
-}
-
-.channel-list-item[data-type="lobby"] .add-channel:hover {
-	opacity: 1;
-}
-
-.channel-list-item[data-type="lobby"] .add-channel.opened {
-	/* translateZ(0) enables hardware acceleration, this is to avoid jittering when animating */
-	transform: rotate(45deg) translateZ(0);
-}
-
-#sidebar .network .collapse-network {
-	width: 40px;
-	opacity: 0.4;
-	padding-left: 11px;
-	transition: opacity 0.2s;
-	flex-shrink: 0;
-}
-
-#sidebar .network .collapse-network-icon {
-	display: block;
-	width: 20px;
-	height: 20px;
-	transition: transform 0.2s;
-}
-
-#sidebar .network.collapsed .collapse-network-icon {
-	transform: rotate(-90deg);
-}
-
-#sidebar .network .collapse-network-icon::before {
-	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
-	color: #fff;
-}
-
-#sidebar .collapse-network:hover {
-	opacity: 1;
-}
-
-#footer {
-	height: 45px;
-	font-size: 14px;
-	flex-shrink: 0;
-	display: flex;
-	justify-content: center;
-}
-
-#footer button {
-	color: #b7c5d1;
-	display: inline-block;
-	width: 45px;
-	height: 100%;
-	border-radius: 5px;
-}
-
-#footer .help.notified::after {
-	content: "\f021";
-	position: absolute;
-	bottom: 10px;
-	right: 7px;
-	padding: 2px;
-	font-size: 10px;
-	border-radius: 50%;
-	color: var(--link-color);
-	background: var(--body-bg-color);
-}
-
-.window li,
-.window p,
-.window label,
-#settings .error {
-	font-size: 14px;
-}
-
 .input {
 	background-color: white;
 	border: 1px solid #cdd3da;
@@ -1014,52 +355,6 @@ textarea.input {
 	line-height: 1.5;
 }
 
-.window {
-	background: var(--window-bg-color);
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	position: relative;
-	overflow-y: auto;
-	height: 100%;
-	scrollbar-width: thin;
-	overscroll-behavior: contain;
-	-webkit-overflow-scrolling: touch;
-}
-
-#loading,
-#chat .chat-view {
-	/* flexbox does not seem to scroll without doing this */
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	top: 0;
-}
-
-.window h1 {
-	font-size: 36px;
-}
-
-.window h2 {
-	border-bottom: 1px solid currentcolor;
-	color: var(--window-heading-color);
-	font-size: 22px;
-	margin: 30px 0 10px;
-	padding-bottom: 7px;
-}
-
-.window h2 small {
-	font-size: 16px;
-	line-height: 30px;
-}
-
-.window h3 {
-	color: var(--window-heading-color);
-	font-size: 18px;
-	margin: 20px 0 10px;
-}
-
 .header {
 	line-height: 45px;
 	height: 45px;
@@ -1069,88 +364,6 @@ textarea.input {
 	overflow: hidden;
 }
 
-#chat .header {
-	border-bottom: 1px solid #e7e7e7;
-}
-
-.header .title {
-	font-size: 15px;
-	padding-left: 6px;
-	flex-shrink: 1;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.topic-container {
-	position: relative;
-	flex-grow: 1;
-	padding-left: 10px;
-}
-
-.header .topic {
-	color: var(--body-color-muted);
-	margin-left: 8px;
-	word-break: break-all;
-	flex-grow: 1;
-	overflow: hidden;
-	font-size: 14px;
-	flex-shrink: 99999999;
-	min-width: 25px;
-}
-
-.header .topic.empty {
-	min-width: 0;
-}
-
-.header .topic-input {
-	color: inherit;
-	background: transparent;
-	border: 1px solid #cdd3da;
-	border-radius: 2px;
-	padding-right: 37px;
-	padding-left: 10px;
-	width: 100%;
-	height: 35px;
-	overflow: hidden;
-	font-size: 14px;
-	line-height: normal;
-	outline: none;
-}
-
-.topic-container .save-topic {
-	position: absolute;
-	top: 6px;
-	right: 0;
-}
-
-.topic-container .save-topic span {
-	font-size: 16px;
-	color: #607992;
-	width: 35px;
-	height: 35px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	appearance: none;
-}
-
-.topic-container .save-topic span:hover {
-	opacity: 0.6;
-}
-
-#chat {
-	overflow: hidden;
-	flex: 1 0 auto;
-	position: relative;
-}
-
-#chat .chat-view {
-	display: flex;
-	flex-direction: column;
-}
-
 #chat .msg[data-type="condensed"] {
 	flex-wrap: wrap;
 }
@@ -1213,173 +426,17 @@ textarea.input {
 	outline: none;
 }
 
-#chat .userlist {
-	border-left: 1px solid #e7e7e7;
-	width: 180px;
-	display: none;
-	flex-direction: column;
-	flex-shrink: 0;
-	touch-action: pan-y;
-}
-
 /**
   * Toggled via JavaScript
   */
-#sidebar .join-form {
-	padding: 0 18px 8px;
-}
-
-#sidebar .join-form .input {
-	display: block;
-	margin: 5px auto;
-}
-
-#sidebar .join-form .btn {
-	display: block;
-	width: 100%;
-	margin: auto;
-}
-
-#chat .show-more {
-	padding: 10px;
-	padding-top: 15px;
-	padding-bottom: 0;
-	width: 100%;
-}
-
-#chat .show-more .btn {
-	width: 100%;
-	margin: 0;
-}
-
-.scroll-down {
-	position: absolute;
-	bottom: 16px;
-	right: 16px;
-	z-index: 2;
-	pointer-events: none;
-	opacity: 0;
-	transform: translateY(16px);
-	transition: transform 0.2s, opacity 0.2s;
-	cursor: pointer;
-}
-
-.scroll-down-shown {
-	opacity: 1;
-	transform: none;
-	pointer-events: auto;
-}
-
-.scroll-down-arrow {
-	width: 36px;
-	height: 36px;
-	line-height: 34px;
-	border-radius: 50%;
-	background: var(--window-bg-color);
-	color: var(--button-color);
-	border: 2px solid var(--button-color);
-	text-align: center;
-	transition: background 0.2s, color 0.2s;
-	box-shadow: 0 6px 10px 0 rgb(0 0 0 / 15%);
-}
-
-.scroll-down:hover .scroll-down-arrow {
-	background: var(--button-color);
-	color: var(--button-text-color-hover);
-}
-
-.scroll-down-arrow::after {
-	content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
-}
-
 .userlist-open .chat-view[data-type="channel"] .scroll-down {
 	right: 196px;
 }
 
-#chat .messages {
-	padding: 10px 0;
-	touch-action: pan-y;
-}
-
 #chat .chat-view:not([data-type="special"]) .messages {
 	margin-top: auto;
 }
 
-#chat .msg {
-	word-wrap: break-word;
-	word-break: break-word; /* Webkit-specific */
-	display: flex;
-	align-items: flex-start;
-	position: relative;
-}
-
-#chat .unread-marker {
-	position: relative;
-	text-align: center;
-	margin: 0 10px;
-	z-index: 0;
-	font-weight: bold;
-	font-size: 12px;
-}
-
-#chat .unread-marker::before {
-	position: absolute;
-	z-index: -1;
-	content: "";
-	left: 0;
-	right: 0;
-	top: 50%;
-	border-top: 1px solid var(--unread-marker-color);
-}
-
-#chat .unread-marker-text::before {
-	content: "New messages";
-	background-color: var(--window-bg-color);
-	color: var(--unread-marker-color);
-	padding: 0 10px;
-}
-
-#chat .date-marker {
-	position: relative;
-	text-align: center;
-	margin: 0 10px;
-	z-index: 0;
-	font-weight: bold;
-	font-size: 12px;
-}
-
-#chat .date-marker::before {
-	position: absolute;
-	z-index: -1;
-	content: "";
-	left: 0;
-	right: 0;
-	top: 50%;
-	border-top: 1px solid var(--date-marker-color);
-}
-
-#chat .date-marker-text::before {
-	content: attr(aria-label);
-	background-color: var(--window-bg-color);
-	color: var(--date-marker-color);
-	padding: 0 10px;
-}
-
-#chat .time,
-#chat .from,
-#chat .content {
-	padding: 3px 0;
-	flex: 0 0 auto;
-}
-
-#chat .time {
-	color: var(--body-color-muted);
-	padding-left: 10px;
-	width: 55px;
-	font-variant-numeric: tabular-nums;
-	box-sizing: content-box; /* highlights have a border-left */
-}
-
 #chat.time-12h .time,
 #chat.time-seconds .time {
 	width: 75px;
@@ -1389,33 +446,10 @@ textarea.input {
 	width: 90px;
 }
 
-#chat .from {
-	padding-right: 10px;
-	text-align: right;
-	width: 134px;
-	overflow: hidden;
-	white-space: nowrap;
-	position: relative;
-}
-
-#chat .content {
-	flex: 1 1 auto;
-	min-width: 0;
-	padding-left: 10px;
-	padding-right: 6px;
-	border-left: 1px solid #f6f6f6;
-	overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
-	text-align: left; /* so RTL text will still be aligned left, not right */
-}
-
 #chat .msg[data-type="unhandled"] .from {
 	color: var(--body-color-muted);
 }
 
-#chat .chat-view[data-type="special"] table th {
-	word-break: normal;
-}
-
 /* Parsed nicks and channels */
 
 #chat .user,
@@ -1434,39 +468,6 @@ textarea.input {
 	color: #50a656;
 }
 
-#chat.colored-nicks .user.color-1 { color: #107ead; }
-#chat.colored-nicks .user.color-2 { color: #a86500; }
-#chat.colored-nicks .user.color-3 { color: #008a3c; }
-#chat.colored-nicks .user.color-4 { color: #e00096; }
-#chat.colored-nicks .user.color-5 { color: #f0000c; }
-#chat.colored-nicks .user.color-6 { color: #000094; }
-#chat.colored-nicks .user.color-7 { color: #006441; }
-#chat.colored-nicks .user.color-8 { color: #00566e; }
-#chat.colored-nicks .user.color-9 { color: #e6006b; }
-#chat.colored-nicks .user.color-10 { color: #0d8766; }
-#chat.colored-nicks .user.color-11 { color: #006b3b; }
-#chat.colored-nicks .user.color-12 { color: #00857e; }
-#chat.colored-nicks .user.color-13 { color: #00465b; }
-#chat.colored-nicks .user.color-14 { color: #eb005a; }
-#chat.colored-nicks .user.color-15 { color: #e62600; }
-#chat.colored-nicks .user.color-16 { color: #0f8546; }
-#chat.colored-nicks .user.color-17 { color: #e60067; }
-#chat.colored-nicks .user.color-18 { color: #eb002b; }
-#chat.colored-nicks .user.color-19 { color: #eb003f; }
-#chat.colored-nicks .user.color-20 { color: #007a56; }
-#chat.colored-nicks .user.color-21 { color: #095092; }
-#chat.colored-nicks .user.color-22 { color: #000bde; }
-#chat.colored-nicks .user.color-23 { color: #008577; }
-#chat.colored-nicks .user.color-24 { color: #00367d; }
-#chat.colored-nicks .user.color-25 { color: #007e9e; }
-#chat.colored-nicks .user.color-26 { color: #006119; }
-#chat.colored-nicks .user.color-27 { color: #007ea8; }
-#chat.colored-nicks .user.color-28 { color: #3c8500; }
-#chat.colored-nicks .user.color-29 { color: #e6007e; }
-#chat.colored-nicks .user.color-30 { color: #c75300; }
-#chat.colored-nicks .user.color-31 { color: #eb0400; }
-#chat.colored-nicks .user.color-32 { color: #e60082; }
-
 #chat .self .content {
 	color: var(--body-color-muted);
 }
@@ -1482,49 +483,6 @@ textarea.input {
 	padding-left: 20px;
 }
 
-#chat table.channel-list,
-#chat table.ban-list,
-#chat table.invite-list,
-#chat table.ignore-list {
-	margin: 5px 10px;
-	width: calc(100% - 30px);
-}
-
-#chat table.channel-list th,
-#chat table.ban-list th,
-#chat table.invite-list th,
-#chat table.ignore-list th,
-#chat table.channel-list td,
-#chat table.ban-list td,
-#chat table.invite-list td {
-	padding: 5px;
-	vertical-align: top;
-	border-bottom: #eee 1px solid;
-}
-
-#chat table.channel-list .channel {
-	width: 80px;
-}
-
-#chat table.channel-list .channel,
-#chat table.channel-list .topic,
-#chat table.ban-list .hostmask,
-#chat table.ban-list .banned_by,
-#chat table.ban-list .banned_at,
-#chat table.ignore-list .hostmask,
-#chat table.ignore-list .when {
-	text-align: left;
-}
-
-#chat table.channel-list .users {
-	text-align: center;
-	width: 50px;
-}
-
-#chat.hide-motd .msg[data-command="motd"] {
-	display: none !important;
-}
-
 #chat .msg[data-type="monospace_block"] .text {
 	background: #f6f6f6;
 	display: inline-block;
@@ -1599,213 +557,6 @@ textarea.input {
 	transform: rotate(90deg);
 }
 
-#chat .preview {
-	display: flex; /* Fix odd margin added by inline-flex in .toggle-content */
-}
-
-#chat .toggle-content {
-	background: #f6f6f6;
-	border-radius: 5px;
-	max-width: 100%;
-	margin: 0;
-	margin-top: 6px;
-	overflow: hidden;
-	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
-	display: inline-flex !important;
-	align-items: flex-start;
-	white-space: normal;
-}
-
-/* This applies to images of preview-type-image and thumbnails of preview-type-link */
-#chat .toggle-content img {
-	max-width: 100%;
-	max-height: 128px;
-	display: block;
-	cursor: zoom-in;
-}
-
-#chat .toggle-content pre.prefetch-error {
-	padding: 0;
-	margin: 0;
-	color: inherit;
-	background-color: transparent;
-}
-
-#chat .toggle-content .prefetch-error {
-	display: none;
-}
-
-#chat .toggle-content.opened .prefetch-error {
-	display: inline;
-}
-
-/* This applies to thumbnails of preview-type-link only */
-#chat .toggle-content .thumb {
-	max-height: 54px;
-	max-width: 96px;
-}
-
-#chat .toggle-type-error,
-#chat .toggle-content .toggle-text {
-	padding: 8px 10px;
-}
-
-#chat .toggle-content .toggle-text {
-	white-space: nowrap;
-	overflow: hidden;
-	text-align: initial;
-}
-
-#chat .toggle-content.opened .toggle-text {
-	white-space: normal;
-}
-
-#chat .toggle-content .head {
-	display: flex;
-	align-items: flex-start;
-	font-weight: bold;
-}
-
-#chat .toggle-type-error,
-#chat .toggle-text .body {
-	color: #717171;
-}
-
-#chat .toggle-text a {
-	color: inherit;
-}
-
-#chat .toggle-text .overflowable {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	flex-grow: 1;
-}
-
-#chat .toggle-content .more {
-	color: var(--link-color);
-	font-weight: normal;
-	margin-left: 10px;
-	flex-shrink: 0;
-}
-
-#chat .toggle-content .more:hover {
-	text-decoration: underline;
-}
-
-#chat .toggle-content .more::after {
-	content: " " attr(aria-label);
-}
-
-#chat .toggle-content .more-caret {
-	display: inline-block;
-	transition: transform 0.2s;
-}
-
-#chat .toggle-content .more-caret::before {
-	content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
-}
-
-#chat audio {
-	width: 600px;
-	max-width: 100%;
-}
-
-#chat .toggle-type-video {
-	max-width: 640px;
-}
-
-#chat video {
-	max-width: 100%;
-	max-height: 240px;
-}
-
-/* Do not display an empty div when there are no previews. Useful for example in
-part/quit messages where we don't load previews (adds a blank line otherwise) */
-#chat .preview:empty {
-	display: none;
-}
-
-#chat .userlist .count {
-	background: #fafafa;
-	height: 45px;
-	flex-shrink: 0;
-	position: relative;
-}
-
-#chat .userlist .search {
-	color: var(--body-color);
-	appearance: none;
-	border: 0;
-	background: none;
-	font: inherit;
-	outline: 0;
-	padding: 13px;
-	padding-right: 30px;
-	width: 100%;
-}
-
-#chat .userlist .names {
-	flex-grow: 1;
-	overflow: auto;
-	overflow-x: hidden;
-	padding-bottom: 10px;
-	width: 100%;
-	touch-action: pan-y;
-	scrollbar-width: thin;
-	overscroll-behavior: contain;
-	-webkit-overflow-scrolling: touch;
-}
-
-#chat .names .user {
-	display: block;
-	line-height: 1.6;
-	padding: 0 16px;
-	white-space: nowrap;
-}
-
-#chat .user-mode {
-	margin-bottom: 15px;
-}
-
-#chat .user-mode::before {
-	background: var(--window-bg-color);
-	color: var(--body-color-muted);
-	display: block;
-	font-size: 0.85em;
-	line-height: 1.6;
-	padding: 5px 16px;
-	position: sticky;
-	top: 0;
-}
-
-#chat .user-mode.owner::before {
-	content: "Owners";
-}
-
-#chat .user-mode.admin::before {
-	content: "Administrators";
-}
-
-#chat .user-mode.op::before {
-	content: "Operators";
-}
-
-#chat .user-mode.half-op::before {
-	content: "Half-Operators";
-}
-
-#chat .user-mode.voice::before {
-	content: "Voiced";
-}
-
-#chat .user-mode.normal::before {
-	content: "Users";
-}
-
-#chat .user-mode-search::before {
-	content: "Search Results";
-}
-
 #loading {
 	display: flex;
 	font-size: 14px;
@@ -1837,7 +588,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	white-space: normal;
 }
 
-#sign-in .container,
 #loading-reload-container,
 #loading-status-container {
 	flex: 1 0 auto;
@@ -1856,151 +606,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: none; /* In dark themes, inverted logo must be used instead */
 }
 
-#sign-in label {
-	display: block;
-	margin-top: 10px;
-	width: 100%;
-}
-
-#sign-in .btn {
-	margin-top: 25px;
-}
-
-#sign-in .error {
-	color: #e74c3c;
-	margin-top: 1em;
-	width: 100%;
-}
-
-#connect .connect-row {
-	display: flex;
-}
-
-#connect .connect-row > .input,
-#connect .connect-row > .input-wrap {
-	flex-grow: 1;
-}
-
-#connect label {
-	width: 25%;
-	flex-shrink: 0;
-	margin-top: 11px;
-}
-
-#connect .tls {
-	width: 100%;
-	display: block;
-	margin-top: 6px;
-}
-
-#connect .tls input,
-#connect input[name="proxyEnabled"] {
-	margin: 3px 10px 0 0;
-}
-
-#connect\:host,
-#connect\:proxyHost {
-	width: 70%;
-}
-
-#connect\:port,
-#connect\:proxyPort {
-	width: 25%;
-}
-
-#connect\:portseparator,
-#connect\:proxyPortSeparator {
-	width: 5%;
-	text-align: center;
-	display: inline-block;
-}
-
-#connect .btn {
-	margin-top: 15px;
-	width: 100%;
-}
-
-#settings .apple-push-unsupported,
-#settings .settings-sync-panel {
-	padding: 10px;
-	margin-bottom: 16px;
-	border-radius: 2px;
-	background-color: #d9edf7;
-	color: #31708f;
-}
-
-#settings .settings-sync-panel p:last-child {
-	margin-bottom: 0;
-}
-
-#settings .settings-sync-panel .btn {
-	color: #007bff;
-	border-color: #007bff;
-	margin-bottom: 0;
-}
-
-#settings .settings-sync-panel .btn:hover,
-#settings .settings-sync-panel .btn:focus {
-	background-color: #007bff;
-	color: #fff;
-}
-
-#settings .settings-sync-panel .btn:active,
-#settings .settings-sync-panel .btn:focus {
-	box-shadow: 0 0 0 3px rgb(0 123 255 / 50%);
-}
-
-#settings .apple-push-unsupported a {
-	color: inherit;
-	text-decoration: underline;
-}
-
-#settings .opt {
-	display: block;
-	padding: 5px 0 5px 1px;
-}
-
-#settings .opt input {
-	margin-right: 6px;
-}
-
 #connect .extra-help,
 #settings .extra-help {
 	cursor: help;
 }
 
-#settings h2 .extra-help {
-	font-size: 0.8em;
-}
-
-#settings #play {
-	font-size: 14px;
-	transition: opacity 0.2s;
-	color: var(--window-heading-color);
-}
-
-#settings #play:hover {
-	opacity: 0.8;
-}
-
-#settings #change-password .error,
-#settings #change-password .success {
-	margin-bottom: 1em;
-}
-
-#settings #change-password .error {
-	color: #e74c3c;
-}
-
-#settings #change-password .success {
-	color: #2ecc40;
-}
-
-#settings .error {
-	color: #e74c3c;
-	margin-top: 0.2em;
-}
-
 .password-container {
 	position: relative;
 }
@@ -2009,14 +619,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	padding-right: 37px;
 }
 
-#sign-in .password-container {
-	width: 100%;
-}
-
-#sign-in .password-container .reveal-password {
-	top: 31px;
-}
-
 .password-container .reveal-password {
 	position: absolute;
 	top: 2px;
@@ -2048,249 +650,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	color: #ff4136;
 }
 
-#help .help-version-title {
-	display: flex;
-	justify-content: space-between;
-}
-
-#help .help-item {
-	display: table-row;
-	font-size: 14px;
-}
-
-#help .help-item .subject,
-#help .help-item .description {
-	display: table-cell;
-	padding-bottom: 15px;
-}
-
-#help .help-item .subject {
-	white-space: nowrap;
-	padding-right: 15px;
-}
-
-#help .help-item .subject.gesture {
-	font-weight: bold;
-}
-
-#help .help-item .description p {
-	margin-bottom: 0;
-}
-
-.whois {
-	display: grid;
-	grid-template-columns: max-content auto;
-	margin: 0;
-}
-
-.whois dt {
-	grid-column-start: 1;
-	margin-right: 20px;
-}
-
-.whois dd {
-	grid-column-start: 2;
-}
-
-.changelog-text {
-	line-height: 1.5;
-}
-
-.changelog-text p {
-	margin-bottom: 16px;
-}
-
-.window#changelog h3 {
-	font-size: 20px;
-	border-bottom: 1px solid currentcolor;
-	color: var(--window-heading-color);
-	margin: 30px 0 10px;
-	padding-bottom: 7px;
-}
-
-.window#chat-container {
-	/*
-		Chat has its own scrollbar, so remove the one on parent
-		This caused a performance issue in Chrome
-	*/
-	overflow: hidden;
-}
-
-#version-checker {
-	display: flex;
-	align-items: center;
-	padding: 10px;
-	margin-bottom: 16px;
-	border-radius: 2px;
-	transition: color 0.2s, background-color 0.2s;
-}
-
-#version-checker p,
-#version-checker button {
-	margin-bottom: 0;
-}
-
-#version-checker p {
-	flex: 1;
-	padding-top: 6px;
-	padding-bottom: 6px;
-}
-
-#version-checker::before {
-	margin-left: 6px;
-	margin-right: 12px;
-	font-size: 1.2em;
-}
-
-#version-checker.loading {
-	background-color: #d9edf7;
-	color: #31708f;
-}
-
-#version-checker.loading::before {
-	content: "\f253"; /* https://fontawesome.com/icons/hourglass-end?style=solid */
-}
-
-#version-checker.new-version,
-#version-checker.new-packages {
-	color: #8a6d3b;
-	background-color: #fcf8e3;
-}
-
-#version-checker.new-version::before,
-#version-checker.new-packages::before {
-	content: "\f164"; /* https://fontawesome.com/icons/thumbs-up?style=solid */
-}
-
-#version-checker.error {
-	color: #a94442;
-	background-color: #f2dede;
-}
-
-#version-checker.error::before {
-	content: "\f06a"; /* http://fontawesome.io/icon/exclamation-circle/ */
-}
-
-#version-checker.up-to-date {
-	background-color: #dff0d8;
-	color: #3c763d;
-}
-
-#version-checker.up-to-date::before {
-	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
-}
-
-#upload-progressbar {
-	background: var(--upload-progressbar-color);
-	box-shadow: 0 0 10px var(--upload-progressbar-color);
-	width: 0%;
-	height: 2px;
-	visibility: hidden;
-	position: absolute;
-	top: -1px; /* put it on top of #form's border */
-	left: 0;
-}
-
-#upload-progressbar.upload-progressbar-visible {
-	visibility: visible;
-	transition: 0.3s width ease-in-out;
-}
-
-#form {
-	flex: 0 0 auto;
-	border: 0;
-	border-top: 1px solid #e7e7e7;
-	border-radius: 0;
-	margin: 0;
-	padding: 6px;
-	background: white;
-	display: flex;
-	align-items: flex-end;
-	position: relative;
-}
-
-#user-visible-error {
-	font-size: 14px;
-	line-height: 1.5;
-	font-weight: 600;
-	padding: 10px;
-	word-spacing: 3px;
-	text-transform: uppercase;
-	background: #e74c3c;
-	color: #fff;
-	text-align: center;
-	cursor: pointer;
-}
-
-#form #nick {
-	background: #f6f6f6;
-	color: #666;
-	font-size: 13px;
-	margin: 4px;
-	line-height: 24px;
-	padding: 0 8px;
-	border-radius: 2px;
-	display: none;
-}
-
-.public #form #nick {
-	display: block;
-}
-
-#form #input {
-	background: transparent;
-	border: none;
-	font: inherit;
-	min-height: 19px; /* Required when computing input height at char deletion */
-	height: 19px;
-	max-height: 95px; /* min-height/height x number of lines maximum */
-	line-height: 19px; /* should match height */
-	outline: none;
-	margin: 5px;
-	padding: 0;
-	resize: none;
-	flex: 1 0 auto;
-	align-self: center;
-	touch-action: pan-y;
-}
-
-#form #upload-input {
-	display: none;
-}
-
-#form #upload,
-#form #submit {
-	color: #607992;
-	font-size: 14px;
-	height: 32px;
-	width: 32px;
-	flex: 0 0 auto;
-}
-
-#form #upload[disabled],
-#form #submit[disabled] {
-	opacity: 0.5;
-}
-
-#mentions-popup-container,
-#context-menu-container {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 1000;
-	background: transparent;
-}
-
-#context-menu-container.passthrough {
-	pointer-events: none;
-}
-
-#context-menu-container.passthrough > * {
-	pointer-events: auto;
-}
-
 .mentions-popup,
 #context-menu,
 .textcomplete-menu {
@@ -2307,12 +666,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	outline: 0;
 }
 
-.context-menu-divider {
-	height: 1px;
-	margin: 6px 0;
-	background-color: rgb(0 0 0 / 10%);
-}
-
 .context-menu-item,
 .textcomplete-item {
 	cursor: pointer;
@@ -2348,12 +701,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	text-decoration: none;
 }
 
-.emoji {
-	font-size: 1.4em;
-	vertical-align: text-top;
-	line-height: 1;
-}
-
 .textcomplete-item .emoji {
 	width: 32px;
 	text-align: center;
@@ -2363,236 +710,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: block;
 }
 
-/**
-  * IRC Message Styling
-  * Colours are credit to http://clrs.cc/
-  */
-.irc-fg0 { color: #fff; }
-.irc-fg1 { color: #000; }
-.irc-fg2 { color: #001f3f; }
-.irc-fg3 { color: #2ecc40; }
-.irc-fg4 { color: #ff4136; }
-.irc-fg5 { color: #85144b; }
-.irc-fg6 { color: #b10dc9; }
-.irc-fg7 { color: #ff851b; }
-.irc-fg8 { color: #ffdc00; }
-.irc-fg9 { color: #01ff70; }
-.irc-fg10 { color: #39cccc; }
-.irc-fg11 { color: #7fdbff; }
-.irc-fg12 { color: #0074d9; }
-.irc-fg13 { color: #f012be; }
-.irc-fg14 { color: #aaa; }
-.irc-fg15 { color: #ddd; }
-.irc-bg0 { background: #fff; }
-.irc-bg1 { background: #000; }
-.irc-bg2 { background: #001f3f; }
-.irc-bg3 { background: #2ecc40; }
-.irc-bg4 { background: #ff4136; }
-.irc-bg5 { background: #85144b; }
-.irc-bg6 { background: #b10dc9; }
-.irc-bg7 { background: #ff851b; }
-.irc-bg8 { background: #ffdc00; }
-.irc-bg9 { background: #01ff70; }
-.irc-bg10 { background: #39cccc; }
-.irc-bg11 { background: #7fdbff; }
-.irc-bg12 { background: #0074d9; }
-.irc-bg13 { background: #f012be; }
-.irc-bg14 { background: #aaa; }
-.irc-bg15 { background: #ddd; }
-
-/* https://modern.ircdocs.horse/formatting.html#colors-16-98 */
-.irc-fg16 { color: #470000; }
-.irc-fg17 { color: #472100; }
-.irc-fg18 { color: #474700; }
-.irc-fg19 { color: #324700; }
-.irc-fg20 { color: #004700; }
-.irc-fg21 { color: #00472c; }
-.irc-fg22 { color: #004747; }
-.irc-fg23 { color: #002747; }
-.irc-fg24 { color: #000047; }
-.irc-fg25 { color: #2e0047; }
-.irc-fg26 { color: #470047; }
-.irc-fg27 { color: #47002a; }
-.irc-fg28 { color: #740000; }
-.irc-fg29 { color: #743a00; }
-.irc-fg30 { color: #747400; }
-.irc-fg31 { color: #517400; }
-.irc-fg32 { color: #007400; }
-.irc-fg33 { color: #007449; }
-.irc-fg34 { color: #007474; }
-.irc-fg35 { color: #004074; }
-.irc-fg36 { color: #000074; }
-.irc-fg37 { color: #4b0074; }
-.irc-fg38 { color: #740074; }
-.irc-fg39 { color: #740045; }
-.irc-fg40 { color: #b50000; }
-.irc-fg41 { color: #b56300; }
-.irc-fg42 { color: #b5b500; }
-.irc-fg43 { color: #7db500; }
-.irc-fg44 { color: #00b500; }
-.irc-fg45 { color: #00b571; }
-.irc-fg46 { color: #00b5b5; }
-.irc-fg47 { color: #0063b5; }
-.irc-fg48 { color: #0000b5; }
-.irc-fg49 { color: #7500b5; }
-.irc-fg50 { color: #b500b5; }
-.irc-fg51 { color: #b5006b; }
-.irc-fg52 { color: #f00; }
-.irc-fg53 { color: #ff8c00; }
-.irc-fg54 { color: #ff0; }
-.irc-fg55 { color: #b2ff00; }
-.irc-fg56 { color: #0f0; }
-.irc-fg57 { color: #00ffa0; }
-.irc-fg58 { color: #0ff; }
-.irc-fg59 { color: #008cff; }
-.irc-fg60 { color: #00f; }
-.irc-fg61 { color: #a500ff; }
-.irc-fg62 { color: #f0f; }
-.irc-fg63 { color: #ff0098; }
-.irc-fg64 { color: #ff5959; }
-.irc-fg65 { color: #ffb459; }
-.irc-fg66 { color: #ffff71; }
-.irc-fg67 { color: #cfff60; }
-.irc-fg68 { color: #6fff6f; }
-.irc-fg69 { color: #65ffc9; }
-.irc-fg70 { color: #6dffff; }
-.irc-fg71 { color: #59b4ff; }
-.irc-fg72 { color: #5959ff; }
-.irc-fg73 { color: #c459ff; }
-.irc-fg74 { color: #f6f; }
-.irc-fg75 { color: #ff59bc; }
-.irc-fg76 { color: #ff9c9c; }
-.irc-fg77 { color: #ffd39c; }
-.irc-fg78 { color: #ffff9c; }
-.irc-fg79 { color: #e2ff9c; }
-.irc-fg80 { color: #9cff9c; }
-.irc-fg81 { color: #9cffdb; }
-.irc-fg82 { color: #9cffff; }
-.irc-fg83 { color: #9cd3ff; }
-.irc-fg84 { color: #9c9cff; }
-.irc-fg85 { color: #dc9cff; }
-.irc-fg86 { color: #ff9cff; }
-.irc-fg87 { color: #ff94d3; }
-.irc-fg88 { color: #000; }
-.irc-fg89 { color: #131313; }
-.irc-fg90 { color: #282828; }
-.irc-fg91 { color: #363636; }
-.irc-fg92 { color: #4d4d4d; }
-.irc-fg93 { color: #656565; }
-.irc-fg94 { color: #818181; }
-.irc-fg95 { color: #9f9f9f; }
-.irc-fg96 { color: #bcbcbc; }
-.irc-fg97 { color: #e2e2e2; }
-.irc-fg98 { color: #fff; }
-.irc-bg16 { background-color: #470000; }
-.irc-bg17 { background-color: #472100; }
-.irc-bg18 { background-color: #474700; }
-.irc-bg19 { background-color: #324700; }
-.irc-bg20 { background-color: #004700; }
-.irc-bg21 { background-color: #00472c; }
-.irc-bg22 { background-color: #004747; }
-.irc-bg23 { background-color: #002747; }
-.irc-bg24 { background-color: #000047; }
-.irc-bg25 { background-color: #2e0047; }
-.irc-bg26 { background-color: #470047; }
-.irc-bg27 { background-color: #47002a; }
-.irc-bg28 { background-color: #740000; }
-.irc-bg29 { background-color: #743a00; }
-.irc-bg30 { background-color: #747400; }
-.irc-bg31 { background-color: #517400; }
-.irc-bg32 { background-color: #007400; }
-.irc-bg33 { background-color: #007449; }
-.irc-bg34 { background-color: #007474; }
-.irc-bg35 { background-color: #004074; }
-.irc-bg36 { background-color: #000074; }
-.irc-bg37 { background-color: #4b0074; }
-.irc-bg38 { background-color: #740074; }
-.irc-bg39 { background-color: #740045; }
-.irc-bg40 { background-color: #b50000; }
-.irc-bg41 { background-color: #b56300; }
-.irc-bg42 { background-color: #b5b500; }
-.irc-bg43 { background-color: #7db500; }
-.irc-bg44 { background-color: #00b500; }
-.irc-bg45 { background-color: #00b571; }
-.irc-bg46 { background-color: #00b5b5; }
-.irc-bg47 { background-color: #0063b5; }
-.irc-bg48 { background-color: #0000b5; }
-.irc-bg49 { background-color: #7500b5; }
-.irc-bg50 { background-color: #b500b5; }
-.irc-bg51 { background-color: #b5006b; }
-.irc-bg52 { background-color: #f00; }
-.irc-bg53 { background-color: #ff8c00; }
-.irc-bg54 { background-color: #ff0; }
-.irc-bg55 { background-color: #b2ff00; }
-.irc-bg56 { background-color: #0f0; }
-.irc-bg57 { background-color: #00ffa0; }
-.irc-bg58 { background-color: #0ff; }
-.irc-bg59 { background-color: #008cff; }
-.irc-bg60 { background-color: #00f; }
-.irc-bg61 { background-color: #a500ff; }
-.irc-bg62 { background-color: #f0f; }
-.irc-bg63 { background-color: #ff0098; }
-.irc-bg64 { background-color: #ff5959; }
-.irc-bg65 { background-color: #ffb459; }
-.irc-bg66 { background-color: #ffff71; }
-.irc-bg67 { background-color: #cfff60; }
-.irc-bg68 { background-color: #6fff6f; }
-.irc-bg69 { background-color: #65ffc9; }
-.irc-bg70 { background-color: #6dffff; }
-.irc-bg71 { background-color: #59b4ff; }
-.irc-bg72 { background-color: #5959ff; }
-.irc-bg73 { background-color: #c459ff; }
-.irc-bg74 { background-color: #f6f; }
-.irc-bg75 { background-color: #ff59bc; }
-.irc-bg76 { background-color: #ff9c9c; }
-.irc-bg77 { background-color: #ffd39c; }
-.irc-bg78 { background-color: #ffff9c; }
-.irc-bg79 { background-color: #e2ff9c; }
-.irc-bg80 { background-color: #9cff9c; }
-.irc-bg81 { background-color: #9cffdb; }
-.irc-bg82 { background-color: #9cffff; }
-.irc-bg83 { background-color: #9cd3ff; }
-.irc-bg84 { background-color: #9c9cff; }
-.irc-bg85 { background-color: #dc9cff; }
-.irc-bg86 { background-color: #ff9cff; }
-.irc-bg87 { background-color: #ff94d3; }
-.irc-bg88 { background-color: #000; }
-.irc-bg89 { background-color: #131313; }
-.irc-bg90 { background-color: #282828; }
-.irc-bg91 { background-color: #363636; }
-.irc-bg92 { background-color: #4d4d4d; }
-.irc-bg93 { background-color: #656565; }
-.irc-bg94 { background-color: #818181; }
-.irc-bg95 { background-color: #9f9f9f; }
-.irc-bg96 { background-color: #bcbcbc; }
-.irc-bg97 { background-color: #e2e2e2; }
-.irc-bg98 { background-color: #fff; }
-
-.irc-bold {
-	font-weight: bold;
-}
-
-.irc-underline {
-	text-decoration: underline;
-}
-
-.irc-strikethrough {
-	text-decoration: line-through;
-}
-
-.irc-underline.irc-strikethrough {
-	text-decoration: underline line-through;
-}
-
-.irc-italic {
-	font-style: italic;
-}
-
 .tooltipped::after {
 	font-size: 12px;
 }
 
-@media (min-width: 480px) {
+@media (min-width: var(--page-content-width)) {
 	/* Fade out for long usernames */
 	#chat .from {
 		padding-left: 10px;
@@ -2910,26 +1032,3 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		linear-gradient(45deg, #eee 25%, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 0%) 75%, #eee 75%, #eee 100%),
 		linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee 100%);
 }
-
-/* Correctly handle multiple successive whitespace characters.
-   For example: user has quit ( ===> L   O   L <=== )  */
-
-.header .topic,
-#chat .msg[data-type="action"] .content,
-#chat .msg[data-type="message"] .content,
-#chat .msg[data-type="monospace_block"] .content,
-#chat .msg[data-type="notice"] .content,
-#chat .ctcp-message,
-#chat .part-reason,
-#chat .quit-reason,
-#chat .new-topic,
-#chat table.channel-list .topic {
-	white-space: pre-wrap;
-}
-
-.chat-view[data-type="search-results"] .search-status {
-	display: flex;
-	height: 100%;
-	justify-content: center;
-	align-items: center;
-}
diff --git a/client/themes/morning.css b/client/themes/morning.css
index ca266187..29314b6d 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -160,24 +160,4 @@ kbd {
 	color: #99a2b4;
 }
 
-/* Form elements */
-/* stylelint-disable selector-no-vendor-prefix */
-
-#chat-container ::-moz-placeholder {
-	color: #b7c5d1;
-	opacity: 0.75;
-}
-
-#chat-container ::-webkit-input-placeholder {
-	color: #b7c5d1;
-	opacity: 0.75;
-}
-
-#chat-container :-ms-input-placeholder {
-	color: #b7c5d1;
-	opacity: 0.75;
-}
-
-/* stylelint-enable selector-no-vendor-prefix */
-
 /* End form elements */