From a103b79f60948fa8ee44f95304716f3d354a8c15 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 19 May 2023 18:30:24 +0200 Subject: [PATCH] Rework label colors (#24790) Introduce `--color-label-fg`, `--color-label-bg` and `--color-label-hover-bg`, decoupling the label styles from other color variables. I've set the colors so that non-interactive labels like on tabs are dark-on-light on light theme, which imho looks better than previous light-on-dark. In the screenshot below, the leftmost label has hover, the second one has active. Screenshot 2023-05-18 at 12 48 26 Screenshot 2023-05-18 at 13 04 07 --------- Co-authored-by: Giteabot --- web_src/css/base.css | 43 ++++++++++++++------------ web_src/css/themes/theme-arc-green.css | 7 ++++- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index bcf7b0811..36624ab95 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -180,10 +180,13 @@ --color-caret: var(--color-text-dark); --color-reaction-bg: #0000000a; --color-reaction-active-bg: var(--color-primary-alpha-20); - --color-tooltip-bg: #000000f0; --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; --color-header-bar: #ffffff; - --color-label-active-bg: #d0d0d0; + --color-label-text: #232323; + --color-label-bg: #cacaca5b; + --color-label-hover-bg: #cacacaa0; + --color-label-active-bg: #cacacaff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-6); --color-active-line: #fffbdd; @@ -820,16 +823,6 @@ a.label, margin-right: 0.35em; } -.ui.menu .item > .label { - background: var(--color-grey); -} - -.ui.active.label { - background: var(--color-label-active-bg); - border-color: var(--color-label-active-bg); - color: var(--color-text-dark); -} - .ui.menu .dropdown.item:hover, .ui.menu a.item:hover { color: var(--color-text); @@ -1976,22 +1969,32 @@ i.icon.centerlock { .ui.label { padding: 0.3em 0.5em; - background: var(--color-light); - color: var(--color-text-light); +} + +.ui.label, +.ui.menu .item > .label { + background: var(--color-label-bg); + color: var(--color-label-text); +} + +.ui.active.label { + background: var(--color-label-active-bg); + border-color: var(--color-label-active-bg); + color: var(--color-label-text); } .ui.labels a.label:hover, a.ui.label:hover { - background: var(--color-hover); - border-color: var(--color-hover); - color: var(--color-text); + background: var(--color-label-hover-bg); + border-color: var(--color-label-hover-bg); + color: var(--color-label-text); } .ui.labels a.active.label:hover, a.ui.active.label:hover { - background: var(--color-active); - border-color: var(--color-active); - color: var(--color-text); + background: var(--color-label-active-bg); + border-color: var(--color-label-active-bg); + color: var(--color-label-text); } .ui.label > .detail .icons { diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 84007d2e2..d5db18b55 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -165,8 +165,13 @@ --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; --color-header-bar: #2e323e; - --color-label-active-bg: #4c525e; + --color-label-text: #dfe3ec; + --color-label-bg: #7c84974b; + --color-label-hover-bg: #7c8497a0; + --color-label-active-bg: #7c8497ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b;