Just oh so many styles

7 files changed, 213 insertions, 7 deletions

diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
new file mode 100644
index 0000000..6efc3e3
--- /dev/null
+++ b/ui/styles/active-channel.css
@@ -0,0 +1,3 @@
+.active-channel {
+  padding: 1rem;
+}
diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index 401a278..caa50ed 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -5,6 +5,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
+  background-color: var(--colour-background);
 }
 
 .app-bar > * {
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
new file mode 100644
index 0000000..ef1eb10
--- /dev/null
+++ b/ui/styles/app-layout.css
@@ -0,0 +1,56 @@
+/* TODO: generally remove literals from this file. */
+
+#interface {
+  margin: unset;
+  display: grid;
+  grid-template:
+    'side main' 1fr
+    / auto 1fr;
+  height: calc(100vh - var(--app-bar-height));
+
+  @media (width > 640px) {
+    --overlay: static;
+    --translate: 0;
+  }
+}
+
+nav#sidebar {
+  grid-area: side;
+  inset: auto auto 0 0;
+  padding-right: 0.5rem;
+  position: var(--overlay, absolute);
+  transition: translate 300ms ease-out;
+  width: var(--nav-width);
+  height: 100vh;
+  z-index: 10;
+
+  border-radius: 0 1.4rem 1.4rem 0;
+
+  background-color: var(--colour-background-alt);
+
+  @media (width > 640px) {
+    height: calc(100vh - var(--app-bar-height));
+  }
+}
+
+nav.list-nav {
+  height: calc(100vh - var(--input-row-height) - var(--interface-padding));
+  overflow: auto;
+
+  @media (width > 640px) {
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
+  }
+}
+
+main {
+  grid-area: main;
+  height: calc(100vh - var(--app-bar-height));
+}
+
+main textarea {
+  resize: none;
+}
+
+nav[data-expanded='false'] {
+  translate: var(--translate, -100% 0);
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
new file mode 100644
index 0000000..bd46baf
--- /dev/null
+++ b/ui/styles/messages.css
@@ -0,0 +1,83 @@
+.message-run {
+  position: relative;
+  border-radius: 0.25rem;
+  border: 1px solid var(--colour-border);
+  padding: 0 0 0.5rem 0;
+  margin-bottom: 1rem;
+  box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
+}
+
+/* TODO: replace these with colour variables. */
+.own-message {
+  background-color: rgb(32, 42, 74);
+}
+
+.own-message * {
+  color: rgb(198, 198, 198);
+}
+
+.message-run > span {
+  /* Username */
+  color: var(--colour-text);
+  background-color: rgb(67, 88, 156);
+}
+
+.message {
+  padding: 0.5rem 0 0 0.5rem;
+}
+
+.message:hover {
+  background-color: rgb(21, 28, 49);
+}
+
+.message .handle {
+  --text-size: 0.5rem;
+  float: right;
+  line-height: var(--text-size);
+  font-size: var(--text-size);
+  top: -0.5rem;
+  position: relative;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: none;
+  background-color: rgb(67, 88, 156);
+}
+
+.message:hover .handle {
+  display: flex;
+}
+
+.message .handle button {
+  line-height: 0.35rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.message-body {
+  overflow: auto;
+  max-width: 80vw;
+
+  @media (width > 640px) {
+    /* 21rem is width of the nav bar in full-screen mode. */
+    max-width: calc(90vw - 21rem);
+  }
+}
+
+.message-body:empty:after {
+  content: '.';
+  visibility: hidden;
+}
+
+/* For rendered message bodies: */
+.message-body blockquote {
+  border-left: 0.25rem solid lightgrey;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+}
+.message-body pre {
+  border: 1px solid #312e81;
+  border-radius: 0.25rem;
+  background-color: #282555;;
+  padding: 0.25rem;
+}
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index e512847..e9098f2 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -3,6 +3,10 @@
   background-color: var(--colour-background-alt);
 }
 
+.list-nav ul {
+  padding: 0.5rem;
+}
+
 .list-nav li {
   padding: 0.5rem;
   border-radius: 0.5rem;
@@ -32,8 +36,15 @@
   border: 1px solid var(--colour-border);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
+  background-color: var(--colour-text);
+  color: var(--colour-background);
 }
 
 .create-channel button {
   border-radius: 0 0.5rem 0.5rem 0;
+  border: 1px solid var(--colour-border);
+  background-color: var(--colour-text);
+  color: var(--colour-background);
 }
+
+/* TODO: media-query stuff. Margin-left at a constant zero? */
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
new file mode 100644
index 0000000..72d727f
--- /dev/null
+++ b/ui/styles/textarea.css
@@ -0,0 +1,38 @@
+/* Message input */
+.create-message form {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.create-message textarea {
+  padding: 0.5rem;
+  border-radius: 0.5rem 0 0 0.5rem;
+  border: 1px solid var(--colour-border);
+  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  flex-grow: 1;
+  background-color: var(--colour-text);
+  color: var(--colour-background);
+}
+
+.create-message button {
+  border-radius: 0 0.5rem 0.5rem 0;
+  border: 1px solid var(--colour-border);
+  background-color: var(--colour-text);
+  color: var(--colour-background);
+}
+
+.active-channel {
+  overflow: auto;
+  flex-grow: 1;
+  /* TODO: make this all-app background */
+  background-color: var(--colour-background);
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index e948c71..5ea4d74 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,11 +8,25 @@
   --nav-width: 21rem;
 
   /* coloUrs */
-  --colour-background: rgba(0, 0, 0, 0.25);
-  --colour-background-alt: rgba(0, 0, 0, 0.35);
-  --colour-border: rgba(0, 0, 0, 0.45);
-  --colour-text: rgb(240, 240, 240);
-  --colour-okay: #2a9d8f;
-  --colour-warn: #e9c46a;
-  --colour-error: #e76f51;
+  /* Really, we need:
+   * - Dark header background
+   * - Medium sidebar background
+   * - Light channel background
+   * - okay/warn/error
+   * - Border colours?
+   * - Text colour
+   * - Hover colour
+   * - Active colour
+   */
+  --colour-background: #253031;
+  --colour-border: #192122;
+
+  --colour-background-alt: #426A5A;
+  --colour-border-alt: #2E4A3E;
+
+  --colour-text: #FFFFEA;
+
+  --colour-okay: #6A994E;
+  --colour-warn: #EBC3BE;
+  --colour-error: #DE5F55;
 }