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

polish: theme fixes

Browse Source
This commit is contained in:
Calum H.
2025-05-24 20:17:02 +01:00
committed by Alejandro González
parent a4e8b0572f
commit cbfb48fc1a
7 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/app-frontend/src/pages/Skins.vue
View File

@@ -309,6 +309,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
<template #overlay-buttons>
<Button
color="green"
class="pointer-events-auto"
aria-label="Edit skin"
@click.stop="(e) => editSkinModal?.show(e, skin)"
>
@@ -319,7 +320,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
v-tooltip="'Delete skin'"
aria-label="Delete skin"
color="red"
class="!rounded-[100%]"
class="!rounded-[100%] pointer-events-auto"
icon-only
@click.stop="() => confirmDeleteSkin(skin)"
>

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

@@ -68,6 +68,8 @@
--color-button-bg-selected: var(--color-brand);
--color-button-text-selected: var(--color-accent-contrast);
--color-gradient-button-bg: linear-gradient(180deg, #f8f9fa 0%, #dce0e6 100%);
--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #00af5c 100%);
--color-platform-fabric: #8a7b71;
@@ -182,6 +184,8 @@ html {
--color-button-bg-selected: var(--color-brand-highlight);
--color-button-text-selected: var(--color-brand);
--color-gradient-button-bg: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
--loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #1ffa9a 100%);
--color-platform-fabric: #dbb69b;
@@ -222,6 +226,8 @@ html {
rgba(9, 18, 14, 0.6) 10%,
rgba(19, 31, 23, 0.5) 100%
);
--color-gradient-button-bg: linear-gradient(180deg, #1b1b20 0%, #25262b 100%);
}
.retro-mode {

4
packages/ui/src/components/skin/CapeButton.vue
View File

@@ -35,7 +35,7 @@ const highlighted = computed(() => props.selected ?? props.isEquipped)
:class="
highlighted
? `bg-brand highlighted-outer-glow`
: `bg-button-bg opacity-75 group-hover:opacity-100`
: `bg-button-bg brightness-95 group-hover:brightness-100`
"
class="block p-[3px] rounded-lg border-0 group-active:scale-95 transition-all"
>
@@ -80,7 +80,7 @@ const highlighted = computed(() => props.selected ?? props.isEquipped)
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.4);
z-index: 2;
}

6
packages/ui/src/components/skin/CapeLikeTextButton.vue
View File

@@ -26,17 +26,17 @@ withDefaults(
'block rounded-lg group-active:scale-95 transition-all border-2 relative',
highlighted
? 'border-brand highlighted-glow'
: 'border-transparent opacity-75 group-hover:opacity-100',
: 'border-transparent brightness-95 group-hover:brightness-100',
]"
>
<span class="block p-[3px] rounded-lg bg-button-bg">
<span
class="flex flex-col items-center justify-center aspect-[10/16] w-[60px] min-h-[96px] rounded-[5px] bg-black/10 relative overflow-hidden"
class="flex flex-col items-center justify-center aspect-[10/16] w-[60px] min-h-[96px] rounded-[5px] bg-black/10 relative overflow-hidden text-primary z-10"
>
<div class="mb-1">
<slot name="icon"></slot>
</div>
<span class="text-xs group-hover:text-white" :class="{ 'text-white': highlighted }">
<span class="text-xs">
<slot></slot>
</span>
</span>

16
packages/ui/src/components/skin/SkinButton.vue
View File

@@ -34,7 +34,7 @@ function onImageLoad(type: 'forward' | 'backward') {
<div
v-tooltip="tooltip ?? undefined"
class="group flex relative overflow-hidden rounded-xl border-solid border-2 transition-colors duration-200"
:class="[selected ? 'border-brand' : 'border-transparent hover:border-white/50']"
: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"
@@ -74,8 +74,7 @@ function onImageLoad(type: 'forward' | 'backward') {
<span
v-if="$slots['overlay-buttons']"
class="absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
style="pointer-events: none"
class="pointer-events-none absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
>
<slot name="overlay-buttons" />
</span>
@@ -90,9 +89,9 @@ function onImageLoad(type: 'forward' | 'backward') {
.skeleton {
background: linear-gradient(
90deg,
var(--color-bg, #f0f0f0) 25%,
var(--color-raised-bg, #e0e0e0) 50%,
var(--color-bg, #f0f0f0) 75%
var(--color-bg) 25%,
var(--color-raised-bg) 50%,
var(--color-bg) 75%
);
background-size: 200% 100%;
animation: wave 1500ms infinite linear;
@@ -108,8 +107,9 @@ function onImageLoad(type: 'forward' | 'backward') {
}
.skin-btn-bg {
background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
background: var(--color-gradient-button-bg);
}
.skin-btn-bg.selected {
background: linear-gradient(
157.61deg,
@@ -117,7 +117,7 @@ function onImageLoad(type: 'forward' | 'backward') {
rgba(27, 217, 106, 0.534) -38.61%,
rgba(12, 89, 44, 0.6) 100.4%
),
#27292f;
var(--color-bg);
}
.skin-btn-bg.selected:hover,

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

@@ -1,41 +1,70 @@
<script setup lang="ts">
import { ref } from 'vue'
const props = withDefaults(
defineProps<{
selected?: boolean
tooltip?: string
}>(),
{
selected: false,
tooltip: undefined,
},
)
const emit = defineEmits<{ (e: 'click'): void }>()
const pressed = ref(false)
</script>
<template>
<div
class="relative border-2 border-transparent rounded-xl overflow-hidden"
:class="{ 'scale-95': pressed }"
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' : '',
]"
>
<button
class="absolute inset-0 skin-like-text-bg rounded-xl cursor-pointer p-0 border-none"
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' : ''"
@mousedown="pressed = true"
@mouseup="pressed = false"
@mouseleave="pressed = false"
@click="emit('click')"
></button>
<div
class="relative w-full h-full flex flex-col items-center justify-center pointer-events-none"
class="relative w-full h-full flex flex-col items-center justify-center pointer-events-none z-10"
>
<div class="mb-2">
<slot name="icon"></slot>
<div v-if="$slots.icon" class="mb-2">
<slot name="icon" />
</div>
<span class="text-md text-center px-2">
<slot></slot>
<span class="text-md text-center px-2 text-primary">
<slot />
</span>
</div>
</div>
</template>
<style scoped lang="scss">
.skin-like-text-bg {
background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
transition:
filter 200ms ease-in-out,
box-shadow 200ms ease-in-out;
.skin-btn-bg {
background: var(--color-gradient-button-bg);
}
.skin-like-text-bg:hover {
filter: brightness(var(--hover-brightness));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
.skin-btn-bg.selected {
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%
),
var(--color-bg);
}
.skin-btn-bg.selected:hover,
.group:hover .skin-btn-bg.selected {
filter: brightness(1.15);
}
</style>

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

@@ -9,7 +9,7 @@
</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-primary nametag-bg"
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-inverted nametag-bg"
>
{{ nametag }}
</div>