/* ============================================================ Docs page layout — reuses the theme tokens, nav, buttons and background decor from style.css. This file only adds the docs-specific two-column (sidebar + content) layout, the reading typography, callouts and code blocks. ============================================================ */ /* ---- Bilingual show/hide (shares localStorage["csflow-lang"]) ---- Default (no class on ) = English. Adding `lang-zh` flips it. */ body:not(.lang-zh) [data-lang="zh"] { display: none !important; } body.lang-zh [data-lang="en"] { display: none !important; } /* ---- Docs top bar (its own header with a back-to-home link) ---- */ .docs-bar { position: sticky; top: 0; z-index: 50; background: rgba(4, 7, 20, 0.78); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .docs-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; } .docs-home { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-soft); } .docs-home:hover { color: var(--text-main); } .docs-home .back-arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(166, 215, 255, 0.28); background: rgba(11, 20, 43, 0.55); font-size: 0.95rem; line-height: 1; } .docs-bar-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.2px; color: var(--text-main); } .docs-bar-actions { display: flex; align-items: center; gap: 12px; } .docs-badge { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(255, 94, 115, 0.3); border-radius: 999px; padding: 4px 12px; } /* ---- Layout shell ---- */ .docs-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; padding: 34px 0 80px; } /* ---- Sidebar (sticky table of contents) ---- */ .docs-side { position: sticky; top: 78px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 6px; } .docs-side-group { margin-bottom: 22px; } .docs-side-title { margin: 0 0 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); padding: 0 10px; } .docs-side a { display: block; padding: 7px 10px; border-radius: 9px; font-size: 0.92rem; color: var(--text-soft); border-left: 2px solid transparent; } .docs-side a:hover { color: var(--text-main); background: rgba(166, 215, 255, 0.07); } .docs-side a.is-active { color: var(--text-main); background: rgba(166, 215, 255, 0.1); border-left-color: var(--accent); } /* ---- Content column ---- */ .docs-main { min-width: 0; max-width: 820px; } .docs-section { scroll-margin-top: 90px; padding-bottom: 12px; margin-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .docs-section:last-child { border-bottom: none; } .docs-main h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; } .docs-main h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.25; letter-spacing: -0.015em; margin: 6px 0 14px; } .docs-main h3 { font-size: 1.18rem; margin: 26px 0 10px; color: var(--text-main); } .docs-main p { color: var(--text-soft); font-size: 1rem; line-height: 1.78; margin: 0 0 14px; } .docs-main ul, .docs-main ol { color: var(--text-soft); font-size: 1rem; line-height: 1.75; margin: 0 0 16px; padding-left: 22px; } .docs-main li { margin: 6px 0; } .docs-main li::marker { color: rgba(166, 215, 255, 0.7); } .docs-main strong { color: var(--text-main); font-weight: 700; } .docs-main code { font-family: "SFMono-Regular", "JetBrains Mono", "Menlo", monospace; font-size: 0.88em; background: rgba(73, 216, 255, 0.1); border: 1px solid rgba(73, 216, 255, 0.18); border-radius: 6px; padding: 1px 6px; color: #cdeeff; white-space: nowrap; } .docs-lead { font-size: 1.12rem !important; color: var(--text-soft); line-height: 1.7 !important; } /* ---- Code block (multi-line) ---- */ .docs-pre { position: relative; border: 1px solid rgba(166, 215, 255, 0.22); border-radius: 12px; background: rgba(3, 8, 24, 0.78); box-shadow: var(--shadow); margin: 0 0 18px; overflow: hidden; } .docs-pre code { display: block; white-space: pre; overflow-x: auto; padding: 16px 18px; background: none; border: none; border-radius: 0; font-size: 0.9rem; line-height: 1.65; color: #dcf1ff; } /* ---- Callouts (note / tip / warning) ---- */ .callout { display: flex; gap: 12px; border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; border: 1px solid var(--panel-border); background: rgba(11, 20, 43, 0.5); } .callout .callout-icon { flex: none; font-size: 1.1rem; line-height: 1.6; } .callout p { margin: 0; font-size: 0.95rem; line-height: 1.7; } .callout p + p { margin-top: 8px; } .callout-note { border-color: rgba(73, 216, 255, 0.3); background: rgba(73, 216, 255, 0.07); } .callout-tip { border-color: rgba(86, 224, 168, 0.32); background: rgba(86, 224, 168, 0.08); } .callout-warn { border-color: rgba(255, 94, 115, 0.35); background: rgba(255, 94, 115, 0.08); } /* ---- Quick-link cards (OpenClaw-style entry grid) ---- */ .docs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 6px 0 20px; } .docs-card { display: block; border: 1px solid var(--panel-border); background: linear-gradient(160deg, rgba(17, 33, 68, 0.6), rgba(8, 14, 30, 0.7)); border-radius: 14px; padding: 18px 18px; transition: transform 0.16s ease, border-color 0.18s ease; } .docs-card:hover { transform: translateY(-2px); border-color: rgba(166, 215, 255, 0.4); } .docs-card .card-emoji { font-size: 1.5rem; } .docs-card .card-title { display: block; margin: 8px 0 4px; font-weight: 700; color: var(--text-main); } .docs-card .card-desc { display: block; font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; } /* ---- Steps inside docs ---- */ .docs-steps { list-style: none; counter-reset: dstep; padding: 0; margin: 0 0 16px; } .docs-steps > li { position: relative; counter-increment: dstep; padding: 0 0 16px 44px; margin: 0; } .docs-steps > li::before { content: counter(dstep); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; color: #0a0f1f; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .docs-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 6px; width: 2px; background: rgba(166, 215, 255, 0.18); } /* ---- Definition list for concepts ---- */ .docs-deflist { margin: 0 0 16px; } .docs-deflist .term { font-weight: 700; color: var(--text-main); margin-top: 16px; } .docs-deflist .term:first-child { margin-top: 0; } .docs-deflist .def { color: var(--text-soft); line-height: 1.72; margin: 4px 0 0; } /* ---- Mobile drawer toggle for the docs TOC ---- */ .docs-side-toggle { display: none; } /* ---- Responsive ---- */ @media (max-width: 920px) { .docs-shell { grid-template-columns: 1fr; gap: 0; } .docs-side { position: static; max-height: none; overflow: visible; margin-bottom: 24px; border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 8px; background: rgba(11, 20, 43, 0.4); } .docs-cards { grid-template-columns: 1fr; } } @media (max-width: 600px) { .docs-shell { padding-top: 22px; } .docs-bar-brand span:last-child { display: none; } }