From e06f0c746ae12462a654e123b372f6a87fda6ed4 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 16 Oct 2025 21:51:26 -0600 Subject: [PATCH] Mejoras en glassmorphism y soporte de modo oscuro - Aumentar transparencia en todos los contenedores (0.3-0.4 alpha) - Mejorar backdrop-filter con blur(20px) y saturate(180%) - Agregar efectos 3D pronunciados con box-shadow multicapa - Implementar inset shadows para efecto de profundidad - Ajustar colores en modo oscuro (rgba(15, 15, 25) en lugar de rgba(30, 30, 40)) - Mejorar bordes con rgba blanco semi-transparente - Agregar transiciones suaves con cubic-bezier - Efectos hover mejorados con scale y translateY - Aplicar cambios en UserHeader, ApplicationsList y quick-actions - Mejor contraste y legibilidad en modo oscuro --- nuxt4/app/app.vue | 38 ++++++++--- nuxt4/app/components/UserHeader.vue | 68 +++++++++++++------ .../app/components/auth/ApplicationsList.vue | 53 ++++++++++----- 3 files changed, 110 insertions(+), 49 deletions(-) diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue index abadd62..e4ae9fb 100644 --- a/nuxt4/app/app.vue +++ b/nuxt4/app/app.vue @@ -75,15 +75,22 @@ useHead({ gap: 1rem; flex-wrap: wrap; padding: 1.5rem; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - border-radius: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(20px) saturate(180%); + border-radius: 1.5rem; + box-shadow: + 0 8px 32px 0 rgba(31, 38, 135, 0.15), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.3); + border: 1px solid rgba(255, 255, 255, 0.18); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } :global(.dark) .quick-actions { - background: rgba(30, 30, 40, 0.7); + background: rgba(15, 15, 25, 0.3); + box-shadow: + 0 8px 32px 0 rgba(0, 0, 0, 0.5), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); } .auth-message { @@ -93,10 +100,21 @@ useHead({ min-height: 60vh; } -/* Mejorar estilos de las cards en el tema oscuro */ -:global(.dark) :global(.card) { - background: rgba(30, 30, 40, 0.8); - backdrop-filter: blur(10px); +.auth-message :deep(.card) { + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: + 0 8px 32px 0 rgba(31, 38, 135, 0.15), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.3); +} + +:global(.dark) .auth-message :deep(.card) { + background: rgba(15, 15, 25, 0.3); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 8px 32px 0 rgba(0, 0, 0, 0.5), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.05); } /* Responsive */ diff --git a/nuxt4/app/components/UserHeader.vue b/nuxt4/app/components/UserHeader.vue index 29cf133..d38f3db 100644 --- a/nuxt4/app/components/UserHeader.vue +++ b/nuxt4/app/components/UserHeader.vue @@ -195,28 +195,39 @@ const handleSubmit = async () => { align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(10px); - border-radius: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + background: rgba(255, 255, 255, 0.4); + backdrop-filter: blur(20px) saturate(180%); + border-radius: 1.5rem; + box-shadow: + 0 8px 32px 0 rgba(31, 38, 135, 0.15), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; - transition: all 0.3s ease; - border: 2px solid transparent; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid rgba(255, 255, 255, 0.18); } .header-content:hover { - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - border-color: rgba(var(--color-primary-500), 0.3); + transform: translateY(-4px) scale(1.01); + box-shadow: + 0 12px 40px 0 rgba(31, 38, 135, 0.25), + 0 0 0 1px rgba(var(--color-primary-500), 0.4), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); + border-color: rgba(var(--color-primary-500), 0.5); } :global(.dark) .header-content { - background: rgba(30, 30, 40, 0.9); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); + background: rgba(15, 15, 25, 0.4); + box-shadow: + 0 8px 32px 0 rgba(0, 0, 0, 0.5), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); } :global(.dark) .header-content:hover { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); + box-shadow: + 0 12px 40px 0 rgba(0, 0, 0, 0.6), + 0 0 0 1px rgba(var(--color-primary-500), 0.6), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.1); } .avatar-section { @@ -302,27 +313,42 @@ const handleSubmit = async () => { width: 3rem; height: 3rem; border-radius: 50%; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(10px); - border: 2px solid rgba(var(--color-primary-500), 0.2); + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(15px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.18); color: rgb(var(--color-primary-500)); display: flex; align-items: center; justify-content: center; cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 4px 16px 0 rgba(31, 38, 135, 0.2), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.3); z-index: 10; } :global(.dark) .theme-toggle { - background: rgba(30, 30, 40, 0.9); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + background: rgba(15, 15, 25, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 4px 16px 0 rgba(0, 0, 0, 0.5), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.05); } .theme-toggle:hover { - transform: scale(1.1) rotate(20deg); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transform: scale(1.15) rotate(20deg) translateY(-2px); + box-shadow: + 0 8px 24px 0 rgba(31, 38, 135, 0.3), + 0 0 0 1px rgba(var(--color-primary-500), 0.5), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); +} + +:global(.dark) .theme-toggle:hover { + box-shadow: + 0 8px 24px 0 rgba(0, 0, 0, 0.7), + 0 0 0 1px rgba(var(--color-primary-500), 0.7), + inset 0 1px 1px 0 rgba(255, 255, 255, 0.1); } .theme-icon-enter-active, diff --git a/nuxt4/app/components/auth/ApplicationsList.vue b/nuxt4/app/components/auth/ApplicationsList.vue index a62b5cb..60dce3f 100644 --- a/nuxt4/app/components/auth/ApplicationsList.vue +++ b/nuxt4/app/components/auth/ApplicationsList.vue @@ -176,17 +176,23 @@ onUnmounted(() => {