Skip to content

Commit f0d32fb

Browse files
DarthGigiDarthGigi
committed
feat: update card components with improved styling and layout
1 parent 8459fd3 commit f0d32fb

5 files changed

Lines changed: 21 additions & 20 deletions

File tree

‎src/lib/components/cards/default/Base.svelte‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,21 +40,22 @@
4040
const mainStyle = $derived(["background-image: url(skycrypt-background)", "background-size: cover", "background-position: center", settings?.border && settings?.borderColor ? `border: 2px solid ${settings.borderColor}` : null].filter(Boolean).join("; "));
4141
</script>
4242

43-
<main class="relative h-full overflow-hidden rounded-4xl" style={mainStyle}>
43+
<main class="relative dark h-85 w-375 overflow-hidden rounded-xl" style={mainStyle}>
44+
<header>
45+
<div class="absolute top-76 left-4 flex items-center justify-center gap-2 text-base font-bold text-white" data-sveltekit-preload-data="hover">
46+
<img src="skycrypt-logo" alt="SkyCrypt" class="pointer-events-none size-6 select-none" />
47+
<span>SkyCrypt</span>
48+
</div>
49+
</header>
50+
4451
<div class="flex h-full w-full items-start justify-start">
4552
<Player showMinecraftName={settings?.showMinecraftName ?? false} />
4653
<div
47-
class="relative z-50 flex h-full w-full flex-col gap-y-2 overflow-hidden rounded-4xl p-2 px-4 backdrop-blur-lg
54+
class="relative z-50 flex h-full w-full flex-col gap-y-2 overflow-hidden rounded-xl p-2 px-4 backdrop-blur-lg
4855
backdrop-brightness-50">
4956
<Profile />
5057
<Skills />
5158
<Stats />
5259
</div>
5360
</div>
54-
<footer>
55-
<div class="absolute top-2 left-2 flex items-center justify-center gap-2 text-base font-bold text-white" data-sveltekit-preload-data="hover">
56-
<img src="skycrypt-logo" alt="SkyCrypt" class="pointer-events-none size-6 select-none" />
57-
<span>SkyCrypt</span>
58-
</div>
59-
</footer>
6061
</main>

‎src/lib/components/cards/default/ErrorCard.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<main class="relative h-full overflow-hidden rounded-4xl" style="background-image: url(skycrypt-background); background-size: cover; background-position: center">
1+
<main class="relative h-full dark overflow-hidden rounded-xl" style="background-image: url(skycrypt-background); background-size: cover; background-position: center">
22
<div class="flex h-full w-full items-center justify-center p-8">
3-
<div class="relative z-50 flex max-w-lg flex-col items-center justify-center overflow-hidden rounded-3xl p-4 text-center shadow-2xl backdrop-blur-lg backdrop-brightness-50">
4-
<h1 class="text-3xl font-bold text-red-400">Card Generation Failed</h1>
5-
<p class="text-lg text-pretty text-text/80">Something went wrong while generating the card.</p>
3+
<div class="relative z-50 flex border max-w-lg flex-col items-center justify-center overflow-hidden rounded-xl p-4 text-center shadow-2xl backdrop-blur-lg backdrop-brightness-50">
4+
<h1 class="text-3xl font-bold text-destructive">Card Generation Failed</h1>
5+
<p class="text-lg text-pretty text-foreground/80">Something went wrong while generating the card.</p>
66
</div>
77
</div>
88
<footer class="absolute bottom-4 left-4 flex items-center justify-center gap-2 text-base font-bold text-white">

‎src/lib/components/cards/default/Profile.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
const apiSettings = $derived(Object.entries(profile?.apiSettings ?? {}).filter(([_, value]) => !value));
88
</script>
99

10-
<div class="flex flex-wrap items-center gap-x-2 text-3xl text-text">
10+
<div class="flex flex-wrap items-center gap-x-2 text-3xl text-foreground">
1111
Stats for
12-
<div class="inline-flex items-center gap-2 rounded-full bg-text/10 px-1.5 py-1.5 pr-3 align-middle text-2xl font-semibold whitespace-nowrap">
12+
<div class="inline-flex items-center gap-2 rounded-full bg-foreground/10 px-1.5 py-1.5 pr-3 align-middle text-2xl font-semibold whitespace-nowrap">
1313
{#if profile != null && profile.rank?.rankColor}
1414
<div class="relative flex items-center justify-center overflow-hidden rounded-full px-2 py-1" style="background-color: {profile.rank.rankColor}">
15-
<div class="absolute top-0 -right-3 bottom-0 z-10 h-14 w-1/2 skew-x-[-20deg]" style="background-color: {profile.rank.plusColor ?? profile.rank.rankColor}"></div>
15+
<div class="absolute top-0 -right-3 bottom-0 z-30 h-14 w-1/2 skew-x-[-20deg]" style="background-color: {profile.rank.plusColor ?? profile.rank.rankColor}"></div>
1616
<div class="relative z-20 inline-flex justify-between gap-3 text-base font-bold text-white">
1717
<span>{profile.rank.rankText}</span>
1818
{#if profile.rank.plusText}
@@ -24,7 +24,7 @@
2424
<span>{profile?.displayName}</span>
2525
</div>
2626
on
27-
<div class="relative inline-flex items-center gap-2 rounded-full bg-text/10 align-middle text-2xl font-semibold data-[warning=false]:px-3 data-[warning=false]:py-1.5 data-[warning=true]:border-2 data-[warning=true]:border-yellow-500/20 data-[warning=true]:px-2.5 data-[warning=true]:py-1" data-warning={apiSettings?.length > 0}>
27+
<div class="relative inline-flex items-center gap-2 rounded-full bg-foreground/10 align-middle text-2xl font-semibold data-[warning=false]:px-3 data-[warning=false]:py-1.5 data-[warning=true]:border-2 data-[warning=true]:border-yellow-500/20 data-[warning=true]:px-2.5 data-[warning=true]:py-1" data-warning={apiSettings?.length > 0}>
2828
<div class="rounded-full">
2929
<span>{profile?.profile_cute_name}</span>
3030
<span>{@render profileIcon(profile?.game_mode ?? "")}</span>

‎src/lib/components/cards/default/Skillbar.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
</span>
3131
</div>
3232

33-
<Progress.Root value={skillData.xpCurrent} max={isMaxed ? skillData.xpCurrent : skillData.xpForNext} class="relative ml-2 flex h-4 overflow-hidden rounded-full data-[api=false]:bg-gray-500 data-[api=true]:bg-text/30" data-api={apiEnabled}>
34-
<div class="relative h-full flex-1 rounded-full transition-all duration-300 ease-out data-[api=false]:bg-gray-500 data-[api=true]:data-[maxed=false]:bg-skillbar data-[api=true]:data-[maxed=true]:bg-maxed" style="transform: translateX({-size}%);" data-maxed={isMaxed} data-api={apiEnabled}></div>
33+
<Progress.Root value={skillData.xpCurrent} max={isMaxed ? skillData.xpCurrent : skillData.xpForNext} class="relative ml-2 flex h-4 overflow-hidden rounded-full bg-foreground/30" data-api={apiEnabled}>
34+
<div class="relative h-full flex-1 rounded-full z-10 data-[api=false]:hidden data-[api=true]:data-[maxed=false]:bg-primary data-[api=true]:data-[maxed=true]:bg-accent-3" style="transform: translateX({-size}%);" data-maxed={isMaxed} data-api={apiEnabled}></div>
3535

3636
{#if apiEnabled && showXP}
3737
<div class="absolute inset-0 flex h-full justify-center">

‎src/lib/components/cards/default/Skills.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{/if}
2828

2929
{#if shouldShowSkills && profile.skills?.skills}
30-
<div class="h-px w-full rounded-full bg-text/30 py-px"></div>
30+
<div class="h-px w-full rounded-full bg-foreground/30 py-px"></div>
3131
<div class={cn("grid grid-cols-3 gap-x-4 gap-y-2", shouldShowDungeons ? "grid-cols-5" : "grid-cols-3")}>
3232
{#each Object.entries(profile.skills.skills) as [skillName, skillData], index (index)}
3333
<Skillbar skill={skillName} {skillData} apiEnabled={profile.apiSettings?.skills} />
@@ -36,7 +36,7 @@
3636
{/if}
3737

3838
{#if shouldShowDungeons}
39-
<div class="h-px w-full rounded-full bg-text/30 py-px"></div>
39+
<div class="h-px w-full rounded-full bg-foreground/30 py-px"></div>
4040
<div class={cn("grid grid-cols-3 gap-x-4 gap-y-2", shouldShowSkills ? "grid-cols-5" : "grid-cols-3")}>
4141
{#if shouldShowDungeons && !shouldShowSkills && dungeons?.level}
4242
<Skillbar skill="Catacombs" skillData={dungeons.level} apiEnabled={profile.apiSettings?.skills} />

0 commit comments

Comments
 (0)