mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-22 05:15:33 +03:00
Update Forgejo theme (squash)
- Incorporate changes from79a4c80f8d
into the Forgejo themes. - Fix that there's no focus or active coloring on primary and secondary buttons for Forgejo themes caused by023e937141
that moved variablse from base.css (shared) to the themes. - Extend hack to make red buttons darker on dark Forgejo theme to include active styling and remove the unnecessary `!important`. (cherry picked from commit2e32da4419
) (cherry picked from commita4eca09543
) (cherry picked from commite6e452811d
) (cherry picked from commite9a5addf3d
)
This commit is contained in:
parent
e1baa0a300
commit
a1b8b5fa0d
2 changed files with 66 additions and 4 deletions
|
@ -44,6 +44,8 @@
|
||||||
--color-primary-alpha-70: #ea580cb3;
|
--color-primary-alpha-70: #ea580cb3;
|
||||||
--color-primary-alpha-80: #ea580ccc;
|
--color-primary-alpha-80: #ea580ccc;
|
||||||
--color-primary-alpha-90: #ea580ce1;
|
--color-primary-alpha-90: #ea580ce1;
|
||||||
|
--color-primary-hover: var(--color-primary-light-1);
|
||||||
|
--color-primary-active: var(--color-primary-light-2);
|
||||||
--color-secondary: var(--steel-700);
|
--color-secondary: var(--steel-700);
|
||||||
--color-secondary-dark-1: var(--steel-550);
|
--color-secondary-dark-1: var(--steel-550);
|
||||||
--color-secondary-dark-2: var(--steel-500);
|
--color-secondary-dark-2: var(--steel-500);
|
||||||
|
@ -71,6 +73,8 @@
|
||||||
--color-secondary-alpha-70: #2B3642b3;
|
--color-secondary-alpha-70: #2B3642b3;
|
||||||
--color-secondary-alpha-80: #2B3642cc;
|
--color-secondary-alpha-80: #2B3642cc;
|
||||||
--color-secondary-alpha-90: #2B3642e1;
|
--color-secondary-alpha-90: #2B3642e1;
|
||||||
|
--color-secondary-hover: var(--color-secondary-light-1);
|
||||||
|
--color-secondary-active: var(--color-secondary-light-2);
|
||||||
/* colors */
|
/* colors */
|
||||||
--color-red: #b91c1c;
|
--color-red: #b91c1c;
|
||||||
--color-orange: #ea580c;
|
--color-orange: #ea580c;
|
||||||
|
@ -99,6 +103,32 @@
|
||||||
--color-brown-light: #94674a;
|
--color-brown-light: #94674a;
|
||||||
--color-grey-light: var(--steel-300);
|
--color-grey-light: var(--steel-300);
|
||||||
--color-black-light: #1f2937;
|
--color-black-light: #1f2937;
|
||||||
|
/* dark 1 variants produced via Sass scale-color(color, $lightness: -10%) */
|
||||||
|
--color-red-dark-1: #a71919;
|
||||||
|
--color-orange-dark-1: #d34f0b;
|
||||||
|
--color-yellow-dark-1: #b67c04;
|
||||||
|
--color-olive-dark-1: #839311;
|
||||||
|
--color-green-dark-1: #137337;
|
||||||
|
--color-teal-dark-1: #0c857a;
|
||||||
|
--color-blue-dark-1: #1554e0;
|
||||||
|
--color-violet-dark-1: #6a1feb;
|
||||||
|
--color-purple-dark-1: #8519e7;
|
||||||
|
--color-pink-dark-1: #c7216b;
|
||||||
|
--color-brown-dark-1: #94674a;
|
||||||
|
--color-black-dark-1: #0f1623;
|
||||||
|
/* dark 2 variants produced via Sass scale-color(color, $lightness: -20%) */
|
||||||
|
--color-red-dark-2: #941616;
|
||||||
|
--color-orange-dark-2: #bb460a;
|
||||||
|
--color-yellow-dark-2: #ca8a04;
|
||||||
|
--color-olive-dark-2: #91a313;
|
||||||
|
--color-green-dark-2: #15803d;
|
||||||
|
--color-teal-dark-2: #0a766d;
|
||||||
|
--color-blue-dark-2: #2563eb;
|
||||||
|
--color-violet-dark-2: #5c14d8;
|
||||||
|
--color-purple-dark-2: #7c3aed;
|
||||||
|
--color-pink-dark-2: #b11d5f;
|
||||||
|
--color-brown-dark-2: #a47252;
|
||||||
|
--color-black-dark-2: #111827;
|
||||||
/* other colors */
|
/* other colors */
|
||||||
--color-gold: #b1983b;
|
--color-gold: #b1983b;
|
||||||
--color-white: #ffffff;
|
--color-white: #ffffff;
|
||||||
|
@ -226,13 +256,15 @@ i.grey.icon.icon.icon.icon {
|
||||||
}
|
}
|
||||||
.ui.red.button,
|
.ui.red.button,
|
||||||
.ui.negative.button {
|
.ui.negative.button {
|
||||||
background-color: #7f1d1d !important;
|
background-color: #7f1d1d;
|
||||||
color: #fff !important;
|
|
||||||
border-color: var(--color-light-border) !important;
|
|
||||||
}
|
}
|
||||||
.ui.red.button:hover,
|
.ui.red.button:hover,
|
||||||
.ui.negative.button:hover {
|
.ui.negative.button:hover {
|
||||||
background-color: #991b1b !important;
|
background-color: #991b1b;
|
||||||
|
}
|
||||||
|
.ui.red.button:active,
|
||||||
|
.ui.negative.button:active {
|
||||||
|
background-color: #aa1919;
|
||||||
}
|
}
|
||||||
.ui.secondary.vertical.menu {
|
.ui.secondary.vertical.menu {
|
||||||
border-radius: 0.28571429rem !important;
|
border-radius: 0.28571429rem !important;
|
||||||
|
|
|
@ -59,6 +59,8 @@
|
||||||
--color-primary-alpha-70: #c2410cb3;
|
--color-primary-alpha-70: #c2410cb3;
|
||||||
--color-primary-alpha-80: #c2410ccc;
|
--color-primary-alpha-80: #c2410ccc;
|
||||||
--color-primary-alpha-90: #c2410ce1;
|
--color-primary-alpha-90: #c2410ce1;
|
||||||
|
--color-primary-hover: var(--color-primary-dark-2);
|
||||||
|
--color-primary-active: var(--color-primary-dark-4);
|
||||||
--color-secondary: var(--zinc-200);
|
--color-secondary: var(--zinc-200);
|
||||||
--color-secondary-dark-1: var(--zinc-200);
|
--color-secondary-dark-1: var(--zinc-200);
|
||||||
--color-secondary-dark-2: var(--zinc-300);
|
--color-secondary-dark-2: var(--zinc-300);
|
||||||
|
@ -86,6 +88,8 @@
|
||||||
--color-secondary-alpha-70: #d4d4d8b3;
|
--color-secondary-alpha-70: #d4d4d8b3;
|
||||||
--color-secondary-alpha-80: #d4d4d8cc;
|
--color-secondary-alpha-80: #d4d4d8cc;
|
||||||
--color-secondary-alpha-90: #d4d4d8e1;
|
--color-secondary-alpha-90: #d4d4d8e1;
|
||||||
|
--color-secondary-hover: var(--color-secondary-dark-2);
|
||||||
|
--color-secondary-active: var(--color-secondary-dark-4);
|
||||||
/* colors */
|
/* colors */
|
||||||
--color-red: #dc2626;
|
--color-red: #dc2626;
|
||||||
--color-orange: #ea580c;
|
--color-orange: #ea580c;
|
||||||
|
@ -114,6 +118,32 @@
|
||||||
--color-brown-light: #94674a;
|
--color-brown-light: #94674a;
|
||||||
--color-grey-light: #6b7280;
|
--color-grey-light: #6b7280;
|
||||||
--color-black-light: #181818;
|
--color-black-light: #181818;
|
||||||
|
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
|
||||||
|
--color-red-dark-1: #c82020;
|
||||||
|
--color-orange-dark-1: #d34f0b;
|
||||||
|
--color-yellow-dark-1: #b67c04;
|
||||||
|
--color-olive-dark-1: #839311;
|
||||||
|
--color-green-dark-1: #137337;
|
||||||
|
--color-teal-dark-1: #0c857a;
|
||||||
|
--color-blue-dark-1: #1554e0;
|
||||||
|
--color-violet-dark-1: #6a1feb;
|
||||||
|
--color-purple-dark-1: #8519e7;
|
||||||
|
--color-pink-dark-1: #c7216b;
|
||||||
|
--color-brown-dark-1: #94674a;
|
||||||
|
--color-black-dark-1: #000000;
|
||||||
|
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
|
||||||
|
--color-red-dark-2: #b21d1d;
|
||||||
|
--color-orange-dark-2: #bb460a;
|
||||||
|
--color-yellow-dark-2: #a26e03;
|
||||||
|
--color-olive-dark-2: #74820f;
|
||||||
|
--color-green-dark-2: #116631;
|
||||||
|
--color-teal-dark-2: #0a766d;
|
||||||
|
--color-blue-dark-2: #124bc7;
|
||||||
|
--color-violet-dark-2: #5c14d8;
|
||||||
|
--color-purple-dark-2: #7715cf;
|
||||||
|
--color-pink-dark-2: #b11d5f;
|
||||||
|
--color-brown-dark-2: #835b42;
|
||||||
|
--color-black-dark-2: #000000;
|
||||||
/* other colors */
|
/* other colors */
|
||||||
--color-gold: #b1983b;
|
--color-gold: #b1983b;
|
||||||
--color-white: #ffffff;
|
--color-white: #ffffff;
|
||||||
|
|
Loading…
Reference in a new issue