nucleo000/perfil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mejoras en glassmorphism y soporte de modo oscuro
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 54s
Details

Browse Source 
- 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
This commit is contained in:
josedario87
2025-10-16 21:51:26 -06:00
parent 01139f4415
commit e06f0c746a
3 changed files with 110 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
nuxt4/app/app.vue
View File

@@ -75,15 +75,22 @@ useHead({
gap: 1rem; gap: 1rem;
flex-wrap: wrap; flex-wrap: wrap;
padding: 1.5rem; padding: 1.5rem;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px); backdrop-filter: blur(20px) saturate(180%);
border-radius: 1rem; border-radius: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow:
transition: all 0.3s ease; 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 { :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 { .auth-message {
@@ -93,10 +100,21 @@ useHead({
min-height: 60vh; min-height: 60vh;
} }
/* Mejorar estilos de las cards en el tema oscuro */ .auth-message :deep(.card) {
:global(.dark) :global(.card) { background: rgba(255, 255, 255, 0.3);
background: rgba(30, 30, 40, 0.8); backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(10px); 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 */ /* Responsive */

68
nuxt4/app/components/UserHeader.vue
View File

@@ -195,28 +195,39 @@ const handleSubmit = async () => {
align-items: center; align-items: center;
gap: 1.5rem; gap: 1.5rem;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px); backdrop-filter: blur(20px) saturate(180%);
border-radius: 1rem; border-radius: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 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; cursor: pointer;
transition: all 0.3s ease; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent; border: 1px solid rgba(255, 255, 255, 0.18);
} }
.header-content:hover { .header-content:hover {
transform: translateY(-2px); transform: translateY(-4px) scale(1.01);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow:
border-color: rgba(var(--color-primary-500), 0.3); 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 { :global(.dark) .header-content {
background: rgba(30, 30, 40, 0.9); background: rgba(15, 15, 25, 0.4);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); 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 { :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 { .avatar-section {
@@ -302,27 +313,42 @@ const handleSubmit = async () => {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px); backdrop-filter: blur(15px) saturate(180%);
border: 2px solid rgba(var(--color-primary-500), 0.2); border: 1px solid rgba(255, 255, 255, 0.18);
color: rgb(var(--color-primary-500)); color: rgb(var(--color-primary-500));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.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; z-index: 10;
} }
:global(.dark) .theme-toggle { :global(.dark) .theme-toggle {
background: rgba(30, 30, 40, 0.9); background: rgba(15, 15, 25, 0.3);
box-shadow: 0 2px 4px rgba(0, 0, 0, 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 { .theme-toggle:hover {
transform: scale(1.1) rotate(20deg); transform: scale(1.15) rotate(20deg) translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 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, .theme-icon-enter-active,

53
nuxt4/app/components/auth/ApplicationsList.vue
View File

@@ -176,17 +176,23 @@ onUnmounted(() => {
<style scoped> <style scoped>
.applications-container { .applications-container {
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(15px); backdrop-filter: blur(20px) saturate(180%);
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 2rem; padding: 2rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); box-shadow:
transition: all 0.3s ease; 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) .applications-container { :global(.dark) .applications-container {
background: rgba(30, 30, 40, 0.85); background: rgba(15, 15, 25, 0.35);
box-shadow: 0 8px 16px rgba(0, 0, 0, 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);
} }
.applications-header { .applications-header {
@@ -243,29 +249,40 @@ onUnmounted(() => {
.app-card { .app-card {
display: block; display: block;
padding: 1.25rem; padding: 1.25rem;
border-radius: 1rem; border-radius: 1.25rem;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(var(--color-gray-200), 0.5); backdrop-filter: blur(15px) saturate(180%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.18);
transition: all 0.3s ease; box-shadow:
0 4px 16px 0 rgba(31, 38, 135, 0.1),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
:global(.dark) .app-card { :global(.dark) .app-card {
background: rgba(40, 40, 50, 0.9); background: rgba(20, 20, 30, 0.3);
border-color: rgba(var(--color-gray-700), 0.5); border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow:
0 4px 16px 0 rgba(0, 0, 0, 0.4),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
} }
.app-card:hover { .app-card:hover {
transform: translateY(-4px); transform: translateY(-6px) scale(1.02);
box-shadow: 0 8px 16px rgba(var(--color-primary-500), 0.2); box-shadow:
border-color: rgb(var(--color-primary-500)); 0 12px 32px 0 rgba(var(--color-primary-500), 0.25),
0 0 0 1px rgba(var(--color-primary-500), 0.5),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
border-color: rgba(var(--color-primary-500), 0.6);
} }
:global(.dark) .app-card:hover { :global(.dark) .app-card:hover {
box-shadow: 0 8px 16px rgba(var(--color-primary-500), 0.3); box-shadow:
0 12px 32px 0 rgba(var(--color-primary-500), 0.4),
0 0 0 1px rgba(var(--color-primary-500), 0.7),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
} }
.app-card-content { .app-card-content {