From 9877bbe260d072419543ccb039ce424f46977f52 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Fri, 17 Oct 2025 17:36:57 -0600 Subject: [PATCH] =?UTF-8?q?Mejorar=20estilo=20Frutiger=20Aero=20del=20moda?= =?UTF-8?q?l=20de=20confirmaci=C3=B3n=20de=20salida?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Agregar efecto glassmorphism con blur y transparencia - Mejorar bordes redondeados y sombras - Usar colores más suaves y profesionales - Agregar text-shadow para mejor legibilidad - Actualizar estilos de dark mode con glassmorphism - Mantener consistencia visual con el resto de la app --- nuxt4/app/components/UserProfileForm.vue | 130 ++++++++++++++++------- 1 file changed, 89 insertions(+), 41 deletions(-) diff --git a/nuxt4/app/components/UserProfileForm.vue b/nuxt4/app/components/UserProfileForm.vue index b6435cc..59e3642 100644 --- a/nuxt4/app/components/UserProfileForm.vue +++ b/nuxt4/app/components/UserProfileForm.vue @@ -821,11 +821,19 @@ const removeAvatar = async () => { overflow-y: auto; } -/* Modal de confirmación de salida */ +/* Modal de confirmación de salida - Estilo Frutiger Aero */ .exit-confirm-modal { - padding: 2rem; - max-width: 600px; + background: rgba(255, 255, 255, 0.45); + backdrop-filter: blur(25px) saturate(180%); + border-radius: 1.5rem; + padding: 2.5rem; + max-width: 550px; margin: 0 auto; + box-shadow: + 0 12px 40px 0 rgba(31, 38, 135, 0.2), + inset 0 1px 2px 0 rgba(255, 255, 255, 0.4); + border: 1.5px solid rgba(255, 255, 255, 0.25); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .exit-modal-header { @@ -833,21 +841,22 @@ const removeAvatar = async () => { flex-direction: column; align-items: center; gap: 1rem; - margin-bottom: 1.5rem; + margin-bottom: 2rem; text-align: center; } .exit-modal-title { - font-size: 1.5rem; + font-size: 1.625rem; font-weight: 700; color: var(--color-gray-900); margin: 0; + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); } .exit-modal-body { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.25rem; margin-bottom: 2rem; } @@ -856,74 +865,91 @@ const removeAvatar = async () => { font-weight: 600; color: var(--color-gray-800); margin: 0; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); } .exit-modal-fields { list-style: none; - padding: 1rem; + padding: 1.25rem; margin: 0; - background: rgba(var(--color-warning-500), 0.1); - border-radius: 0.75rem; - border: 1px solid rgba(var(--color-warning-500), 0.3); + background: rgba(255, 200, 50, 0.12); + backdrop-filter: blur(10px); + border-radius: 1rem; + border: 1.5px solid rgba(255, 200, 50, 0.3); + box-shadow: + 0 4px 16px rgba(255, 200, 50, 0.1), + inset 0 1px 1px rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.625rem; } .exit-field-item { display: flex; align-items: center; - gap: 0.5rem; - font-size: 0.875rem; + gap: 0.625rem; + font-size: 0.9375rem; font-weight: 500; - color: var(--color-gray-700); + color: var(--color-gray-800); + text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5); } .exit-modal-notice { display: flex; - gap: 0.75rem; - padding: 1rem; - background: rgba(var(--color-error-500), 0.1); - border-radius: 0.75rem; - border: 1px solid rgba(var(--color-error-500), 0.3); + gap: 0.875rem; + padding: 1.25rem; + background: rgba(255, 80, 80, 0.1); + backdrop-filter: blur(10px); + border-radius: 1rem; + border: 1.5px solid rgba(255, 80, 80, 0.25); + box-shadow: + 0 4px 16px rgba(255, 80, 80, 0.08), + inset 0 1px 1px rgba(255, 255, 255, 0.2); } .exit-modal-notice p { margin: 0; - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-gray-700); + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-gray-800); + text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5); } .exit-modal-help { display: flex; - gap: 0.75rem; - padding: 1rem; - background: rgba(var(--color-primary-500), 0.1); - border-radius: 0.75rem; - border: 1px solid rgba(var(--color-primary-500), 0.3); + gap: 0.875rem; + padding: 1.25rem; + background: rgba(0, 220, 130, 0.1); + backdrop-filter: blur(10px); + border-radius: 1rem; + border: 1.5px solid rgba(0, 220, 130, 0.25); + box-shadow: + 0 4px 16px rgba(0, 220, 130, 0.08), + inset 0 1px 1px rgba(255, 255, 255, 0.3); } .exit-modal-help p { margin: 0; - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-gray-700); + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-gray-800); + text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5); } .exit-modal-actions { display: flex; gap: 1rem; justify-content: center; + margin-top: 0.5rem; } @media (max-width: 640px) { .exit-confirm-modal { - padding: 1.5rem; + padding: 2rem; } .exit-modal-title { - font-size: 1.25rem; + font-size: 1.375rem; } .exit-modal-actions { @@ -1017,38 +1043,60 @@ const removeAvatar = async () => { color: var(--color-gray-100) !important; } +.dark .exit-confirm-modal { + background: rgba(0, 0, 0, 0.25) !important; + box-shadow: + 0 12px 40px 0 rgba(0, 0, 0, 0.6), + inset 0 1px 2px 0 rgba(255, 255, 255, 0.08) !important; + border: 1.5px solid rgba(255, 255, 255, 0.12) !important; +} + .dark .exit-modal-title { color: var(--color-gray-100) !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } .dark .exit-modal-message { color: var(--color-gray-200) !important; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important; } .dark .exit-field-item { - color: var(--color-gray-300) !important; + color: var(--color-gray-200) !important; + text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; } .dark .exit-modal-fields { - background: rgba(var(--color-warning-500), 0.15) !important; - border-color: rgba(var(--color-warning-500), 0.4) !important; + background: rgba(255, 200, 50, 0.18) !important; + border-color: rgba(255, 200, 50, 0.35) !important; + box-shadow: + 0 4px 16px rgba(255, 200, 50, 0.15), + inset 0 1px 1px rgba(255, 255, 255, 0.1) !important; } .dark .exit-modal-notice { - background: rgba(var(--color-error-500), 0.15) !important; - border-color: rgba(var(--color-error-500), 0.4) !important; + background: rgba(255, 80, 80, 0.15) !important; + border-color: rgba(255, 80, 80, 0.3) !important; + box-shadow: + 0 4px 16px rgba(255, 80, 80, 0.12), + inset 0 1px 1px rgba(255, 255, 255, 0.08) !important; } .dark .exit-modal-notice p { - color: var(--color-gray-300) !important; + color: var(--color-gray-200) !important; + text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; } .dark .exit-modal-help { - background: rgba(var(--color-primary-500), 0.15) !important; - border-color: rgba(var(--color-primary-500), 0.4) !important; + background: rgba(0, 220, 130, 0.15) !important; + border-color: rgba(0, 220, 130, 0.3) !important; + box-shadow: + 0 4px 16px rgba(0, 220, 130, 0.12), + inset 0 1px 1px rgba(255, 255, 255, 0.1) !important; } .dark .exit-modal-help p { - color: var(--color-gray-300) !important; + color: var(--color-gray-200) !important; + text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; }