From 52ebb178f641e8fc18883f20b7be33376dd65573 Mon Sep 17 00:00:00 2001 From: MhankBarBar Date: Wed, 8 Apr 2026 17:58:03 +0700 Subject: [PATCH] docs: update design --- .gitignore | 2 + .python-version | 1 + docs/.vitepress/config.mts | 26 +- docs/.vitepress/theme/custom.css | 1564 ++++++++++++++++-------------- docs/index.md | 87 +- 5 files changed, 894 insertions(+), 786 deletions(-) create mode 100644 .python-version diff --git a/.gitignore b/.gitignore index 4d9f3d1..c549e84 100644 --- a/.gitignore +++ b/.gitignore @@ -64,3 +64,5 @@ htmlcov/ .mypy_cache/ clean_* + +target/ \ No newline at end of file diff --git a/.python-version b/.python-version new file mode 100644 index 0000000..e4fba21 --- /dev/null +++ b/.python-version @@ -0,0 +1 @@ +3.12 diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index cf7ffcd..9faedbb 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -2,14 +2,24 @@ import { defineConfig } from 'vitepress' export default defineConfig({ title: 'Zero Ichi', - description: 'Documentation for the Zero Ichi WhatsApp Bot', + description: 'A powerful WhatsApp bot built with Python + Neonize — packed with AI, media downloader, group management, and a web dashboard.', base: '/', + appearance: 'dark', + lastUpdated: true, head: [ ['link', { rel: 'icon', href: '/logo.png' }], ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }], - ['link', { href: 'https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=IBM+Plex+Mono:wght@400;500;600&display=swap', rel: 'stylesheet' }], + ['link', { href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap', rel: 'stylesheet' }], + ['meta', { name: 'theme-color', content: '#201d1d' }], + ['meta', { property: 'og:type', content: 'website' }], + ['meta', { property: 'og:title', content: 'Zero Ichi — WhatsApp Bot' }], + ['meta', { property: 'og:description', content: 'A powerful WhatsApp bot built with Python + Neonize — packed with AI, media downloader, group management, and a web dashboard.' }], + ['meta', { property: 'og:image', content: '/logo.png' }], + ['meta', { name: 'twitter:card', content: 'summary' }], + ['meta', { name: 'twitter:title', content: 'Zero Ichi — WhatsApp Bot' }], + ['meta', { name: 'twitter:description', content: 'A powerful WhatsApp bot built with Python + Neonize — packed with AI, media downloader, group management, and a web dashboard.' }], ], markdown: { @@ -21,6 +31,12 @@ export default defineConfig({ themeConfig: { logo: '/logo.png', + siteTitle: 'Zero Ichi', + + outline: { + level: [2, 3], + label: 'On this page', + }, nav: [ { text: 'Guide', link: '/getting-started/installation' }, @@ -100,7 +116,7 @@ export default defineConfig({ }, footer: { - message: 'Built with 💖', + message: 'Built with ❤️', copyright: '© 2026 MhankBarBar', }, @@ -108,5 +124,9 @@ export default defineConfig({ pattern: 'https://github.com/MhankBarBar/zero-ichi/edit/master/docs/:path', text: 'Edit this page on GitHub', }, + + lastUpdated: { + text: 'Last updated', + }, }, }) diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 93ac1fe..6354987 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -1,990 +1,1144 @@ -/** - * Custom theme overrides for Zero Ichi docs. - * Aesthetic: Retro / CRT Terminal +/* + * Zero Ichi docs theme */ -/* ── Fonts & Colors ──────────────────────────────────────── */ +/* ─── Design Tokens ────────────────────────────────────────────── */ + :root { - --vp-font-family-base: 'VT323', 'IBM Plex Mono', monospace; - --vp-font-family-mono: 'IBM Plex Mono', 'VT323', monospace; - --retro-heading: 'Press Start 2P', 'VT323', monospace; + /* Font stack — monospace everywhere */ + --vp-font-family-base: 'IBM Plex Mono', ui-monospace, SFMono-Regular, + Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --vp-font-family-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, + Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + + /* ── Core palette ── */ + --zi-bg: #201d1d; + --zi-bg-alt: #302c2c; + --zi-bg-soft: #2a2626; + --zi-surface: #262222; + --zi-terminal: #181515; + --zi-light: #fdfcfc; + --zi-light-soft: #f1eeee; + --zi-muted: #9a9898; + --zi-muted-soft: #6e6e73; + --zi-text-secondary: #c6c1c1; + + /* ── Borders ── */ + --zi-border: rgba(15, 0, 0, 0.12); + --zi-border-strong: #646262; + --zi-border-hover: rgba(253, 252, 252, 0.12); + + /* ── Accent / semantic ── */ + --zi-blue: #007aff; + --zi-blue-hover: #0056b3; + --zi-blue-active: #004085; + --zi-red: #ff3b30; + --zi-red-hover: #d70015; + --zi-green: #30d158; + --zi-orange: #ff9f0a; + --zi-orange-hover: #cc7f08; + + /* ── Spacing ── */ + --zi-radius: 4px; + --zi-input-radius: 6px; + --zi-space-1: 4px; + --zi-space-2: 8px; + --zi-space-3: 12px; + --zi-space-4: 16px; + --zi-space-5: 20px; + --zi-space-6: 24px; + --zi-space-8: 32px; + --zi-space-10: 40px; + --zi-space-12: 48px; + --zi-space-16: 64px; + --zi-space-20: 80px; + + /* ── Transition ── */ + --zi-transition: 120ms ease; + + /* ── VitePress token overrides ── */ + --vp-c-bg: var(--zi-bg); + --vp-c-bg-alt: var(--zi-bg-alt); + --vp-c-bg-soft: var(--zi-bg-soft); + --vp-c-bg-elv: var(--zi-surface); + --vp-c-bg-elv-up: var(--zi-bg-alt); + --vp-sidebar-bg-color: var(--zi-bg); + --vp-nav-bg-color: var(--zi-bg); + + --vp-c-text-1: var(--zi-light); + --vp-c-text-2: var(--zi-text-secondary); + --vp-c-text-3: var(--zi-muted); + + --vp-c-border: var(--zi-border); + --vp-c-divider: var(--zi-border); + --vp-c-gutter: var(--zi-border); + + --vp-c-brand-1: var(--zi-blue); + --vp-c-brand-2: var(--zi-blue-hover); + --vp-c-brand-3: var(--zi-blue-active); + --vp-c-brand-soft: rgba(0, 122, 255, 0.14); + + --vp-c-tip-1: var(--zi-blue); + --vp-c-tip-2: var(--zi-blue); + --vp-c-tip-soft: rgba(0, 122, 255, 0.12); + --vp-c-warning-1: var(--zi-orange); + --vp-c-warning-2: var(--zi-orange-hover); + --vp-c-warning-soft: rgba(255, 159, 10, 0.12); + --vp-c-danger-1: var(--zi-red); + --vp-c-danger-2: var(--zi-red-hover); + --vp-c-danger-soft: rgba(255, 59, 48, 0.12); + + /* ── Buttons ── */ + --vp-button-brand-bg: var(--zi-bg); + --vp-button-brand-hover-bg: var(--zi-blue-hover); + --vp-button-brand-active-bg: var(--zi-blue-active); + --vp-button-brand-text: var(--zi-light); + --vp-button-brand-border: var(--zi-border-strong); + --vp-button-alt-bg: var(--zi-bg-alt); + --vp-button-alt-hover-bg: #3a3535; + --vp-button-alt-active-bg: #2b2727; + --vp-button-alt-text: var(--zi-light); + --vp-button-alt-border: var(--zi-border-strong); + + /* ── Hero ── */ + --vp-home-hero-name-color: var(--zi-light); + --vp-home-hero-text-color: var(--zi-light); + --vp-home-hero-tagline-color: var(--zi-muted); + + /* ── Custom blocks ── */ + --vp-custom-block-tip-border: var(--zi-blue); + --vp-custom-block-tip-bg: rgba(0, 122, 255, 0.06); + --vp-custom-block-info-border: var(--zi-border-strong); + --vp-custom-block-info-bg: rgba(253, 252, 252, 0.03); + --vp-custom-block-warning-border: var(--zi-orange); + --vp-custom-block-warning-bg: rgba(255, 159, 10, 0.06); + --vp-custom-block-danger-border: var(--zi-red); + --vp-custom-block-danger-bg: rgba(255, 59, 48, 0.06); +} + +/* ─── Dark Mode ────────────────────────────────────────────────── */ - /* Retro Amber Palette */ - --vp-c-brand-1: #ffb000; - --vp-c-brand-2: #cc8d00; - --vp-c-brand-3: #ff6600; - --vp-c-brand-soft: rgba(255, 176, 0, 0.08); +.dark { + color-scheme: dark; +} - /* Light Mode — still retro-tinted */ - --vp-c-bg: #1a1a2e; - --vp-c-bg-alt: #16213e; - --vp-c-bg-soft: #0f3460; +/* ─── Global Foundation ────────────────────────────────────────── */ - --vp-c-text-1: #e0e0e0; - --vp-c-text-2: #a0a0a0; +html, +body, +.Layout, +.VPApp { + background: var(--zi-bg); +} - --vp-c-border: #33415c; - --vp-c-divider: #33415c; +body { + font-family: var(--vp-font-family-base); + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: var(--zi-light); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} - --retro-glow: #ffb000; - --retro-glow-soft: rgba(255, 176, 0, 0.3); - --retro-green: #33ff33; - --retro-scanline: rgba(0, 0, 0, 0.08); +/* Kill all shadows globally — terminal aesthetic = flat */ +* { + box-shadow: none !important; } -.dark { - --vp-c-bg: #0a0a0f; - --vp-c-bg-alt: #0f0f18; - --vp-c-bg-soft: #141420; +/* Hide appearance switch (force dark) */ +.VPSwitchAppearance { + display: none !important; +} - --vp-c-text-1: #e8e8e8; - --vp-c-text-2: #888; +/* ─── Selection ────────────────────────────────────────────────── */ - --vp-c-border: #222233; - --vp-c-divider: #222233; +::selection { + background: rgba(0, 122, 255, 0.25); + color: var(--zi-light); +} - --retro-scanline: rgba(0, 0, 0, 0.12); +::-moz-selection { + background: rgba(0, 122, 255, 0.25); + color: var(--zi-light); } -/* ── CRT Scanline Overlay ────────────────────────────────── */ -body::after { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 9999; - background: repeating-linear-gradient(0deg, - var(--retro-scanline) 0px, - var(--retro-scanline) 1px, - transparent 1px, - transparent 3px); - opacity: 0.4; +/* ─── Scrollbar ────────────────────────────────────────────────── */ + +::-webkit-scrollbar { + width: 6px; + height: 6px; } -/* ── Global Background ───────────────────────────────────── */ -body { - background-color: var(--vp-c-bg); - background-image: - radial-gradient(circle at 20% 50%, rgba(255, 176, 0, 0.03) 0%, transparent 50%), - radial-gradient(circle at 80% 50%, rgba(51, 255, 51, 0.02) 0%, transparent 50%); +::-webkit-scrollbar-track { + background: var(--zi-bg); } -/* ── Keyframe Animations ─────────────────────────────────── */ -@keyframes blink-cursor { +::-webkit-scrollbar-thumb { + background: var(--zi-bg-alt); + border-radius: 3px; +} - 0%, - 100% { - opacity: 1; - } +::-webkit-scrollbar-thumb:hover { + background: var(--zi-border-strong); +} - 50% { - opacity: 0; - } +/* Firefox */ +* { + scrollbar-width: thin; + scrollbar-color: var(--zi-bg-alt) var(--zi-bg); } -@keyframes glow-pulse { +/* ─── Navigation ───────────────────────────────────────────────── */ - 0%, - 100% { - text-shadow: 0 0 4px var(--retro-glow-soft); - } +.VPNav, +.VPNavBar, +.VPSidebar, +.VPContent, +.VPContent.has-sidebar, +.VPDoc, +.VPFooter { + background: var(--zi-bg); +} - 50% { - text-shadow: 0 0 12px var(--retro-glow), 0 0 24px var(--retro-glow-soft); - } +.VPNav { + border-bottom: 1px solid var(--zi-border); } -@keyframes subtle-flicker { +.VPNavBar { + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} - 0%, - 100% { - opacity: 1; - } +.VPNavBarTitle .title, +.VPNavBarTitle .text { + font-family: var(--vp-font-family-base); + font-weight: 700; + letter-spacing: -0.02em; +} + +.VPNavBarMenuLink, +.VPSidebarItem .text, +.VPSidebarItem .link-text, +.VPDoc, +.vp-doc, +button, +input, +textarea, +select { + font-family: var(--vp-font-family-base); +} - 92% { - opacity: 1; - } +/* Nav link styles — underlined, weight 500 */ +.VPNavBarMenuLink { + font-weight: 500; + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: transparent; + transition: color var(--zi-transition), text-decoration-color var(--zi-transition); +} - 93% { - opacity: 0.8; - } +.VPNavBarMenuLink:hover { + color: var(--zi-blue); + text-decoration-color: var(--zi-blue); +} - 94% { - opacity: 1; - } +.VPNavBarMenuLink.active { + color: var(--zi-light); + text-decoration-color: var(--zi-light); +} - 96% { - opacity: 0.9; - } +/* ─── Sidebar ──────────────────────────────────────────────────── */ - 97% { - opacity: 1; - } +.VPSidebar { + border-right: 1px solid var(--zi-border); } -@keyframes border-glow { - - 0%, - 100% { - border-color: var(--vp-c-border); - } +.VPNavBarMenuLink, +.VPSocialLink, +.VPSidebarItem .text, +.VPSidebarItem .link-text, +.VPSidebarItem .caret, +.vp-doc, +.vp-doc p, +.vp-doc li, +.vp-doc td, +.vp-doc th { + color: var(--zi-light); +} - 50% { - border-color: var(--retro-glow); - } +/* Section headings */ +.VPSidebarItem.level-0 > .item .text, +.group > .VPSidebarItem .text { + font-weight: 700; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--zi-muted); } -/* ── Hero Section ────────────────────────────────────────── */ -.VPHero .name { - font-family: var(--retro-heading) !important; - font-weight: 400; - letter-spacing: 0.02em; - color: var(--retro-glow) !important; - background: none !important; - -webkit-text-fill-color: var(--retro-glow) !important; - text-shadow: - 0 0 7px var(--retro-glow), - 0 0 20px var(--retro-glow-soft), - 0 0 42px rgba(255, 176, 0, 0.15); - animation: subtle-flicker 8s infinite; +.VPSidebarItem .items { + border-left: 1px solid var(--zi-border); } -.VPHero .clip { - -webkit-text-fill-color: var(--retro-glow) !important; - background: none !important; +/* Active sidebar item — accent left bar */ +.VPSidebarItem.is-active > .item { + border-left: 2px solid var(--zi-blue); + margin-left: -1px; + padding-left: 12px; } -.dark .VPHero .name { - color: var(--retro-glow) !important; - -webkit-text-fill-color: var(--retro-glow) !important; - background: none !important; - text-shadow: - 0 0 10px var(--retro-glow), - 0 0 30px var(--retro-glow-soft), - 0 0 60px rgba(255, 176, 0, 0.1); +.VPSidebarItem.is-active > .item .link-text { + color: var(--zi-light); + font-weight: 700; } -.VPHero .text { - font-size: 2rem !important; - color: var(--retro-green) !important; - font-family: var(--retro-heading) !important; - text-shadow: 0 0 8px rgba(51, 255, 51, 0.5); - opacity: 0.95; +/* Sidebar link transitions */ +.VPSidebarItem .link-text { + transition: color var(--zi-transition); } -.VPHero .tagline { - font-family: var(--vp-font-family-base); - color: var(--vp-c-text-2); - font-size: 1.3rem; - line-height: 1.6; +.VPSidebarItem .link-text:hover { + color: var(--zi-blue); } -.VPHero .tagline::after { - content: '█'; - animation: blink-cursor 1s step-end infinite; - color: var(--retro-glow); - margin-left: 4px; +/* Doc links */ +.VPDoc a, +.vp-doc a { + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: rgba(0, 122, 255, 0.3); + transition: color var(--zi-transition), text-decoration-color var(--zi-transition); } -.VPHero .image-container { - position: relative; +.VPDoc a:hover, +.vp-doc a:hover { + color: var(--zi-blue); + text-decoration-color: var(--zi-blue); } -.VPHero .image-container::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 240px; - height: 240px; - background: var(--retro-glow); - filter: blur(100px); - opacity: 0.12; - z-index: -1; - border-radius: 50%; -} - -/* ── Feature Cards (Retro Boxy) ──────────────────────────── */ -.VPFeature { - background: var(--vp-c-bg-alt) !important; - border: 1px solid var(--vp-c-border) !important; - border-radius: 0 !important; - transition: all 0.25s ease !important; - position: relative; - overflow: hidden; +/* ─── Content Container ───────────────────────────────────────── */ + +.VPDoc .content-container, +.VPDoc.has-sidebar .content-container { + max-width: 860px; } -.VPFeature:hover { - border-color: var(--retro-glow) !important; - transform: none; - box-shadow: - 0 0 8px rgba(255, 176, 0, 0.15), - inset 0 0 20px rgba(255, 176, 0, 0.03); +/* ─── Typography ───────────────────────────────────────────────── */ + +.vp-doc h1, +.vp-doc h2, +.vp-doc h3, +.vp-doc h4, +.vp-doc h5, +.vp-doc h6 { + font-family: var(--vp-font-family-base); + color: var(--zi-light); + font-weight: 700; + letter-spacing: -0.01em; } -/* Retro accent — top border lights up */ -.VPFeature::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 2px; - background: linear-gradient(90deg, transparent, var(--retro-glow), transparent); - opacity: 0; - transition: opacity 0.3s ease; +.vp-doc h1 { + font-size: 2.38rem; + line-height: 1.3; + padding-bottom: var(--zi-space-4); + border-bottom: 1px solid var(--zi-border); + margin-bottom: var(--zi-space-8); } -.VPFeature:hover::before { - opacity: 1; +.vp-doc h2 { + font-size: 1.25rem; + line-height: 1.5; + margin-top: var(--zi-space-12); + padding-bottom: var(--zi-space-2); + border-bottom: 1px solid var(--zi-border); + margin-bottom: var(--zi-space-6); } -.VPFeature .title { - font-family: var(--retro-heading) !important; - font-size: 0.7rem !important; - letter-spacing: 0.02em; - line-height: 1.6 !important; - color: var(--retro-glow); +.vp-doc h3 { + font-size: 1rem; + line-height: 1.5; + margin-top: var(--zi-space-8); + color: var(--zi-text-secondary); } -.VPFeature .details { - font-family: var(--vp-font-family-base); - font-size: 1.1rem; +.vp-doc p, +.vp-doc li, +.vp-doc td, +.vp-doc th, +.vp-doc blockquote { + font-size: 1rem; line-height: 1.5; } -.VPFeature .link-text { +.vp-doc strong, +.vp-doc b, +.VPFeature .title, +.VPSidebarItem.is-active > .item .link-text { + font-weight: 700; +} + +/* Captions / small text */ +.vp-doc small, +.vp-doc .caption { + font-size: 0.875rem; + line-height: 2; + color: var(--zi-muted); +} + +/* ─── Inline Code ──────────────────────────────────────────────── */ + +.vp-doc code, +.vp-doc kbd, +.vp-code, +div[class*='language-'] code, +div[class*='language-'] pre { font-family: var(--vp-font-family-mono); - font-size: 0.95rem; - color: var(--retro-glow) !important; } -.VPFeature .link-text::before { - content: '> '; - color: var(--retro-green); +.vp-doc :not(pre) > code { + border: 1px solid var(--zi-border); + border-radius: var(--zi-radius); + background: var(--zi-bg-alt); + color: var(--zi-light); + padding: 2px 6px; + font-size: 0.9em; } -/* ── Code Blocks (Terminal Style) ────────────────────────── */ -.vp-doc div[class*='language-'] { - border-radius: 0; - border: 1px solid var(--vp-c-border); - background-color: #0a0a0a !important; +/* ─── Code Blocks ──────────────────────────────────────────────── */ + +div[class*='language-'] { + border: 1px solid var(--zi-border); + border-radius: var(--zi-radius); + background: var(--zi-terminal); + position: relative; } -.vp-doc div[class*='language-'] pre, -.vp-doc div[class*='language-'] code { - color: #e8e8e8 !important; +/* Subtle warm inner accent at top */ +div[class*='language-']::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + rgba(253, 252, 252, 0.06) 30%, + rgba(253, 252, 252, 0.06) 70%, + transparent + ); + pointer-events: none; + z-index: 1; } -.vp-doc div[class*='language-']::before { - font-family: var(--retro-heading) !important; - font-size: 0.5rem; +div[class*='language-'] pre, +div[class*='language-'] code, +.vp-code-group .tabs, +.vp-code-group .blocks { + background: transparent; } -.dark .vp-doc div[class*='language-'] { - background-color: #060608 !important; - border-color: #1a1a2a; +/* Code block language label */ +div[class*='language-'] span.lang { + color: var(--zi-muted-soft); + font-size: 0.75rem; + font-weight: 500; + user-select: none; } -.vp-doc code { - font-family: var(--vp-font-family-mono) !important; - font-size: 0.95em; +/* Code group tabs */ +.vp-code-group .tabs { + border-bottom: 1px solid var(--zi-border); } -.vp-doc :not(pre)>code { - background-color: rgba(255, 176, 0, 0.1) !important; - color: var(--retro-glow) !important; - border-radius: 0; - padding: 2px 6px; - border: 1px solid rgba(255, 176, 0, 0.2); +.vp-code-group .tabs label { + font-family: var(--vp-font-family-base); + font-weight: 500; + color: var(--zi-muted); + transition: color var(--zi-transition); } -/* ── Stats Section ───────────────────────────────────────── */ -.stats-section { - display: flex; - justify-content: center; - gap: 3rem; - padding: 4rem 1rem; - border-top: 1px dashed var(--retro-glow); - border-bottom: 1px dashed var(--retro-glow); - background: var(--vp-c-bg-alt); - margin: 4rem 0; - position: relative; +.vp-code-group .tabs label.active { + color: var(--zi-light); + border-bottom: 2px solid var(--zi-muted); } -.stat-item { - text-align: center; +/* ─── Tables ───────────────────────────────────────────────────── */ + +.vp-doc table { + display: table; + width: 100%; + border-collapse: collapse; + margin: var(--zi-space-6) 0; + border: 1px solid var(--zi-border); + border-radius: var(--zi-radius); + overflow: hidden; + font-size: 0.9375rem; } -.stat-number { - font-family: var(--retro-heading); - font-size: 1.8rem; - font-weight: 400; - color: var(--retro-glow); - text-shadow: 0 0 10px var(--retro-glow-soft); - animation: glow-pulse 3s ease-in-out infinite; +.vp-doc tr { + border-top: 1px solid var(--zi-border); + transition: background-color var(--zi-transition); } -.stat-label { - text-transform: uppercase; - font-family: var(--retro-heading); - font-size: 0.5rem; - letter-spacing: 0.15em; - color: var(--vp-c-text-2); - margin-top: 0.75rem; +/* Alternating rows */ +.vp-doc tr:nth-child(even) { + background: rgba(253, 252, 252, 0.015); } -/* ── Buttons ─────────────────────────────────────────────── */ -.VPButton.brand { - border-radius: 0 !important; - background-color: transparent !important; - border: 2px solid var(--retro-glow) !important; - font-family: var(--retro-heading); - font-weight: 400; - text-transform: uppercase; - letter-spacing: 0.05em; - font-size: 0.65rem; - color: var(--retro-glow) !important; - padding: 12px 24px !important; - transition: all 0.2s ease; +.vp-doc tr:hover { + background: rgba(253, 252, 252, 0.03); } -.VPButton.brand:hover { - background-color: var(--retro-glow) !important; - color: #0a0a0f !important; - box-shadow: 0 0 15px var(--retro-glow-soft), 0 0 30px rgba(255, 176, 0, 0.1); +.vp-doc th, +.vp-doc td { + border: 1px solid var(--zi-border); + padding: 10px 14px; } -.VPButton.alt { - border-radius: 0 !important; - border: 2px solid var(--vp-c-text-2) !important; - font-family: var(--retro-heading); - font-size: 0.65rem; +.vp-doc th { + background: var(--zi-bg-alt); + font-weight: 700; + font-size: 0.875rem; text-transform: uppercase; - letter-spacing: 0.05em; - padding: 12px 24px !important; - transition: all 0.2s ease; - color: var(--vp-c-text-1) !important; - background-color: transparent !important; + letter-spacing: 0.03em; + color: var(--zi-muted); } -.VPButton.alt:hover { - border-color: var(--retro-green) !important; - color: var(--retro-green) !important; - box-shadow: 0 0 10px rgba(51, 255, 51, 0.15); +.vp-doc td code { + font-size: 0.85em; } -/* ── Sidebar & Nav ───────────────────────────────────────── */ -.VPSidebar { - border-right: 1px solid var(--vp-c-border) !important; - background-color: var(--vp-c-bg) !important; - font-family: var(--vp-font-family-base); -} +/* ─── Custom Blocks (tip/warning/danger/info/details) ──────────── */ -.VPSidebar .group .text { - font-family: var(--retro-heading) !important; - font-size: 0.55rem !important; - letter-spacing: 0.05em; - text-transform: uppercase; +.vp-doc blockquote { + border: none; + border-left: 3px solid var(--zi-border-strong); + border-radius: 0; + padding: 12px 18px; + background: rgba(253, 252, 252, 0.02); + color: var(--zi-muted); + font-style: italic; } -.VPNavBar { - background-color: var(--vp-c-bg) !important; - border-bottom: 1px solid var(--vp-c-border) !important; - backdrop-filter: none; +.custom-block { + border: 1px solid var(--zi-border); + border-left: 3px solid; + border-radius: var(--zi-radius); + padding: 16px 20px; + background: rgba(253, 252, 252, 0.02); + margin: var(--zi-space-6) 0; } -.VPNavBar .title { - font-family: var(--retro-heading) !important; - font-size: 0.6rem !important; +.custom-block.tip { + border-left-color: var(--zi-blue); + background: rgba(0, 122, 255, 0.04); } -.dark .VPNavBar { - background-color: rgba(10, 10, 15, 0.95) !important; - border-bottom-color: #222233 !important; +.custom-block.warning { + border-left-color: var(--zi-orange); + background: rgba(255, 159, 10, 0.04); } -/* Active sidebar item glow */ -.VPSidebar a.active { - color: var(--retro-glow) !important; - text-shadow: 0 0 6px var(--retro-glow-soft); +.custom-block.danger { + border-left-color: var(--zi-red); + background: rgba(255, 59, 48, 0.04); } -/* Nav links */ -.VPNavBar .VPNavBarMenuLink .VPLink, -.VPNavBar a { - font-family: var(--vp-font-family-base); - font-size: 1.1rem; +.custom-block.info { + border-left-color: var(--zi-border-strong); + background: rgba(253, 252, 252, 0.02); } -/* ── Content Typography ──────────────────────────────────── */ -.vp-doc h1 { - font-family: var(--retro-heading) !important; - font-size: 1.2rem !important; - color: var(--retro-glow); - text-shadow: 0 0 6px var(--retro-glow-soft); - line-height: 1.8 !important; - border-bottom: 1px dashed var(--vp-c-border); - padding-bottom: 1rem; +.custom-block.details { + border-left-color: var(--zi-muted); + background: rgba(253, 252, 252, 0.02); } -.vp-doc h2 { - font-family: var(--retro-heading) !important; - font-size: 0.85rem !important; - color: var(--retro-glow); - border-top: 1px dashed var(--vp-c-border); - padding-top: 1.5rem; - line-height: 1.8 !important; +.custom-block .custom-block-title { + font-weight: 700; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: var(--zi-space-2); } -.vp-doc h3 { - font-family: var(--retro-heading) !important; - font-size: 0.7rem !important; - color: var(--retro-green); - line-height: 1.8 !important; +.custom-block.tip .custom-block-title { + color: var(--zi-blue); } -.vp-doc p, -.vp-doc li { - font-family: var(--vp-font-family-base); - font-size: 1.15rem; - line-height: 1.7; +.custom-block.warning .custom-block-title { + color: var(--zi-orange); } -/* ── Step Cards (Retro Process) ──────────────────────────── */ -.home-section { - max-width: 960px; - margin: 0 auto; - padding: 0 1.5rem 4rem; +.custom-block.danger .custom-block-title { + color: var(--zi-red); } -.home-section h2 { - font-family: var(--retro-heading) !important; - font-size: 0.85rem; - color: var(--retro-glow); - text-shadow: 0 0 8px var(--retro-glow-soft); +.custom-block.info .custom-block-title { + color: var(--zi-muted); } -.home-section .subtitle { +/* ─── Buttons ──────────────────────────────────────────────────── */ + +.VPButton, +.VPHero .action .VPButton { + border-radius: var(--zi-radius) !important; + border: 1px solid var(--zi-border-strong) !important; font-family: var(--vp-font-family-base); - color: var(--vp-c-text-2); - font-size: 1.15rem; + font-size: 16px; + font-weight: 500; + line-height: 2; + min-height: 0; + transition: background-color var(--zi-transition), border-color var(--zi-transition), + color var(--zi-transition); } -.quick-steps { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; - margin-top: 2rem; +.VPHero .action .VPButton.brand, +.VPButton.brand { + background: var(--zi-bg); + color: var(--zi-light); } -.step-card { - background: var(--vp-c-bg-alt); - border: 1px solid var(--vp-c-border); - border-radius: 0; - padding: 1.5rem; - transition: all 0.25s; - position: relative; +.VPHero .action .VPButton.brand:hover, +.VPButton.brand:hover { + background: var(--zi-blue-hover); + border-color: var(--zi-blue-hover) !important; } -.step-card:hover { - border-color: var(--retro-glow); - box-shadow: 0 0 8px rgba(255, 176, 0, 0.1); +.VPHero .action .VPButton.alt, +.VPButton.alt { + background: var(--zi-bg-alt); + color: var(--zi-light); } -.step-card::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 1px; - background: linear-gradient(90deg, transparent, var(--retro-glow), transparent); - opacity: 0; - transition: opacity 0.3s; +.VPHero .action .VPButton.alt:hover, +.VPButton.alt:hover { + background: #3a3535; + border-color: var(--zi-border-strong) !important; +} + +/* ─── Inputs ───────────────────────────────────────────────────── */ + +input[type='text'], +input[type='search'], +input[type='email'], +textarea, +select { + border-radius: var(--zi-input-radius); + border: 1px solid var(--zi-border); + background: var(--zi-terminal); + color: var(--zi-light); + padding: var(--zi-space-5); + font-family: var(--vp-font-family-base); + transition: border-color var(--zi-transition); } -.step-card:hover::after { - opacity: 1; +input:focus, +textarea:focus, +select:focus { + border-color: var(--zi-blue); + outline: none; } -.step-number { - font-family: var(--retro-heading); - color: var(--retro-glow); - font-size: 0.8rem; - font-weight: 400; - margin-bottom: 0.75rem; - display: block; - text-shadow: 0 0 6px var(--retro-glow-soft); -} +/* ─── Search Modal ─────────────────────────────────────────────── */ -.step-number::before { - content: '// '; - color: var(--vp-c-text-2); +.VPLocalSearchBox .shell { + background: var(--zi-bg) !important; + border: 1px solid var(--zi-border-strong) !important; + border-radius: var(--zi-input-radius) !important; } -.step-card h3 { - margin: 0; - font-family: var(--retro-heading) !important; - font-size: 0.6rem; - font-weight: 400; - color: var(--vp-c-text-1); - text-transform: uppercase; - letter-spacing: 0.05em; - line-height: 1.6; +.VPLocalSearchBox .search-input { + font-family: var(--vp-font-family-base) !important; + color: var(--zi-light) !important; } -.step-card p { - color: var(--vp-c-text-2); - font-size: 1.05rem; - line-height: 1.5; - font-family: var(--vp-font-family-base); +.VPLocalSearchBox .result { + border: 1px solid var(--zi-border) !important; + border-radius: var(--zi-radius) !important; + background: var(--zi-bg-alt) !important; } -/* ── Command Categories ──────────────────────────────────── */ -.categories-grid { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-top: 1.5rem; +.VPLocalSearchBox .result.selected { + border-color: var(--zi-blue) !important; + background: var(--zi-surface) !important; } -.category-chip { - display: inline-flex; - align-items: center; - padding: 0.6rem 1.2rem; - background: transparent; - border: 1px solid var(--vp-c-border); - border-radius: 0; - font-family: var(--retro-heading); - font-size: 0.5rem; - color: var(--vp-c-text-2) !important; - text-decoration: none !important; - text-transform: uppercase; - letter-spacing: 0.08em; - transition: all 0.2s; +.VPLocalSearchBox .result .title { + color: var(--zi-light) !important; } -.category-chip:hover { - color: var(--retro-glow) !important; - border-color: var(--retro-glow); - background: rgba(255, 176, 0, 0.05); - box-shadow: 0 0 8px rgba(255, 176, 0, 0.1); +.VPLocalSearchBox .result .excerpt { + color: var(--zi-muted) !important; } -/* ── Footer ──────────────────────────────────────────────── */ -.VPFooter { - border-top: 1px dashed var(--vp-c-border) !important; +/* DocSearch (if used) */ +.DocSearch-Button, +.DocSearch-Input, +.DocSearch-Modal, +.DocSearch-Hit, +.DocSearch-Footer { font-family: var(--vp-font-family-base); } -/* ── Scrollbars ──────────────────────────────────────────── */ -::-webkit-scrollbar { - width: 6px; - height: 6px; +.DocSearch-Button { + border: 1px solid var(--zi-border) !important; + border-radius: var(--zi-radius) !important; + background: var(--zi-bg-alt) !important; } -::-webkit-scrollbar-track { - background: var(--vp-c-bg); +/* ─── Hero Section ─────────────────────────────────────────────── */ + +.VPHero { + padding-top: var(--zi-space-16); } -::-webkit-scrollbar-thumb { - background: var(--vp-c-border); - border-radius: 0; +.VPHero .name, +.VPHero .text { + font-family: var(--vp-font-family-base) !important; + -webkit-text-fill-color: var(--zi-light) !important; + color: var(--zi-light) !important; + background: none !important; + text-shadow: none !important; } -::-webkit-scrollbar-thumb:hover { - background: var(--retro-glow); +.VPHero .name { + font-size: 2.38rem !important; + font-weight: 700 !important; + line-height: 1.3 !important; + letter-spacing: -0.02em; } -/* ── Tables (Retro) ──────────────────────────────────────── */ -.vp-doc table { - border-collapse: collapse; - border: 1px solid var(--vp-c-border); +.VPHero .text { + color: var(--zi-muted) !important; + font-size: 1rem !important; + font-weight: 700 !important; + line-height: 1.5 !important; } -.vp-doc th { - font-family: var(--retro-heading); - font-size: 0.55rem; - text-transform: uppercase; - letter-spacing: 0.05em; - background: var(--vp-c-bg-alt); - color: var(--retro-glow); +.VPHero .tagline { + color: var(--zi-muted); + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + max-width: 540px; } -.vp-doc td { - border: 1px solid var(--vp-c-border); - font-family: var(--vp-font-family-base); +.VPHero .image { + border-radius: var(--zi-radius); } -/* ── Blockquotes / Tips / Warnings ───────────────────────── */ -.vp-doc .custom-block { - border-radius: 0; - border-left: 3px solid var(--retro-glow); +.VPHero .image img { + border-radius: var(--zi-radius); } -.vp-doc .custom-block.tip { - border-left-color: var(--retro-green); +/* ─── Features Grid ────────────────────────────────────────────── */ + +.VPFeatures, +.VPFeatures .container, +.VPFeature { + background: transparent; } -.vp-doc .custom-block .custom-block-title { - font-family: var(--retro-heading); - font-size: 0.55rem; - letter-spacing: 0.05em; +.VPFeature { + border: 1px solid var(--zi-border) !important; + border-radius: var(--zi-radius) !important; + background: var(--zi-bg-alt) !important; + transition: border-color var(--zi-transition), background-color var(--zi-transition), + transform var(--zi-transition); } -/* ── Search ──────────────────────────────────────────────── */ -.VPLocalSearchBox .shell { - border-radius: 0 !important; - border: 1px solid var(--retro-glow) !important; +.VPFeature:hover { + border-color: var(--zi-border-strong) !important; + background: var(--zi-surface) !important; + transform: translateY(-1px); } -/* ── Misc Overrides ──────────────────────────────────────── */ -.VPDoc .container .content { - font-family: var(--vp-font-family-base); +.VPFeature .title { + font-size: 1rem !important; + line-height: 1.5 !important; + color: var(--zi-light); } -/* ── Terminal Window Frames (CSS-only) ───────────────────── */ -.terminal-window { - border: 1px solid var(--vp-c-border); - background: var(--vp-c-bg-alt); - margin: 2rem auto; - max-width: 960px; - overflow: hidden; - position: relative; - padding: 52px 1.5rem 1.5rem; +.VPFeature .details { + color: var(--zi-muted); + font-size: 0.9375rem; + line-height: 1.5; } -/* Titlebar via ::before */ -.terminal-window::before { - content: '● ● ● ' attr(data-title); - display: block; - position: absolute; - top: 0; - left: 0; - right: 0; - padding: 8px 14px; - background: rgba(0, 0, 0, 0.3); - border-bottom: 1px solid var(--vp-c-border); - font-family: var(--vp-font-family-mono); - font-size: 0.85rem; - color: var(--vp-c-text-2); +.VPFeature .link-text { + color: var(--zi-muted); + font-weight: 500; + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: transparent; + transition: color var(--zi-transition), text-decoration-color var(--zi-transition); } -/* Stats inside terminal: remove old borders */ -.terminal-window .stats-section { - border: none; - margin: 0; - padding: 1rem 0; - background: transparent; +.VPFeature:hover .link-text { + color: var(--zi-blue); + text-decoration-color: var(--zi-blue); } -/* Subtitle as terminal prompt */ -.terminal-window .subtitle { - font-family: var(--vp-font-family-mono); - color: var(--retro-green); - font-size: 1rem; - margin: 0.25rem 0 1rem; +/* Feature icons */ +.VPFeature .icon { + margin-bottom: var(--zi-space-3); } -/* Terminal window headings */ -.terminal-window h2 { - font-family: var(--retro-heading) !important; - font-size: 0.8rem; - color: var(--retro-glow); - text-shadow: 0 0 8px var(--retro-glow-soft); - margin: 0 0 0.5rem; - border: none; - padding: 0; +/* ─── Homepage Custom Sections ─────────────────────────────────── */ + +.home-section { + margin: var(--zi-space-8) 0 var(--zi-space-16); } -/* Category chips as directory listings */ -.terminal-window .category-chip { - color: var(--retro-green) !important; - border-color: transparent; - background: transparent; - padding: 0.4rem 0.8rem; +.VPHero { + padding-bottom: 0 !important; + margin-bottom: var(--zi-space-8); } -.terminal-window .category-chip:hover { - color: var(--retro-glow) !important; - border-color: var(--retro-glow); - background: rgba(255, 176, 0, 0.05); +/* ─── Stats Section ────────────────────────────────────────────── */ + +.stats-section { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--zi-space-4); } -/* ── Light Mode (Retro Amber Terminal) ───────────────────── */ -html:not(.dark) { - --vp-c-bg: #fdf6e3; - --vp-c-bg-alt: #f5eedc; - --vp-c-bg-soft: #eee8d5; +.stat-item { + border: 1px solid var(--zi-border); + border-radius: var(--zi-radius); + padding: var(--zi-space-5); + background: var(--zi-bg-alt); + text-align: center; + transition: border-color var(--zi-transition), background-color var(--zi-transition); +} - --vp-c-text-1: #3c3836; - --vp-c-text-2: #665c54; +.stat-item:hover { + border-color: var(--zi-border-strong); + background: var(--zi-surface); +} - --vp-c-border: #d5c4a1; - --vp-c-divider: #d5c4a1; +.stat-number { + color: var(--zi-light); + font-size: 2.25rem; + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.02em; +} - --retro-glow: #b57614; - --retro-glow-soft: rgba(181, 118, 20, 0.3); - --retro-green: #427b58; - --retro-scanline: rgba(0, 0, 0, 0.03); +.stat-label { + color: var(--zi-muted); + font-size: 0.875rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-top: var(--zi-space-1); } -/* Light mode hero overrides */ -html:not(.dark) .VPHero .name { - color: #b57614 !important; - -webkit-text-fill-color: #b57614 !important; - text-shadow: none; +.subtitle { + color: var(--zi-muted-soft); + font-size: 0.875rem; + font-weight: 400; + font-style: italic; + margin-bottom: var(--zi-space-3); } -html:not(.dark) .VPHero .text { - color: #427b58 !important; - text-shadow: none; +/* ─── Category Chips ───────────────────────────────────────────── */ + +.categories-grid { + display: flex; + flex-wrap: wrap; + gap: var(--zi-space-3); + margin-top: var(--zi-space-4); } -html:not(.dark) .VPButton.brand { - border-color: #b57614 !important; - color: #b57614 !important; +.category-chip { + display: inline-flex; + align-items: center; + padding: 8px 16px; + border: 1px solid var(--zi-border); + border-radius: var(--zi-radius); + background: var(--zi-bg-alt); + color: var(--zi-light); + text-decoration: none; + font-weight: 500; + font-size: 0.9375rem; + transition: border-color var(--zi-transition), background-color var(--zi-transition), + color var(--zi-transition); } -html:not(.dark) .VPButton.brand:hover { - background-color: #b57614 !important; - color: #fdf6e3 !important; +.category-chip:hover { + color: var(--zi-blue); + border-color: var(--zi-border-strong); + background: var(--zi-surface); } -html:not(.dark) .VPButton.alt { - border-color: #665c54 !important; - color: #3c3836 !important; +.step-link { + color: var(--zi-muted); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: rgba(154, 152, 152, 0.3); + font-weight: 500; + display: inline-block; + margin-top: var(--zi-space-4); + transition: color var(--zi-transition), text-decoration-color var(--zi-transition); } -html:not(.dark) .VPButton.alt:hover { - border-color: #427b58 !important; - color: #427b58 !important; +.step-link:hover { + color: var(--zi-blue); + text-decoration-color: var(--zi-blue); } -html:not(.dark) .stat-number { - color: #b57614; - text-shadow: none; +/* ─── Badges / Pills ───────────────────────────────────────────── */ + +.badge { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: var(--zi-radius); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 1.6; + vertical-align: middle; + margin-left: 6px; } -html:not(.dark) .VPFeature .title { - color: #b57614; +.badge-admin { + background: rgba(0, 122, 255, 0.12); + color: var(--zi-blue); + border: 1px solid rgba(0, 122, 255, 0.2); } -html:not(.dark) .VPFeature:hover { - border-color: #b57614 !important; - box-shadow: 0 0 8px rgba(181, 118, 20, 0.1); +.badge-owner { + background: rgba(255, 159, 10, 0.12); + color: var(--zi-orange); + border: 1px solid rgba(255, 159, 10, 0.2); } -html:not(.dark) .vp-doc :not(pre)>code { - background-color: rgba(181, 118, 20, 0.1) !important; - color: #b57614 !important; - border-color: rgba(181, 118, 20, 0.2); +.badge-group { + background: rgba(48, 209, 88, 0.12); + color: var(--zi-green); + border: 1px solid rgba(48, 209, 88, 0.2); } -html:not(.dark) .vp-doc h1, -html:not(.dark) .vp-doc h2 { - color: #b57614; - text-shadow: none; +.badge-new { + background: rgba(255, 59, 48, 0.12); + color: var(--zi-red); + border: 1px solid rgba(255, 59, 48, 0.2); } -html:not(.dark) .vp-doc h3 { - color: #427b58; +/* ─── Outline / TOC ────────────────────────────────────────────── */ + +.VPDocAside .outline-marker { + background-color: var(--zi-blue) !important; } -html:not(.dark) .terminal-window::before { - background: rgba(0, 0, 0, 0.06); +.VPDocAsideOutline .outline-link { + font-size: 0.8125rem; + color: var(--zi-muted); + transition: color var(--zi-transition); } -html:not(.dark) .terminal-window .subtitle { - color: #427b58; +.VPDocAsideOutline .outline-link:hover, +.VPDocAsideOutline .outline-link.active { + color: var(--zi-light); } -html:not(.dark) body::after { - opacity: 0.15; +/* ─── Footer ───────────────────────────────────────────────────── */ + +.VPFooter { + border-top: 1px solid var(--zi-border); + padding: var(--zi-space-8) var(--zi-space-6); } -html:not(.dark) body { - background-image: none; +.VPFooter .message, +.VPFooter .copyright { + color: var(--zi-muted-soft); + font-size: 0.875rem; } -/* Light mode code blocks — warm sepia terminal */ -html:not(.dark) .vp-doc div[class*='language-'] { - background-color: #2d2418 !important; - border: 1px solid #5c4a32 !important; +/* ─── Edit Link / Last Updated ─────────────────────────────────── */ + +.VPDocFooter .edit-link-button { + color: var(--zi-muted); + font-weight: 500; + transition: color var(--zi-transition); } -/* Code block language label */ -html:not(.dark) .vp-doc div[class*='language-']::before { - color: #a08060 !important; +.VPDocFooter .edit-link-button:hover { + color: var(--zi-blue); } -/* Line numbers in light mode */ -html:not(.dark) .vp-doc div[class*='language-'] .line-numbers { - color: #7a6545; - border-right-color: #5c4a32; +.VPDocFooter .pager-link { + border: 1px solid var(--zi-border); + border-radius: var(--zi-radius); + transition: border-color var(--zi-transition); } -/* ── Mobile Responsive ───────────────────────────────────── */ -@media (max-width: 768px) { +.VPDocFooter .pager-link:hover { + border-color: var(--zi-border-strong); +} - /* Hero title scaling */ - .VPHero .name { - font-size: 1.8rem !important; - } +.VPDocFooter .pager-link .title { + color: var(--zi-muted); + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.04em; +} - .VPHero .text { - font-size: 1.4rem !important; - } +.VPDocFooter .pager-link .desc { + color: var(--zi-light); + font-weight: 500; +} - .VPHero .tagline { - font-size: 1rem !important; - } +/* ─── HR / Dividers ────────────────────────────────────────────── */ - /* Terminal windows — tighter padding on mobile */ - .terminal-window { - margin: 1rem 0.5rem; - padding: 44px 1rem 1rem; - } +.vp-doc hr { + border: none; + border-top: 1px solid var(--zi-border); + margin: var(--zi-space-10) 0; +} - /* Keep code blocks inside content width on mobile */ - .vp-doc div[class*='language-'] { - width: auto !important; - max-width: 100% !important; - margin: 1rem 0 !important; - border-radius: 6px; - overflow-x: auto; - } +/* ─── Lists ────────────────────────────────────────────────────── */ - .vp-doc div[class*='language-'] pre { - padding-left: 0.9rem !important; - padding-right: 0.9rem !important; - } +.vp-doc ul, +.vp-doc ol { + padding-left: 1.25em; +} - /* Remove mobile line-number gutter so code starts further left */ - .vp-doc div[class*='language-'] .line-numbers-wrapper, - .vp-doc div[class*='language-'] .line-numbers { - display: none !important; - } +.vp-doc li + li { + margin-top: var(--zi-space-2); +} - .vp-doc div[class*='language-'] pre code { - padding-left: 0 !important; - margin-left: 0 !important; - } +.vp-doc li::marker { + color: var(--zi-muted); +} - .terminal-window::before { - padding: 6px 10px; - font-size: 0.75rem; - } +/* ─── Responsive ───────────────────────────────────────────────── */ - /* Terminal headings smaller on mobile */ - .terminal-window h2 { - font-size: 0.65rem; +@media (max-width: 960px) { + .stats-section { + grid-template-columns: 1fr; } - .terminal-window .subtitle { - font-size: 0.9rem; + .VPHero .name { + font-size: 1.75rem !important; } - /* Stats — keep 3-col but smaller fonts */ - .stats-section { - display: grid !important; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.5rem !important; - padding: 1rem 0 !important; + .home-section { + margin: var(--zi-space-12) 0; } - .stat-item { - min-width: 0; + .vp-doc h1 { + font-size: 1.75rem; } - .stat-number { - font-size: 1.35rem !important; - line-height: 1.1; + .vp-doc h2 { + font-size: 1.125rem; } +} - .stat-label { - font-size: 0.45rem !important; - letter-spacing: 0.06em; - line-height: 1.3; - white-space: normal; - margin-top: 0.4rem; +@media (max-width: 640px) { + .vp-doc h1 { + font-size: 1.5rem; } - /* Step cards — stack vertically */ - .quick-steps { - grid-template-columns: 1fr !important; - gap: 0.75rem !important; + .vp-doc div[class*='language-'] { + margin: var(--zi-space-2) 0; + border-radius: var(--zi-radius); } - .step-card { - padding: 1rem !important; + .VPHero { + padding-top: var(--zi-space-10); } - .step-card h3 { - font-size: 0.6rem !important; + .VPHero .name { + font-size: 1.5rem !important; } - /* Category chips — wrap properly */ .categories-grid { - gap: 0.5rem !important; + gap: var(--zi-space-2); } .category-chip { - font-size: 0.6rem !important; - padding: 0.3rem 0.5rem !important; + padding: 6px 12px; + font-size: 0.875rem; } - /* Home sections — less margin */ - .home-section { - margin: 1rem 0; - padding: 0; + .stat-number { + font-size: 1.75rem; } - /* Feature cards */ - .VPFeature .title { - font-size: 0.6rem !important; + .home-section { + margin: var(--zi-space-10) 0; } +} - /* Buttons */ - .VPButton { - font-size: 0.6rem !important; - padding: 0.6rem 1.2rem !important; - } +/* ─── Architecture Flow (Home) ─────────────────────────────────── */ + +.arch-flow { + margin: var(--zi-space-4) 0; } -@media (max-width: 480px) { - .VPHero .name { - font-size: 1.4rem !important; - } +.arch-flow p strong { + display: block; + color: var(--zi-light); + font-size: 0.875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--zi-space-3); +} - .VPHero .text { - font-size: 1.1rem !important; - } +.arch-flow div[class*='language-'] { + background: transparent; + border: none; + margin: var(--zi-space-2) 0; +} - .terminal-window { - margin: 0.75rem 0; - padding: 40px 0.75rem 0.75rem; - } +.arch-flow div[class*='language-']::before { + display: none; +} - .vp-doc div[class*='language-'] { - margin: 0.85rem 0 !important; +.arch-flow pre { + font-size: 0.8125rem; + line-height: 1.5; + overflow-x: auto; +} + +.arch-flow code { + color: var(--zi-muted); +} + +/* ─── Print ────────────────────────────────────────────────────── */ + +@media print { + .VPNav, + .VPSidebar, + .VPDocAside, + .VPFooter, + .VPDocFooter .edit-link-button { + display: none !important; } - .stat-number { - font-size: 1.1rem !important; + body { + background: white; + color: black; } - .stat-label { - font-size: 0.4rem !important; - letter-spacing: 0.04em; + .vp-doc a { + color: black; + text-decoration: underline; } - .categories-grid { - grid-template-columns: repeat(2, 1fr) !important; + .vp-doc code { + background: #f5f5f5; + border-color: #ddd; } } diff --git a/docs/index.md b/docs/index.md index 9e76339..362f0d6 100644 --- a/docs/index.md +++ b/docs/index.md @@ -16,72 +16,9 @@ hero: text: View on GitHub link: https://github.com/MhankBarBar/zero-ichi -features: - - icon: - src: /icons/bot.svg - title: Agentic AI - details: "Built-in AI assistant that understands context, remembers conversations, and can execute bot commands on your behalf. Bring your own API key." - link: /features/ai - linkText: Learn more - - icon: - src: /icons/download.svg - title: Media Downloader - details: "Download audio & video from YouTube, TikTok, Instagram, Twitter/X, and 1000+ sites — powered by yt-dlp with quality selection." - link: /commands/downloader - linkText: See commands - - icon: - src: /icons/shield.svg - title: Group Management - details: "Moderation toolkit with anti-link, anti-delete, blacklist, warnings, welcome/goodbye messages, polls, and role-based permissions." - link: /commands/group - linkText: See commands - - icon: - src: /icons/globe.svg - title: Multi-Language (i18n) - details: "Full internationalization with English + Indonesian built in. Easily add new languages with JSON locale files — no code changes needed." - link: /features/i18n - linkText: Learn more - - icon: - src: /icons/zap.svg - title: 60+ Commands - details: "Organized across 9 categories — general, admin, group, content, downloader, moderation, fun, utility, and owner commands." - link: /commands/general - linkText: Browse commands - - icon: - src: /icons/code.svg - title: Developer Friendly - details: "Middleware pipeline, type hints, hot-reload, JSON Schema config validation, and a clean architecture that makes extensibility a breeze." - link: /development/architecture - linkText: See architecture - - icon: - src: /icons/git-pull-request.svg - title: Contributing - details: "Want to help? Check out our contribution guide to get started with development, testing, and submitting PRs." - link: /development/contributing - linkText: Read guide --- - -
-
-
-
60+
-
Commands
-
-
-
9
-
Categories
-
-
-
2
-
Languages
-
-
-
-
-

Quick Start

-

$ echo "Get your bot running in under a minute"

Linux / macOS

@@ -106,24 +43,18 @@ uv run zero-ichi --debug --dashboard See full installation guide →
-
-

Command Categories

-

$ ls -la commands/

-general/ -admin/ -group/ -content/ -downloader/ -moderation/ -fun/ -utility/ -owner/ -
+general +admin +group +content +downloader +moderation +fun +utility +owner
- -