"Refactor admin CSS using Conventional Commits format (feat)"

backend/app/static/css/admin.css

@@ -16,12 +16,17 @@
 
 /* Dark Mode Variables */
 .dark {
-  --bg-color: #1e293b;
+  --bg-color: #0f172a;
-  --card-bg: #334155;
+  --card-bg: #1e293b;
-  --border-color: #475569;
+  --border-color: #334155;
   --text-primary: #f8fafc;
-  --text-secondary: #cbd5e1;
+  --text-secondary: #e2e8f0;
-  --hover-bg: #475569;
+  --hover-bg: #334155;
+  --input-bg: #1e293b;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --table-header-bg: #1e293b;
+  --table-row-hover: #334155;
+  --dark-btn-hover: #475569;
 }
 
 /* Light Mode Variables */
@@ -32,6 +37,11 @@
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --hover-bg: #f1f5f9;
+  --input-bg: #ffffff;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --table-header-bg: #f8fafc;
+  --table-row-hover: #f1f5f9;
+  --dark-btn-hover: #f1f5f9;
 }
 
 /* Admin Panel Container */
@@ -111,13 +121,13 @@
   padding: 1.25rem;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .stat-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
 }
 
 .stat-icon {
@@ -235,7 +245,7 @@
   padding: 0.625rem;
   border: 1px solid var(--border-color);
   border-radius: 0.375rem;
-  background-color: var(--card-bg);
+  background-color: var(--input-bg);
   color: var(--text-primary);
   transition: border-color 0.2s ease;
 }
@@ -538,25 +548,137 @@
 .dark .form-input,
 .dark .form-select,
 .dark .form-textarea {
-  background-color: var(--card-bg);
+  background-color: var(--input-bg);
-  color: var(--text-primary);
   border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+.dark .form-input:focus,
+.dark .form-select:focus,
+.dark .form-textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
 }
 
 .dark .modal-dialog {
   background-color: var(--card-bg);
   border-color: var(--border-color);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
 }
 
-.text-success { color: var(--success-color); }
+.dark .modal-header {
-.text-error { color: var(--error-color); }
+  border-bottom-color: var(--border-color);
-.text-warning { color: var(--warning-color); }
+}
-.text-info { color: var(--info-color); }
 
-.bg-success { background-color: var(--success-color); }
+.dark .modal-footer {
-.bg-error { background-color: var(--error-color); }
+  border-top-color: var(--border-color);
-.bg-warning { background-color: var(--warning-color); }
+}
-.bg-info { background-color: var(--info-color); }
+
+.dark .scheduler-status {
+  background-color: var(--card-bg);
+  border-color: var(--border-color);
+}
+
+.dark .pulse {
+  animation: darkPulse 2s infinite;
+}
+
+@keyframes darkPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+.dark .bg-slate-50 {
+  background-color: #1e293b;
+}
+
+.dark .bg-slate-800 {
+  background-color: #0f172a;
+}
+
+.dark .dark-bg-card {
+  background-color: var(--card-bg);
+}
+
+.dark .log-entry {
+  border-color: var(--border-color);
+  background-color: var(--card-bg);
+}
+
+.dark .log-entry:hover {
+  background-color: var(--hover-bg);
+}
+
+.dark .badge-success {
+  background-color: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+}
+
+.dark .badge-error {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #f87171;
+}
+
+.dark .badge-warning {
+  background-color: rgba(245, 158, 11, 0.2);
+  color: #fbbf24;
+}
+
+.dark .badge-info {
+  background-color: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+}
+
+.dark .printer-card {
+  background-color: var(--card-bg);
+  border-color: var(--border-color);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
+.dark .printer-card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+.dark .status-running {
+  background-color: #10b981;
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
+}
+
+.dark .status-stopped {
+  background-color: #ef4444;
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
+}
+
+.dark .alert {
+  border-color: var(--border-color);
+}
+
+.dark .alert-success {
+  background-color: rgba(16, 185, 129, 0.2);
+  border-left-color: #10b981;
+}
+
+.dark .alert-error {
+  background-color: rgba(239, 68, 68, 0.2);
+  border-left-color: #ef4444;
+}
+
+.dark .alert-warning {
+  background-color: rgba(245, 158, 11, 0.2);
+  border-left-color: #f59e0b;
+}
+
+.dark .alert-info {
+  background-color: rgba(59, 130, 246, 0.2);
+  border-left-color: #3b82f6;
+}
 
 /* Notification Styles */
 .notification {
@@ -689,4 +811,11 @@
 .dark .alert-info {
   background-color: #1e3a8a;
   color: #bfdbfe;
+}
+
+/* Additional utilities */
+.transition-colors {
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
 }