mirror/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-29 12:46:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Improve how icon colors are defined

Browse source 
- define specific colors for icons for themes
- fix related contrast issues on Forgejo dark theme
This commit is contained in:
0ko 2024-05-10 23:19:35 +05:00
parent 2b2fd2728c
commit b1a239cdc4
5 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web_src/css/base.css
View file

@ -1143,6 +1143,20 @@ overflow-menu .ui.label {
color: var(--color-secondary-dark-2) !important;
}
/* colors of colorful icons */
svg.text.green,
.text.green svg {
color: var(--color-icon-green) !important;
}
svg.text.red,
.text.red svg {
color: var(--color-icon-red) !important;
}
svg.text.purple,
.text.purple svg {
color: var(--color-icon-purple) !important;
}
.oauth2-authorize-application-box {
margin-top: 3em !important;
}

7
web_src/css/themes/theme-forgejo-dark.css
View file

@ -178,6 +178,10 @@
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: #3fb950;
--color-icon-red: #f85149;
--color-icon-purple: #aa76ff;
/* target-based colors */
--color-body: var(--steel-800);
--color-box-header: var(--steel-700);
@ -262,9 +266,6 @@
.emoji[aria-label="musical notes"] {
filter: invert(100%) hue-rotate(180deg);
}
.text.green.svg {
color: var(--color-green-light) !important;
}
i.grey.icon.icon.icon.icon {
color: var(--steel-350) !important;
}

7
web_src/css/themes/theme-forgejo-light.css
View file

@ -195,6 +195,10 @@
--color-orange-badge-bg: #ea580c22;
--color-orange-badge-hover-bg: #ea580c44;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green-light);
--color-icon-red: var(--color-red-light);
--color-icon-purple: var(--color-purple-light);
/* target-based colors */
--color-body: #fff;
--color-box-header: var(--zinc-100);
@ -255,9 +259,6 @@
accent-color: var(--color-accent);
color-scheme: light;
}
.text.green.svg {
color: var(--color-green-light) !important;
}
.ui.secondary.vertical.menu {
border-radius: 0.28571429rem !important;
overflow: hidden;

4
web_src/css/themes/theme-gitea-dark.css
View file

@ -179,6 +179,10 @@
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
--color-icon-purple: var(--color-purple);
/* target-based colors */
--color-body: #1c1f25;
--color-box-header: #1a1d1f;

4
web_src/css/themes/theme-gitea-light.css
View file

@ -179,6 +179,10 @@
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
/* Icon colors (PR/Issue/...) */
--color-icon-green: var(--color-green);
--color-icon-red: var(--color-red);
--color-icon-purple: var(--color-purple);
/* target-based colors */
--color-body: #ffffff;
--color-box-header: #f1f3f5;