Merge branch 'prop/stylize'

1 files changed, 52 insertions, 11 deletions

diff --git a/ui/app.css b/ui/app.css
index b316dea..a02106d 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,13 +1,54 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* 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,
+@import url('styles/reset.css');
+@import url('styles/variables.css');
+@import url('styles/overscroll.css');
+@import url('styles/app-bar.css');
+@import url('styles/app-layout.css');
+@import url('styles/sidebar.css');
+@import url('styles/active-channel.css');
+@import url('styles/messages.css');
+@import url('styles/textarea.css');
+@import url('styles/forms.css');
+@import url('styles/invites.css');
+
 body {
-  overscroll-behavior-x: none;
+  background-color: var(--colour-active-channel-bg);
+  color: var(--dark-text);
+}
+
+hr {
+  width: 90%;
+}
+
+.no-active-channel {
+  display: table;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+.vertical-aligner {
+  display: table-cell;
+  vertical-align: middle;
+  font-style: italic;
+}
+
+/* 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 {
+  outline: 1px dashed grey;
+  background-color: var(--colour-background);
+  box-shadow: 5px 5px 5px var(--colour-border);
 }
+/* */