📝 "🐛 Refactor backend files, improve documentation, and update UI components (#123)"
This commit is contained in:
@ -360,27 +360,237 @@
|
||||
|
||||
/* Glassmorphism Flash Messages */
|
||||
.flash-message {
|
||||
@apply fixed top-4 right-4 px-6 py-4 rounded-xl text-sm font-medium shadow-2xl transform transition-all duration-300 z-50 backdrop-blur-xl border border-white/20;
|
||||
backdrop-filter: blur(20px) saturate(180%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(120%);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
animation: slide-down 0.3s ease-out;
|
||||
@apply fixed top-4 right-4 px-6 py-4 rounded-2xl text-sm font-medium shadow-2xl transform transition-all duration-500 z-50 border;
|
||||
/* Verstärkter Glassmorphism-Effekt */
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 32px 64px rgba(0, 0, 0, 0.25),
|
||||
0 12px 24px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
animation: flash-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.dark .flash-message {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 32px 64px rgba(0, 0, 0, 0.6),
|
||||
0 12px 24px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.flash-message:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow:
|
||||
0 40px 80px rgba(0, 0, 0, 0.3),
|
||||
0 16px 32px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.dark .flash-message:hover {
|
||||
box-shadow:
|
||||
0 40px 80px rgba(0, 0, 0, 0.7),
|
||||
0 16px 32px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.flash-message.info {
|
||||
@apply bg-blue-500/70 dark:bg-blue-600/70 text-white;
|
||||
@apply text-blue-100;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(59, 130, 246, 0.2) 0%,
|
||||
rgba(147, 197, 253, 0.15) 50%,
|
||||
rgba(59, 130, 246, 0.1) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.flash-message.success {
|
||||
@apply bg-green-500/70 dark:bg-green-600/70 text-white;
|
||||
@apply text-green-100;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(34, 197, 94, 0.2) 0%,
|
||||
rgba(134, 239, 172, 0.15) 50%,
|
||||
rgba(34, 197, 94, 0.1) 100%);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.flash-message.warning {
|
||||
@apply bg-yellow-500/70 dark:bg-yellow-600/70 text-white;
|
||||
@apply text-yellow-100;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(245, 158, 11, 0.2) 0%,
|
||||
rgba(252, 211, 77, 0.15) 50%,
|
||||
rgba(245, 158, 11, 0.1) 100%);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
.flash-message.error {
|
||||
@apply bg-red-500/70 dark:bg-red-600/70 text-white;
|
||||
@apply text-red-100;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(239, 68, 68, 0.2) 0%,
|
||||
rgba(252, 165, 165, 0.15) 50%,
|
||||
rgba(239, 68, 68, 0.1) 100%);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
/* Flash Message Animation */
|
||||
@keyframes flash-slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%) translateY(-20px) scale(0.9);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: translateX(20px) translateY(-10px) scale(1.05);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) translateY(0) scale(1);
|
||||
backdrop-filter: blur(40px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash-slide-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) translateY(0) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%) translateY(-20px) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-message.hiding {
|
||||
animation: flash-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
/* Do Not Disturb System Styles */
|
||||
.dnd-toggle {
|
||||
@apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
||||
background: rgba(156, 163, 175, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(156, 163, 175, 0.2);
|
||||
}
|
||||
|
||||
.dnd-toggle.active {
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.dnd-toggle-slider {
|
||||
@apply inline-block h-4 w-4 rounded-full shadow-lg transform transition-transform duration-300;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 4px 8px rgba(0, 0, 0, 0.2),
|
||||
0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin: 0.125rem;
|
||||
}
|
||||
|
||||
.dnd-toggle.active .dnd-toggle-slider {
|
||||
transform: translateX(1.25rem);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow:
|
||||
0 6px 12px rgba(239, 68, 68, 0.3),
|
||||
0 3px 6px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.dnd-indicator {
|
||||
@apply fixed top-4 left-4 z-50 flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
backdrop-filter: blur(20px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: rgb(239, 68, 68);
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dnd-indicator.active {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dnd-modal {
|
||||
@apply fixed inset-0 z-50 flex items-center justify-center p-4;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.dnd-modal-content {
|
||||
@apply w-full max-w-md rounded-2xl p-6 shadow-2xl transform transition-all;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(40px) saturate(200%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.25),
|
||||
0 8px 16px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.dark .dnd-modal-content {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(40px) saturate(180%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(110%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.6),
|
||||
0 8px 16px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* DND Flash Message Override */
|
||||
.flash-message.dnd-suppressed {
|
||||
animation: flash-fade-in 0.3s ease-out;
|
||||
opacity: 0.3;
|
||||
transform: scale(0.95);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes flash-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* Notification Counter */
|
||||
.dnd-counter {
|
||||
@apply absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold;
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
animation: dnd-counter-bounce 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dnd-counter-bounce {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
backend/static/css/tailwind.min.css
vendored
2
backend/static/css/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user