From a1b8b5fa0d05c95ccb0a0b54ac6fb13bafaa3d12 Mon Sep 17 00:00:00 2001 From: Gusted Date: Thu, 9 Nov 2023 22:33:29 +0100 Subject: [PATCH] Update Forgejo theme (squash) - Incorporate changes from 79a4c80f8d81e67371f6ff1f8d55bd003ab01208 into the Forgejo themes. - Fix that there's no focus or active coloring on primary and secondary buttons for Forgejo themes caused by 023e937141dd891bce3370c869d4db2c60f971ed 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 commit 2e32da4419e2cbb6cc7d2cab65b03e14fdb75db6) (cherry picked from commit a4eca09543e52342210596a58fcd68d4177a08d5) (cherry picked from commit e6e452811d8104d6a824aa0e220d80b61dd3c74d) (cherry picked from commit e9a5addf3daf56c1fec8daf0551463d9ac337534) --- web_src/css/themes/theme-forgejo-dark.css | 40 +++++++++++++++++++--- web_src/css/themes/theme-forgejo-light.css | 30 ++++++++++++++++ 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index e3b031ed2e..1700bc0079 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -44,6 +44,8 @@ --color-primary-alpha-70: #ea580cb3; --color-primary-alpha-80: #ea580ccc; --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-dark-1: var(--steel-550); --color-secondary-dark-2: var(--steel-500); @@ -71,6 +73,8 @@ --color-secondary-alpha-70: #2B3642b3; --color-secondary-alpha-80: #2B3642cc; --color-secondary-alpha-90: #2B3642e1; + --color-secondary-hover: var(--color-secondary-light-1); + --color-secondary-active: var(--color-secondary-light-2); /* colors */ --color-red: #b91c1c; --color-orange: #ea580c; @@ -99,6 +103,32 @@ --color-brown-light: #94674a; --color-grey-light: var(--steel-300); --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 */ --color-gold: #b1983b; --color-white: #ffffff; @@ -226,13 +256,15 @@ i.grey.icon.icon.icon.icon { } .ui.red.button, .ui.negative.button { - background-color: #7f1d1d !important; - color: #fff !important; - border-color: var(--color-light-border) !important; + background-color: #7f1d1d; } .ui.red.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 { border-radius: 0.28571429rem !important; diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index 7fc09a7994..9ea2a4b166 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -59,6 +59,8 @@ --color-primary-alpha-70: #c2410cb3; --color-primary-alpha-80: #c2410ccc; --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-dark-1: var(--zinc-200); --color-secondary-dark-2: var(--zinc-300); @@ -86,6 +88,8 @@ --color-secondary-alpha-70: #d4d4d8b3; --color-secondary-alpha-80: #d4d4d8cc; --color-secondary-alpha-90: #d4d4d8e1; + --color-secondary-hover: var(--color-secondary-dark-2); + --color-secondary-active: var(--color-secondary-dark-4); /* colors */ --color-red: #dc2626; --color-orange: #ea580c; @@ -114,6 +118,32 @@ --color-brown-light: #94674a; --color-grey-light: #6b7280; --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 */ --color-gold: #b1983b; --color-white: #ffffff;