FIN INIT

static/css/printers.css

@@ -0,0 +1,177 @@
+/* Erweiterte Drucker-Styles für MYP Platform */
+
+/* Filter-Button-Styles */
+.filter-btn {
+    transition: all 0.2s ease-in-out;
+}
+
+.filter-btn.active {
+    background-color: white;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    color: #374151;
+}
+
+.dark .filter-btn.active {
+    background-color: #475569;
+    color: #f1f5f9;
+}
+
+/* Online-Drucker-Hervorhebung */
+.printer-card-online {
+    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
+    border-color: #bbf7d0;
+    box-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.1), 0 1px 2px 0 rgba(34, 197, 94, 0.06);
+}
+
+.dark .printer-card-online {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, #1e293b 100%);
+    border-color: #166534;
+    box-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.2), 0 1px 2px 0 rgba(34, 197, 94, 0.1);
+}
+
+.printer-card-online:hover {
+    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2), 0 2px 4px -1px rgba(34, 197, 94, 0.1);
+}
+
+.dark .printer-card-online:hover {
+    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.3), 0 2px 4px -1px rgba(34, 197, 94, 0.2);
+}
+
+/* Online-Indikator-Animation */
+.online-indicator {
+    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-green {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+    }
+    50% {
+        opacity: .8;
+        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
+    }
+}
+
+/* Status-Übersicht-Animationen */
+.status-count-change {
+    animation: count-change 0.5s ease-in-out;
+}
+
+@keyframes count-change {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+/* Auto-Refresh-Button-Animationen */
+.auto-refresh-active {
+    background: linear-gradient(45deg, #10b981, #059669);
+    animation: gradient-shift 3s ease-in-out infinite;
+}
+
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+/* Drucker-Karten-Übergangseffekte */
+.printer-card {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.printer-card:hover {
+    transform: translateY(-2px);
+}
+
+/* Loading-Spinner für Live-Updates */
+.live-update-spinner {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive Verbesserungen */
+@media (max-width: 640px) {
+    .filter-btn {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.75rem;
+    }
+    
+    .status-overview {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .printer-card {
+        padding: 1rem;
+    }
+}
+
+/* Dark Mode Verbesserungen */
+.dark .printer-card {
+    background-color: #1e293b;
+    border-color: #334155;
+}
+
+.dark .printer-card:hover {
+    background-color: #334155;
+}
+
+/* Accessibility Verbesserungen */
+.filter-btn:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+.printer-card:focus-within {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Print-Styles */
+@media print {
+    .filter-btn,
+    .auto-refresh-btn,
+    .printer-detail-btn,
+    .delete-printer-btn {
+        display: none;
+    }
+    
+    .printer-card {
+        break-inside: avoid;
+        box-shadow: none;
+        border: 1px solid #000;
+    }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+    .printer-card-online {
+        border: 2px solid #059669;
+    }
+    
+    .online-indicator {
+        border: 1px solid #000;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .online-indicator,
+    .auto-refresh-active,
+    .live-update-spinner {
+        animation: none;
+    }
+    
+    .printer-card {
+        transition: none;
+    }
+    
+    .printer-card:hover {
+        transform: none;
+    }
+}