样式优化

2026-05-26 13:47:24 +08:00
parent d61dcdc8db
commit 01d15276ba
23 changed files with 6265 additions and 747 deletions
@@ -210,11 +210,133 @@ html, body {

  /* Video player fits mobile */
  video { max-width: 100% !important; }
+
+  /* InitialReplication page */
+  .replication-container {
+    flex-direction: column !important;
+    gap: 16px !important;
+    padding: 16px !important;
+    height: calc(100vh - 64px) !important;
+  }
+  .replication-preview {
+    width: 100% !important;
+    height: 30vh !important;
+    border-radius: 12px !important;
+  }
+  .replication-form {
+    width: 100% !important;
+    height: auto !important;
+    max-height: calc(70vh - 32px) !important;
+    border-radius: 12px !important;
+  }
+  .replication-form-content {
+    padding: 16px !important;
+    max-height: calc(70vh - 64px) !important;
+  }
 }

 /* ── Date Display ──────────────────────── */
 .date-display { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; }

+/* ── Small Mobile Breakpoint (max-width: 480px) ────────────── */
@media (max-width: 480px) {
+  /* Base styles */
+  html, body { font-size: 14px !important; }
+
+  /* Login page */
  .login-card { width: 100% !important; }
+  .login-right { padding: 16px !important; }
+
+  /* Header adjustments */
+  .gen-header { padding: 12px 14px !important; }
+
+  /* Form elements */
+  .gen-form-row { gap: 8px !important; }
+  
+  /* Button adjustments */
+  .ant-btn { height: 36px !important; font-size: 13px !important; padding: 0 12px !important; }
+  
+  /* Input adjustments */
+  .ant-input, .ant-input-affix-wrapper, .ant-select-selector { 
+    height: 36px !important; 
+    font-size: 13px !important;
+  }
+
+  /* Card padding */
+  .ant-card { padding: 12px !important; }
+
+  /* Mobile bottom nav adjustments */
+  .mobile-bottom-nav { height: 56px !important; }
+  .mobile-bottom-nav .nav-item .nav-icon { font-size: 18px !important; }
+  .mobile-bottom-nav .nav-item { font-size: 9px !important; gap: 2px !important; }
+
+  /* InitialReplication page - Small Mobile */
+  .replication-container {
+    padding: 12px !important;
+    gap: 12px !important;
+  }
+  .replication-preview {
+    height: 25vh !important;
+    border-radius: 10px !important;
+  }
+  .replication-form-content {
+    padding: 12px !important;
+  }
+  .replication-form-content .ant-btn {
+    height: 36px !important;
+    font-size: 13px !important;
+  }
+  .replication-form-content .ant-input,
+  .replication-form-content .ant-input-affix-wrapper {
+    height: 36px !important;
+    font-size: 13px !important;
+  }
+
+  /* Video and image containers */
+  video, img { 
+    max-height: 160px !important; 
+    border-radius: 6px !important;
+  }
+
+  /* Upload areas */
+  .upload-area { padding: 12px !important; }
+
+  /* Spacing adjustments */
+  .mobile-p-16 { padding: 12px !important; }
+  .mobile-gap-12 { gap: 8px !important; }
+
+  /* Font size adjustments */
+  h1 { font-size: 18px !important; }
+  h2 { font-size: 16px !important; }
+  h3 { font-size: 14px !important; }
+  p { font-size: 12px !important; }
+
+  /* Button text */
+  .btn-text-sm { font-size: 12px !important; }
+
+  /* Margin adjustments */
+  .mobile-mb-8 { margin-bottom: 8px !important; }
+  .mobile-mb-12 { margin-bottom: 12px !important; }
+}
+
+/* ── Tablet Breakpoint (768px to 1024px) ────────────── */
+@media (min-width: 769px) and (max-width: 1024px) {
+  /* Desktop sidebar adjustments */
+  .desktop-sidebar { width: 180px !important; }
+  .desktop-content { margin-left: 180px !important; }
+
+  /* Card max-width */
+  .ant-card { max-width: calc(50% - 8px) !important; }
+
+  /* Font adjustments */
+  html, body { font-size: 15px !important; }
+}
+
+/* ── Large Desktop Breakpoint (min-width: 1200px) ────────────── */
+@media (min-width: 1200px) {
+  /* Max width container */
+  .max-w-container { max-width: 1400px; margin: 0 auto; }
+
+  /* Card grid */
+  .card-grid { grid-template-columns: repeat(3, 1fr) !important; }
 }