oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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>

authored by

silverwind
Giteabot and committed by
GitHub a103b79f acde12a8

+29 -21
+23 -20
web_src/css/base.css
··· 180 180 --color-caret: var(--color-text-dark); 181 181 --color-reaction-bg: #0000000a; 182 182 --color-reaction-active-bg: var(--color-primary-alpha-20); 183 - --color-tooltip-bg: #000000f0; 184 183 --color-tooltip-text: #ffffff; 184 + --color-tooltip-bg: #000000f0; 185 185 --color-header-bar: #ffffff; 186 - --color-label-active-bg: #d0d0d0; 186 + --color-label-text: #232323; 187 + --color-label-bg: #cacaca5b; 188 + --color-label-hover-bg: #cacacaa0; 189 + --color-label-active-bg: #cacacaff; 187 190 --color-accent: var(--color-primary-light-1); 188 191 --color-small-accent: var(--color-primary-light-6); 189 192 --color-active-line: #fffbdd; ··· 818 821 819 822 .ui.menu .item > .svg { 820 823 margin-right: 0.35em; 821 - } 822 - 823 - .ui.menu .item > .label { 824 - background: var(--color-grey); 825 - } 826 - 827 - .ui.active.label { 828 - background: var(--color-label-active-bg); 829 - border-color: var(--color-label-active-bg); 830 - color: var(--color-text-dark); 831 824 } 832 825 833 826 .ui.menu .dropdown.item:hover, ··· 1976 1969 1977 1970 .ui.label { 1978 1971 padding: 0.3em 0.5em; 1979 - background: var(--color-light); 1980 - color: var(--color-text-light); 1972 + } 1973 + 1974 + .ui.label, 1975 + .ui.menu .item > .label { 1976 + background: var(--color-label-bg); 1977 + color: var(--color-label-text); 1978 + } 1979 + 1980 + .ui.active.label { 1981 + background: var(--color-label-active-bg); 1982 + border-color: var(--color-label-active-bg); 1983 + color: var(--color-label-text); 1981 1984 } 1982 1985 1983 1986 .ui.labels a.label:hover, 1984 1987 a.ui.label:hover { 1985 - background: var(--color-hover); 1986 - border-color: var(--color-hover); 1987 - color: var(--color-text); 1988 + background: var(--color-label-hover-bg); 1989 + border-color: var(--color-label-hover-bg); 1990 + color: var(--color-label-text); 1988 1991 } 1989 1992 1990 1993 .ui.labels a.active.label:hover, 1991 1994 a.ui.active.label:hover { 1992 - background: var(--color-active); 1993 - border-color: var(--color-active); 1994 - color: var(--color-text); 1995 + background: var(--color-label-active-bg); 1996 + border-color: var(--color-label-active-bg); 1997 + color: var(--color-label-text); 1995 1998 } 1996 1999 1997 2000 .ui.label > .detail .icons {
+6 -1
web_src/css/themes/theme-arc-green.css
··· 165 165 --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ 166 166 --color-reaction-bg: #ffffff12; 167 167 --color-reaction-active-bg: var(--color-primary-alpha-40); 168 + --color-tooltip-text: #ffffff; 169 + --color-tooltip-bg: #000000f0; 168 170 --color-header-bar: #2e323e; 169 - --color-label-active-bg: #4c525e; 171 + --color-label-text: #dfe3ec; 172 + --color-label-bg: #7c84974b; 173 + --color-label-hover-bg: #7c8497a0; 174 + --color-label-active-bg: #7c8497ff; 170 175 --color-accent: var(--color-primary-light-1); 171 176 --color-small-accent: var(--color-primary-light-5); 172 177 --color-active-line: #534d1b;