From a78602dfe104b9dce4ae97d6bf25d2eace576e6e Mon Sep 17 00:00:00 2001 From: steam_bell_92 Date: Wed, 29 Oct 2025 20:37:58 +0530 Subject: [PATCH 1/3] Added Achievement Skin Tone hovering effects --- src/pages/badges/github-badges.module.css | 45 +++++++ src/pages/badges/github-badges.tsx | 156 ++++++++++++++-------- 2 files changed, 143 insertions(+), 58 deletions(-) diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css index d1dcb4ee..02ec10bd 100644 --- a/src/pages/badges/github-badges.module.css +++ b/src/pages/badges/github-badges.module.css @@ -1485,6 +1485,51 @@ table tr:last-child td:last-child { position: relative; } +/* Mirror levelImages styling for skin tone table so skin-tone badges match Public Sponsor theme */ +.skinToneTable .levelImages { + display: flex; + justify-content: center; + align-items: center; + padding: 8px; + border-radius: 12px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border: 2px solid #e2e8f0; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.skinToneTable .levelImages:hover { + transform: translateY(-1px); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + border-color: #c7d2fe; +} + +.skinToneTable .levelImages img { + width: clamp(28px, 4vw, 44px); + height: clamp(28px, 4vw, 44px); + border-radius: 12px; + border: 2px solid #e5e7eb; + background: white; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.08), + 0 1px 2px rgba(0, 0, 0, 0.04); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.skinToneTable .levelImages img:hover { + transform: scale(1.12); + box-shadow: + 0 6px 16px rgba(0, 0, 0, 0.15), + 0 3px 8px rgba(0, 0, 0, 0.1); + border-color: #3b82f6; + z-index: 10; + position: relative; +} + /* Enhanced Needed Amount Section */ .achievementsTable .neededAmount { font-weight: 600; diff --git a/src/pages/badges/github-badges.tsx b/src/pages/badges/github-badges.tsx index 1c9f98e3..2aaad04c 100644 --- a/src/pages/badges/github-badges.tsx +++ b/src/pages/badges/github-badges.tsx @@ -751,45 +751,63 @@ const GithubBadgesContent = (): React.ReactElement => { Starstruck - {" "} +
+ Starstruck Default +
👋 - {" "} +
+ Starstruck Skin Tone 2 +
👋🏻 - {" "} +
+ Starstruck Skin Tone 3 +
👋🏼 - {" "} +
+ Starstruck Skin Tone 4 +
👋🏽 - {" "} +
+ Starstruck Skin Tone 5 +
👋🏾 - {" "} +
+ Starstruck Skin Tone 6 +
👋🏿 @@ -803,45 +821,63 @@ const GithubBadgesContent = (): React.ReactElement => { Quickdraw - {" "} +
+ Quickdraw Default +
👋 - {" "} +
+ Quickdraw Skin Tone 2 +
👋🏻 - {" "} +
+ Quickdraw Skin Tone 3 +
👋🏼 - {" "} +
+ Quickdraw Skin Tone 4 +
👋🏽 - {" "} +
+ Quickdraw Skin Tone 5 +
👋🏾 - {" "} +
+ Quickdraw Skin Tone 6 +
👋🏿 @@ -991,11 +1027,13 @@ const GithubBadgesContent = (): React.ReactElement => {
DEFAULT
- Mars 2020 Contributor +
+ Mars 2020 Contributor +
1
@@ -1022,11 +1060,13 @@ const GithubBadgesContent = (): React.ReactElement => {
DEFAULT
- Arctic Code Vault Contributor +
+ Arctic Code Vault Contributor +
1
From c58e9defe21e0aaea44b1259839c0a52360f7f40 Mon Sep 17 00:00:00 2001 From: Anuj Kulkarni Date: Wed, 29 Oct 2025 22:55:29 +0530 Subject: [PATCH 2/3] Update github-badges.module.css --- src/pages/badges/github-badges.module.css | 30 ++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css index 02ec10bd..28afe3c9 100644 --- a/src/pages/badges/github-badges.module.css +++ b/src/pages/badges/github-badges.module.css @@ -1604,6 +1604,34 @@ table tr:last-child td:last-child { 0 3px 6px rgba(59, 130, 246, 0.3); } +/* Dark theme overrides for neededAmount */ +[data-theme="dark"] .achievementsTable .neededAmount { + color: var(--ifm-color-white) !important; + background: linear-gradient( + 135deg, + var(--dark-bg-tertiary) 0%, + var(--dark-bg-secondary) 100% + ) !important; + border-color: var(--dark-border) !important; + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.4), + 0 2px 4px rgba(0, 0, 0, 0.3) !important; +} + +[data-theme="dark"] .achievementsTable .neededAmount::before { + /* Adjusts the hover shine effect for dark mode */ + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.15), + transparent + ) !important; +} + +[data-theme="dark"] .achievementsTable .neededAmount:hover { + border-color: var(--ifm-color-primary) !important; +} + /* Enhanced Badge Levels Container */ .achievementsTable .badgeLevels { display: flex; @@ -1913,4 +1941,4 @@ table tr:last-child td:last-child { [data-theme="dark"] .achievementsTable td b:hover { box-shadow: 0 4px 10px rgba(37, 194, 160, 0.4) !important; -} \ No newline at end of file +} From 7d620b1c166c1fe6588a128f29d5a97624bcab73 Mon Sep 17 00:00:00 2001 From: Anuj Kulkarni Date: Wed, 29 Oct 2025 22:57:18 +0530 Subject: [PATCH 3/3] Update github-badges.module.css --- src/pages/badges/github-badges.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/badges/github-badges.module.css b/src/pages/badges/github-badges.module.css index 28afe3c9..5b78c1ff 100644 --- a/src/pages/badges/github-badges.module.css +++ b/src/pages/badges/github-badges.module.css @@ -1518,6 +1518,8 @@ table tr:last-child td:last-child { 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + } .skinToneTable .levelImages img:hover {