From 1f16f841dfb4f309bcf9e6ed7d532cf2de5a56db Mon Sep 17 00:00:00 2001 From: josedario87 Date: Fri, 17 Oct 2025 17:48:18 -0600 Subject: [PATCH] =?UTF-8?q?Revert=20"Mejorar=20estilo=20Frutiger=20Aero=20?= =?UTF-8?q?del=20modal=20de=20confirmaci=C3=B3n=20de=20salida"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 9877bbe260d072419543ccb039ce424f46977f52. --- nuxt4/app/components/UserProfileForm.vue | 130 +++++++---------------- 1 file changed, 41 insertions(+), 89 deletions(-) diff --git a/nuxt4/app/components/UserProfileForm.vue b/nuxt4/app/components/UserProfileForm.vue index 59e3642..b6435cc 100644 --- a/nuxt4/app/components/UserProfileForm.vue +++ b/nuxt4/app/components/UserProfileForm.vue @@ -821,19 +821,11 @@ const removeAvatar = async () => { overflow-y: auto; } -/* Modal de confirmación de salida - Estilo Frutiger Aero */ +/* Modal de confirmación de salida */ .exit-confirm-modal { - background: rgba(255, 255, 255, 0.45); - backdrop-filter: blur(25px) saturate(180%); - border-radius: 1.5rem; - padding: 2.5rem; - max-width: 550px; + padding: 2rem; + max-width: 600px; 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 { @@ -841,22 +833,21 @@ const removeAvatar = async () => { flex-direction: column; align-items: center; gap: 1rem; - margin-bottom: 2rem; + margin-bottom: 1.5rem; text-align: center; } .exit-modal-title { - font-size: 1.625rem; + font-size: 1.5rem; 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: 1.25rem; + gap: 1rem; margin-bottom: 2rem; } @@ -865,91 +856,74 @@ 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: 1.25rem; + padding: 1rem; margin: 0; - 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); + background: rgba(var(--color-warning-500), 0.1); + border-radius: 0.75rem; + border: 1px solid rgba(var(--color-warning-500), 0.3); display: flex; flex-direction: column; - gap: 0.625rem; + gap: 0.5rem; } .exit-field-item { display: flex; align-items: center; - gap: 0.625rem; - font-size: 0.9375rem; + gap: 0.5rem; + font-size: 0.875rem; font-weight: 500; - color: var(--color-gray-800); - text-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.5); + color: var(--color-gray-700); } .exit-modal-notice { display: flex; - 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); + 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); } .exit-modal-notice p { margin: 0; - 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); + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-gray-700); } .exit-modal-help { display: flex; - 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); + 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); } .exit-modal-help p { margin: 0; - 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); + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-gray-700); } .exit-modal-actions { display: flex; gap: 1rem; justify-content: center; - margin-top: 0.5rem; } @media (max-width: 640px) { .exit-confirm-modal { - padding: 2rem; + padding: 1.5rem; } .exit-modal-title { - font-size: 1.375rem; + font-size: 1.25rem; } .exit-modal-actions { @@ -1043,60 +1017,38 @@ 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-200) !important; - text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; + color: var(--color-gray-300) !important; } .dark .exit-modal-fields { - 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; + background: rgba(var(--color-warning-500), 0.15) !important; + border-color: rgba(var(--color-warning-500), 0.4) !important; } .dark .exit-modal-notice { - 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; + background: rgba(var(--color-error-500), 0.15) !important; + border-color: rgba(var(--color-error-500), 0.4) !important; } .dark .exit-modal-notice p { - color: var(--color-gray-200) !important; - text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; + color: var(--color-gray-300) !important; } .dark .exit-modal-help { - 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; + background: rgba(var(--color-primary-500), 0.15) !important; + border-color: rgba(var(--color-primary-500), 0.4) !important; } .dark .exit-modal-help p { - color: var(--color-gray-200) !important; - text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3) !important; + color: var(--color-gray-300) !important; }