Mejoras en glassmorphism y soporte de modo oscuro
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 54s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 54s
- 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:
@@ -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,
|
||||
|
||||
@@ -176,17 +176,23 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.applications-container {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(15px);
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
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) .applications-container {
|
||||
background: rgba(30, 30, 40, 0.85);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
background: rgba(15, 15, 25, 0.35);
|
||||
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 {
|
||||
@@ -243,29 +249,40 @@ onUnmounted(() => {
|
||||
.app-card {
|
||||
display: block;
|
||||
padding: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 2px solid rgba(var(--color-gray-200), 0.5);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(15px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
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;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:global(.dark) .app-card {
|
||||
background: rgba(40, 40, 50, 0.9);
|
||||
border-color: rgba(var(--color-gray-700), 0.5);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(20, 20, 30, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
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 {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(var(--color-primary-500), 0.2);
|
||||
border-color: rgb(var(--color-primary-500));
|
||||
transform: translateY(-6px) scale(1.02);
|
||||
box-shadow:
|
||||
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 {
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user