Merge branch 'prop/stylize'

11 files changed, 581 insertions, 0 deletions

diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
new file mode 100644
index 0000000..d6a9b42
--- /dev/null
+++ b/ui/styles/active-channel.css
@@ -0,0 +1,6 @@
+.active-channel {
+  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
new file mode 100644
index 0000000..dcc447a
--- /dev/null
+++ b/ui/styles/app-bar.css
@@ -0,0 +1,40 @@
+/* App Bar */
+.app-bar {
+  height: var(--app-bar-height);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  background-color: var(--colour-header-bg);
+}
+
+.app-bar > * {
+  display: inline-block;
+}
+
+.app-bar .lead {
+  flex-basis: 60px;
+}
+
+.app-bar .lead button {
+  padding: 0;
+  border: 0;
+}
+
+.app-bar .trail {
+  flex-basis: 60px;
+  line-height: var(--app-bar-height);
+}
+
+.app-bar > a {
+  line-height: var(--app-bar-height);
+}
+
+.app-bar a {
+  text-decoration: none;
+}
+
+.app-bar button,
+.app-bar button img {
+  height: var(--app-bar-height);
+}
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
new file mode 100644
index 0000000..82d9914
--- /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;
+
+  background-color: var(--colour-navbar-bg);
+
+  @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/forms.css b/ui/styles/forms.css
new file mode 100644
index 0000000..1d6421b
--- /dev/null
+++ b/ui/styles/forms.css
@@ -0,0 +1,21 @@
+label {
+  display: block;
+  padding: 0.25rem;
+  font-style: italic;
+}
+
+label input {
+  display: block;
+  width: 90%;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--colour-input-border);
+}
+
+form.form > button {
+  background-color: var(--colour-input-bg);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--colour-input-border);
+  margin: 0.25rem;
+}
diff --git a/ui/styles/invites.css b/ui/styles/invites.css
new file mode 100644
index 0000000..9cd3fd4
--- /dev/null
+++ b/ui/styles/invites.css
@@ -0,0 +1,11 @@
+.invite-list {
+  padding: 0.25rem;
+}
+
+.invite-url-literal {
+  font-family: monospace;
+}
+
+.invite-text {
+  margin: 1rem;
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
new file mode 100644
index 0000000..a07c5d9
--- /dev/null
+++ b/ui/styles/messages.css
@@ -0,0 +1,121 @@
+.message-run {
+  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);
+  overflow: hidden;
+}
+
+.own-message {
+  background-color: var(--colour-message-run-self-bg);
+  border: 1px solid var(--colour-message-run-self-border);
+  margin-left: 2rem;
+}
+
+.own-message * {
+  color: var(--colour-message-run-self-text);
+}
+
+.other-message {
+  background-color: var(--colour-message-run-other-bg);
+  border: 1px solid var(--colour-message-run-other-border);
+  margin-right: 2rem;
+}
+
+.other-message * {
+  color: var(--colour-message-run-other-text);
+}
+
+.message-run > .username {
+  background-color: var(--colour-message-run-username-bg);
+  color: var(--colour-message-run-username-text);
+  display: inline-block;
+  border-bottom-right-radius: 0.25rem;
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--colour-message-run-username-border);
+  border-right: 1px solid var(--colour-message-run-username-border);
+}
+
+.message {
+  padding: 0.5rem 0 0 0.5rem;
+  position: relative;
+}
+
+.message.delete-armed,
+.message.delete-armed:hover {
+  background-color: var(--colour-warn);
+}
+
+.message:hover {
+  background-color: var(--colour-message-hover-bg);
+}
+.message:hover * {
+  color: var(--colour-message-hover-text);
+}
+
+.message .handle {
+  --text-size: 0.75rem;
+  float: right;
+  line-height: var(--text-size);
+  font-size: var(--text-size);
+  top: -0.75rem;
+  right: 0.5rem;
+  position: absolute;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: none;
+  background-color: var(--colour-message-handle-bg);
+  color: var(--colour-message-handle-text);
+  border: 1px solid var(--colour-message-handle-border);
+}
+
+.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 {
+  margin-left: 0.25rem;
+  padding-left: 0.5rem;
+  border-left: 2px solid grey;
+  border-radius: 0.125rem;
+}
+
+.message-body blockquote * {
+  color: grey;
+}
+
+.message-body pre {
+  border: 1px solid #312e81;
+  border-radius: 0.25rem;
+  background-color: var(--colour-message-run-text);
+  padding: 0.25rem;
+}
+
+.message-body code {
+  font-family: monospace;
+}
diff --git a/ui/styles/overscroll.css b/ui/styles/overscroll.css
new file mode 100644
index 0000000..8898f9a
--- /dev/null
+++ b/ui/styles/overscroll.css
@@ -0,0 +1,9 @@
+/* This should help minimize swipe-to-go-back behaviour, enabling our
+* swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
+* Safari, when swiping from the screen edge, the OS gets th event and
+* handles it before the browser does.
+*/
+html,
+body {
+  overscroll-behavior-x: none;
+}
diff --git a/ui/styles/reset.css b/ui/styles/reset.css
new file mode 100644
index 0000000..a3f7681
--- /dev/null
+++ b/ui/styles/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   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;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
new file mode 100644
index 0000000..5e5e16a
--- /dev/null
+++ b/ui/styles/sidebar.css
@@ -0,0 +1,85 @@
+/* Sidebar and channel selector */
+#sidebar {
+  background-color: var(--colour-navbar-bg);
+}
+
+.list-nav a {
+  text-decoration: none;
+}
+
+.list-nav ul {
+  padding: 0.5rem;
+}
+
+.list-nav li {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--colour-navbar-border);
+  margin: 0.25rem;
+}
+
+.list-nav li.active {
+  background-color: var(--colour-navbar-active-bg);
+  color: var(--colour-navbar-active-text);
+}
+
+.list-nav li:hover {
+  background-color: var(--colour-navbar-hover-bg);
+  color: var(--colour-navbar-hover-text);
+}
+
+/* create channel form */
+.create-channel {
+  padding-left: 0.5rem;
+}
+
+.create-channel form {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.create-channel input {
+  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. */
+  flex-grow: 1;
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
+}
+
+.create-channel button {
+  border-radius: 0 0.5rem 0.5rem 0;
+  border: 1px solid var(--colour-input-border);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
+}
+
+.badge {
+  --dimensions: 1.25rem;
+  display: inline-block;
+
+  width: var(--dimensions);
+  height: var(--dimensions);
+  border-radius: var(--dimensions);
+  line-height: var(--dimensions);
+  text-align: center;
+}
+
+.badge.has-unreads {
+  /* TODO: Obvs this is a placeholder */
+  border: 1px solid mediumaquamarine;
+  background-color: lightgreen;
+  color: black;
+}
+
+.badge.has-no-unreads {
+  /* TODO: Obvs this is a placeholder */
+  border: 1px solid bisque;
+  background-color: antiquewhite;
+  color: black;
+}
+
+/* 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..c38de46
--- /dev/null
+++ b/ui/styles/textarea.css
@@ -0,0 +1,31 @@
+/* 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-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);
+  color: var(--colour-input-text);
+}
+
+.create-message button {
+  border-radius: 0 0.5rem 0.5rem 0;
+  border: 1px solid var(--colour-input-border);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
+}
+
+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
new file mode 100644
index 0000000..80817f3
--- /dev/null
+++ b/ui/styles/variables.css
@@ -0,0 +1,72 @@
+:root {
+  /*
+   * Not great that these are in px, but not sure what else to do.
+   */
+  --app-bar-height: 48px;
+  --input-row-height: 2rem;
+  --interface-padding: 16px;
+  --nav-width: 21rem;
+
+  /* coloUrs */
+  --colour-okay: #6a994e;
+  --colour-warn: #ebc3be;
+  --colour-error: #de5f55;
+
+  /* I dunno, I liked this colour: */
+  --colour-base: rgb(121, 96, 159);
+
+  /* Light text is a bit hard to read; I may need to adjust it. */
+  --light-text: color-mix(in srgb, var(--colour-base) 40%, white);
+  --dark-text: color-mix(in srgb, var(--colour-base) 40%, black);
+
+  /* Header */
+  --colour-header-bg: color-mix(in srgb, var(--colour-base) 30%, black);
+  --colour-header-border: color-mix(in srgb, var(--colour-header-bg) 50%, black);
+  --colour-header-text: var(--light-text);
+
+  /* Navbar */
+  --colour-navbar-bg: color-mix(in srgb, var(--colour-base) 50%, black);
+  --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-active-text: color-mix(in srgb, var(--colour-navbar-bg) 40%, black);
+  --colour-navbar-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 30%, white);
+  --colour-navbar-hover-text: color-mix(in srgb, var(--colour-navbar-bg) 30%, black);
+
+  /* Input */
+  --colour-input-bg: color-mix(in srgb, var(--colour-base) 10%, white);
+  --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: color-mix(in srgb, var(--colour-base) 25%, white);
+
+  /* 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-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-self-text: var(--dark-text);
+  --colour-message-run-other-text: var(--dark-text);
+
+  --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
+  --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);
+  --colour-message-run-username-text: color-mix(in srgb, var(--colour-base) 50%, black);
+
+  /* Message */
+  --colour-message-hover-bg: color-mix(in srgb, var(--colour-base) 70%, white);
+  --colour-message-hover-text: var(--dark-text);
+
+  /* Message handle */
+  --colour-message-handle-bg: color-mix(in srgb, var(--colour-base) 90%, black);
+  --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black);
+  --colour-message-handle-text: var(--dark-text);
+}