From c9b3394e9fc2cf6eb505ab03a6479eae996ed6e9 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Wed, 1 Jan 2025 18:09:46 -0500 Subject: Just oh so many styles --- ui/styles/app-layout.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 ui/styles/app-layout.css (limited to 'ui/styles/app-layout.css') 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); +} -- cgit v1.2.3 From 58a349af98d2b0ea9744e1c5372334f0c826eb47 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Sat, 4 Jan 2025 12:14:20 -0500 Subject: Update colour variables --- ui/styles/app-bar.css | 2 +- ui/styles/app-layout.css | 2 +- ui/styles/messages.css | 18 +++++++++++++----- ui/styles/sidebar.css | 20 ++++++++++---------- ui/styles/textarea.css | 14 +++++++------- ui/styles/variables.css | 49 ++++++++++++++++++++++++++++++------------------ 6 files changed, 63 insertions(+), 42 deletions(-) (limited to 'ui/styles/app-layout.css') diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css index caa50ed..d34eb87 100644 --- a/ui/styles/app-bar.css +++ b/ui/styles/app-bar.css @@ -5,7 +5,7 @@ flex-direction: row; justify-content: space-between; align-items: stretch; - background-color: var(--colour-background); + background-color: var(--colour-header-bg); } .app-bar > * { diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css index ef1eb10..53f003c 100644 --- a/ui/styles/app-layout.css +++ b/ui/styles/app-layout.css @@ -26,7 +26,7 @@ nav#sidebar { border-radius: 0 1.4rem 1.4rem 0; - background-color: var(--colour-background-alt); + background-color: var(--colour-navbar-bg); @media (width > 640px) { height: calc(100vh - var(--app-bar-height)); diff --git a/ui/styles/messages.css b/ui/styles/messages.css index bd46baf..ebb01c9 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -1,24 +1,32 @@ .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); + background-color: var(--colour-message-run-self-bg); + border: 1px solid var(--colour-message-run-self-bg); } .own-message * { - color: rgb(198, 198, 198); + color: var(--colour-message-run-text); +} + +.other-message { + background-color: var(--colour-message-run-other-bg); + border: 1px solid var(--colour-message-run-other-bg); +} + +.other-message * { + color: var(--colour-message-run-text); } .message-run > span { /* Username */ - color: var(--colour-text); + color: var(--colour-message-run-text); background-color: rgb(67, 88, 156); } diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css index e9098f2..7fe5ca0 100644 --- a/ui/styles/sidebar.css +++ b/ui/styles/sidebar.css @@ -1,6 +1,6 @@ /* Sidebar and channel selector */ #sidebar { - background-color: var(--colour-background-alt); + background-color: var(--colour-navbar-bg); } .list-nav ul { @@ -10,16 +10,16 @@ .list-nav li { padding: 0.5rem; border-radius: 0.5rem; - border: 1px solid var(--colour-border); + border: 1px solid var(--colour-navbar-bg); margin: 0.25rem; } .list-nav li.active { - background-color: var(--colour-okay); + background-color: var(--colour-navbar-bg); } .list-nav li:hover { - background-color: var(--colour-warn); + background-color: var(--colour-navbar-bg); } /* create channel form */ @@ -33,18 +33,18 @@ .create-channel input { padding: 0.5rem; border-radius: 0.5rem 0 0 0.5rem; - border: 1px solid var(--colour-border); + border: 1px solid var(--colour-input-bg); 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); + 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-border); - background-color: var(--colour-text); - color: var(--colour-background); + border: 1px solid var(--colour-input-bg); + background-color: var(--colour-input-bg); + color: var(--colour-input-text); } /* TODO: media-query stuff. Margin-left at a constant zero? */ diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css index 72d727f..3a28d1b 100644 --- a/ui/styles/textarea.css +++ b/ui/styles/textarea.css @@ -9,25 +9,25 @@ .create-message textarea { padding: 0.5rem; border-radius: 0.5rem 0 0 0.5rem; - border: 1px solid var(--colour-border); + border: 1px solid var(--colour-input-bg); 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); + 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-border); - background-color: var(--colour-text); - color: var(--colour-background); + border: 1px solid var(--colour-input-bg); + 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-background); + background-color: var(--colour-active-channel-bg); } main { diff --git a/ui/styles/variables.css b/ui/styles/variables.css index 5ea4d74..0f5cd0e 100644 --- a/ui/styles/variables.css +++ b/ui/styles/variables.css @@ -8,25 +8,38 @@ --nav-width: 21rem; /* coloUrs */ - /* 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; + + /* Header BG (dark) */ + --colour-header-bg: rgb(66, 66, 66); + /* Header text (light) */ + --colour-header-text: rgb(245, 245, 245); + /* Navbar BG (medium) */ + --colour-navbar-bg: rgb(117, 117, 117); + /* Navbar text (light) */ + --colour-navbar-text: rgb(224, 224, 224); + /* Input BG (light) */ + --colour-input-bg: rgb(224, 224, 224); + /* Input text (dark) */ + --colour-input-text: rgb(66, 66, 66); + /* Active channel BG (light) */ + --colour-active-channel-bg: rgb(224, 224, 224); + /* MessageRun self BG (medium) */ + --colour-message-run-self-bg: rgb(117, 117, 117); + /* MessageRun other BG (medium) */ + --colour-message-run-other-bg: rgb(117, 117, 117); + /* Message hover BG (medium-dark) */ + --colour-message-hover-bg: rgb(170, 170, 170); + /* Message handle BG (medium-light) */ + --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); } -- cgit v1.2.3 From f81065314aaa5c210a4245e65469906b277c363e Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Sun, 5 Jan 2025 17:09:28 -0500 Subject: Stylize channel badges --- ui/lib/components/Channel.svelte | 4 ++-- ui/styles/app-layout.css | 2 +- ui/styles/messages.css | 14 ++++++++++++-- ui/styles/sidebar.css | 29 +++++++++++++++++++++++++++++ 4 files changed, 44 insertions(+), 5 deletions(-) (limited to 'ui/styles/app-layout.css') diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte index dc019a0..2fc3249 100644 --- a/ui/lib/components/Channel.svelte +++ b/ui/lib/components/Channel.svelte @@ -5,9 +5,9 @@
  • {#if hasUnreads} - ❦ + ❦ {:else} - + {/if} {name}
    • diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css index 53f003c..f5b24ab 100644 --- a/ui/styles/app-layout.css +++ b/ui/styles/app-layout.css @@ -24,7 +24,7 @@ nav#sidebar { height: 100vh; z-index: 10; - border-radius: 0 1.4rem 1.4rem 0; + border-radius: 0 0.8rem 0.8rem 0; background-color: var(--colour-navbar-bg); diff --git a/ui/styles/messages.css b/ui/styles/messages.css index 0854d17..7df781a 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -90,13 +90,23 @@ /* For rendered message bodies: */ .message-body blockquote { - border-left: 0.25rem solid lightgrey; - margin-left: 0.5rem; + 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/sidebar.css b/ui/styles/sidebar.css index b10789f..695628c 100644 --- a/ui/styles/sidebar.css +++ b/ui/styles/sidebar.css @@ -3,6 +3,10 @@ background-color: var(--colour-navbar-bg); } +.list-nav a { + text-decoration: none; +} + .list-nav ul { padding: 0.5rem; } @@ -51,4 +55,29 @@ 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? */ -- cgit v1.2.3 From 7b8587e85e1e16904018d1f0cf57d09e6307c8cf Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Thu, 9 Jan 2025 11:29:27 -0500 Subject: Rectilinear sidebar, rather than rounded. The rounded corners were leaving some visually-displeasing shapes and gaps near the bottom of the app. --- ui/styles/app-layout.css | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/styles/app-layout.css') diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css index f5b24ab..50fa704 100644 --- a/ui/styles/app-layout.css +++ b/ui/styles/app-layout.css @@ -24,8 +24,6 @@ nav#sidebar { height: 100vh; z-index: 10; - border-radius: 0 0.8rem 0.8rem 0; - background-color: var(--colour-navbar-bg); @media (width > 640px) { -- cgit v1.2.3 From 6d51f8568e337e768505ccfdef916b84dd6eb1b3 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Sat, 11 Jan 2025 13:34:13 -0500 Subject: npm run format --- ui/app.css | 22 ++--- ui/lib/components/ChangePassword.svelte | 7 +- ui/lib/components/Channel.svelte | 2 +- ui/lib/components/CreateChannelForm.svelte | 7 +- ui/lib/components/LogIn.svelte | 8 +- ui/lib/components/Message.svelte | 8 +- ui/lib/components/MessageInput.svelte | 11 +-- ui/lib/components/MessageRun.svelte | 6 +- ui/lib/store/channels.svelte.js | 9 +- ui/lib/store/messages.svelte.js | 2 +- ui/routes/(app)/+layout.svelte | 6 +- ui/routes/(app)/+page.svelte | 4 +- ui/routes/(app)/ch/[channel]/+page.svelte | 14 +-- ui/styles/app-layout.css | 4 +- ui/styles/reset.css | 147 ++++++++++++++++++++++------- ui/styles/sidebar.css | 2 +- ui/styles/textarea.css | 2 +- ui/styles/variables.css | 18 +++- 18 files changed, 167 insertions(+), 112 deletions(-) (limited to 'ui/styles/app-layout.css') diff --git a/ui/app.css b/ui/app.css index 2df588e..a02106d 100644 --- a/ui/app.css +++ b/ui/app.css @@ -1,14 +1,14 @@ -@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"); +@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 { background-color: var(--colour-active-channel-bg); diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte index 51ebccd..bf94ea7 100644 --- a/ui/lib/components/ChangePassword.svelte +++ b/ui/lib/components/ChangePassword.svelte @@ -35,12 +35,7 @@     -
  • +
  • {#if hasUnreads} ❦ {:else} diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte index 8fab4c4..85c85bb 100644 --- a/ui/lib/components/CreateChannelForm.svelte +++ b/ui/lib/components/CreateChannelForm.svelte @@ -16,11 +16,6 @@
    - +
    diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte index 44aab44..5bfdae2 100644 --- a/ui/lib/components/LogIn.svelte +++ b/ui/lib/components/LogIn.svelte @@ -12,13 +12,7 @@