Firefly-Shelter/Firefly_Srtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use less CSS to ensure compatibility with html2canvas-pro
All checks were successful
Gitea Auto Deploy / Deploy-Container (push) Successful in 1m38s
Details

Browse Source
This commit is contained in:
Azen Kain
2025-08-06 08:42:22 +07:00
parent dc82a6e44f
commit 1d6736a38d
1 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/showcaseCard/index.tsx
View File

@@ -460,7 +460,14 @@ export default function ShowCaseInfo() {
mapRelicInfo, mapRelicInfo,
avatarSkillTree avatarSkillTree
]) ])
const applyBrightness = useCallback((hex: string, brightness: number): string => {
const r = Math.round(parseInt(hex.slice(1, 3), 16) * brightness);
const g = Math.round(parseInt(hex.slice(3, 5), 16) * brightness);
const b = Math.round(parseInt(hex.slice(5, 7), 16) * brightness);
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
}, [])
const getImageSkill = useCallback((icon: string | undefined, status: StatusAddType | undefined) => { const getImageSkill = useCallback((icon: string | undefined, status: StatusAddType | undefined) => {
if (!icon) return if (!icon) return
if (icon.startsWith("SkillIcon")) { if (icon.startsWith("SkillIcon")) {
@@ -484,17 +491,15 @@ export default function ShowCaseInfo() {
</div> </div>
<div className="overflow-auto"> <div className="overflow-auto">
<div ref={cardRef} className=" relative min-h-[650px] w-[1400px] rounded-3xl"> <div
ref={cardRef}
<div className=" relative min-h-[650px] w-[1400px] rounded-3xl transition-all duration-500"
className="absolute inset-0 rounded-3xl w-full h-full transition-all duration-500 z-0" style={{
style={{ backgroundColor: `${applyBrightness(avgColor, 0.3)}`,
backgroundColor: `${avgColor}60`, backdropFilter: "blur(50px)",
backdropFilter: "blur(50px)", WebkitBackdropFilter: "blur(50px)",
WebkitBackdropFilter: "blur(50px)", }}
filter: "brightness(70%)", >
}}
/>
<div className="absolute bottom-2 left-4 z-10"> <div className="absolute bottom-2 left-4 z-10">
<span className="shadow-black [text-shadow:1px_1px_2px_var(--tw-shadow-color)]"></span> <span className="shadow-black [text-shadow:1px_1px_2px_var(--tw-shadow-color)]"></span>
</div> </div>
@@ -523,42 +528,37 @@ export default function ShowCaseInfo() {
</div> </div>
<div <div
className="relative flex min-h-[650px] w-[76%] flex-row items-center gap-3.5 rounded-3xl pl-10" className="relative flex min-h-[650px] w-[76%] flex-row items-center gap-3.5 rounded-3xl pl-10 z-10 transition-all duration-500"
style={{
backgroundColor: `${applyBrightness(avgColor, 0.5)}`,
backdropFilter: "blur(50px)",
WebkitBackdropFilter: "blur(50px)",
}}
> >
<div
className="absolute inset-0 rounded-3xl transition-all duration-500 z-0" <div className="absolute top-4 left-4">
style={{
backgroundColor: `${avgColor}80`,
backdropFilter: "blur(50px)",
WebkitBackdropFilter: "blur(50px)",
filter: "brightness(50%)",
}}
/>
<div className="absolute top-4 left-4 z-10">
{avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && ( {avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && (
<div className="flex flex-col"> <div className="flex flex-col">
{avatarInfo?.RankIcon.map((src, index) => { {avatarInfo?.RankIcon.map((src, index) => {
const isActive = avatarData?.data?.rank > index; const isActive = avatarData?.data?.rank > index;
return ( return (
<div key={index} className="relative my-2 flex rounded-full"> <div key={index} className="relative my-1 flex rounded-full">
{isActive && (
<div className="absolute inset-0">
<div className="w-full h-full rounded-full shadow-lg shadow-yellow-400/50">
</div>
</div>
)}
<NextImage <NextImage
src={src} src={src}
alt="Rank Icon" alt="Rank Icon"
width={50} width={50}
height={50} height={50}
className={`h-auto w-10 transition-all duration-300 ease-in-out className="h-auto w-12 transition-all duration-300 ease-in-out p-[1px] rounded-full"
${isActive style={{
? 'opacity-100 grayscale-0 brightness-110 drop-shadow-[0_0_8px_rgba(255,215,0,0.5)] scale-105' opacity: isActive ? 1 : 0.6,
: 'opacity-50 grayscale brightness-75' filter: isActive
}`} ? 'grayscale(0) drop-shadow(0 0 8px rgba(255,215,0,0.5))'
: 'grayscale(1)',
border: '2px solid',
borderColor: isActive ? '#facc15' : '#ffffff', // tailwind yellow-400 = #facc15
boxShadow: isActive ? '0 0 10px rgba(250,204,21,0.5)' : undefined, // mimic shadow-yellow-400/50
}}
/> />
</div> </div>
); );
@@ -568,7 +568,7 @@ export default function ShowCaseInfo() {
</div> </div>
<div className="flex h-[650px] w-1/3 flex-col justify-between py-3 pl-8 z-10"> <div className="flex h-[650px] w-1/3 flex-col justify-between py-3 pl-8">
<div className="flex h-full flex-col justify-between"> <div className="flex h-full flex-col justify-between">
<div> <div>
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">