a870456893* fix(readme): use picture element for theme-aware logo The #gh-light-mode-only / #gh-dark-mode-only URL fragments only work on github.com. On npm, VS Code preview, and other markdown renderers both img tags render, showing two stacked logos. Switch to <picture> with prefers-color-scheme, which GitHub recommends and which degrades gracefully to a single logo elsewhere. * ci: add Cloudflare Pages preview for docs PRs Deploys a per-PR preview of the TypeDoc site to Cloudflare Pages project mcp-ext-apps-docs-preview when docs, src JSDoc, README, or typedoc config change. Uses the shared modelcontextprotocol/actions composite action that injects noindex headers, posts a sticky PR comment with preview URLs, and cleans up deployments on PR close. Fork PRs are skipped (no secret access). * fix(docs): sync README logo with TypeDoc theme switcher The README <picture> logo uses prefers-color-scheme, which only follows the OS setting. TypeDoc's theme switcher sets data-theme on <html>, so manually picking Light/Dark would show the wrong logo (e.g. white logo on light background if OS is dark but user picked Light). Rewrite the <picture> in the generated docs into two class-tagged <img>s via the mcpstyle plugin, and hide the inactive one via CSS keyed on both data-theme (explicit selection) and prefers-color-scheme (OS mode). The README source is unchanged so GitHub/npm still get <picture>. Also: prettier normalized mcp-theme.css (tabs to spaces, quote style).
216 lines
5.6 KiB
CSS
216 lines
5.6 KiB
CSS
/*
|
|
* MCP Apps custom theme — aligns TypeDoc styling with modelcontextprotocol.io
|
|
*/
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Fonts */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
:root {
|
|
--font-family-text:
|
|
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-family-code:
|
|
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Light mode colors */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
:root {
|
|
--light-color-background: #ffffff;
|
|
--light-color-background-secondary: #f9fafb;
|
|
--light-color-background-navbar: #ffffff;
|
|
--light-color-accent: #e5e7eb;
|
|
--light-color-text: #111827;
|
|
--light-color-text-aside: #6b7280;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Dark mode colors */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
:root {
|
|
--dark-color-background: #0f1117;
|
|
--dark-color-background-secondary: #161b22;
|
|
--dark-color-background-navbar: #0f1117;
|
|
--dark-color-accent: #30363d;
|
|
--dark-color-text: #f0f6fc;
|
|
--dark-color-text-aside: #8b949e;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Header — taller, frosted glass */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
:root {
|
|
--dim-toolbar-contents-height: 3.5rem;
|
|
}
|
|
|
|
.tsd-page-toolbar {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.tsd-page-toolbar {
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.tsd-page-toolbar {
|
|
background-color: rgba(15, 17, 23, 0.75);
|
|
}
|
|
}
|
|
|
|
:root[data-theme="light"] .tsd-page-toolbar {
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
:root[data-theme="dark"] .tsd-page-toolbar {
|
|
background-color: rgba(15, 17, 23, 0.75);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Theme-aware logo (rewritten from README <picture> by mcpstyle plugin) */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
/* Explicit theme selection via TypeDoc switcher — takes precedence */
|
|
:root[data-theme="light"] .mcp-logo-dark,
|
|
:root[data-theme="dark"] .mcp-logo-light {
|
|
display: none;
|
|
}
|
|
|
|
/* "OS" mode (data-theme='os') follows prefers-color-scheme */
|
|
@media (prefers-color-scheme: light) {
|
|
:root[data-theme="os"] .mcp-logo-dark {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root[data-theme="os"] .mcp-logo-light {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Sidebar navigation (matches modelcontextprotocol.io sidebar) */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.tsd-navigation a {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
border-radius: 0.75rem;
|
|
color: var(--color-text-aside);
|
|
transition:
|
|
background-color 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.tsd-navigation a:hover:not(.current) {
|
|
background-color: rgba(107, 114, 128, 0.05);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tsd-navigation a.current {
|
|
background-color: rgba(107, 114, 128, 0.15);
|
|
color: var(--color-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Group headers (Documents, Security, API Documentation) */
|
|
.tsd-accordion-summary > h3 {
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.site-menu {
|
|
padding: 1.25rem 0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.tsd-navigation a {
|
|
color: var(--color-text-aside);
|
|
}
|
|
|
|
.tsd-navigation a:hover:not(.current) {
|
|
background-color: rgba(229, 231, 235, 0.05);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tsd-navigation a.current {
|
|
background-color: rgba(229, 231, 235, 0.15);
|
|
color: var(--color-text);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] .tsd-navigation a {
|
|
color: var(--color-text-aside);
|
|
}
|
|
|
|
:root[data-theme="dark"] .tsd-navigation a:hover:not(.current) {
|
|
background-color: rgba(229, 231, 235, 0.05);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
:root[data-theme="dark"] .tsd-navigation a.current {
|
|
background-color: rgba(229, 231, 235, 0.15);
|
|
color: var(--color-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Content area */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
.tsd-typography {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tsd-panel.tsd-typography h1 {
|
|
margin-top: 0;
|
|
padding-bottom: 0.4em;
|
|
}
|
|
|
|
.tsd-panel.tsd-typography h2 {
|
|
margin-top: 2rem;
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.tsd-panel.tsd-typography h3 {
|
|
margin-top: 1.75rem;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Code blocks */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
code,
|
|
pre {
|
|
font-family: var(--font-family-code);
|
|
font-size: 1em;
|
|
}
|
|
|
|
.tsd-typography pre {
|
|
padding: 1rem 1.25rem;
|
|
border: 1px solid var(--color-accent);
|
|
}
|
|
|
|
/* Inline code */
|
|
.tsd-typography code:not(pre code) {
|
|
padding: 0.15em 0.35em;
|
|
font-size: 1em;
|
|
}
|