Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: border around server icon

Browse Source
This commit is contained in:
Calum H. 2025-08-05 17:38:33 +01:00
parent 54958491b3
commit 42a2451990
3 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
View File

@ -7,10 +7,10 @@
<MedalPromoBackground class="background-pattern shadow-xl" />
<div class="z-10 flex flex-col gap-2">
<div class="flex items-center gap-2 text-2xl font-semibold text-contrast">
<ClockIcon class="clock-glow size-6 text-orange" /><span>
<ClockIcon class="clock-glow text-medal-orange size-6" /><span>
Try a free
<span class="text-orange">3GB server</span> for 5 days powered by
<span class="text-orange">Medal</span>
<span class="text-medal-orange">3GB server</span> for 5 days powered by
<span class="text-medal-orange">Medal</span>
</span>
</div>
<div class="flex items-center">
@ -66,7 +66,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
drop-shadow(0 0 18px var(--color-orange));
}
.text-orange {
.text-medal-orange {
color: var(--medal-promotion-text-orange);
}
</style>

14
apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
View File

@ -7,13 +7,13 @@
<div class="z-10 flex flex-col gap-1">
<div class="flex items-center gap-2 text-lg font-semibold text-contrast">
<ClockIcon class="clock-glow size-5 text-orange" />
<ClockIcon class="clock-glow text-medal-orange size-5" />
<span>
Your <span class="text-orange">Medal</span> powered Modrinth Server will expire in
<span class="font-bold text-orange">{{ timeLeftCountdown.days }}</span> days
<span class="font-bold text-orange">{{ timeLeftCountdown.hours }}</span> hours
<span class="font-bold text-orange">{{ timeLeftCountdown.minutes }}</span> minutes
<span class="font-bold text-orange">{{ timeLeftCountdown.seconds }}</span> seconds.
Your <span class="text-medal-orange">Medal</span> powered Modrinth Server will expire in
<span class="text-medal-orange font-bold">{{ timeLeftCountdown.days }}</span> days
<span class="text-medal-orange font-bold">{{ timeLeftCountdown.hours }}</span> hours
<span class="text-medal-orange font-bold">{{ timeLeftCountdown.minutes }}</span> minutes
<span class="text-medal-orange font-bold">{{ timeLeftCountdown.seconds }}</span> seconds.
</span>
</div>
</div>
@ -118,7 +118,7 @@ onUnmounted(() => {
drop-shadow(0 0 18px var(--color-orange));
}
.text-orange {
.text-medal-orange {
color: var(--medal-promotion-text-orange);
font-weight: bold;
}

6
apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
View File

@ -16,7 +16,7 @@
>
<MedalServerIcon
v-if="status !== 'suspended'"
class="z-10 size-16 shrink-0 rounded-xl bg-bg text-orange"
class="border-medal-orange z-10 size-16 shrink-0 rounded-xl border-[1px] border-solid bg-bg text-orange"
/>
<div
v-else
@ -236,4 +236,8 @@ onUnmounted(() => {
color: var(--medal-promotion-text-orange);
font-weight: bold;
}
.border-medal-orange {
border-color: var(--medal-promotion-bg-orange);
}
</style>