/* Светлая тема — по умолчанию. Тёмная включается системной настройкой (prefers-color-scheme) либо вручную переключателем (data-theme на ). */ :root { --bg: #ffffff; --bg-elevated: #f4f6fb; --surface: #eef1f7; --border: rgba(15, 23, 42, 0.10); --text: #1a2233; --text-muted: #5b6579; --accent: #3f6fe0; --accent-soft: rgba(63, 111, 224, 0.12); --accent-glow: rgba(63, 111, 224, 0.30); --success: #12a45f; --warning: #b26a00; color-scheme: light; --radius: 14px; --radius-sm: 10px; --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Outfit", var(--font); --sidebar: 300px; } /* Тёмная палитра. Держим в одном месте и применяем к двум селекторам: системная тёмная (если пользователь не форсил светлую) и явный выбор data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0f17; --bg-elevated: #121826; --surface: #161d2e; --border: rgba(255, 255, 255, 0.08); --text: #e8ecf4; --text-muted: #8b95a8; --accent: #5b8cff; --accent-soft: rgba(91, 140, 255, 0.15); --accent-glow: rgba(91, 140, 255, 0.35); --success: #3dd68c; --warning: #f5b544; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0b0f17; --bg-elevated: #121826; --surface: #161d2e; --border: rgba(255, 255, 255, 0.08); --text: #e8ecf4; --text-muted: #8b95a8; --accent: #5b8cff; --accent-soft: rgba(91, 140, 255, 0.15); --accent-glow: rgba(91, 140, 255, 0.35); --success: #3dd68c; --warning: #f5b544; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Дерево прижато к левому краю — на всю ширину, без центрирования. */ .docs-shell { display: flex; min-height: 100vh; } /* Sidebar */ .docs-sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); padding: 28px 20px 60px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* Перетаскиваемый разделитель между разделами и контентом. */ .docs-resizer { flex: 0 0 6px; margin: 0 -3px; cursor: col-resize; background: transparent; position: relative; z-index: 5; touch-action: none; } .docs-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--border); transition: background 0.15s, width 0.15s; } .docs-resizer:hover::after, body.resizing .docs-resizer::after { background: var(--accent); width: 2px; } body.resizing { cursor: col-resize; user-select: none; } body.resizing .docs-sidebar, body.resizing .docs-main { pointer-events: none; } .docs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 20px; } .docs-brand-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; object-fit: cover; } .docs-brand-icon[hidden] { display: none; } .docs-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; margin-right: auto; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .theme-toggle { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .theme-toggle:hover { border-color: var(--accent); } .lang-switch { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; } .lang-switch button { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); padding: 5px 12px; font: inherit; font-size: 0.82rem; cursor: pointer; text-transform: uppercase; transition: all 0.15s; } .lang-switch button:hover { color: var(--text); border-color: var(--accent); } .lang-switch button.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); } .tree ul { list-style: none; margin: 0; padding: 0 0 0 12px; } .tree > ul { padding-left: 0; } .folder-title { font-weight: 600; font-size: 0.9rem; margin: 14px 0 6px; color: var(--text); display: flex; align-items: center; gap: 6px; } .folder-title.clickable { cursor: pointer; user-select: none; } .folder-title.clickable:hover { color: var(--accent); } .folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-caret { flex: 0 0 auto; font-size: 0.7rem; color: var(--text-muted); transition: transform 0.15s; transform: rotate(90deg); /* раскрыто → указывает вниз */ } li.collapsed > .folder-title .folder-caret { transform: rotate(0); } /* свёрнуто → вправо */ li.collapsed > .folder-body { display: none; } .article-link { display: block; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.88rem; cursor: pointer; } .article-link:hover { background: var(--surface); color: var(--text); text-decoration: none; } .article-link.active { background: var(--accent-soft); color: var(--text); } .article-link .badge { font-size: 0.7rem; opacity: 0.7; margin-left: 4px; } /* Main */ .docs-main { flex: 1 1 auto; padding: 40px 56px 80px; max-width: 820px; min-width: 0; } .docs-main h1, .docs-main h2, .docs-main h3 { font-family: var(--font-display); letter-spacing: -0.01em; } .docs-content h1 { font-size: 2rem; margin-top: 0; } .docs-content pre { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; } .docs-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } .docs-content :not(pre) > code { background: var(--surface); padding: 2px 6px; border-radius: 6px; } .docs-content table { border-collapse: collapse; width: 100%; margin: 16px 0; display: block; overflow-x: auto; } .docs-content th, .docs-content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .docs-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .docs-content blockquote { border-left: 3px solid var(--accent); margin: 16px 0; padding: 4px 16px; color: var(--text-muted); } .banner { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.86rem; margin-bottom: 20px; border: 1px solid var(--border); } .banner.fallback { background: rgba(245, 181, 68, 0.12); border-color: rgba(245, 181, 68, 0.4); } .banner.machine { background: var(--accent-soft); border-color: var(--accent-glow); } .download-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; background: var(--surface); display: flex; align-items: center; gap: 18px; } .download-card .meta { flex: 1 1 auto; min-width: 0; } .download-card .name { font-weight: 600; word-break: break-all; } .download-card .size { color: var(--text-muted); font-size: 0.85rem; } .download-card a.btn { background: var(--accent); color: #fff; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; white-space: nowrap; } .download-card a.btn:hover { text-decoration: none; opacity: 0.92; } .docs-empty, .docs-error { color: var(--text-muted); padding: 40px 0; } .docs-error { color: var(--warning); } .menu-toggle { display: none; } .docs-overlay { display: none; } @media (max-width: 860px) { .menu-toggle { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: 12px; z-index: 45; width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); font-size: 1.2rem; line-height: 1; cursor: pointer; } /* Сайдбар — выезжающий слева drawer. */ .docs-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; height: 100vh; z-index: 50; background: var(--bg); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.22s ease; } body.nav-open .docs-sidebar { transform: translateX(0); } .docs-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } body.nav-open .docs-overlay { opacity: 1; pointer-events: auto; } .docs-resizer { display: none; } .docs-main { padding: 60px 20px 60px; max-width: 100%; } }