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

fixed a bug

Browse Source
This commit is contained in:
Prospector 2025-03-31 17:21:31 -07:00
parent b9d90aa635
commit 49faba6ad2
11 changed files with 183 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,9 +56,9 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: var(--color-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
--color-brand: #F16436;
--color-brand-highlight: rgba(242, 101, 53, 0.25);
--color-brand-shadow: rgba(242, 101, 53, 0.7);
--color-brand-inverted: #ffffff;
--tab-underline-hovered: #e2e8f0;
@ -139,10 +139,10 @@ html {
);
--landing-border-gradient: linear-gradient(
to bottom right,
rgba(129, 137, 175, 0.75) 0%,
rgba(66, 71, 97, 0.34) 100%
rgba(175, 150, 129, 0.75) 0%,
rgba(97, 66, 66, 0.34) 100%
);
--landing-border-color: rgba(129, 137, 175, 0.55);
--landing-border-color: rgba(175, 134, 129, 0.55);
--landing-creator-gradient: linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 63.19%);
--landing-blob-gradient: radial-gradient(
@ -158,8 +158,8 @@ html {
--landing-blue-label: #0098ba;
--landing-blue-label-bg: rgba(0, 177, 216, 0.15);
--landing-green-label: #00a936;
--landing-green-label-bg: rgba(0, 216, 69, 0.15);
--landing-green-label: #dd5b0b;
--landing-green-label-bg: rgba(221, 67, 21, 0.15);
--landing-raw-bg: #fff;
}
@ -174,22 +174,22 @@ html {
--color-text-inactive: #929aa3;
--color-text-dark: var(--dark-color-text-dark);
--color-heading: #c4cfdd;
--color-bg: #16181c;
--color-raised-bg: #26292f;
--color-bg: #0D0D0D;
--color-raised-bg: #202020;
--color-divider: #474b54;
--color-divider-dark: #646c75;
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--color-brand: #F16436;
--color-brand-highlight: rgba(242, 101, 53, 0.25);
--color-brand-shadow: rgba(242, 101, 53, 0.7);
--color-brand-inverted: #000;
--tab-underline-hovered: #414146;
--color-button-bg: hsl(222, 13%, 30%);
--color-button-bg: #333333;
--color-button-text: var(--color-text);
--color-button-bg-hover: #494f58;
--color-button-text-hover: #ffffff;
@ -245,42 +245,42 @@ html {
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
--landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
--landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
--landing-maze-gradient-bg: linear-gradient(0deg, #371f17 0%, rgba(8, 14, 55, 0) 100%),
url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
--landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
--landing-color-heading: #fff;
--landing-color-subheading: #afb6be;
--landing-color-subheading: #beb4af;
--landing-transition-gradient-start: rgba(14, 16, 32, 0);
--landing-transition-gradient-end: #060a1c;
--landing-transition-gradient-start: rgba(32, 26, 14, 0);
--landing-transition-gradient-end: #1c0b06;
--landing-hover-card-gradient: radial-gradient(
50% 50% at 50% 50%,
#2c304f 0%,
rgba(32, 35, 50, 0.77) 100%
#4f342c 0%,
rgba(50, 33, 32, 0.77) 100%
);
--landing-border-gradient: linear-gradient(
to bottom right,
rgba(168, 177, 221, 0.75) 0%,
rgba(168, 177, 221, 0.18) 100%
rgba(221, 184, 168, 0.75) 0%,
rgba(221, 187, 168, 0.18) 100%
);
--landing-border-color: rgba(168, 177, 221, 0.55);
--landing-creator-gradient: linear-gradient(180deg, #000000 0%, #0e101d 100%);
--landing-border-color: rgba(221, 174, 168, 0.55);
--landing-creator-gradient: linear-gradient(180deg, #000000 0%, #1d130e 100%);
--landing-blob-gradient: radial-gradient(
50% 50% at 50% 50%,
rgba(44, 48, 79, 0.35) 0%,
rgba(32, 35, 50, 0.2695) 100%
rgba(79, 53, 44, 0.35) 0%,
rgba(50, 35, 32, 0.27) 100%
);
--landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
--landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(94, 71, 57, 0.45);
--landing-card-bg: rgba(59, 63, 85, 0.15);
--landing-card-bg: rgba(85, 69, 59, 0.15);
--landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
--landing-blue-label: #10c0e7;
--landing-blue-label-bg: rgba(0, 177, 216, 0.15);
--landing-green-label: #00d845;
--landing-green-label-bg: rgba(0, 216, 69, 0.15);
--landing-green-label: #ec6105;
--landing-green-label-bg: rgba(223, 83, 7, 0.15);
--landing-raw-bg: #000;

2
apps/frontend/src/components/ui/AdPlaceholder.vue
View File

@ -2,7 +2,7 @@
<div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
<div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
<p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
<nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
<nuxt-link to="/plus" class="mt-auto items-center gap-1 text-brand hover:underline">
<span>
Support creators and Modrinth ad-free with
<span class="font-bold">Modrinth+</span>

6
apps/frontend/src/components/ui/charts/ChartDisplay.vue
View File

@ -86,8 +86,8 @@
<UpdatedIcon />
</Button>
<DropdownSelect
class="range-dropdown"
v-model="selectedRange"
class="range-dropdown"
:options="ranges"
name="Time range"
:display-name="
@ -812,10 +812,10 @@ const defaultRanges: RangeObject[] = [
.chart-button-base__selected {
color: var(--color-contrast);
background-color: var(--color-brand-highlight);
background-color: var(--color-brand-highlight) !important;
box-shadow:
inset 0 0 0 transparent,
0 0 0 2px var(--color-brand);
0 0 0 2px var(--color-brand) !important;
&:hover {
background-color: var(--color-brand-highlight);

10
apps/frontend/src/components/ui/servers/Globe.vue
View File

@ -119,7 +119,7 @@ const init = () => {
const material = new THREE.ShaderMaterial({
uniforms: {
outlineTexture: { value: outlineTexture },
globeColor: { value: new THREE.Color("#60fbb5") },
globeColor: { value: new THREE.Color("#ffc69e") },
},
vertexShader: `
varying vec2 vUv;
@ -151,7 +151,7 @@ const init = () => {
transparent: true,
side: THREE.BackSide,
uniforms: {
color: { value: new THREE.Color("#56f690") },
color: { value: new THREE.Color("#fabc89") },
viewVector: { value: camera.position },
},
vertexShader: `
@ -262,13 +262,13 @@ onUnmounted(() => {
<style scoped>
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(27, 217, 106, 0.3);
box-shadow: 0 0 0 0 rgba(217, 84, 27, 0.3);
}
70% {
box-shadow: 0 0 0 4px rgba(27, 217, 106, 0);
box-shadow: 0 0 0 4px rgba(217, 78, 27, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(27, 217, 106, 0);
box-shadow: 0 0 0 0 rgba(217, 84, 27, 0);
}
}

2
apps/frontend/src/layouts/default.vue
View File

@ -839,7 +839,7 @@ useSeoMeta({
defaultMessage: "Discover and publish Minecraft content!",
}),
ogType: "website",
ogImage: "https://cdn.modrinth.com/modrinth-new.png",
ogImage: "https://cdn.modrinth.com/modrinth-newer.png",
ogUrl: link,
// Twitter

116
apps/frontend/src/pages/app.vue
View File

File diff suppressed because one or more lines are too long

48
apps/frontend/src/pages/index.vue
View File

File diff suppressed because one or more lines are too long

24
apps/frontend/src/pages/servers/index.vue
View File

@ -33,7 +33,7 @@
<div class="z-[5] flex w-full flex-col gap-8">
<div class="flex flex-col gap-4">
<div
class="relative h-fit w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
class="relative h-fit w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
>
Beta Release
</div>
@ -105,7 +105,7 @@
<div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
<div class="relative mx-auto flex w-full max-w-7xl flex-col gap-8">
<div
class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
class="relative w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
>
Why Modrinth Servers?
</div>
@ -121,7 +121,7 @@
<img
src="https://cdn.modrinth.com/servers/excitement.webp"
alt=""
class="absolute right-14 top-0 hidden max-w-[360px] lg:block"
class="absolute right-14 top-0 hidden max-w-[360px] hue-rotate-[280deg] lg:block"
/>
<div class="relative grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
@ -234,7 +234,7 @@
<div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
<div class="relative mx-auto flex w-full max-w-7xl flex-col gap-8">
<div
class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
class="relative w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
>
Included with your server
</div>
@ -250,7 +250,7 @@
<img
src="https://cdn.modrinth.com/servers/waving.webp"
alt=""
class="absolute right-8 top-40 hidden max-w-[480px] lg:block"
class="absolute right-8 top-40 hidden max-w-[480px] hue-rotate-[280deg] lg:block"
/>
<div class="grid grid-cols-1 gap-9 lg:grid-cols-2">
<div class="grid w-full grid-cols-1 gap-8">
@ -311,11 +311,11 @@
style="
background: radial-gradient(
86.12% 101.64% at 95.97% 94.07%,
rgba(27, 217, 106, 0.23) 0%,
rgba(14, 115, 56, 0.2) 100%
rgba(217, 106, 27, 0.23) 0%,
rgba(115, 49, 14, 0.2) 100%
);
border: 1px solid rgba(12, 107, 52, 0.55);
box-shadow: 0px 12px 38.1px rgba(27, 217, 106, 0.13);
border: 1px solid rgba(107, 48, 12, 0.55);
box-shadow: 0px 12px 38.1px rgba(217, 78, 27, 0.13);
"
class="relative flex flex-col gap-4 overflow-hidden rounded-2xl p-6 text-left sm:backdrop-blur-xl md:p-12"
>
@ -494,7 +494,7 @@
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<div
class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
class="relative w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
>
Server Locations
</div>
@ -506,7 +506,7 @@
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3">
<div class="grid size-8 place-content-center rounded-full bg-highlight-green">
<div class="grid size-8 place-content-center rounded-full bg-brand-highlight">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
@ -676,7 +676,7 @@
<div class="flex flex-row items-center justify-between">
<h1 class="m-0">Medium</h1>
<div
class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-brand"
class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-green"
>
M
</div>

4
packages/assets/styles/classes.scss
View File

@ -827,7 +827,7 @@ a,
background: var(--color-tooltip-bg) !important;
color: var(--color-tooltip-text) !important;
padding: 0.5rem 0.5rem !important;
border-radius: var(--radius-sm) !important;
border-radius: 0 !important;
filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
font-size: 0.9rem;
font-weight: bold;
@ -1211,7 +1211,7 @@ select {
border: 1px solid var(--color-button-bg) !important;
padding: var(--gap-sm) !important;
width: fit-content !important;
border-radius: var(--radius-md) !important;
border-radius: 0 !important;
background-color: var(--color-raised-bg) !important;
box-shadow: var(--shadow-floating) !important;
}

60
packages/assets/styles/variables.scss
View File

@ -14,11 +14,11 @@
--color-contrast: #1a202c;
--color-accent-contrast: #ffffff;
--color-red: #cb2245;
--color-red: #fa3d3d;
--color-orange: #e08325;
--color-green: #00af5c;
--color-green: #249D3F;
--color-blue: #1f68c0;
--color-purple: #8e32f3;
--color-purple: #A379C9;
--color-gray: #595b61;
--color-red-highlight: rgba(203, 34, 69, 0.25);
@ -34,9 +34,9 @@
--color-blue-bg: rgba(31, 104, 192, 0.1);
--color-purple-bg: rgba(142, 50, 243, 0.1);
--color-brand: var(--color-green);
--color-brand-highlight: var(--color-green-highlight);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
--color-brand: #F16436;
--color-brand-highlight: rgba(242, 101, 53, 0.25);
--color-brand-shadow: rgba(242, 101, 53, 0.7);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 91%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 91%, 0.05);
@ -53,17 +53,17 @@
--brand-gradient-bg: linear-gradient(
0deg,
rgba(68, 182, 138, 0.175) 0%,
rgba(58, 250, 112, 0.125) 100%
rgba(182, 72, 68, 0.17) 0%,
rgba(250, 103, 58, 0.12) 100%
);
--brand-gradient-strong-bg: linear-gradient(
270deg,
rgba(68, 182, 138, 0.175) 0%,
rgba(36, 225, 91, 0.12) 100%
rgba(182, 102, 68, 0.17) 0%,
rgba(225, 58, 36, 0.12) 100%
);
--brand-gradient-button: rgba(255, 255, 255, 0.5);
--brand-gradient-border: rgba(32, 64, 32, 0.15);
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
--brand-gradient-border: rgba(64, 38, 32, 0.15);
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(235, 217, 213, 0), #ecd2d0 70%);
--color-button-bg-selected: var(--color-brand);
--color-button-text-selected: var(--color-accent-contrast);
@ -136,11 +136,11 @@ html {
--color-contrast: var(--dark-color-contrast);
--color-accent-contrast: #000000;
--color-red: #ff496e;
--color-orange: #ffa347;
--color-green: #1bd96a;
--color-red: #fa3d3d;
--color-orange: #edbb22;
--color-green: #249D3F;
--color-blue: #4f9cff;
--color-purple: #c78aff;
--color-purple: #A379C9;
--color-gray: #9fa4b3;
--color-red-highlight: rgba(255, 73, 110, 0.25);
@ -156,9 +156,9 @@ html {
--color-blue-bg: rgba(79, 156, 255, 0.2);
--color-purple-bg: rgba(199, 138, 255, 0.2);
--color-brand: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--color-brand: #F16436;
--color-brand-highlight: rgba(242, 101, 53, 0.25);
--color-brand-shadow: rgba(242, 101, 53, 0.7);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
@ -171,11 +171,11 @@ html {
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
--brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
--brand-gradient-strong-bg: linear-gradient(270deg, #09110d 10%, #131f17 100%);
--brand-gradient-bg: linear-gradient(0deg, rgba(35, 22, 14, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
--brand-gradient-strong-bg: linear-gradient(270deg, #110909 10%, #1f1613 100%);
--brand-gradient-button: rgba(255, 255, 255, 0.08);
--brand-gradient-border: rgba(155, 255, 160, 0.08);
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
--brand-gradient-border: rgba(255, 190, 155, 0.08);
--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(31, 24, 24, 0), #1e1717 80%);
--color-button-bg-selected: var(--color-brand-highlight);
--color-button-text-selected: var(--color-brand);
@ -208,13 +208,13 @@ html {
--brand-gradient-bg: linear-gradient(
0deg,
rgba(22, 66, 51, 0.15) 0%,
rgba(55, 137, 73, 0.1) 100%
rgba(66, 30, 22, 0.15) 0%,
rgba(137, 77, 55, 0.1) 100%
);
--brand-gradient-strong-bg: linear-gradient(
270deg,
rgba(9, 18, 14, 0.6) 10%,
rgba(19, 31, 23, 0.5) 100%
rgba(18, 10, 9, 0.6) 10%,
rgba(31, 21, 19, 0.5) 100%
);
}
@ -253,7 +253,7 @@ html {
}
.dark-experiments {
--color-button-bg: #33363d;
--color-button-bg: #333333;
}
.dark-mode:not(.oled-mode),
@ -270,3 +270,7 @@ html {
@extend .dark-experiments;
}
}
* {
border-radius: 0!important;
}

2
packages/ui/src/components/base/Avatar.vue
View File

@ -134,7 +134,7 @@ function hash(str) {
position: relative;
&.circle {
border-radius: 50%;
border-radius: 50%!important;
}
&:not(.no-shadow) {