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
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:
@@ -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 */
|
||||||
|
|||||||
Reference in New Issue
Block a user