sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 12:05:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix disabled server icon background

Browse Source
This commit is contained in:
tdgao
2026-03-23 13:23:16 -06:00
parent 1999e79188
commit eb82562c86
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/servers/ServerListing.vue
+4 -4
View File
@@ -15,18 +15,18 @@
v-if="isProvisioning || isUpgrading"
class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
>
<ServerIcon class="opacity-70" :image="image ?? undefined" />
<ServerIcon :image="image ?? undefined" :disabled="isDisabled" />
<SpinnerIcon class="size-8 animate-spin absolute" />
</div>
<div
v-else-if="status === 'suspended'"
class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
>
<ServerIcon class="opacity-70" :image="image ?? undefined" />
<ServerIcon :image="image ?? undefined" :disabled="isDisabled" />
<LockIcon class="size-8 absolute" />
</div>
<ServerIcon v-else :image="image ?? undefined" />
<div class="ml-4 flex flex-col gap-2.5" :class="{ 'opacity-70': isDisabled }">
<ServerIcon v-else :image="image ?? undefined" :disabled="isDisabled" />
<div class="ml-4 flex flex-col gap-2.5" :class="{ 'grayscale opacity-75': isDisabled }">
<div class="flex flex-row items-center gap-2">
<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
<div
packages/ui/src/components/servers/icons/ServerIcon.vue
+3 -1
View File
@@ -1,6 +1,6 @@
<template>
<div
class="experimental-styles-within flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
>
<client-only>
<img
@@ -16,6 +16,7 @@
:src="MinecraftServerIcon"
/>
</client-only>
<div v-if="disabled" class="absolute inset-0 bg-surface-1 opacity-50" />
</div>
</template>
@@ -24,5 +25,6 @@ import { MinecraftServerIcon } from '@modrinth/assets'
defineProps<{
image: string | undefined
disabled?: boolean
}>()
</script>