From b1a8b23ccee8bf16641e1e3aee166a688886731b Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 18 May 2023 12:49:12 +0200 Subject: [PATCH 1/3] Rework label colors --- web_src/css/base.css | 41 ++++++++++++++------------ web_src/css/themes/theme-arc-green.css | 5 +++- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index bcf7b0811b819..f2bebbec64f31 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -183,7 +183,10 @@ --color-tooltip-bg: #000000f0; --color-tooltip-text: #ffffff; --color-header-bar: #ffffff; - --color-label-active-bg: #d0d0d0; + --color-label-fg: #232323; + --color-label-bg: #b8b8b84b; + --color-label-hover-bg: #b8b8b880; + --color-label-active-bg: #b8b8b8; --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-fg); +} + +.ui.active.label { + background: var(--color-label-active-bg); + border-color: var(--color-label-active-bg); + color: var(--color-label-fg); } .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-fg); } .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-fg); } .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 84007d2e2dfe5..02e67eb91d4bb 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -166,7 +166,10 @@ --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-40); --color-header-bar: #2e323e; - --color-label-active-bg: #4c525e; + --color-label-fg: #dfe3ec; + --color-label-bg: #7c84974b; + --color-label-hover-bg: #7c8497a0; + --color-label-active-bg: #7c8497; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; From d72bab769ffcafce96707d0b3a14cdbeac5c650d Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 18 May 2023 13:04:21 +0200 Subject: [PATCH 2/3] tweak light colors --- web_src/css/base.css | 6 +++--- web_src/css/themes/theme-arc-green.css | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index f2bebbec64f31..c653fdd00a4ba 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -184,9 +184,9 @@ --color-tooltip-text: #ffffff; --color-header-bar: #ffffff; --color-label-fg: #232323; - --color-label-bg: #b8b8b84b; - --color-label-hover-bg: #b8b8b880; - --color-label-active-bg: #b8b8b8; + --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; diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 02e67eb91d4bb..f7df1afb820d1 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -169,7 +169,7 @@ --color-label-fg: #dfe3ec; --color-label-bg: #7c84974b; --color-label-hover-bg: #7c8497a0; - --color-label-active-bg: #7c8497; + --color-label-active-bg: #7c8497ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; From c98a4c873d2a349af1653435fd8484452b77634f Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 19 May 2023 17:14:45 +0200 Subject: [PATCH 3/3] rename to --color-label-text and add two missing colors in arc-green --- web_src/css/base.css | 12 ++++++------ web_src/css/themes/theme-arc-green.css | 4 +++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index c653fdd00a4ba..36624ab957628 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -180,10 +180,10 @@ --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-fg: #232323; + --color-label-text: #232323; --color-label-bg: #cacaca5b; --color-label-hover-bg: #cacacaa0; --color-label-active-bg: #cacacaff; @@ -1974,27 +1974,27 @@ i.icon.centerlock { .ui.label, .ui.menu .item > .label { background: var(--color-label-bg); - color: var(--color-label-fg); + 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-fg); + color: var(--color-label-text); } .ui.labels a.label:hover, a.ui.label:hover { background: var(--color-label-hover-bg); border-color: var(--color-label-hover-bg); - color: var(--color-label-fg); + color: var(--color-label-text); } .ui.labels a.active.label:hover, a.ui.active.label:hover { background: var(--color-label-active-bg); border-color: var(--color-label-active-bg); - color: var(--color-label-fg); + 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 f7df1afb820d1..d5db18b55ae56 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -165,8 +165,10 @@ --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-fg: #dfe3ec; + --color-label-text: #dfe3ec; --color-label-bg: #7c84974b; --color-label-hover-bg: #7c8497a0; --color-label-active-bg: #7c8497ff;