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

fix: styling changes

Browse Source
This commit is contained in:
IMB11
2025-08-04 18:08:02 +01:00
parent 2da2b4aec7
commit 6401a8937b
3 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/frontend/src/assets/styles/global.scss
View File

@@ -165,6 +165,9 @@ html {
--landing-raw-bg: #fff;
--medal-promotion-bg: #fff;
--medal-promotion-orange: #a86f35;
--banner-error-bg: #fee2e2;
--banner-error-text: #991b1b;
--banner-error-border: #ef4444;
@@ -301,6 +304,9 @@ html {
--landing-raw-bg: #000;
--medal-promotion-bg: #000;
--medal-promotion-orange: #b3600c54;
--hover-filter: brightness(120%);
--active-filter: brightness(140%);

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

@@ -140,7 +140,7 @@ const timeLeftCountdown = computed(() => {
<style scoped lang="scss">
.medal-promotion {
position: relative;
border: 1px solid var(--color-orange);
border: 1px solid var(--medal-promotion-orange);
background: inherit; // allows overlay + pattern to take over
}
.overlay {
@@ -149,7 +149,12 @@ const timeLeftCountdown = computed(() => {
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 50%, var(--landing-raw-bg) 100%);
background: linear-gradient(
90deg,
var(--medal-promotion-bg) 10%,
transparent 30%,
var(--medal-promotion-bg) 100%
);
z-index: 1;
border-radius: inherit;
}
@@ -160,7 +165,7 @@ const timeLeftCountdown = computed(() => {
width: 100%;
height: 100%;
z-index: 0;
background-color: var(--landing-raw-bg);
background-color: var(--medal-promotion-bg);
border-radius: inherit;
color: var(--color-orange);
}

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

@@ -9,7 +9,7 @@
<div class="flex items-center gap-2 text-2xl font-semibold text-contrast">
<ClockIcon class="clock-glow size-6 text-orange" /><span>
Try a free
<span class="text-orange">3GB Server</span> for 5 days powered by
<span class="text-orange">3GB server</span> for 5 days powered by
<span class="text-orange">Medal</span>
</span>
</div>
@@ -34,7 +34,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
<style scoped lang="scss">
.medal-promotion {
position: relative;
border: 1px solid var(--color-orange);
border: 1px solid var(--medal-promotion-orange);
}
.overlay {
@@ -43,7 +43,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 50%, var(--landing-raw-bg) 100%);
background: linear-gradient(90deg, #45311470 50%, var(--medal-promotion-bg) 100%);
z-index: 1;
border-radius: inherit;
}
@@ -55,7 +55,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
width: 100%;
height: 100%;
z-index: 0;
background-color: var(--landing-raw-bg);
background-color: var(--medal-promotion-bg);
border-radius: inherit;
color: var(--color-orange);
}