diff options
Diffstat (limited to 'ui/styles/variables.css')
| -rw-r--r-- | ui/styles/variables.css | 30 |
1 files changed, 19 insertions, 11 deletions
diff --git a/ui/styles/variables.css b/ui/styles/variables.css index 947cf68..9a1c689 100644 --- a/ui/styles/variables.css +++ b/ui/styles/variables.css @@ -12,42 +12,50 @@ --colour-warn: #EBC3BE; --colour-error: #DE5F55; - --light-text: rgb(228, 228, 255); - --dark-text: rgb(28, 28, 35); + /* I dunno, I liked this colour: */ + --colour-base: rgb(121, 96, 159); + + /* Light text is a bit hard to read; I may need to adjust it. */ + --light-text: color-mix(in srgb, var(--colour-base) 10%, white); + --dark-text: color-mix(in srgb, var(--colour-base) 10%, black); /* Header */ - --colour-header-bg: rgb(66, 66, 66); + --colour-header-bg: color-mix(in srgb, var(--colour-base) 30%, black); --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); + --colour-navbar-bg: color-mix(in srgb, var(--colour-base) 50%, black); --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); + --colour-input-bg: color-mix(in srgb, var(--colour-base) 10%, white); --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); + --colour-active-channel-bg: color-mix(in srgb, var(--colour-base) 25%, white); /* MessageRun */ - --colour-message-run-self-bg: rgb(117, 117, 117); + --colour-message-run-self-bg: color-mix(in srgb, var(--colour-base) 30%, white); --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); + --colour-message-run-other-bg: color-mix(in srgb, var(--colour-base) 50%, white); --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black); - --colour-message-run-text: var(--light-text); + --colour-message-run-self-text: var(--dark-text); + --colour-message-run-other-text: var(--light-text); + + --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white); + --colour-message-run-username-text: color-mix(in srgb, var(--colour-base) 50%, black); /* Message */ - --colour-message-hover-bg: rgb(170, 170, 170); + --colour-message-hover-bg: color-mix(in srgb, var(--colour-base) 70%, white); --colour-message-hover-text: var(--dark-text); /* Message handle */ - --colour-message-handle-bg: rgb(224, 224, 224); + --colour-message-handle-bg: color-mix(in srgb, var(--colour-base) 90%, black); --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black); --colour-message-handle-text: var(--dark-text); } |