diff --git a/web_src/css/base.css b/web_src/css/base.css index bcf7b0811b..36624ab957 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 84007d2e2d..d5db18b55a 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;