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

polish: remove green bg from CapeLikeTextButton when selected.

Browse Source
This commit is contained in:
Calum H.
2025-05-22 13:36:07 +01:00
committed by Alejandro González
parent 6bfa833a6e
commit ecbb5e3582
4 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
View File

@@ -65,7 +65,7 @@
<template #icon>
<XIcon />
</template>
<span>No Cape</span>
<span>None</span>
</CapeLikeTextButton>
<CapeButton

2
apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
View File

@@ -97,7 +97,7 @@ defineExpose({
<template #icon>
<XIcon />
</template>
<span>No Cape</span>
<span>None</span>
</CapeLikeTextButton>
<CapeButton
v-for="cape in capes"

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

@@ -80,8 +80,8 @@ const highlighted = computed(() => props.selected ?? props.isEquipped)
}
@supports (background-color: color-mix(in srgb, transparent, transparent)) {
.highlighted-outer-glow {
box-shadow: 0 0 4px 2px color-mix(in srgb, var(--color-brand), transparent 70%);
.highlighted-glow::before {
box-shadow: inset 0 0 2px 4px color-mix(in srgb, var(--color-brand), transparent 10%);
}
}
</style>

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

@@ -22,23 +22,23 @@ withDefaults(
@click="emit('click')"
>
<span
:class="
:class="[
'block rounded-lg group-active:scale-95 transition-all border-2 relative',
highlighted
? `bg-brand highlighted-outer-glow`
: `bg-button-bg opacity-75 group-hover:opacity-100`
"
class="block p-[3px] rounded-lg border-0 group-active:scale-95 transition-all"
? 'border-brand highlighted-glow'
: 'border-transparent opacity-75 group-hover:opacity-100'
]"
>
<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="{ 'highlighted-inner-shadow': highlighted }"
>
<div class="mb-1">
<slot name="icon"></slot>
</div>
<span class="text-xs group-hover:text-white" :class="{ 'text-white': highlighted }">
<slot name="default"></slot>
<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"
>
<div class="mb-1">
<slot name="icon"></slot>
</div>
<span class="text-xs group-hover:text-white" :class="{ 'text-white': highlighted }">
<slot></slot>
</span>
</span>
</span>
</span>
@@ -46,17 +46,17 @@ withDefaults(
</template>
<style lang="scss" scoped>
.highlighted-inner-shadow::before {
.highlighted-glow::before {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.2);
z-index: 2;
border-radius: inherit;
pointer-events: none;
}
@supports (background-color: color-mix(in srgb, transparent, transparent)) {
.highlighted-outer-glow {
box-shadow: 0 0 4px 2px color-mix(in srgb, var(--color-brand), transparent 70%);
.highlighted-glow::before {
box-shadow: inset 0 0 2px 4px color-mix(in srgb, var(--color-brand), transparent 10%);
}
}
</style>