Do a lot of styling

6 files changed, 63 insertions, 38 deletions

diff --git a/ui/app.css b/ui/app.css
index a945c6a..1f1fc20 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -8,6 +8,22 @@
 @import url("styles/messages.css");
 @import url("styles/textarea.css");
 
+body {
+  background-color: var(--colour-active-channel-bg);
+}
+
+/* TODO:
+ * put this somewhere appropriate,
+ * use a correct variable,
+ * be sensitive to background colour context.
+ */
+a,
+a:hover,
+a:visited,
+a:active {
+  color: var(--light-text);
+}
+
 /* Debugging */
 /* * /
 div {
diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
index 6efc3e3..96e8354 100644
--- a/ui/styles/active-channel.css
+++ b/ui/styles/active-channel.css
@@ -1,3 +1,5 @@
 .active-channel {
   padding: 1rem;
+  overflow: auto;
+  flex-grow: 1;
 }
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 81afe47..a0005d1 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -4,11 +4,14 @@
   padding: 0 0 0.5rem 0;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
+  width: 95%;
+  clear: both;
 }
 
 .own-message {
   background-color: var(--colour-message-run-self-bg);
-  border: 1px solid var(--colour-message-run-self-bg);
+  border: 1px solid var(--colour-message-run-self-border);
+  float: right;
 }
 
 .own-message * {
@@ -17,7 +20,7 @@
 
 .other-message {
   background-color: var(--colour-message-run-other-bg);
-  border: 1px solid var(--colour-message-run-other-bg);
+  border: 1px solid var(--colour-message-run-other-border);
 }
 
 .other-message * {
@@ -36,6 +39,9 @@
 .message:hover {
   background-color: var(--colour-message-hover-bg);
 }
+.message:hover * {
+  color: var(--colour-message-hover-text);
+}
 
 .message .handle {
   --text-size: 0.5rem;
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 7fe5ca0..8808a3b 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -10,16 +10,16 @@
 .list-nav li {
   padding: 0.5rem;
   border-radius: 0.5rem;
-  border: 1px solid var(--colour-navbar-bg);
+  border: 1px solid var(--colour-navbar-border);
   margin: 0.25rem;
 }
 
 .list-nav li.active {
-  background-color: var(--colour-navbar-bg);
+  background-color: var(--colour-navbar-active-bg);
 }
 
 .list-nav li:hover {
-  background-color: var(--colour-navbar-bg);
+  background-color: var(--colour-navbar-hover-bg);
 }
 
 /* create channel form */
@@ -33,7 +33,7 @@
 .create-channel input {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
@@ -42,7 +42,7 @@
 
 .create-channel button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
 }
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 3a28d1b..b45a66d 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -9,7 +9,7 @@
 .create-message textarea {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
@@ -18,18 +18,11 @@
 
 .create-message button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
 }
 
-.active-channel {
-  overflow: auto;
-  flex-grow: 1;
-  /* TODO: make this all-app background */
-  background-color: var(--colour-active-channel-bg);
-}
-
 main {
   display: flex;
   flex-direction: column;
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 0f5cd0e..947cf68 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -12,34 +12,42 @@
   --colour-warn: #EBC3BE;
   --colour-error: #DE5F55;
 
-  /* Header BG (dark) */
+  --light-text: rgb(228, 228, 255);
+  --dark-text: rgb(28, 28, 35);
+
+  /* Header */
   --colour-header-bg: rgb(66, 66, 66);
-  /* Header text (light) */
-  --colour-header-text: rgb(245, 245, 245);
-  /* Navbar BG (medium) */
+  --colour-header-border: color-mix(in srgb, var(--colour-header-bg) 50%, black);
+  --colour-header-text: var(--light-text);
+
+  /* Navbar */
   --colour-navbar-bg: rgb(117, 117, 117);
-  /* Navbar text (light) */
-  --colour-navbar-text: rgb(224, 224, 224);
-  /* Input BG (light) */
+  --colour-navbar-border: color-mix(in srgb, var(--colour-navbar-bg) 50%, black);
+  --colour-navbar-text: var(--light-text);
+  --colour-navbar-active-bg: color-mix(in srgb, var(--colour-navbar-bg) 40%, white);
+  --colour-navbar-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 20%, white);
+
+  /* Input */
   --colour-input-bg: rgb(224, 224, 224);
-  /* Input text (dark) */
-  --colour-input-text: rgb(66, 66, 66);
-  /* Active channel BG (light) */
+  --colour-input-border: color-mix(in srgb, var(--colour-input-bg) 50%, black);
+  --colour-input-text: var(--dark-text);
+
+  /* Active channel */
   --colour-active-channel-bg: rgb(224, 224, 224);
-  /* MessageRun self BG (medium) */
+
+  /* MessageRun */
   --colour-message-run-self-bg: rgb(117, 117, 117);
-  /* MessageRun other BG (medium) */
+  --colour-message-run-self-border: color-mix(in srgb, var(--colour-message-run-self-bg) 50%, black);
   --colour-message-run-other-bg: rgb(117, 117, 117);
-  /* Message hover BG (medium-dark) */
+  --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black);
+  --colour-message-run-text: var(--light-text);
+
+  /* Message */
   --colour-message-hover-bg: rgb(170, 170, 170);
-  /* Message handle BG (medium-light) */
+  --colour-message-hover-text: var(--dark-text);
+
+  /* Message handle */
   --colour-message-handle-bg: rgb(224, 224, 224);
-  /* Message handle text */
-  --colour-message-handle-text: rgb(170, 170, 170);
-  /* Navbar active BG */
-  --colour-navbar-active-bg: rgb(117, 117, 117);
-  /* Navbar hover BG */
-  --colour-navbar-hover-bg: rgb(170, 170, 170);
-  /* MessageRun text */
-  --colour-message-run-text: rgb(170, 170, 170);
+  --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black);
+  --colour-message-handle-text: var(--dark-text);
 }