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

fix: polish

Browse Source
This commit is contained in:
Calum H.
2025-06-24 19:56:27 +01:00
parent a8f190fa63
commit a8be9664bb
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui/src/components/skin/SkinLikeTextButton.vue
View File

@@ -21,14 +21,11 @@ const pressed = ref(false)
<div
v-tooltip="tooltip ?? undefined"
class="group relative overflow-hidden rounded-xl border-2 transition-all duration-200"
:class="[
props.selected ? 'border-brand' : 'border-transparent hover:border-inverted',
pressed ? 'scale-95' : '',
]"
:class="[selected ? 'border-brand' : 'border-transparent hover:border-inverted']"
>
<button
class="skin-btn-bg absolute inset-0 cursor-pointer p-0 border-none group-hover:brightness-125 transition-all duration-200"
:class="props.selected ? 'selected' : ''"
:class="selected ? 'selected' : ''"
@mousedown="pressed = true"
@mouseup="pressed = false"
@mouseleave="pressed = false"
@@ -59,8 +56,8 @@ const pressed = ref(false)
var(--color-brand) -76.68%,
rgba(27, 217, 106, 0.534) -38.61%,
rgba(12, 89, 44, 0.6) 100.4%
),
var(--color-bg);
),
var(--color-bg);
}
.skin-btn-bg.selected:hover,

15
packages/ui/src/components/skin/SkinPreviewRenderer.vue
View File

@@ -14,14 +14,13 @@
</div>
<div
v-if="nametag"
class="absolute top-[18%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md pointer-events-none z-10 font-minecraft nametag-bg transition-all duration-200"
class="absolute top-[18%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md pointer-events-none z-10 font-minecraft text-gray nametag-bg transition-all duration-200"
:style="{ fontSize: nametagFontSize }"
>
{{ nametagText }}
</div>
<TresCanvas
v-show="isReady"
shadows
alpha
:antialias="antialias"
@@ -34,6 +33,8 @@
@pointermove="onPointerMove"
@pointerup="onPointerUp"
@pointerleave="onPointerUp"
class="transition-opacity duration-500"
:class="{'opacity-0': !isReady, 'opacity-100': isReady}"
>
<Suspense>
<Group>
@@ -86,7 +87,11 @@
<TresDirectionalLight :position="[2, 4, 3]" :intensity="1.2" :cast-shadow="true" />
</TresCanvas>
<div v-if="!isReady" class="w-full h-full flex items-center justify-center">
<div
v-if="!isReady"
class="w-full h-full flex items-center justify-center transition-opacity duration-500"
:class="{'opacity-100': !isReady, 'opacity-0': isReady}"
>
<div class="text-primary">Loading...</div>
</div>
</div>
@@ -648,8 +653,8 @@ onUnmounted(() => {
<style scoped lang="scss">
.nametag-bg {
background: linear-gradient(308.68deg, rgba(0, 0, 0, 0) -52.46%, rgba(100, 100, 100, 0.1) 94.75%),
rgba(0, 0, 0, 0.2);
background: linear-gradient(308.68deg, rgba(50, 50, 50, 0.2) -52.46%, rgba(100, 100, 100, 0.2) 94.75%),
rgba(0, 0, 0, 0.2);
box-shadow:
inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25),
inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.05);