/* ============================================================================ Obsidian Developer Documentation · /docs A Claude-docs-style three-column layout (sidebar · content · on-this-page), rendered in the Obsidian house design. Self-contained; relies only on the design-tokens.css variables already loaded in . ============================================================================ */ :root { --docs-sidebar-w: 264px; --docs-toc-w: 220px; --docs-content-max: 760px; --docs-border: #e7e9ee; --docs-border-soft: #eef0f4; --docs-bg: #ffffff; --docs-bg-soft: #f7f8fa; --docs-ink: #1d2433; --docs-ink-soft: #545d70; --docs-ink-faint: #8a93a6; --docs-accent: #2b7ae4; --docs-accent-bg: #eaf2fd; --docs-code-bg: #0f1525; --docs-code-ink: #e7ecf5; --docs-radius: 12px; --docs-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ───────── Shell ───────── */ .docs-shell { display: grid; grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w); gap: 0; max-width: 1400px; margin: 0 auto; align-items: start; } /* ───────── Sidebar ───────── */ .docs-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 28px 18px 60px 24px; border-right: 1px solid var(--docs-border); background: var(--docs-bg); } .docs-sidebar-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--docs-ink); padding: 4px 10px 16px; letter-spacing: -0.01em; } .docs-sidebar-head i { color: var(--docs-accent); font-size: 15px; } .docs-nav-group { margin-bottom: 22px; } .docs-nav-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--docs-ink-faint); padding: 0 10px 8px; } .docs-nav-link { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.3; color: var(--docs-ink-soft); text-decoration: none; transition: background .12s, color .12s; } .docs-nav-link:hover { background: var(--docs-bg-soft); color: var(--docs-ink); } .docs-nav-link.is-active { background: var(--docs-accent-bg); color: var(--docs-accent); font-weight: 600; } /* ───────── Main content ───────── */ .docs-main { min-width: 0; padding: 40px 56px 96px; } .docs-article { max-width: var(--docs-content-max); } .docs-eyebrow { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--docs-accent); margin: 0 0 10px; } .docs-article h1 { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--docs-ink); margin: 0 0 14px; } .docs-lede { font-size: 17px; line-height: 1.6; color: var(--docs-ink-soft); margin: 0 0 28px; } .docs-article h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; color: var(--docs-ink); margin: 44px 0 14px; padding-top: 8px; scroll-margin-top: 24px; } .docs-article h3 { font-size: 16.5px; font-weight: 700; color: var(--docs-ink); margin: 28px 0 10px; scroll-margin-top: 24px; } .docs-article p { font-size: 15px; line-height: 1.7; color: var(--docs-ink-soft); margin: 0 0 16px; } .docs-article ul, .docs-article ol { font-size: 15px; line-height: 1.7; color: var(--docs-ink-soft); margin: 0 0 16px; padding-left: 22px; } .docs-article li { margin: 0 0 7px; } .docs-article a { color: var(--docs-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .12s; } .docs-article a:hover { border-bottom-color: var(--docs-accent); } .docs-article strong { color: var(--docs-ink); font-weight: 650; } .docs-article hr { border: none; border-top: 1px solid var(--docs-border-soft); margin: 36px 0; } /* inline code */ .docs-article :not(pre) > code { font-family: var(--docs-mono); font-size: 0.86em; background: var(--docs-bg-soft); color: #b8336a; border: 1px solid var(--docs-border-soft); border-radius: 6px; padding: 1.5px 6px; white-space: nowrap; } /* ───────── Code blocks ───────── */ .docs-code { position: relative; margin: 0 0 22px; border-radius: var(--docs-radius); overflow: hidden; border: 1px solid #1c2740; background: var(--docs-code-bg); } .docs-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 16px; background: #0b1020; border-bottom: 1px solid #1c2740; } .docs-code-lang { font-family: var(--docs-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6c7891; } .docs-code-copy { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #283450; color: #9aa6bf; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; transition: all .12s; } .docs-code-copy:hover { background: #1a2236; color: #cfd8ea; border-color: #3a4a6a; } .docs-code-copy.is-copied { color: #4ade80; border-color: #2f6f4a; } .docs-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--docs-mono); font-size: 13px; line-height: 1.6; color: var(--docs-code-ink); } .docs-code pre code { font-family: inherit; background: none; border: none; padding: 0; color: inherit; white-space: pre; font-size: inherit; } /* ───────── Callouts ───────── */ .docs-note { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 22px; border-radius: var(--docs-radius); border: 1px solid var(--docs-border); background: var(--docs-bg-soft); font-size: 14px; line-height: 1.6; color: var(--docs-ink-soft); } .docs-note i { margin-top: 2px; font-size: 15px; } .docs-note p { margin: 0; font-size: 14px; } .docs-note--info { background: var(--docs-accent-bg); border-color: #cfe1fb; } .docs-note--info i { color: var(--docs-accent); } .docs-note--warn { background: #fff7ed; border-color: #fed7aa; } .docs-note--warn i { color: #d97706; } /* ───────── Param / endpoint tables ───────── */ .docs-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); overflow: hidden; } .docs-table th { text-align: left; font-weight: 700; font-size: 12.5px; color: var(--docs-ink); background: var(--docs-bg-soft); padding: 10px 14px; border-bottom: 1px solid var(--docs-border); } .docs-table td { padding: 11px 14px; border-bottom: 1px solid var(--docs-border-soft); color: var(--docs-ink-soft); vertical-align: top; } .docs-table tr:last-child td { border-bottom: none; } .docs-table td code { font-family: var(--docs-mono); font-size: 12.5px; color: #b8336a; } .docs-pill { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px; } .docs-pill--req { background:#fee2e2; color:#b42318; } .docs-pill--opt { background:#eef0f4; color:#667085; } .docs-method { display:inline-block; font-family:var(--docs-mono); font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; margin-right:8px; } .docs-method--get { background:#e6f4ea; color:#1a7f37; } .docs-method--post { background:#eaf2fd; color:#2b7ae4; } /* ───────── Cards (overview grids) ───────── */ .docs-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0 0 26px; } .docs-card { display:block; padding:18px; border:1px solid var(--docs-border); border-radius:var(--docs-radius); background:var(--docs-bg); text-decoration:none; transition:border-color .12s, box-shadow .12s, transform .12s; } .docs-card:hover { border-color:#cfe1fb; box-shadow:0 6px 22px rgba(20,40,80,.07); transform:translateY(-1px); } .docs-card-ic { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:9px; background:var(--docs-accent-bg); color:var(--docs-accent); font-size:15px; margin-bottom:11px; } .docs-card-title { font-size:14.5px; font-weight:700; color:var(--docs-ink); margin:0 0 4px; } .docs-card-text { font-size:13px; line-height:1.5; color:var(--docs-ink-soft); margin:0; } /* ───────── Prev/next + page footer ───────── */ .docs-pagefoot { display:flex; justify-content:space-between; gap:14px; margin-top:48px; padding-top:24px; border-top:1px solid var(--docs-border-soft); } .docs-pagefoot a { flex:1; padding:14px 16px; border:1px solid var(--docs-border); border-radius:var(--docs-radius); text-decoration:none; transition:border-color .12s; } .docs-pagefoot a:hover { border-color:#cfe1fb; } .docs-pagefoot-dir { font-size:12px; color:var(--docs-ink-faint); margin-bottom:3px; } .docs-pagefoot-title { font-size:14.5px; font-weight:700; color:var(--docs-accent); } .docs-pagefoot a.is-next { text-align:right; } /* ───────── On-this-page TOC ───────── */ .docs-toc { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 44px 20px 60px 8px; } .docs-toc-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--docs-ink-faint); margin:0 0 12px; } .docs-toc-link { display:block; font-size:13px; line-height:1.4; color:var(--docs-ink-faint); text-decoration:none; padding:5px 0 5px 12px; border-left:2px solid var(--docs-border-soft); transition:color .12s, border-color .12s; } .docs-toc-link:hover { color:var(--docs-ink); } .docs-toc-link.is-h3 { padding-left:24px; font-size:12.5px; } .docs-toc-link.is-active { color:var(--docs-accent); border-left-color:var(--docs-accent); font-weight:600; } /* ───────── Mobile sidebar toggle ───────── */ .docs-mobilebar { display:none; } @media (max-width: 1100px) { .docs-shell { grid-template-columns: var(--docs-sidebar-w) minmax(0,1fr); } .docs-toc { display:none; } .docs-main { padding:36px 40px 80px; } } @media (max-width: 820px) { .docs-shell { grid-template-columns: 1fr; } .docs-sidebar { position: fixed; top:0; left:0; z-index:60; width:280px; max-width:86vw; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 18px 50px rgba(15,25,50,.18); } .docs-sidebar.is-open { transform: translateX(0); } .docs-main { padding:18px 20px 70px; } .docs-article h1 { font-size:28px; } .docs-mobilebar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20; background:var(--docs-bg); border-bottom:1px solid var(--docs-border); padding:11px 16px; margin:0 -20px 20px; } .docs-mobilebar button { display:inline-flex; align-items:center; gap:7px; background:var(--docs-bg-soft); border:1px solid var(--docs-border); border-radius:8px; padding:7px 12px; font-size:13px; font-weight:600; color:var(--docs-ink); cursor:pointer; } .docs-mobilebar-crumb { font-size:13px; color:var(--docs-ink-faint); } .docs-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(15,22,40,.34); z-index:55; } .docs-sidebar-backdrop.is-open { display:block; } }