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. <img width="786" alt="Screenshot 2023-05-18 at 12 48 26" src="https://github.com/go-gitea/gitea/assets/115237/d989bb68-504a-4406-b5f6-419ed9609f90"> <img width="789" alt="Screenshot 2023-05-18 at 13 04 07" src="https://github.com/go-gitea/gitea/assets/115237/689a281a-a2b7-45e8-a5ee-dafb7a35e105"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
parent
acde12a8a2
commit
a103b79f60
2 changed files with 29 additions and 21 deletions
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue