update: ui and layout change
This commit is contained in:
Arindam200
parent
3dccdde9c8
commit
9d746f7421
File diff suppressed because it is too large
Load Diff
@ -2,9 +2,9 @@
|
||||
// Note: type annotations allow type checking and IDEs autocompletion
|
||||
|
||||
// @ts-ignore
|
||||
const lightCodeTheme = require('prism-react-renderer/themes/github');
|
||||
const lightCodeTheme = require('prism-react-renderer/themes/vsLight');
|
||||
// @ts-ignore
|
||||
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
|
||||
const darkCodeTheme = require('prism-react-renderer/themes/nightOwl');
|
||||
|
||||
const inkeepConfig = {
|
||||
baseSettings: {
|
||||
@ -87,18 +87,83 @@ const config = {
|
||||
},
|
||||
],
|
||||
[
|
||||
'@docusaurus/plugin-content-blog',
|
||||
'@docusaurus/plugin-content-docs',
|
||||
{
|
||||
id: 'release_notes',
|
||||
id: 'release-notes',
|
||||
path: './release_notes',
|
||||
routeBasePath: 'release_notes',
|
||||
blogTitle: 'Release Notes',
|
||||
blogSidebarTitle: 'Releases',
|
||||
blogSidebarCount: 'ALL',
|
||||
postsPerPage: 'ALL',
|
||||
showReadingTime: false,
|
||||
sortPosts: 'descending',
|
||||
include: ['**/*.{md,mdx}'],
|
||||
sidebarPath: require.resolve('./sidebars-release-notes.js'),
|
||||
async sidebarItemsGenerator({defaultSidebarItemsGenerator, docs, ...args}) {
|
||||
const items = await defaultSidebarItemsGenerator({docs, ...args});
|
||||
|
||||
// Build map of doc id -> year from frontmatter date
|
||||
const docYearMap = {};
|
||||
for (const doc of docs) {
|
||||
const date = doc.frontMatter && doc.frontMatter.date;
|
||||
if (date) {
|
||||
const year = new Date(date).getFullYear();
|
||||
docYearMap[doc.id] = year;
|
||||
}
|
||||
}
|
||||
|
||||
function parseVersion(str) {
|
||||
const match = (str || '').match(/v?(\d+)\.(\d+)\.(\d+)/);
|
||||
if (!match) return [0, 0, 0];
|
||||
return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
|
||||
}
|
||||
function compareVersionsDesc(a, b) {
|
||||
const [aMaj, aMin, aPatch] = parseVersion(a.label || a.id || '');
|
||||
const [bMaj, bMin, bPatch] = parseVersion(b.label || b.id || '');
|
||||
if (bMaj !== aMaj) return bMaj - aMaj;
|
||||
if (bMin !== aMin) return bMin - aMin;
|
||||
return bPatch - aPatch;
|
||||
}
|
||||
|
||||
// Flatten and transform doc items (filter index, shorten labels)
|
||||
function flattenDocs(list) {
|
||||
const result = [];
|
||||
for (const item of list) {
|
||||
if (item.type === 'doc' && item.id === 'index') continue;
|
||||
if (item.type === 'doc') {
|
||||
const label = item.id.replace(/\/index$/, '');
|
||||
result.push({...item, label});
|
||||
} else if (item.type === 'category') {
|
||||
if (item.link && item.link.type === 'doc' && item.link.id !== 'index') {
|
||||
const id = item.link.id;
|
||||
const label = id.replace(/\/index$/, '');
|
||||
result.push({type: 'doc', id, label});
|
||||
} else {
|
||||
result.push(...flattenDocs(item.items));
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const docItems = flattenDocs(items);
|
||||
|
||||
// Group by year
|
||||
const byYear = {};
|
||||
for (const item of docItems) {
|
||||
const year = docYearMap[item.id] || 'Other';
|
||||
if (!byYear[year]) byYear[year] = [];
|
||||
byYear[year].push(item);
|
||||
}
|
||||
|
||||
// Sort each year's items by version descending
|
||||
for (const year of Object.keys(byYear)) {
|
||||
byYear[year].sort(compareVersionsDesc);
|
||||
}
|
||||
|
||||
// Build categories sorted by year descending
|
||||
const years = Object.keys(byYear).sort((a, b) => b - a);
|
||||
return years.map(year => ({
|
||||
type: 'category',
|
||||
label: String(year),
|
||||
collapsed: year !== String(years[0]),
|
||||
items: byYear[year],
|
||||
}));
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
@ -181,33 +246,29 @@ const config = {
|
||||
label: 'Docs',
|
||||
},
|
||||
{
|
||||
type: 'docSidebar',
|
||||
sidebarId: 'integrationsSidebar',
|
||||
position: 'left',
|
||||
label: 'Integrations',
|
||||
to: "docs/integrations"
|
||||
},
|
||||
{
|
||||
sidebarId: 'tutorialSidebar',
|
||||
position: 'left',
|
||||
label: 'Enterprise',
|
||||
to: "docs/enterprise"
|
||||
},
|
||||
{ to: '/release_notes', label: 'Release Notes', position: 'left' },
|
||||
{ to: '/blog', label: 'Blog', position: 'left' },
|
||||
{
|
||||
href: 'https://models.litellm.ai/',
|
||||
label: '💸 LLM Model Cost Map',
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/BerriAI/litellm',
|
||||
label: 'GitHub',
|
||||
position: 'right',
|
||||
className: 'header-github-link',
|
||||
'aria-label': 'GitHub repository',
|
||||
},
|
||||
{
|
||||
href: 'https://www.litellm.ai/support',
|
||||
label: 'Slack/Discord',
|
||||
position: 'right',
|
||||
className: 'header-discord-link',
|
||||
'aria-label': 'Discord / Slack community',
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
BIN
docs/my-website/img/hero.png
Normal file
BIN
docs/my-website/img/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
51
docs/my-website/release_notes/index.md
Normal file
51
docs/my-website/release_notes/index.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Release Notes
|
||||
sidebar_label: Overview
|
||||
slug: /
|
||||
---
|
||||
|
||||
# Release Notes
|
||||
|
||||
LiteLLM ships new releases regularly with new provider support, performance improvements, and enterprise features. Use the sidebar to browse all releases.
|
||||
|
||||
## Latest Release
|
||||
|
||||
### [v1.82.0 — Realtime Guardrails, Projects Management, and 10+ Performance Optimizations](/release_notes/v1-82-0)
|
||||
|
||||
_February 28, 2026_
|
||||
|
||||
Real-time guardrail enforcement, a new Projects Management UI, and over 10 backend performance optimizations.
|
||||
|
||||
---
|
||||
|
||||
## Recent Releases
|
||||
|
||||
| Version | Date | Highlights |
|
||||
| ----------------------------------- | ------------ | ---------------------------------------------------------- |
|
||||
| [v1.81.14](/release_notes/v1-81-14) | Feb 21, 2026 | New Gateway Level Guardrails & Compliance Playground |
|
||||
| [v1.81.12](/release_notes/v1-81-12) | Feb 14, 2026 | Guardrail Policy Templates & Action Builder |
|
||||
| [v1.81.9](/release_notes/v1-81-9) | Feb 7, 2026 | Control which MCP Servers are exposed on the Internet |
|
||||
| [v1.81.6](/release_notes/v1-81-6) | Jan 31, 2026 | Logs v2 with Tool Call Tracing |
|
||||
| [v1.81.3](/release_notes/v1-81-3) | Jan 26, 2026 | Performance — 25% CPU Usage Reduction |
|
||||
| [v1.81.0](/release_notes/v1-81-0) | Jan 18, 2026 | Claude Code — Web Search Across All Providers |
|
||||
| [v1.80.15](/release_notes/v1-80-15) | Jan 10, 2026 | Manus API Support |
|
||||
| [v1.80.8](/release_notes/v1-80-8) | Dec 6, 2025 | Introducing A2A Agent Gateway |
|
||||
| [v1.80.5](/release_notes/v1-80-5) | Nov 22, 2025 | Gemini 3.0 Support |
|
||||
| [v1.80.0](/release_notes/v1-80-0) | Nov 15, 2025 | Introducing Agent Hub: Register, Publish, and Share Agents |
|
||||
| [v1.79.3](/release_notes/v1-79-3) | Nov 8, 2025 | Built-in Guardrails on AI Gateway |
|
||||
| [v1.79.0](/release_notes/v1-79-0) | Oct 26, 2025 | Search APIs |
|
||||
| [v1.78.5](/release_notes/v1-78-5) | Oct 18, 2025 | Native OCR Support |
|
||||
| [v1.78.0](/release_notes/v1-78-0) | Oct 11, 2025 | MCP Gateway: Control Tool Access by Team, Key |
|
||||
| [v1.77.7](/release_notes/v1-77-7) | Oct 4, 2025 | 2.9x Lower Median Latency |
|
||||
| [v1.77.5](/release_notes/v1-77-5) | Sep 29, 2025 | MCP OAuth 2.0 Support |
|
||||
| [v1.77.3](/release_notes/v1-77-3) | Sep 21, 2025 | Priority Based Rate Limiting |
|
||||
|
||||
---
|
||||
|
||||
## Stay Updated
|
||||
|
||||
- **GitHub**: Watch the [BerriAI/litellm](https://github.com/BerriAI/litellm) repository for release notifications
|
||||
- **Discord**: Join our [community](https://discord.com/invite/wuPM9dRgDw) for announcements
|
||||
- **Twitter**: Follow [@LiteLLM](https://twitter.com/LiteLLM)
|
||||
|
||||
Use the sidebar to browse the full release history.
|
||||
14
docs/my-website/sidebars-release-notes.js
Normal file
14
docs/my-website/sidebars-release-notes.js
Normal file
@ -0,0 +1,14 @@
|
||||
// @ts-check
|
||||
|
||||
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
|
||||
const sidebars = {
|
||||
releaseNotesSidebar: [
|
||||
{ type: 'doc', id: 'index', label: 'Release Notes' },
|
||||
{
|
||||
type: 'autogenerated',
|
||||
dirName: '.',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = sidebars;
|
||||
@ -212,7 +212,20 @@ const sidebars = {
|
||||
],
|
||||
// But you can create a sidebar manually
|
||||
tutorialSidebar: [
|
||||
{ type: "doc", id: "index", label: "Getting Started" },
|
||||
// ════════════════════════════════════════════════════════════
|
||||
// GET STARTED
|
||||
// ════════════════════════════════════════════════════════════
|
||||
{
|
||||
type: "category",
|
||||
label: "Get Started",
|
||||
collapsible: false,
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ type: "doc", id: "index", label: "Quickstart" },
|
||||
{ type: "link", label: "Models & Pricing", href: "https://models.litellm.ai" },
|
||||
{ type: "link", label: "Changelog", href: "/release_notes" },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
type: "category",
|
||||
@ -1181,22 +1194,6 @@ const sidebars = {
|
||||
"troubleshoot",
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
label: "Blog",
|
||||
items: [
|
||||
{
|
||||
type: "link",
|
||||
label: "Day 0 Support: Claude Sonnet 4.6",
|
||||
href: "/blog/claude_sonnet_4_6",
|
||||
},
|
||||
{
|
||||
type: "link",
|
||||
label: "Incident: Broken Model Cost Map",
|
||||
href: "/blog/model-cost-map-incident",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
43
docs/my-website/src/components/NavigationCards/index.js
Normal file
43
docs/my-website/src/components/NavigationCards/index.js
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function NavigationCards({ items, columns = 2 }) {
|
||||
return (
|
||||
<div
|
||||
className={styles.grid}
|
||||
style={{ '--nav-columns': columns }}
|
||||
>
|
||||
{items.map((item, i) => {
|
||||
const isExternal =
|
||||
item.to && (item.to.startsWith('http://') || item.to.startsWith('https://'));
|
||||
return (
|
||||
<a
|
||||
key={i}
|
||||
href={item.to}
|
||||
className={styles.card}
|
||||
target={isExternal ? '_blank' : undefined}
|
||||
rel={isExternal ? 'noopener noreferrer' : undefined}
|
||||
>
|
||||
{item.icon && (
|
||||
<div className={styles.icon}>{item.icon}</div>
|
||||
)}
|
||||
<div className={styles.title}>{item.title}</div>
|
||||
{item.description && (
|
||||
<div className={styles.description}>{item.description}</div>
|
||||
)}
|
||||
{item.listDescription && (
|
||||
<ul className={styles.list}>
|
||||
{item.listDescription.map((line, j) => (
|
||||
<li key={j}>{line}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{isExternal && (
|
||||
<span className={styles.externalIcon}>↗</span>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--nav-columns, 2), 1fr);
|
||||
gap: 0.75rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-radius: 6px;
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
background: var(--ifm-background-surface-color);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 0 0 1px var(--ifm-color-primary);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .card {
|
||||
background: var(--ifm-background-surface-color);
|
||||
border-color: #2d3748;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .card:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 0 0 1px var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--ifm-heading-color);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0.35rem 0 0 0;
|
||||
padding-left: 1.1rem;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.list li {
|
||||
font-size: 12.5px;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.externalIcon {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
font-size: 12px;
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
}
|
||||
@ -1,10 +1,16 @@
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
* Global CSS overrides for LiteLLM docs.
|
||||
* Infima (Docusaurus CSS framework) variables + custom styling.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
/* =========================================
|
||||
FONTS
|
||||
========================================= */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/* =========================================
|
||||
ROOT — Light Mode Variables
|
||||
========================================= */
|
||||
:root {
|
||||
--ifm-color-primary: #2e8555;
|
||||
--ifm-color-primary-dark: #29784c;
|
||||
@ -13,11 +19,22 @@
|
||||
--ifm-color-primary-light: #33925d;
|
||||
--ifm-color-primary-lighter: #359962;
|
||||
--ifm-color-primary-lightest: #3cad6e;
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
--ifm-code-font-size: 85%;
|
||||
--ifm-menu-color: #6b7280;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.08);
|
||||
--ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--ifm-heading-font-weight: 600;
|
||||
--ifm-font-size-base: 15px;
|
||||
--ifm-line-height-base: 1.65;
|
||||
--ifm-border-radius: 6px;
|
||||
/* Wider reading column — reduces excessive whitespace on large monitors */
|
||||
--ifm-container-width: 1380px;
|
||||
--ifm-container-width-xl: 1560px;
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
/* =========================================
|
||||
DARK MODE Variables
|
||||
========================================= */
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: #21af90;
|
||||
@ -26,10 +43,710 @@
|
||||
--ifm-color-primary-light: #29d5b0;
|
||||
--ifm-color-primary-lighter: #32d8b4;
|
||||
--ifm-color-primary-lightest: #4fddbf;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
--ifm-background-color: #0d1117;
|
||||
--ifm-background-surface-color: #161b22;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
/* Levo logo sizing and theme switching */
|
||||
/* =========================================
|
||||
TYPOGRAPHY
|
||||
========================================= */
|
||||
.theme-doc-markdown h1 {
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.theme-doc-markdown h2 {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.theme-doc-markdown h3 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.theme-doc-markdown p,
|
||||
.theme-doc-markdown ul,
|
||||
.theme-doc-markdown ol {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.theme-doc-markdown table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.theme-doc-markdown td {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
NAVBAR
|
||||
========================================= */
|
||||
[data-theme='light'] .navbar {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 1px 0 0 #e5e7eb;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .navbar {
|
||||
background-color: var(--ifm-background-color);
|
||||
border-bottom: 1px solid #21262d;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
font-weight: 400 !important;
|
||||
font-size: 14px !important;
|
||||
border-bottom: 2px solid transparent !important;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.navbar__link--active {
|
||||
font-weight: 500 !important;
|
||||
border-bottom: 2px solid var(--ifm-color-primary) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1330px) {
|
||||
.navbar__link {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Three-column navbar: logo | center nav | right icons */
|
||||
@media (min-width: 997px) {
|
||||
.navbar__inner {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar__brand-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.navbar__brand-col .navbar__brand {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navbar__brand-col .navbar__logo {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar__center-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar__right-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
gap: 0.25rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
ALERTS / ADMONITIONS
|
||||
========================================= */
|
||||
.alert {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 14px;
|
||||
border-radius: var(--ifm-border-radius);
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
/* Light mode */
|
||||
.alert--info {
|
||||
--ifm-alert-background-color: #f0f7ff !important;
|
||||
--ifm-alert-border-color: #2264ab !important;
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
--ifm-alert-background-color: #f0fff8 !important;
|
||||
--ifm-alert-border-color: #09bda8 !important;
|
||||
}
|
||||
|
||||
.alert--secondary {
|
||||
--ifm-alert-background-color: #f8fafc !important;
|
||||
--ifm-alert-border-color: #64748b !important;
|
||||
}
|
||||
|
||||
.alert--danger {
|
||||
--ifm-alert-background-color: #fff0f5 !important;
|
||||
--ifm-alert-border-color: #e11d48 !important;
|
||||
}
|
||||
|
||||
.alert--warning {
|
||||
--ifm-alert-background-color: #fffbeb !important;
|
||||
--ifm-alert-border-color: #d97706 !important;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
[data-theme='dark'] .alert--info {
|
||||
--ifm-alert-background-color: #0c1e30 !important;
|
||||
--ifm-alert-border-color: #3b82f6 !important;
|
||||
color: #bfdbfe !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .alert--success {
|
||||
--ifm-alert-background-color: #022c22 !important;
|
||||
--ifm-alert-border-color: #10b981 !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .alert--secondary {
|
||||
--ifm-alert-background-color: #0f172a !important;
|
||||
--ifm-alert-border-color: #475569 !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .alert--danger {
|
||||
--ifm-alert-background-color: #2d0a14 !important;
|
||||
--ifm-alert-border-color: #f43f5e !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .alert--warning {
|
||||
--ifm-alert-background-color: #1c1200 !important;
|
||||
--ifm-alert-border-color: #f59e0b !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
COLLAPSIBLE / DETAILS
|
||||
========================================= */
|
||||
details {
|
||||
color: #1d232e;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2 !important;
|
||||
border-radius: var(--ifm-border-radius) !important;
|
||||
padding: 0.75rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
margin-top: 1.5rem !important;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
details summary {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
details [class*='collapsibleContent'] {
|
||||
border-top: 1px solid #e2e8f0 !important;
|
||||
}
|
||||
|
||||
details [class*='collapsibleContent'] p,
|
||||
details [class*='collapsibleContent'] ul {
|
||||
font-size: 13px !important;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
[data-theme='dark'] details {
|
||||
background-color: #1c2130 !important;
|
||||
color: #e5e7eb !important;
|
||||
border: 1px solid #2d3748 !important;
|
||||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] details summary {
|
||||
color: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] details [class*='collapsibleContent'] {
|
||||
border-top: 1px solid #2d3748 !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
TABS
|
||||
========================================= */
|
||||
.tabs-container > div {
|
||||
padding: 1rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--ifm-border-radius);
|
||||
}
|
||||
|
||||
/* Remove styling from nested tabs containers */
|
||||
.tabs-container .tabs-container > div {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .tabs-container > div {
|
||||
border-color: #2d3748;
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
border-bottom: 1px solid #e2e8f0 !important;
|
||||
column-gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] ul.tabs {
|
||||
border-bottom-color: #2d3748 !important;
|
||||
}
|
||||
|
||||
li.tabs__item {
|
||||
padding: 0.5rem !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px !important;
|
||||
border-bottom: 2px solid transparent !important;
|
||||
}
|
||||
|
||||
li.tabs__item--active {
|
||||
border-bottom: 2px solid var(--ifm-color-primary) !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
CODE BLOCKS
|
||||
========================================= */
|
||||
.prism-code {
|
||||
border-radius: var(--ifm-border-radius);
|
||||
font-size: 12.5px !important;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .prism-code {
|
||||
border: 1px solid #21262d;
|
||||
}
|
||||
|
||||
[class*='codeLineNumber']::before {
|
||||
font-size: 12px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
[class*='codeBlockTitle'] {
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
border-bottom: 1px solid #334155 !important;
|
||||
}
|
||||
|
||||
.theme-code-block-highlighted-line {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .theme-code-block-highlighted-line {
|
||||
background-color: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
.theme-code-block-highlighted-line > span {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SIDEBAR / MENU
|
||||
========================================= */
|
||||
.menu {
|
||||
font-weight: 400;
|
||||
padding: 0.5rem 0.25rem !important;
|
||||
background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .menu {
|
||||
background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
font-size: 14px;
|
||||
padding: 0.22rem 0.75rem !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.menu__link--active {
|
||||
font-weight: 600 !important;
|
||||
background-color: rgba(46, 133, 85, 0.08) !important;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .menu__link--active {
|
||||
background-color: rgba(37, 194, 160, 0.1) !important;
|
||||
}
|
||||
|
||||
/* ─── Sidebar collapse arrows — uniform size & alignment ────── */
|
||||
|
||||
/* 1. Categories WITHOUT a link prop:
|
||||
The button itself holds the text + ::after arrow.
|
||||
Make it flex so the arrow never wraps to a new line. */
|
||||
.menu__link--sublist-caret {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 0.5rem;
|
||||
padding-right: 0.625rem !important;
|
||||
}
|
||||
|
||||
.menu__link--sublist-caret::after {
|
||||
content: '' !important;
|
||||
display: block !important;
|
||||
flex-shrink: 0 !important;
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
min-width: 1.25rem !important;
|
||||
background: var(--ifm-menu-link-sublist-icon) center / 1.25rem 1.25rem no-repeat !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 2. Categories WITH a link prop:
|
||||
A separate <a> + <button class="menu__caret"> sit in a flex row. */
|
||||
.menu__list-item-collapsible {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible > .menu__link {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0; /* allow text to shrink/wrap without pushing arrow */
|
||||
}
|
||||
|
||||
.menu__caret {
|
||||
flex-shrink: 0 !important;
|
||||
width: 2rem !important;
|
||||
height: 2rem !important;
|
||||
padding: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.menu__caret::before {
|
||||
content: '' !important;
|
||||
display: block !important;
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
min-width: 1.25rem !important;
|
||||
background: var(--ifm-menu-link-sublist-icon) center / 1.25rem 1.25rem no-repeat !important;
|
||||
}
|
||||
|
||||
/* Top-level sidebar category labels */
|
||||
.theme-doc-sidebar-item-category-level-1
|
||||
> .menu__list-item-collapsible
|
||||
> .menu__link:first-of-type {
|
||||
color: #111827;
|
||||
font-weight: 600 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[data-theme='dark']
|
||||
.theme-doc-sidebar-item-category-level-1
|
||||
> .menu__list-item-collapsible
|
||||
> .menu__link:first-of-type {
|
||||
color: #f9fafb;
|
||||
font-weight: 600 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-category-level-1 {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
/* Consistent row height for all top-level items */
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible,
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible--active {
|
||||
min-height: 2.5rem;
|
||||
padding: 0 0.25rem !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible:hover {
|
||||
background-color: var(--ifm-menu-color-background-hover) !important;
|
||||
}
|
||||
|
||||
/* Suppress the auto active-state background so all items look the same height */
|
||||
.menu__list-item-collapsible--active {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible--active:hover {
|
||||
background-color: var(--ifm-menu-color-background-hover) !important;
|
||||
}
|
||||
|
||||
/* Nested menu list */
|
||||
.menu__list .menu__list {
|
||||
padding-left: 4px !important;
|
||||
}
|
||||
|
||||
/* Nested sidebar border line */
|
||||
[class*='sidebar-item-'] ul:not(:first-child) {
|
||||
margin-left: 16px !important;
|
||||
border-left: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
[data-theme='dark'] [class*='sidebar-item-'] ul:not(:first-child) {
|
||||
border-left-color: #2d3748;
|
||||
}
|
||||
|
||||
/* ─── Sidebar link colour & hover fixes ─────────────────────── */
|
||||
|
||||
/* Doc links: ensure a visible colour in both themes */
|
||||
.menu__link {
|
||||
color: var(--ifm-menu-color);
|
||||
}
|
||||
|
||||
.menu__link:hover {
|
||||
color: var(--ifm-color-primary);
|
||||
background-color: var(--ifm-menu-color-background-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* External / type:"link" items — subtle right-arrow hint */
|
||||
.menu__list-item--collapsed ~ .menu__link[href^="http"],
|
||||
.menu__link[href^="http"] {
|
||||
color: var(--ifm-menu-color);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .menu__link {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .menu__link:hover {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
TABLE OF CONTENTS
|
||||
========================================= */
|
||||
.table-of-contents {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-of-contents__link {
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.table-of-contents__link:hover {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.table-of-contents__link--active {
|
||||
font-weight: 600;
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .table-of-contents__link {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
IMAGES & MEDIA
|
||||
========================================= */
|
||||
img,
|
||||
video {
|
||||
border-radius: var(--ifm-border-radius);
|
||||
}
|
||||
|
||||
/* Prevent video iframes (Loom, YouTube, etc.) from overflowing the
|
||||
content column and overlapping the right-hand TOC sidebar. */
|
||||
.theme-doc-markdown iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
FOOTER
|
||||
========================================= */
|
||||
.footer {
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.footer__link-item {
|
||||
color: #8b949e;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer__link-item:hover {
|
||||
text-decoration: none;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.footer__title {
|
||||
color: #f0f6fc;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer__bottom {
|
||||
margin: 40px auto 10px auto;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
AVATAR
|
||||
========================================= */
|
||||
.avatar__name > a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
NAVBAR ICON LINKS (GitHub, Discord)
|
||||
========================================= */
|
||||
.header-github-link,
|
||||
.header-discord-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-github-link:hover,
|
||||
.header-discord-link:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* Hide text label, show only the icon */
|
||||
.header-github-link::before,
|
||||
.header-discord-link::before {
|
||||
content: '';
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-github-link::before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat center / contain;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .header-github-link::before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* Discord icon */
|
||||
.header-discord-link::before {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E")
|
||||
no-repeat center / contain;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .header-discord-link::before {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E")
|
||||
no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SEARCH BAR — hide from navbar (it lives in sidebar)
|
||||
========================================= */
|
||||
[class^='navbarSearchContainer'],
|
||||
[class*='navbarSearchContainer'] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
INKEEP AI CHAT BUTTON — minimal floating style
|
||||
========================================= */
|
||||
.ikp-chat-button__button {
|
||||
width: 42px !important;
|
||||
height: 42px !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
|
||||
margin-right: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
NAVBAR — mobile fixes
|
||||
========================================= */
|
||||
|
||||
/* On small screens: hide icon links (GitHub, Discord) and text links
|
||||
from the right section. Keep only the color mode toggle.
|
||||
All nav items remain accessible inside the hamburger drawer. */
|
||||
@media (max-width: 996px) {
|
||||
/* Hide GitHub and Discord icon links */
|
||||
.header-github-link,
|
||||
.header-discord-link {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide anchor links in the right section (e.g. Cost Map) */
|
||||
.navbar__items--right > a.navbar__link {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Keep the right section visible (color mode toggle lives here) */
|
||||
.navbar__items--right {
|
||||
display: flex !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Force navbar to stay on a single row, no wrapping */
|
||||
.navbar__inner {
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Keep hamburger and logo side by side (not stacked) */
|
||||
.navbar__brand-col {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Ensure hamburger is always shown */
|
||||
.navbar__toggle {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide theme toggle in mobile sidebar (slide-out drawer) */
|
||||
.navbar-sidebar .navbar-sidebar__brand [class*="toggle"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
BASH / SHELL CODE BLOCKS
|
||||
========================================= */
|
||||
|
||||
/* Subtle grey bash/shell blocks — light mode */
|
||||
[data-theme='light'] [class*='language-bash'] .prism-code,
|
||||
[data-theme='light'] [class*='language-sh'] .prism-code,
|
||||
[data-theme='light'] [class*='language-shell'] .prism-code,
|
||||
[data-theme='light'] [class*='language-zsh'] .prism-code {
|
||||
background-color: #f3f4f6 !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-left: 3px solid #6b7280 !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
[data-theme='light'] [class*='language-bash'] .prism-code span,
|
||||
[data-theme='light'] [class*='language-sh'] .prism-code span,
|
||||
[data-theme='light'] [class*='language-shell'] .prism-code span,
|
||||
[data-theme='light'] [class*='language-zsh'] .prism-code span {
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
/* Dark mode — slightly lighter than the default near-black */
|
||||
[data-theme='dark'] [class*='language-bash'] .prism-code,
|
||||
[data-theme='dark'] [class*='language-sh'] .prism-code,
|
||||
[data-theme='dark'] [class*='language-shell'] .prism-code,
|
||||
[data-theme='dark'] [class*='language-zsh'] .prism-code {
|
||||
background-color: #1c2130 !important;
|
||||
border: 1px solid #2d3748 !important;
|
||||
border-left: 3px solid #4b5563 !important;
|
||||
}
|
||||
|
||||
/* "$ " terminal prompt prefix on bash title bar */
|
||||
[class*='language-bash'] [class*='codeBlockTitle']::before,
|
||||
[class*='language-sh'] [class*='codeBlockTitle']::before,
|
||||
[class*='language-shell'] [class*='codeBlockTitle']::before,
|
||||
[class*='language-zsh'] [class*='codeBlockTitle']::before {
|
||||
content: '$ ';
|
||||
color: #6b7280;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
LOGO (existing logo toggle logic)
|
||||
========================================= */
|
||||
.levo-logo-container {
|
||||
position: relative;
|
||||
}
|
||||
@ -42,7 +759,6 @@
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Show light logo by default, hide dark logo */
|
||||
.levo-logo-dark {
|
||||
display: none !important;
|
||||
}
|
||||
@ -51,7 +767,6 @@
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* In dark mode, hide light logo and show dark logo */
|
||||
[data-theme='dark'] .levo-logo-light {
|
||||
display: none !important;
|
||||
}
|
||||
@ -59,3 +774,23 @@
|
||||
[data-theme='dark'] .levo-logo-dark {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
DOC CONTENT — wider reading column
|
||||
========================================= */
|
||||
|
||||
/* On large screens the default col--7 grid leaves too much dead space.
|
||||
Expand the content column; the TOC column fills the remainder via flex. */
|
||||
@media (min-width: 1200px) {
|
||||
.docItemCol {
|
||||
--ifm-col-width: calc(8 / 12 * 100%) !important;
|
||||
max-width: calc(8 / 12 * 100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.docItemCol {
|
||||
--ifm-col-width: calc(9 / 12 * 100%) !important;
|
||||
max-width: calc(9 / 12 * 100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
29
docs/my-website/src/theme/DocSidebar/index.js
Normal file
29
docs/my-website/src/theme/DocSidebar/index.js
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { useWindowSize } from '@docusaurus/theme-common';
|
||||
import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
|
||||
import DocSidebarMobile from '@theme/DocSidebar/Mobile';
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function DocSidebar(props) {
|
||||
const windowSize = useWindowSize();
|
||||
|
||||
const shouldRenderSidebarDesktop =
|
||||
windowSize === 'desktop' || windowSize === 'ssr';
|
||||
|
||||
const shouldRenderSidebarMobile = windowSize === 'mobile';
|
||||
|
||||
return (
|
||||
<>
|
||||
{shouldRenderSidebarDesktop && (
|
||||
<div className={styles.sidebarContainer}>
|
||||
<div className={styles.searchBarContainer}>
|
||||
<SearchBar />
|
||||
</div>
|
||||
<DocSidebarDesktop {...props} />
|
||||
</div>
|
||||
)}
|
||||
{shouldRenderSidebarMobile && <DocSidebarMobile {...props} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
30
docs/my-website/src/theme/DocSidebar/styles.module.css
Normal file
30
docs/my-website/src/theme/DocSidebar/styles.module.css
Normal file
@ -0,0 +1,30 @@
|
||||
.sidebarContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
/* Make the sidebar content scroll inside the container */
|
||||
.sidebarContainer > aside,
|
||||
.sidebarContainer > div:last-child {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.searchBarContainer {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 1rem;
|
||||
padding-top: calc(var(--ifm-navbar-height) + 0.75rem);
|
||||
border-bottom: 1px solid var(--ifm-toc-border-color);
|
||||
}
|
||||
|
||||
.searchBarContainer > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Remove the default top padding from the sidebar content that follows */
|
||||
.searchBarContainer + div {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
71
docs/my-website/src/theme/Navbar/Content/index.js
Normal file
71
docs/my-website/src/theme/Navbar/Content/index.js
Normal file
@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
useThemeConfig,
|
||||
ErrorCauseBoundary,
|
||||
} from '@docusaurus/theme-common';
|
||||
import {
|
||||
splitNavbarItems,
|
||||
useNavbarMobileSidebar,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
import NavbarSearch from '@theme/Navbar/Search';
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
|
||||
function useNavbarItems() {
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
|
||||
function NavbarItems({ items }) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<ErrorCauseBoundary
|
||||
key={i}
|
||||
onError={(error) =>
|
||||
new Error(
|
||||
`A theme navbar item failed to render.\n${JSON.stringify(item, null, 2)}`,
|
||||
{ cause: error },
|
||||
)
|
||||
}>
|
||||
<NavbarItem {...item} />
|
||||
</ErrorCauseBoundary>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NavbarContent() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
const items = useNavbarItems();
|
||||
const [leftItems, rightItems] = splitNavbarItems(items);
|
||||
const searchBarItem = items.find((item) => item.type === 'search');
|
||||
|
||||
return (
|
||||
<div className="navbar__inner">
|
||||
{/* Left: Logo only */}
|
||||
<div className="navbar__brand-col">
|
||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
||||
<NavbarLogo />
|
||||
</div>
|
||||
|
||||
{/* Center: nav links */}
|
||||
<div className="navbar__center-col">
|
||||
<NavbarItems items={leftItems} />
|
||||
</div>
|
||||
|
||||
{/* Right: icons + color toggle */}
|
||||
<div className="navbar__right-col">
|
||||
<NavbarItems items={rightItems} />
|
||||
<NavbarColorModeToggle />
|
||||
{!searchBarItem && (
|
||||
<NavbarSearch>
|
||||
<SearchBar />
|
||||
</NavbarSearch>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
docs/my-website/src/theme/TOC/index.js
Normal file
35
docs/my-website/src/theme/TOC/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import TOCItems from '@theme/TOCItems';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
|
||||
const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
|
||||
|
||||
export default function TOC({ className, ...props }) {
|
||||
return (
|
||||
<div className={clsx(styles.tableOfContents, className)}>
|
||||
{/* Scrollable TOC items */}
|
||||
<div className={clsx(styles.tocItemsContainer, 'thin-scrollbar')}>
|
||||
<TOCItems
|
||||
{...props}
|
||||
linkClassName={LINK_CLASS_NAME}
|
||||
linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Enterprise promo card pinned at the bottom */}
|
||||
<div className={styles.promoCard}>
|
||||
<div className={styles.promoEmoji}>🚅</div>
|
||||
<div className={styles.promoHeading}>LiteLLM Enterprise</div>
|
||||
<div className={styles.promoDescription}>
|
||||
SSO/SAML, audit logs, spend tracking, multi-team management, and
|
||||
guardrails — built for production.
|
||||
</div>
|
||||
<a href="/docs/enterprise" className={styles.promoButton}>
|
||||
Learn more →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
docs/my-website/src/theme/TOC/styles.module.css
Normal file
74
docs/my-website/src/theme/TOC/styles.module.css
Normal file
@ -0,0 +1,74 @@
|
||||
.tableOfContents {
|
||||
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
|
||||
position: sticky;
|
||||
top: calc(var(--ifm-navbar-height) + 1rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tocItemsContainer {
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.tableOfContents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Enterprise Promo Card
|
||||
========================================= */
|
||||
.promoCard {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(46, 133, 85, 0.2);
|
||||
background-color: rgba(46, 133, 85, 0.05);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .promoCard {
|
||||
border-color: rgba(37, 194, 160, 0.2);
|
||||
background-color: rgba(37, 194, 160, 0.05);
|
||||
}
|
||||
|
||||
.promoEmoji {
|
||||
font-size: 18px;
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.promoHeading {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--ifm-heading-color);
|
||||
}
|
||||
|
||||
.promoDescription {
|
||||
font-size: 11.5px;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
}
|
||||
|
||||
.promoButton {
|
||||
display: inline-block;
|
||||
background-color: var(--ifm-color-primary);
|
||||
color: #fff !important;
|
||||
padding: 0.28rem 0.65rem;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-decoration: none !important;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.promoButton:hover {
|
||||
background-color: var(--ifm-color-primary-dark);
|
||||
color: #fff !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user