From 0c6c88f7f5764210e145252ce254d4d94e7abd2c Mon Sep 17 00:00:00 2001 From: hippoz <10706925-hippoz@users.noreply.gitlab.com> Date: Wed, 31 Aug 2022 16:12:54 +0300 Subject: [PATCH] improve handling of themes --- frontend/public/global.css | 10 +++++++++- frontend/src/components/Main.svelte | 13 +------------ frontend/src/components/Message.svelte | 2 +- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/frontend/public/global.css b/frontend/public/global.css index 9773301..e5abb75 100644 --- a/frontend/public/global.css +++ b/frontend/public/global.css @@ -29,6 +29,7 @@ --foreground-color-2: rgb(218, 219, 220); --foreground-color-3: rgb(153, 154, 155); --foreground-color-4: rgb(123, 124, 125); + --colored-element-text-color: var(--foreground-color-1); --purple-1: hsl(280, 78%, 50%); --blue-1: hsl(200, 78%, 50%); @@ -211,12 +212,12 @@ body { /* button */ .button { + color: var(--foreground-color-1); background-color: var(--background-color-2); text-align: center; border: none; padding: var(--space-sm); border-radius: var(--radius-md); - color: currentColor; font: inherit; max-height: 3em; } @@ -226,6 +227,7 @@ body { } .button-accent { + color: var(--colored-element-text-color); background-color: var(--purple-2); } @@ -238,6 +240,7 @@ body { } .button-red { + color: var(--colored-element-text-color); background-color: var(--red-2); } @@ -368,9 +371,14 @@ body { } .sidebar-button.selected { + color: var(--colored-element-text-color); background-color: var(--purple-2); } +.sidebar-button.selected .icon-button { + color: var(--colored-element-text-color); +} + /*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ *, diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte index 857ee89..808d566 100644 --- a/frontend/src/components/Main.svelte +++ b/frontend/src/components/Main.svelte @@ -21,19 +21,8 @@ --background-color-1: rgb(253, 254, 255); --background-color-2: rgb(218, 219, 220); --background-color-3: rgb(173, 174, 175); - } - .button { - color: var(--foreground-color-1); - } - - .button-red, .button-accent { - color: var(--background-color-1); - } - - .sidebar-button.selected, - .sidebar-button.selected .icon-button { - color: var(--background-color-1); + --colored-element-text-color: var(--background-color-0); } {/if} diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte index 9997360..4e54a20 100644 --- a/frontend/src/components/Message.svelte +++ b/frontend/src/components/Message.svelte @@ -9,7 +9,7 @@ .message { display: flex; align-items: flex-start; - overflow-x: none; + overflow-x: hidden; word-break: break-all; padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus); }