Improve how icon colors are defined
- define specific colors for icons for themes - fix related contrast issues on Forgejo dark theme
This commit is contained in:
parent
2b2fd2728c
commit
b1a239cdc4
5 changed files with 30 additions and 6 deletions
|
@ -1143,6 +1143,20 @@ overflow-menu .ui.label {
|
||||||
color: var(--color-secondary-dark-2) !important;
|
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 {
|
.oauth2-authorize-application-box {
|
||||||
margin-top: 3em !important;
|
margin-top: 3em !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -178,6 +178,10 @@
|
||||||
--color-orange-badge-bg: #ea580c22;
|
--color-orange-badge-bg: #ea580c22;
|
||||||
--color-orange-badge-hover-bg: #ea580c44;
|
--color-orange-badge-hover-bg: #ea580c44;
|
||||||
--color-git: #f05133;
|
--color-git: #f05133;
|
||||||
|
/* Icon colors (PR/Issue/...) */
|
||||||
|
--color-icon-green: #3fb950;
|
||||||
|
--color-icon-red: #f85149;
|
||||||
|
--color-icon-purple: #aa76ff;
|
||||||
/* target-based colors */
|
/* target-based colors */
|
||||||
--color-body: var(--steel-800);
|
--color-body: var(--steel-800);
|
||||||
--color-box-header: var(--steel-700);
|
--color-box-header: var(--steel-700);
|
||||||
|
@ -262,9 +266,6 @@
|
||||||
.emoji[aria-label="musical notes"] {
|
.emoji[aria-label="musical notes"] {
|
||||||
filter: invert(100%) hue-rotate(180deg);
|
filter: invert(100%) hue-rotate(180deg);
|
||||||
}
|
}
|
||||||
.text.green.svg {
|
|
||||||
color: var(--color-green-light) !important;
|
|
||||||
}
|
|
||||||
i.grey.icon.icon.icon.icon {
|
i.grey.icon.icon.icon.icon {
|
||||||
color: var(--steel-350) !important;
|
color: var(--steel-350) !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -195,6 +195,10 @@
|
||||||
--color-orange-badge-bg: #ea580c22;
|
--color-orange-badge-bg: #ea580c22;
|
||||||
--color-orange-badge-hover-bg: #ea580c44;
|
--color-orange-badge-hover-bg: #ea580c44;
|
||||||
--color-git: #f05133;
|
--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 */
|
/* target-based colors */
|
||||||
--color-body: #fff;
|
--color-body: #fff;
|
||||||
--color-box-header: var(--zinc-100);
|
--color-box-header: var(--zinc-100);
|
||||||
|
@ -255,9 +259,6 @@
|
||||||
accent-color: var(--color-accent);
|
accent-color: var(--color-accent);
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
}
|
}
|
||||||
.text.green.svg {
|
|
||||||
color: var(--color-green-light) !important;
|
|
||||||
}
|
|
||||||
.ui.secondary.vertical.menu {
|
.ui.secondary.vertical.menu {
|
||||||
border-radius: 0.28571429rem !important;
|
border-radius: 0.28571429rem !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -179,6 +179,10 @@
|
||||||
--color-orange-badge-bg: #f2711c1a;
|
--color-orange-badge-bg: #f2711c1a;
|
||||||
--color-orange-badge-hover-bg: #f2711c4d;
|
--color-orange-badge-hover-bg: #f2711c4d;
|
||||||
--color-git: #f05133;
|
--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 */
|
/* target-based colors */
|
||||||
--color-body: #1c1f25;
|
--color-body: #1c1f25;
|
||||||
--color-box-header: #1a1d1f;
|
--color-box-header: #1a1d1f;
|
||||||
|
|
|
@ -179,6 +179,10 @@
|
||||||
--color-orange-badge-bg: #f2711c1a;
|
--color-orange-badge-bg: #f2711c1a;
|
||||||
--color-orange-badge-hover-bg: #f2711c4d;
|
--color-orange-badge-hover-bg: #f2711c4d;
|
||||||
--color-git: #f05133;
|
--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 */
|
/* target-based colors */
|
||||||
--color-body: #ffffff;
|
--color-body: #ffffff;
|
||||||
--color-box-header: #f1f3f5;
|
--color-box-header: #f1f3f5;
|
||||||
|
|
Loading…
Reference in a new issue