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" /> <MedalPromoBackground class="background-pattern shadow-xl" />
<div class="z-10 flex flex-col gap-2"> <div class="z-10 flex flex-col gap-2">
<div class="flex items-center gap-2 text-2xl font-semibold text-contrast"> <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 Try a free
<span class="text-orange">3GB server</span> for 5 days powered by <span class="text-medal-orange">3GB server</span> for 5 days powered by
<span class="text-orange">Medal</span> <span class="text-medal-orange">Medal</span>
</span> </span>
</div> </div>
<div class="flex items-center"> <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)); drop-shadow(0 0 18px var(--color-orange));
} }
.text-orange { .text-medal-orange {
color: var(--medal-promotion-text-orange); color: var(--medal-promotion-text-orange);
} }
</style> </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="z-10 flex flex-col gap-1">
<div class="flex items-center gap-2 text-lg font-semibold text-contrast"> <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> <span>
Your <span class="text-orange">Medal</span> powered Modrinth Server will expire in Your <span class="text-medal-orange">Medal</span> powered Modrinth Server will expire in
<span class="font-bold text-orange">{{ timeLeftCountdown.days }}</span> days <span class="text-medal-orange font-bold">{{ timeLeftCountdown.days }}</span> days
<span class="font-bold text-orange">{{ timeLeftCountdown.hours }}</span> hours <span class="text-medal-orange font-bold">{{ timeLeftCountdown.hours }}</span> hours
<span class="font-bold text-orange">{{ timeLeftCountdown.minutes }}</span> minutes <span class="text-medal-orange font-bold">{{ timeLeftCountdown.minutes }}</span> minutes
<span class="font-bold text-orange">{{ timeLeftCountdown.seconds }}</span> seconds. <span class="text-medal-orange font-bold">{{ timeLeftCountdown.seconds }}</span> seconds.
</span> </span>
</div> </div>
</div> </div>
@ -118,7 +118,7 @@ onUnmounted(() => {
drop-shadow(0 0 18px var(--color-orange)); drop-shadow(0 0 18px var(--color-orange));
} }
.text-orange { .text-medal-orange {
color: var(--medal-promotion-text-orange); color: var(--medal-promotion-text-orange);
font-weight: bold; font-weight: bold;
} }

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

@ -16,7 +16,7 @@
> >
<MedalServerIcon <MedalServerIcon
v-if="status !== 'suspended'" 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 <div
v-else v-else
@ -236,4 +236,8 @@ onUnmounted(() => {
color: var(--medal-promotion-text-orange); color: var(--medal-promotion-text-orange);
font-weight: bold; font-weight: bold;
} }
.border-medal-orange {
border-color: var(--medal-promotion-bg-orange);
}
</style> </style>