diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app.css | 16 | ||||
| -rw-r--r-- | ui/styles/active-channel.css | 2 | ||||
| -rw-r--r-- | ui/styles/messages.css | 10 | ||||
| -rw-r--r-- | ui/styles/sidebar.css | 10 | ||||
| -rw-r--r-- | ui/styles/textarea.css | 11 | ||||
| -rw-r--r-- | ui/styles/variables.css | 52 |
6 files changed, 63 insertions, 38 deletions
@@ -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); } |