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/textarea.css | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 ui/styles/textarea.css (limited to 'ui/styles/textarea.css') 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; +} -- 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/textarea.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 7cb7c339a2ba0b3a0cf39b09194e7882f74c6e1f Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Sat, 4 Jan 2025 18:46:43 -0500 Subject: Do a lot of styling --- ui/app.css | 16 ++++++++++++++ ui/styles/active-channel.css | 2 ++ ui/styles/messages.css | 10 +++++++-- ui/styles/sidebar.css | 10 ++++----- ui/styles/textarea.css | 11 ++-------- ui/styles/variables.css | 52 +++++++++++++++++++++++++------------------- 6 files changed, 63 insertions(+), 38 deletions(-) (limited to 'ui/styles/textarea.css') diff --git a/ui/app.css b/ui/app.css index a945c6a..1f1fc20 100644 --- a/ui/app.css +++ b/ui/app.css @@ -8,6 +8,22 @@ @import url("styles/messages.css"); @import url("styles/textarea.css"); +body { + background-color: var(--colour-active-channel-bg); +} + +/* 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 { diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css index 6efc3e3..96e8354 100644 --- a/ui/styles/active-channel.css +++ b/ui/styles/active-channel.css @@ -1,3 +1,5 @@ .active-channel { padding: 1rem; + overflow: auto; + flex-grow: 1; } diff --git a/ui/styles/messages.css b/ui/styles/messages.css index 81afe47..a0005d1 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -4,11 +4,14 @@ padding: 0 0 0.5rem 0; margin-bottom: 1rem; box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5); + width: 95%; + clear: both; } .own-message { background-color: var(--colour-message-run-self-bg); - border: 1px solid var(--colour-message-run-self-bg); + border: 1px solid var(--colour-message-run-self-border); + float: right; } .own-message * { @@ -17,7 +20,7 @@ .other-message { background-color: var(--colour-message-run-other-bg); - border: 1px solid var(--colour-message-run-other-bg); + border: 1px solid var(--colour-message-run-other-border); } .other-message * { @@ -36,6 +39,9 @@ .message:hover { background-color: var(--colour-message-hover-bg); } +.message:hover * { + color: var(--colour-message-hover-text); +} .message .handle { --text-size: 0.5rem; diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css index 7fe5ca0..8808a3b 100644 --- a/ui/styles/sidebar.css +++ b/ui/styles/sidebar.css @@ -10,16 +10,16 @@ .list-nav li { padding: 0.5rem; border-radius: 0.5rem; - border: 1px solid var(--colour-navbar-bg); + border: 1px solid var(--colour-navbar-border); margin: 0.25rem; } .list-nav li.active { - background-color: var(--colour-navbar-bg); + background-color: var(--colour-navbar-active-bg); } .list-nav li:hover { - background-color: var(--colour-navbar-bg); + background-color: var(--colour-navbar-hover-bg); } /* create channel form */ @@ -33,7 +33,7 @@ .create-channel input { padding: 0.5rem; border-radius: 0.5rem 0 0 0.5rem; - border: 1px solid var(--colour-input-bg); + 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); @@ -42,7 +42,7 @@ .create-channel button { border-radius: 0 0.5rem 0.5rem 0; - border: 1px solid var(--colour-input-bg); + border: 1px solid var(--colour-input-border); background-color: var(--colour-input-bg); color: var(--colour-input-text); } diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css index 3a28d1b..b45a66d 100644 --- a/ui/styles/textarea.css +++ b/ui/styles/textarea.css @@ -9,7 +9,7 @@ .create-message textarea { padding: 0.5rem; border-radius: 0.5rem 0 0 0.5rem; - border: 1px solid var(--colour-input-bg); + 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); @@ -18,18 +18,11 @@ .create-message button { border-radius: 0 0.5rem 0.5rem 0; - border: 1px solid var(--colour-input-bg); + border: 1px solid var(--colour-input-border); 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-active-channel-bg); -} - main { display: flex; flex-direction: column; diff --git a/ui/styles/variables.css b/ui/styles/variables.css index 0f5cd0e..947cf68 100644 --- a/ui/styles/variables.css +++ b/ui/styles/variables.css @@ -12,34 +12,42 @@ --colour-warn: #EBC3BE; --colour-error: #DE5F55; - /* Header BG (dark) */ + --light-text: rgb(228, 228, 255); + --dark-text: rgb(28, 28, 35); + + /* Header */ --colour-header-bg: rgb(66, 66, 66); - /* Header text (light) */ - --colour-header-text: rgb(245, 245, 245); - /* Navbar BG (medium) */ + --colour-header-border: color-mix(in srgb, var(--colour-header-bg) 50%, black); + --colour-header-text: var(--light-text); + + /* Navbar */ --colour-navbar-bg: rgb(117, 117, 117); - /* Navbar text (light) */ - --colour-navbar-text: rgb(224, 224, 224); - /* Input BG (light) */ + --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-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 20%, white); + + /* Input */ --colour-input-bg: rgb(224, 224, 224); - /* Input text (dark) */ - --colour-input-text: rgb(66, 66, 66); - /* Active channel BG (light) */ + --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: rgb(224, 224, 224); - /* MessageRun self BG (medium) */ + + /* MessageRun */ --colour-message-run-self-bg: rgb(117, 117, 117); - /* MessageRun other BG (medium) */ + --colour-message-run-self-border: color-mix(in srgb, var(--colour-message-run-self-bg) 50%, black); --colour-message-run-other-bg: rgb(117, 117, 117); - /* Message hover BG (medium-dark) */ + --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black); + --colour-message-run-text: var(--light-text); + + /* Message */ --colour-message-hover-bg: rgb(170, 170, 170); - /* Message handle BG (medium-light) */ + --colour-message-hover-text: var(--dark-text); + + /* Message handle */ --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); + --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black); + --colour-message-handle-text: var(--dark-text); } -- 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/textarea.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 @@