Feat: Mejorar diseño del botón flotante de colapsar/expandir
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m4s

- Reducir padding del botón de p-3 a p-2 (más compacto)
- Reducir tamaño del icono de w-6 h-6 a w-5 h-5
- Agregar flex items-center justify-center para centrar el icono
- Eliminar shadow con glow de color
- Usar fondo sólido con var(--cata-bg) en lugar de transparente
- Aplicar sombra simple con rgba (sin color del tema)
- Eliminar ajustes responsive de padding innecesarios
- Mejorar z-index para que se sobreponga correctamente a elementos
This commit is contained in:
2025-10-18 03:43:15 -06:00
parent 35a7898312
commit 0656f15366

View File

@@ -181,13 +181,13 @@
<!-- Botón flotante para colapsar/expandir --> <!-- Botón flotante para colapsar/expandir -->
<div class="floating-action"> <div class="floating-action">
<button <button
class="cata-button p-3 rounded-full shadow-lg" class="floating-action-button cata-button p-2 rounded-full flex items-center justify-center"
@click="toggleCollapseAll" @click="toggleCollapseAll"
:title="todosColapsados ? 'Expandir todas las muestras' : 'Colapsar todas las muestras'" :title="todosColapsados ? 'Expandir todas las muestras' : 'Colapsar todas las muestras'"
> >
<UIcon <UIcon
:name="todosColapsados ? 'i-lucide-maximize-2' : 'i-lucide-minimize-2'" :name="todosColapsados ? 'i-lucide-maximize-2' : 'i-lucide-minimize-2'"
class="w-6 h-6" class="w-5 h-5"
/> />
</button> </button>
</div> </div>
@@ -435,12 +435,14 @@ onMounted(() => {
z-index: 20; z-index: 20;
} }
.floating-action button { .floating-action-button {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background-color: var(--cata-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.dark .floating-action button { .dark .floating-action-button {
box-shadow: 0 4px 12px color-mix(in srgb, var(--cata-primary) 40%, transparent); background-color: var(--cata-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
} }
/* Loading spinner */ /* Loading spinner */
@@ -478,11 +480,6 @@ onMounted(() => {
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;
} }
.floating-action button {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
} }
/* Landscape mobile */ /* Landscape mobile */