mirror of
https://github.com/openswarm-ai/openswarm.git
synced 2026-09-11 20:27:44 +02:00
228 lines
6.8 KiB
CSS
228 lines
6.8 KiB
CSS
/*
|
|
* Anthropic-inspired theme for the Zensical (Material) docs site.
|
|
*
|
|
* Brand palette: a warm clay/coral accent on a soft ivory canvas in light mode,
|
|
* and the same clay against a warm charcoal in dark mode. Editorial serif
|
|
* headings (Fraunces) echo Anthropic's display type; the body keeps a clean
|
|
* humanist sans. Both schemes are driven by `primary = "custom"` in
|
|
* zensical.toml, so the values below are what actually paint the UI.
|
|
*/
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap");
|
|
|
|
:root {
|
|
/* Core brand tones (shared across schemes). */
|
|
--anthropic-clay: #d97757;
|
|
--anthropic-clay-dark: #bd5d3a;
|
|
--anthropic-clay-light: #e6a085;
|
|
--anthropic-ivory: #faf9f5;
|
|
--anthropic-cloud: #f0eee6;
|
|
--anthropic-ink: #1a1915;
|
|
--anthropic-slate-bg: #262624;
|
|
--anthropic-slate-surface: #30302d;
|
|
--anthropic-slate-border: #3d3d39;
|
|
|
|
--md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Light scheme (default)
|
|
* ------------------------------------------------------------------------- */
|
|
[data-md-color-scheme="default"] {
|
|
--md-primary-fg-color: var(--anthropic-clay);
|
|
--md-primary-fg-color--light: var(--anthropic-clay-light);
|
|
--md-primary-fg-color--dark: var(--anthropic-clay-dark);
|
|
--md-primary-bg-color: #ffffff;
|
|
--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.72);
|
|
|
|
--md-accent-fg-color: var(--anthropic-clay-dark);
|
|
--md-accent-fg-color--transparent: hsla(15, 63%, 54%, 0.1);
|
|
|
|
--md-default-bg-color: var(--anthropic-ivory);
|
|
--md-default-fg-color: hsla(48, 12%, 9%, 0.92);
|
|
--md-default-fg-color--light: hsla(48, 12%, 9%, 0.62);
|
|
--md-default-fg-color--lighter: hsla(48, 12%, 9%, 0.34);
|
|
--md-default-fg-color--lightest: hsla(48, 12%, 9%, 0.1);
|
|
|
|
--md-typeset-a-color: var(--anthropic-clay-dark);
|
|
--md-code-bg-color: var(--anthropic-cloud);
|
|
--md-code-fg-color: #4a3a2e;
|
|
--md-footer-bg-color: #211f1a;
|
|
--md-footer-bg-color--dark: #1a1915;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Dark scheme (slate) — warmed toward Anthropic's charcoal
|
|
* ------------------------------------------------------------------------- */
|
|
[data-md-color-scheme="slate"] {
|
|
/* Warm the derived greys away from Material's default blueish slate. */
|
|
--md-hue: 40;
|
|
|
|
--md-primary-fg-color: var(--anthropic-clay);
|
|
--md-primary-fg-color--light: var(--anthropic-clay-light);
|
|
--md-primary-fg-color--dark: var(--anthropic-clay-dark);
|
|
--md-primary-bg-color: #f7f4ee;
|
|
--md-primary-bg-color--light: hsla(40, 30%, 96%, 0.72);
|
|
|
|
--md-accent-fg-color: var(--anthropic-clay-light);
|
|
|
|
--md-default-bg-color: var(--anthropic-slate-bg);
|
|
--md-default-fg-color: hsla(44, 22%, 92%, 0.9);
|
|
--md-default-fg-color--light: hsla(44, 22%, 92%, 0.58);
|
|
--md-default-fg-color--lighter: hsla(44, 22%, 92%, 0.32);
|
|
--md-default-fg-color--lightest: hsla(44, 22%, 92%, 0.12);
|
|
|
|
--md-typeset-a-color: var(--anthropic-clay-light);
|
|
--md-code-bg-color: var(--anthropic-slate-surface);
|
|
--md-code-fg-color: #e8e2d6;
|
|
--md-footer-bg-color: #1c1b18;
|
|
--md-footer-bg-color--dark: #161512;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Typography — editorial serif headings, refined site title
|
|
* ------------------------------------------------------------------------- */
|
|
.md-typeset h1,
|
|
.md-typeset h2,
|
|
.md-typeset h3,
|
|
.md-header__topic > .md-ellipsis {
|
|
font-family: "Fraunces", Georgia, "Times New Roman", serif;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.md-typeset h1 {
|
|
font-weight: 600;
|
|
color: var(--md-default-fg-color);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Header & tabs — subtle depth and a hairline divider
|
|
* ------------------------------------------------------------------------- */
|
|
.md-header {
|
|
box-shadow: 0 1px 0 hsla(40, 12%, 50%, 0.16);
|
|
}
|
|
|
|
.md-header--shadow {
|
|
box-shadow: 0 2px 12px hsla(40, 20%, 10%, 0.16);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Links, code, admonitions — small clay accents
|
|
* ------------------------------------------------------------------------- */
|
|
.md-typeset a {
|
|
text-underline-offset: 0.15em;
|
|
}
|
|
|
|
.md-typeset code {
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.md-typeset pre > code {
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
/* Active nav item gets the clay accent bar. */
|
|
.md-nav__link--active,
|
|
.md-nav__item .md-nav__link--active {
|
|
color: var(--md-typeset-a-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Search input rounded to match the soft brand feel. */
|
|
.md-search__form {
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
* Scoped package search (pkg-search.js) — the in-page box on overview pages
|
|
* ------------------------------------------------------------------------- */
|
|
/* Empty when JS is off or a package is small: collapse it so it leaves no gap. */
|
|
.md-typeset .pkg-search:empty {
|
|
display: none;
|
|
}
|
|
|
|
.md-typeset .pkg-search {
|
|
margin: 0 0 1.2em;
|
|
}
|
|
|
|
.md-typeset .pkg-search__input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.55em 0.8em;
|
|
font-size: 0.78rem;
|
|
color: var(--md-default-fg-color);
|
|
background: var(--md-default-bg-color);
|
|
border: 1px solid var(--md-default-fg-color--lightest);
|
|
border-radius: 0.4rem;
|
|
transition: border-color 120ms, box-shadow 120ms;
|
|
}
|
|
|
|
.md-typeset .pkg-search__input::placeholder {
|
|
color: var(--md-default-fg-color--lighter);
|
|
}
|
|
|
|
.md-typeset .pkg-search__input:focus {
|
|
outline: none;
|
|
border-color: var(--md-accent-fg-color);
|
|
box-shadow: 0 0 0 2px var(--md-accent-fg-color--transparent);
|
|
}
|
|
|
|
.md-typeset .pkg-search__results {
|
|
margin-top: 0.6em;
|
|
}
|
|
|
|
.md-typeset .pkg-search__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.md-typeset .pkg-search__list > li {
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
|
}
|
|
|
|
.md-typeset .pkg-search__list > li > a {
|
|
display: block;
|
|
padding: 0.55em 0.4em;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.md-typeset .pkg-search__list > li > a:hover {
|
|
background: var(--md-accent-fg-color--transparent);
|
|
}
|
|
|
|
.md-typeset .pkg-search__title {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: var(--md-typeset-a-color);
|
|
}
|
|
|
|
.md-typeset .pkg-search__crumb {
|
|
display: block;
|
|
font-size: 0.66rem;
|
|
color: var(--md-default-fg-color--lighter);
|
|
margin-top: 0.1em;
|
|
}
|
|
|
|
.md-typeset .pkg-search__snip {
|
|
display: block;
|
|
font-size: 0.72rem;
|
|
color: var(--md-default-fg-color--light);
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
.md-typeset .pkg-search__snip mark {
|
|
background: var(--md-accent-fg-color--transparent);
|
|
color: inherit;
|
|
padding: 0 0.1em;
|
|
border-radius: 0.15em;
|
|
}
|
|
|
|
.md-typeset .pkg-search__empty {
|
|
font-size: 0.74rem;
|
|
color: var(--md-default-fg-color--light);
|
|
margin: 0.4em 0;
|
|
}
|