/* Comparison Table Styles * * Provides two visual styles for method comparison tables: * - Style A (modern-minimal): gradient header, soft borders, hover effects * - Style B (card-style): bottom-bordered, left-aligned method column, * pill badges for recommendation level * * Both styles preserve the default ////
/ * structure produced by `templates.article_skeleton.comparison_table()`, * so the agent does NOT need to change its HTML output — just include * the right CSS link and add an optional `data-table-style` attribute. * * ┌─ Style A ─────────────────────────────────────────────┐ * │ │ * │ ... standard structure │ * └───────────────────────────────────────────────────────┘ * * ┌─ Style B ─────────────────────────────────────────────┐ * │
...
│ * │ │ * │ 强烈推荐 │ * └───────────────────────────────────────────────────────┘ * * Required: Add this CSS link in HTML : * * * Why two styles: different content warrants different emphasis. * - A (modern-minimal): for tech tutorials with many rows / data-heavy * - B (card-style): for user-facing "method comparison" summaries * where recommendation matters most * * Style selection guideline (agent should pick ONE per article): * - Risk / data-loss topics (cloning, partitioning) -> Style A * - Multi-method tutorials (how-to, beginner guides) -> Style B * - Default if uncertain -> Style B */ /* ============================================================ * COMMON — shared between Style A and Style B * ============================================================ */ .ar-article .compare-table, .article-detail .compare-table, table.compare-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; line-height: 1.6; /* Better number alignment in financial/tech tables */ font-variant-numeric: tabular-nums; /* Word-wrap safety on narrow screens */ word-break: break-word; } /* First column (method name) — left aligned, slightly emphasized */ .ar-article .compare-table th:first-child, .ar-article .compare-table td:first-child, table.compare-table th:first-child, table.compare-table td:first-child { text-align: left; font-weight: 600; color: #0f172a; } /* All other columns — center aligned */ .ar-article .compare-table th:not(:first-child), .ar-article .compare-table td:not(:first-child), table.compare-table th:not(:first-child), table.compare-table td:not(:first-child) { text-align: center; } /* ============================================================ * STYLE A — Modern minimal (gradient header, hover, zebra) * Best for: data-heavy tables, technical comparison * ============================================================ */ .compare-table, .compare-table[data-style="modern"] { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); border: 1px solid #e2e8f0; } .compare-table thead, .compare-table[data-style="modern"] thead { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); } .compare-table thead th, .compare-table[data-style="modern"] thead th { padding: 14px 18px; color: #ffffff; font-weight: 600; font-size: 14px; letter-spacing: 0.3px; border-bottom: none; } .compare-table tbody td, .compare-table[data-style="modern"] tbody td { padding: 14px 18px; border-bottom: 1px solid #eef2f7; color: #334155; transition: background 0.15s ease; } .compare-table tbody tr:last-child td, .compare-table[data-style="modern"] tbody tr:last-child td { border-bottom: none; } .compare-table tbody tr:hover, .compare-table[data-style="modern"] tbody tr:hover { background: #f8fafc; } .compare-table tbody tr:nth-child(even), .compare-table[data-style="modern"] tbody tr:nth-child(even) { background: #fafbfc; } .compare-table tbody tr:nth-child(even):hover, .compare-table[data-style="modern"] tbody tr:nth-child(even):hover { background: #f1f5f9; } /* ============================================================ * STYLE B — Card style (bottom border, recommendation badges) * Best for: "which method should I use" summary tables * ============================================================ */ .compare-table[data-style="card"] { border-top: 2px solid #1d70ec; border-radius: 0; box-shadow: none; background: transparent; } .compare-table[data-style="card"] thead th { background: #f1f5f9; color: #475569; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 18px; border-bottom: 2px solid #cbd5e1; } .compare-table[data-style="card"] tbody td { padding: 16px 18px; border-bottom: 1px solid #e2e8f0; color: #1e293b; background: transparent; } .compare-table[data-style="card"] tbody tr:last-child td { border-bottom: 1px solid #cbd5e1; } .compare-table[data-style="card"] tbody tr:hover td { background: #f8fafc; } /* ── Recommendation pill badges (Style B) ── */ .compare-table .rec-badge, .compare-table[data-style="card"] .rec-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .compare-table .rec-strong, .compare-table[data-style="card"] .rec-strong { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } .compare-table .rec-conditional, .compare-table[data-style="card"] .rec-conditional { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; } .compare-table .rec-priority, .compare-table[data-style="card"] .rec-priority { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; } .compare-table .rec-avoid, .compare-table[data-style="card"] .rec-avoid { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } /* ── Risk level inline coloring (Style B, optional) ── */ .compare-table .risk-high, .compare-table[data-style="card"] .risk-high { color: #dc2626; font-weight: 500; } .compare-table .risk-medium, .compare-table[data-style="card"] .risk-medium { color: #d97706; font-weight: 500; } .compare-table .risk-none, .compare-table[data-style="card"] .risk-none { color: #16a34a; font-weight: 500; } /* ============================================================ * RESPONSIVE — both styles collapse gracefully on mobile * ============================================================ */ @media (max-width: 768px) { .ar-article .compare-table, .article-detail .compare-table, table.compare-table { font-size: 14px; } .compare-table thead th, .compare-table[data-style="card"] thead th, .compare-table tbody td, .compare-table[data-style="card"] tbody td { padding: 10px 12px; } /* Force first column to remain left-aligned on mobile */ .ar-article .compare-table th:first-child, .ar-article .compare-table td:first-child, table.compare-table th:first-child, table.compare-table td:first-child { text-align: left; } }