Style: enhance Web Admin UI with Glassmorphism styles and animations from Swarm Dashboard

This commit is contained in:
Admin 2026-06-26 21:03:23 +04:00
parent 633b0f0d05
commit 3ad7651cd8

View file

@ -325,3 +325,65 @@ pre, code {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
} }
/* Дополнения для соответствия Swarm Dashboard */
.glass-panel {
background: var(--panel-bg) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid var(--panel-border) !important;
border-radius: 16px !important;
padding: 24px !important;
transition: var(--transition-smooth) !important;
}
.glass-panel:hover {
background: var(--panel-bg-hover) !important;
border-color: var(--panel-border-hover) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}
@keyframes neonPulseSuccess {
0%, 100% { box-shadow: 0 0 8px var(--color-success-glow); }
50% { box-shadow: 0 0 18px rgba(0, 255, 204, 0.6); }
}
@keyframes neonPulseDanger {
0%, 100% { box-shadow: 0 0 8px var(--color-danger-glow); }
50% { box-shadow: 0 0 18px rgba(255, 45, 85, 0.6); }
}
@keyframes neonPulsePrimary {
0%, 100% { box-shadow: 0 0 8px var(--color-primary-glow); }
50% { box-shadow: 0 0 18px rgba(138, 43, 226, 0.6); }
}
.glow-success {
animation: neonPulseSuccess 3s infinite alternate !important;
}
.glow-danger {
animation: neonPulseDanger 3s infinite alternate !important;
}
.glow-primary {
animation: neonPulsePrimary 3s infinite alternate !important;
}
.text-gradient {
background: linear-gradient(135deg, #fff 0%, var(--color-text-muted) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.text-gradient-neon {
background: linear-gradient(135deg, #00ffcc 0%, #8a2be2 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.flex-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}