8 files changed, 147 insertions, 47 deletions
diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
index 96e8354..d6a9b42 100644
--- a/ui/styles/active-channel.css
+++ b/ui/styles/active-channel.css
@@ -1,5 +1,6 @@
 .active-channel {
-  padding: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   overflow: auto;
   flex-grow: 1;
 }
diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index eda9bdc..ef823c6 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -16,6 +16,11 @@
   flex-basis: 60px;
 }
 
+.app-bar .lead button {
+  padding: 0;
+  border: 0;
+}
+
 .app-bar .trail {
   flex-basis: 60px;
   line-height: var(--app-bar-height);
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
index f5b24ab..82d9914 100644
--- a/ui/styles/app-layout.css
+++ b/ui/styles/app-layout.css
@@ -24,8 +24,6 @@ nav#sidebar {
   height: 100vh;
   z-index: 10;
 
-  border-radius: 0 0.8rem 0.8rem 0;
-
   background-color: var(--colour-navbar-bg);
 
   @media (width > 640px) {
@@ -38,7 +36,9 @@ nav.list-nav {
   overflow: auto;
 
   @media (width > 640px) {
-    height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
+    height: calc(
+      100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding)
+    );
   }
 }
 
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 5e08279..3f0aa3b 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -2,17 +2,16 @@
   position: relative;
   border-radius: 0.25rem;
   padding: 0 0 0.5rem 0;
+  margin-top: 1rem;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
-  width: 95%;
-  clear: both;
   overflow: hidden;
 }
 
 .own-message {
   background-color: var(--colour-message-run-self-bg);
   border: 1px solid var(--colour-message-run-self-border);
-  float: right;
+  margin-left: 2rem;
 }
 
 .own-message * {
@@ -22,6 +21,7 @@
 .other-message {
   background-color: var(--colour-message-run-other-bg);
   border: 1px solid var(--colour-message-run-other-border);
+  margin-right: 2rem;
 }
 
 .other-message * {
@@ -43,6 +43,11 @@
   position: relative;
 }
 
+.message.delete-armed,
+.message.delete-armed:hover {
+  background-color: var(--colour-warn);
+}
+
 .message:hover {
   background-color: var(--colour-message-hover-bg);
 }
diff --git a/ui/styles/reset.css b/ui/styles/reset.css
index e29c0f5..a3f7681 100644
--- a/ui/styles/reset.css
+++ b/ui/styles/reset.css
@@ -3,46 +3,127 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index b31c4fd..5e5e16a 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -44,7 +44,7 @@
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
   border: 1px solid var(--colour-input-border);
-  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  z-index: 1; /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index b4d1a93..cdf487f 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -10,7 +10,7 @@
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
   border: 1px solid var(--colour-input-border);
-  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  z-index: 1; /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index fa51506..80817f3 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,9 +8,9 @@
   --nav-width: 21rem;
 
   /* coloUrs */
-  --colour-okay: #6A994E;
-  --colour-warn: #EBC3BE;
-  --colour-error: #DE5F55;
+  --colour-okay: #6a994e;
+  --colour-warn: #ebc3be;
+  --colour-error: #de5f55;
 
   /* I dunno, I liked this colour: */
   --colour-base: rgb(121, 96, 159);
@@ -43,9 +43,17 @@
 
   /* MessageRun */
   --colour-message-run-self-bg: color-mix(in srgb, var(--colour-base) 30%, white);
-  --colour-message-run-self-border: color-mix(in srgb, var(--colour-message-run-self-bg) 50%, black);
+  --colour-message-run-self-border: color-mix(
+    in srgb,
+    var(--colour-message-run-self-bg) 50%,
+    black
+  );
   --colour-message-run-other-bg: color-mix(in srgb, var(--colour-base) 50%, white);
-  --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black);
+  --colour-message-run-other-border: color-mix(
+    in srgb,
+    var(--colour-message-run-other-bg) 50%,
+    black
+  );
   --colour-message-run-self-text: var(--dark-text);
   --colour-message-run-other-text: var(--dark-text);