Visuelle Verbesserungen

v2_adminpanel/templates/base.html

@@ -9,6 +9,28 @@
     <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
     {% block extra_css %}{% endblock %}
     <style>
+        /* Global Status Colors */
+        :root {
+            --status-active: #28a745;
+            --status-warning: #ffc107;
+            --status-danger: #dc3545;
+            --status-inactive: #6c757d;
+            --status-info: #17a2b8;
+        }
+        
+        /* Status Classes - Global */
+        .status-aktiv { color: var(--status-active) !important; }
+        .status-ablaufend { color: var(--status-warning) !important; }
+        .status-abgelaufen { color: var(--status-danger) !important; }
+        .status-deaktiviert { color: var(--status-inactive) !important; }
+        
+        /* Badge Variants */
+        .badge-aktiv { background-color: var(--status-active) !important; }
+        .badge-ablaufend { background-color: var(--status-warning) !important; color: #000 !important; }
+        .badge-abgelaufen { background-color: var(--status-danger) !important; }
+        .badge-deaktiviert { background-color: var(--status-inactive) !important; }
+        
+        /* Session Timer Styles */
         #session-timer {
             font-family: monospace;
             font-weight: bold;
@@ -19,23 +41,23 @@
         }
         
         .timer-normal {
-            background-color: #28a745;
+            background-color: var(--status-active);
             color: white;
         }
         
         .timer-warning {
-            background-color: #ffc107;
+            background-color: var(--status-warning);
             color: #000;
         }
         
         .timer-danger {
-            background-color: #dc3545;
+            background-color: var(--status-danger);
             color: white;
             animation: pulse 1s infinite;
         }
         
         .timer-critical {
-            background-color: #dc3545;
+            background-color: var(--status-danger);
             color: white;
             animation: blink 0.5s infinite;
         }