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

fix: light mode medal promotion

Browse Source
This commit is contained in:
Calum H. 2025-08-05 12:20:47 +01:00
parent ea1789ebf6
commit 0b3cbbd37a
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -166,7 +166,9 @@ html {
--landing-raw-bg: #fff; --landing-raw-bg: #fff;
--medal-promotion-bg: #fff; --medal-promotion-bg: #fff;
--medal-promotion-orange: #c08a3a; --medal-promotion-bg-orange:#c08a3a;
--medal-promotion-text-orange: #A86200;
--medal-promotion-bg-gradient: linear-gradient(90deg, rgba(255, 184, 75, 0.15) 0%, #FFF 100%);
--banner-error-bg: #fee2e2; --banner-error-bg: #fee2e2;
--banner-error-text: #991b1b; --banner-error-text: #991b1b;
@ -305,7 +307,14 @@ html {
--landing-raw-bg: #000; --landing-raw-bg: #000;
--medal-promotion-bg: #000; --medal-promotion-bg: #000;
--medal-promotion-orange: #FFB84B54; --medal-promotion-bg-orange: #FFB84B54;
--medal-promotion-text-orange: #ffb84b;
--medal-promotion-bg-gradient: linear-gradient(
90deg,
#ffb74b21,
transparent 50%,
#000 100%
);
--hover-filter: brightness(120%); --hover-filter: brightness(120%);
--active-filter: brightness(140%); --active-filter: brightness(140%);

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

@ -34,7 +34,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
<style scoped lang="scss"> <style scoped lang="scss">
.medal-promotion { .medal-promotion {
position: relative; position: relative;
border: 1px solid var(--medal-promotion-orange); border: 1px solid var(--medal-promotion-bg-orange);
} }
.overlay { .overlay {
@ -43,12 +43,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient( background: var(--medal-promotion-bg-gradient);
90deg,
color-mix(in srgb, var(--medal-promotion-orange) 25%, transparent),
transparent 50%,
var(--medal-promotion-bg) 100%
);
z-index: 1; z-index: 1;
border-radius: inherit; border-radius: inherit;
} }
@ -71,6 +66,6 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
} }
.text-orange { .text-orange {
color: #ffb84b; color: var(--medal-promotion-text-orange);
} }
</style> </style>

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

@ -140,7 +140,7 @@ const timeLeftCountdown = computed(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.medal-promotion { .medal-promotion {
position: relative; position: relative;
border: 1px solid var(--medal-promotion-orange); border: 1px solid var(--medal-promotion-bg-orange);
background: inherit; // allows overlay + pattern to take over background: inherit; // allows overlay + pattern to take over
} }
.overlay { .overlay {
@ -167,6 +167,6 @@ const timeLeftCountdown = computed(() => {
z-index: 0; z-index: 0;
background-color: var(--medal-promotion-bg); background-color: var(--medal-promotion-bg);
border-radius: inherit; border-radius: inherit;
color: var(--color-orange); color: var(--medal-promotion-text-orange);
} }
</style> </style>

2
apps/frontend/src/pages/servers/manage/index.vue
View File

@ -120,7 +120,7 @@ import { ButtonStyled, CopyCode } from "@modrinth/ui";
import type { Server, ModrinthServersFetchError } from "@modrinth/utils"; import type { Server, ModrinthServersFetchError } from "@modrinth/utils";
import { reloadNuxtApp } from "#app"; import { reloadNuxtApp } from "#app";
import { useServersFetch } from "~/composables/servers/servers-fetch.ts"; import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
import MedalServerListing from "~/components/ui/servers/MedalServerListing.vue"; import MedalServerListing from "~/components/ui/servers/marketing/MedalServerListing.vue";
definePageMeta({ definePageMeta({
middleware: "auth", middleware: "auth",