diff options
| -rw-r--r-- | ui/app.css | 21 | ||||
| -rw-r--r-- | ui/styles/app-bar.css | 25 | ||||
| -rw-r--r-- | ui/styles/overscroll.css | 9 | ||||
| -rw-r--r-- | ui/styles/reset.css | 48 | ||||
| -rw-r--r-- | ui/styles/sidebar.css | 39 | ||||
| -rw-r--r-- | ui/styles/variables.css | 18 |
6 files changed, 149 insertions, 11 deletions
@@ -1,13 +1,12 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import url("styles/reset.css"); +@import url("styles/variables.css"); +@import url("styles/overscroll.css"); +@import url("styles/app-bar.css"); +@import url("styles/sidebar.css"); -/* 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; +/* Debugging */ +div { + outline: 1px dashed grey; + background-color: var(--colour-background); + box-shadow: 5px 5px 5px var(--colour-border); } diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css new file mode 100644 index 0000000..401a278 --- /dev/null +++ b/ui/styles/app-bar.css @@ -0,0 +1,25 @@ +/* App Bar */ +.app-bar { + height: var(--app-bar-height); + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: stretch; +} + +.app-bar > * { + display: inline-block; +} + +.app-bar .lead { + flex-basis: 60px; +} + +.app-bar .trail { + flex-basis: 60px; +} + +.app-bar button, +.app-bar button img { + height: var(--app-bar-height); +} 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..e29c0f5 --- /dev/null +++ b/ui/styles/reset.css @@ -0,0 +1,48 @@ +/* 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..e512847 --- /dev/null +++ b/ui/styles/sidebar.css @@ -0,0 +1,39 @@ +/* Sidebar and channel selector */ +#sidebar { + background-color: var(--colour-background-alt); +} + +.list-nav li { + padding: 0.5rem; + border-radius: 0.5rem; + border: 1px solid var(--colour-border); + margin: 0.25rem; +} + +.list-nav li.active { + background-color: var(--colour-okay); +} + +.list-nav li:hover { + background-color: var(--colour-warn); +} + +/* create channel form */ +.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-border); + z-index: 1; /* Just to make the focus-active border go over the following button. */ + flex-grow: 1; +} + +.create-channel button { + border-radius: 0 0.5rem 0.5rem 0; +} diff --git a/ui/styles/variables.css b/ui/styles/variables.css new file mode 100644 index 0000000..e948c71 --- /dev/null +++ b/ui/styles/variables.css @@ -0,0 +1,18 @@ +: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-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; +} |