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

polish: use figma values

Browse Source
This commit is contained in:
Calum H. authored and Alejandro González committed 2025-06-14 17:45:04 +02:00
1 parent 721577cdb1
commit cf354d2bbc
3 files changed
+116 -65
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/src/components/skin/SkinButton.vue
+13 -7
View File
@@ -41,30 +41,30 @@ function onImageLoad(type: 'forward' | 'backward') {
]"
>
<button
class="skin-btn-bg absolute inset-0 rounded-xl cursor-pointer p-0 border-none group-hover:brightness-125"
class="skin-btn-bg absolute inset-0 cursor-pointer p-0 border-none group-hover:brightness-125"
:class="selected ? 'selected' : ''"
@click="emit('select')"
></button>
<div v-if="!(imagesLoaded.forward && imagesLoaded.backward)" class="skeleton-loader w-full h-full rounded-xl">
<div class="skeleton absolute inset-0 rounded-xl aspect-[5/7]"></div>
<div v-if="!(imagesLoaded.forward && imagesLoaded.backward)" class="skeleton-loader w-full h-full">
<div class="skeleton absolute inset-0 aspect-[5/7]"></div>
</div>
<span
<span
v-show="imagesLoaded.forward && imagesLoaded.backward"
:class="['skin-button__image-parent pointer-events-none w-full h-full grid [transform-style:preserve-3d] transition-transform duration-500 group-hover:[transform:rotateY(180deg)] place-items-stretch', selected ? 'with-shadow' : '']"
>
<img
alt=""
:src="forwardImageSrc"
class="skin-button__image-facing rounded-xl object-contain w-full h-full [backface-visibility:hidden] col-start-1 row-start-1"
class="skin-button__image-facing object-contain w-full h-full [backface-visibility:hidden] col-start-1 row-start-1"
height="504"
@load="onImageLoad('forward')"
/>
<img
alt=""
:src="backwardImageSrc"
class="skin-button__image-away rounded-xl object-contain w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] col-start-1 row-start-1"
class="skin-button__image-away object-contain w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] col-start-1 row-start-1"
height="504"
@load="onImageLoad('backward')"
/>
@@ -118,8 +118,14 @@ function onImageLoad(type: 'forward' | 'backward') {
background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
}
.skin-btn-bg.selected {
background: linear-gradient(180deg, #5a5d6b 0%, #424956 100%);
background: linear-gradient(157.61deg, var(--color-brand) -76.68%, rgba(27, 217, 106, 0.534) -38.61%, rgba(12, 89, 44, 0.6) 100.4%), #27292F;
}
.skin-btn-bg.selected:hover,
.group:hover .skin-btn-bg.selected {
filter: brightness(1.15);
}
.with-shadow img {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
packages/ui/src/components/skin/SkinPreviewRenderer.vue
+10 -3
View File
@@ -5,7 +5,7 @@
Drag to rotate
</span>
</div>
<div v-if="nametag" class="absolute top-[13%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[200%] pointer-events-none z-10 font-minecraft text-white bg-black/60 shadow-md border-solid border-1 border-white/10">
<div v-if="nametag" class="absolute top-[13%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[200%] pointer-events-none z-10 font-minecraft text-primary nametag-bg">
{{ nametag }}
</div>
@@ -226,7 +226,7 @@ function applyTextureToScene(root: THREE.Object3D | null, tex: THREE.Texture | n
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
materials.forEach((mat, index, array) => {
materials.forEach((mat, _index, _array) => {
const standardMat = mat as THREE.MeshStandardMaterial
standardMat.map = tex
standardMat.metalness = 0
@@ -248,7 +248,7 @@ function applyCapeTexture(root: THREE.Object3D | null, tex: THREE.Texture | null
const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
materials.forEach((mat, index, array) => {
materials.forEach((mat, _index, _array) => {
const standardMat = mat as THREE.MeshStandardMaterial
standardMat.map = tex || transparentTexture
standardMat.transparent = true
@@ -342,3 +342,10 @@ onBeforeMount(async () => {
}
})
</script>
<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);
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);
}
</style>