🎉 Updated Claude settings and integrated utility scripts 🎨📚

2025-06-03 22:53:48 +02:00
parent 44d89583a4
commit 7a6102f73a
5 changed files with 1082 additions and 31 deletions
--- a/backend/static/css/core-utilities.css
+++ b/backend/static/css/core-utilities.css
@@ -0,0 +1,102 @@
+/* Core Utilities CSS - Notification System Styles */
+
+/* ===== NOTIFICATION CONTAINER ===== */
+#myp-notifications {
+    pointer-events: none;
+    max-width: 400px;
+}
+
+#myp-notifications > * {
+    pointer-events: auto;
+}
+
+/* ===== BASE NOTIFICATION STYLES ===== */
+.notification {
+    min-width: 300px;
+    max-width: 100%;
+    word-wrap: break-word;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+/* Glassmorphism effect for notifications */
+.notification.glass-navbar {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.dark .notification.glass-navbar {
+    background: rgba(15, 23, 42, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ===== NOTIFICATION TYPES ===== */
+.notification-success {
+    border-left: 4px solid #10b981;
+}
+
+.notification-error {
+    border-left: 4px solid #ef4444;
+}
+
+.notification-warning {
+    border-left: 4px solid #f59e0b;
+}
+
+.notification-info {
+    border-left: 4px solid #3b82f6;
+}
+
+/* ===== NOTIFICATION ANIMATIONS ===== */
+.notification {
+    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.notification.translate-x-full {
+    transform: translateX(100%);
+    opacity: 0;
+}
+
+/* ===== CLOSE BUTTON ===== */
+.notification button {
+    font-size: 1.5rem;
+    line-height: 1;
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.notification button:hover {
+    opacity: 1;
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 640px) {
+    #myp-notifications {
+        left: 1rem;
+        right: 1rem;
+        max-width: none;
+    }
+    
+    .notification {
+        min-width: auto;
+    }
+}
+
+/* ===== ACCESSIBILITY ===== */
+@media (prefers-reduced-motion: reduce) {
+    .notification {
+        transition: none;
+    }
+}
+
+/* ===== PRINT STYLES ===== */
+@media print {
+    #myp-notifications {
+        display: none;
+    }
+}