refactor: split CSS and JS into modular files (SRP)

2025-12-26 13:55:02 +01:00
parent 94cf36bff3
commit 2e5731b5d6
47 changed files with 8882 additions and 2298 deletions
--- a/src/server/web/static/css/components/status.css
+++ b/src/server/web/static/css/components/status.css
@@ -0,0 +1,128 @@
+/**
+ * AniWorld - Process Status Styles
+ *
+ * Process status indicators for scan and download operations.
+ */
+
+/* Process Status Indicators */
+.process-status {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: transparent;
+  border-radius: var(--border-radius);
+  border: none;
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.status-indicator:hover {
+  background: transparent;
+  color: var(--color-text-primary);
+}
+
+.status-indicator i {
+  font-size: 24px;
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
+}
+
+/* Status dots */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
+}
+
+.status-dot.idle {
+  background-color: var(--color-text-disabled);
+}
+
+.status-dot.running {
+  background-color: var(--color-accent);
+  animation: pulse 2s infinite;
+}
+
+.status-dot.error {
+  background-color: #e74c3c;
+}
+
+/* Rescan icon specific styling */
+#rescan-status {
+  cursor: pointer;
+}
+
+#rescan-status i {
+  color: var(--color-text-disabled);
+}
+
+#rescan-status.running i {
+  color: #22c55e;
+  animation: iconPulse 2s infinite;
+}
+
+#rescan-status.running {
+  cursor: pointer;
+}
+
+/* Animations */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes iconPulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1) rotate(180deg);
+  }
+}
+
+/* Mobile view */
+@media (max-width: 1024px) {
+  .process-status {
+    gap: 4px;
+  }
+}
+
+@media (max-width: 768px) {
+  .process-status {
+    order: -1;
+    margin-right: 0;
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .status-indicator {
+    font-size: 11px;
+    padding: 6px 8px;
+    gap: 4px;
+  }
+
+  .status-indicator i {
+    font-size: 20px;
+  }
+}