python-sdk/docs/stylesheets/extra.css

/* Zen — the Hanzo family, sans and mono.
   Self-hosted beside this file: one variable woff2 per family covers 100–900,
   so the six static weights this replaced are two requests now, and neither one
   goes to a host we do not own. The SIL OFL notice travels with the binaries at
   fonts/LICENSE-Zen.txt. */
@font-face {
    font-family: 'Zen';
    src: url('fonts/Zen-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zen Mono';
    src: url('fonts/ZenMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Root variables - Light mode defaults */
:root {
    /* Font families */
    --md-text-font: 'Zen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --md-code-font: 'Zen Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* shadcn/ui inspired colors - light mode */
    --md-primary-fg-color: #09090b;
    --md-primary-fg-color--light: #18181b;
    --md-primary-fg-color--dark: #000000;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #fafafa;

    --md-accent-fg-color: #09090b;
    --md-accent-fg-color--transparent: rgba(9, 9, 11, 0.1);
    --md-accent-bg-color: #f4f4f5;

    --md-default-fg-color: #09090b;
    --md-default-fg-color--light: #71717a;
    --md-default-fg-color--lighter: #a1a1aa;
    --md-default-fg-color--lightest: #e4e4e7;
    --md-default-bg-color: #ffffff;
    --md-default-bg-color--light: #fafafa;
    --md-default-bg-color--lighter: #f4f4f5;
    --md-default-bg-color--lightest: #e4e4e7;

    /* Code */
    --md-code-fg-color: #09090b;
    --md-code-bg-color: #f4f4f5;
    --md-code-hl-color: rgba(9, 9, 11, 0.1);

    /* Footer */
    --md-footer-fg-color: #71717a;
    --md-footer-fg-color--light: #a1a1aa;
    --md-footer-fg-color--lighter: #d4d4d8;
    --md-footer-bg-color: #09090b;
    --md-footer-bg-color--dark: #000000;

    /* Typography */
    --md-typeset-color: #09090b;
    --md-typeset-a-color: #09090b;
}

/* Dark mode (slate scheme) - Pure black like shadcn */
[data-md-color-scheme="slate"] {
    /* Pure black background like shadcn dark mode */
    --md-default-bg-color: #09090b;
    --md-default-bg-color--light: #18181b;
    --md-default-bg-color--lighter: #27272a;
    --md-default-bg-color--lightest: #3f3f46;

    /* Light text on dark */
    --md-default-fg-color: #fafafa;
    --md-default-fg-color--light: #a1a1aa;
    --md-default-fg-color--lighter: #71717a;
    --md-default-fg-color--lightest: #52525b;

    /* Primary colors */
    --md-primary-fg-color: #fafafa;
    --md-primary-fg-color--light: #e4e4e7;
    --md-primary-fg-color--dark: #ffffff;
    --md-primary-bg-color: #09090b;
    --md-primary-bg-color--light: #18181b;

    /* Accent */
    --md-accent-fg-color: #fafafa;
    --md-accent-fg-color--transparent: rgba(250, 250, 250, 0.1);
    --md-accent-bg-color: #27272a;

    /* Code blocks */
    --md-code-fg-color: #fafafa;
    --md-code-bg-color: #18181b;
    --md-code-hl-color: rgba(250, 250, 250, 0.1);

    /* Typography */
    --md-typeset-color: #fafafa;
    --md-typeset-a-color: #fafafa;

    /* Footer */
    --md-footer-bg-color: #000000;
    --md-footer-bg-color--dark: #000000;

    /* Search */
    --md-search-result-icon-color: #71717a;
}

/* Search box styling - dark mode */
[data-md-color-scheme="slate"] .md-search__form {
    background-color: #18181b;
    border: 1px solid #27272a;
    border-radius: 0.5rem;
}

[data-md-color-scheme="slate"] .md-search__input {
    background-color: transparent;
    color: #fafafa;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: #71717a;
}

[data-md-color-scheme="slate"] .md-search__icon {
    color: #71717a;
}

/* Search modal (Cmd+K) styling */
[data-md-color-scheme="slate"] .md-search__output {
    background-color: #18181b;
    border: 1px solid #27272a;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-md-color-scheme="slate"] .md-search-result {
    background-color: transparent;
}

[data-md-color-scheme="slate"] .md-search-result__meta {
    background-color: #09090b;
    color: #71717a;
}

[data-md-color-scheme="slate"] .md-search-result__item {
    border-bottom: 1px solid #27272a;
}

[data-md-color-scheme="slate"] .md-search-result__link {
    background-color: transparent;
}

[data-md-color-scheme="slate"] .md-search-result__link:hover,
[data-md-color-scheme="slate"] .md-search-result__link:focus {
    background-color: #27272a;
}

[data-md-color-scheme="slate"] .md-search-result__article {
    background-color: transparent;
}

[data-md-color-scheme="slate"] .md-search-result__title {
    color: #fafafa;
}

[data-md-color-scheme="slate"] .md-search-result__teaser {
    color: #a1a1aa;
}

/* Search shortcut hint (⌘K) */
.md-search__input::placeholder {
    opacity: 1;
}

[data-md-color-scheme="slate"] .md-search__scrollwrap {
    background-color: #18181b;
}

/* Sidebar navigation - remove blue links */
[data-md-color-scheme="slate"] .md-nav__link {
    color: #a1a1aa;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
    color: #fafafa;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
    color: #fafafa;
    font-weight: 600;
}

/* Remove all blue accent colors */
[data-md-color-scheme="slate"] .md-nav__link[data-md-state="blur"] {
    color: #a1a1aa;
}

[data-md-color-scheme="slate"] .md-typeset a {
    color: #fafafa;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: #ffffff;
}

/* Header - pure black */
.md-header {
    background-color: #000000;
    border-bottom: 1px solid #27272a;
}

.md-header--shadow {
    box-shadow: none;
}

/* Tabs in header */
.md-tabs {
    background-color: #000000;
}

.md-tabs__link {
    color: #a1a1aa !important;
    font-weight: 500;
    opacity: 1 !important;
}

.md-tabs__link:hover,
.md-tabs__link--active {
    color: #fafafa !important;
}

/* Header text and icons */
.md-header__title {
    color: #fafafa;
}

.md-header__button {
    color: #fafafa;
}

.md-header__source {
    color: #a1a1aa;
}

/* Search input in header */
.md-search__input {
    color: #fafafa;
}

.md-search__input::placeholder {
    color: #71717a;
}

/* Navigation sidebar */
[data-md-color-scheme="slate"] .md-sidebar {
    background-color: #09090b;
}

[data-md-color-scheme="slate"] .md-nav {
    background-color: transparent;
}

/* Typography */
.md-typeset {
    font-size: 0.9rem;
    line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--md-default-fg-color);
}

.md-typeset h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.md-typeset h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
}

.md-typeset p,
.md-typeset li {
    font-size: 0.95rem;
    color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li {
    color: #a1a1aa;
}

/* Links */
.md-typeset a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    transition: border-color 0.2s;
}

.md-typeset a:hover {
    border-color: var(--md-default-fg-color);
}

/* Code blocks - shadcn style */
.md-typeset code {
    font-family: var(--md-code-font);
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border-radius: 0.375rem;
    background-color: var(--md-code-bg-color);
    color: var(--md-code-fg-color);
}

.md-typeset pre {
    border-radius: 0.5rem;
    border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset pre > code {
    font-size: 0.875rem;
    padding: 1rem;
}

/* Tables */
.md-typeset table:not([class]) {
    font-size: 0.875rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.5rem;
    overflow: hidden;
}

.md-typeset table:not([class]) th {
    background-color: var(--md-default-bg-color--lighter);
    font-weight: 600;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
    border-color: var(--md-default-fg-color--lightest);
    padding: 0.75rem 1rem;
}

/* Admonitions - shadcn card style */
.md-typeset .admonition,
.md-typeset details {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.5rem;
    background-color: var(--md-default-bg-color--light);
    box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
    background-color: transparent;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    font-weight: 600;
}

/* Navigation */
.md-nav__link {
    font-size: 0.875rem;
}

.md-nav__link--active {
    font-weight: 600;
}

/* Search */
.md-search__input {
    background-color: var(--md-default-bg-color--lighter);
    border-radius: 0.5rem;
}

[data-md-color-scheme="slate"] .md-search__input {
    background-color: #18181b;
}

/* Content area max-width */
.md-content {
    max-width: 900px;
}

/* Hide footer */
.md-footer {
    display: none;
}

/* Logo sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.5rem;
    width: auto;
}

/* TOC on the right */
.md-sidebar--secondary {
    border-left: 1px solid var(--md-default-fg-color--lightest);
}

/* Clipboard button */
.md-clipboard {
    color: var(--md-default-fg-color--lighter);
}

/* Tab styling */
.md-typeset .tabbed-labels > label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Button-like elements */
.md-typeset .md-button {
    border-radius: 0.375rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

/* Scrollbar styling for dark mode */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
    background: #18181b;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}