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

src/server/web/static/css/components/navigation.css

@@ -0,0 +1,218 @@
+/**
+ * AniWorld - Navigation Styles
+ *
+ * Header, nav, and navigation link styles.
+ */
+
+/* Header */
+.header {
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  box-shadow: var(--shadow-card);
+  transition: background-color var(--transition-duration) var(--transition-easing);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 60px;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex-shrink: 1;
+  min-width: 150px;
+}
+
+.header-title i {
+  font-size: var(--font-size-title);
+  color: var(--color-accent);
+}
+
+.header-title h1 {
+  margin: 0;
+  font-size: var(--font-size-title);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  padding: var(--spacing-xl);
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Section headers */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.section-header h2 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0;
+  font-size: var(--font-size-title);
+  color: var(--color-text-primary);
+}
+
+.section-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+/* Series section */
+.series-section {
+  margin-bottom: var(--spacing-xxl);
+}
+
+.series-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.series-header h2 {
+  margin: 0;
+  font-size: var(--font-size-title);
+  color: var(--color-text-primary);
+}
+
+.series-filters {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.series-actions {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+.series-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+/* Search section */
+.search-section {
+  margin-bottom: var(--spacing-xxl);
+}
+
+.search-container {
+  margin-bottom: var(--spacing-lg);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .section-header {
+  border-bottom-color: var(--color-border-dark);
+}
+
+/* Responsive design */
+@media (min-width: 768px) {
+  .series-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .series-filters {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 1024px) {
+  .header-title {
+    min-width: 120px;
+  }
+
+  .header-title h1 {
+    font-size: 1.4rem;
+  }
+
+  .header-actions {
+    gap: var(--spacing-sm);
+  }
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: var(--spacing-md);
+    min-height: auto;
+  }
+
+  .header-title {
+    text-align: center;
+    min-width: auto;
+    justify-content: center;
+  }
+
+  .header-actions {
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--spacing-sm);
+  }
+
+  .main-content {
+    padding: var(--spacing-md);
+  }
+
+  .series-header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+    align-items: stretch;
+  }
+
+  .series-actions {
+    justify-content: center;
+  }
+
+  .series-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-md);
+  }
+
+  .download-header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .download-actions {
+    justify-content: flex-end;
+  }
+}