/* Lifehub Docs — dark-first prose styling for the admin documentation center. * Scoped to .docs-prose so it never leaks into the rest of the admin UI. * Tailwind v4 is dark-first via the `.dark` class on . */ .docs-prose { color: #374151; /* gray-700 */ font-size: 14px; line-height: 1.7; word-wrap: break-word; } .dark .docs-prose { color: #cbd5e1; } /* slate-300 */ .docs-prose > :first-child { margin-top: 0; } .docs-prose > :last-child { margin-bottom: 0; } /* Headings */ .docs-prose h1, .docs-prose h2, .docs-prose h3, .docs-prose h4 { color: #111827; /* gray-900 */ font-weight: 700; line-height: 1.25; scroll-margin-top: 5rem; } .dark .docs-prose h1, .dark .docs-prose h2, .dark .docs-prose h3, .dark .docs-prose h4 { color: #f9fafb; } .docs-prose h1 { font-size: 1.6rem; margin: 0 0 1rem; } .docs-prose h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid #e5e7eb; } .dark .docs-prose h2 { border-color: rgba(255, 255, 255, 0.1); } .docs-prose h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; } .docs-prose h4 { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; } /* Lead paragraph (first blockquote often used as a summary) */ .docs-prose p { margin: 0.75rem 0; } /* Links */ .docs-prose a { color: #2563eb; /* blue-600 */ text-decoration: none; font-weight: 500; } .docs-prose a:hover { text-decoration: underline; } .dark .docs-prose a { color: #60a5fa; } /* blue-400 */ /* Lists */ .docs-prose ul, .docs-prose ol { margin: 0.75rem 0; padding-left: 1.5rem; } .docs-prose ul { list-style: disc; } .docs-prose ol { list-style: decimal; } .docs-prose li { margin: 0.3rem 0; } .docs-prose li > ul, .docs-prose li > ol { margin: 0.3rem 0; } /* Inline code */ .docs-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; padding: 0.15em 0.4em; border-radius: 0.375rem; background: #f1f5f9; /* slate-100 */ color: #db2777; /* pink-600 */ } .dark .docs-prose code { background: rgba(148, 163, 184, 0.15); color: #f0abfc; /* fuchsia-300 */ } /* Code blocks */ .docs-prose pre { margin: 1rem 0; padding: 1rem 1.15rem; border-radius: 0.75rem; background: #0f172a; /* slate-900 */ border: 1px solid #1e293b; overflow-x: auto; font-size: 0.82rem; line-height: 1.6; } .docs-prose pre code { background: transparent; color: #e2e8f0; /* slate-200 */ padding: 0; border-radius: 0; font-size: inherit; } /* Tables */ .docs-prose table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: 0.85rem; display: block; overflow-x: auto; } .docs-prose th, .docs-prose td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; } .dark .docs-prose th, .dark .docs-prose td { border-color: rgba(255, 255, 255, 0.1); } .docs-prose th { background: #f8fafc; font-weight: 600; color: #111827; } .dark .docs-prose th { background: rgba(148, 163, 184, 0.1); color: #f9fafb; } .docs-prose tbody tr:nth-child(even) td { background: #fafafa; } .dark .docs-prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); } /* Blockquotes (used as summaries / lead) */ .docs-prose blockquote { margin: 1rem 0; padding: 0.6rem 1rem; border-left: 3px solid #3b82f6; /* blue-500 */ background: #eff6ff; /* blue-50 */ border-radius: 0 0.5rem 0.5rem 0; color: #1e3a8a; } .dark .docs-prose blockquote { background: rgba(59, 130, 246, 0.1); color: #bfdbfe; } .docs-prose blockquote p { margin: 0.25rem 0; } /* Horizontal rule */ .docs-prose hr { margin: 2rem 0; border: 0; border-top: 1px solid #e5e7eb; } .dark .docs-prose hr { border-color: rgba(255, 255, 255, 0.1); } /* Authored callout box:
…
*/ .docs-prose .docs-callout { margin: 1.25rem 0; padding: 0.85rem 1.1rem; border-radius: 0.75rem; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6; background: #eff6ff; } .dark .docs-prose .docs-callout { border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.08); } .docs-prose .docs-callout > :first-child { margin-top: 0; } .docs-prose .docs-callout > :last-child { margin-bottom: 0; } /* Images */ .docs-prose img { max-width: 100%; border-radius: 0.5rem; margin: 1rem 0; }