/*
* Infrared City brand theme for the docs site.
*
* Values are the product design tokens (forge-kit packages/ui/src/index.css,
* HSL tokens converted to hex) — not invented here:
* --primary #2B7C85 brand teal (also the logo/favicon fill)
* --secondary-blue-dark #176587 light-mode accent
* --primary-green-dark #093E3E
* --secondary-blue-light #C8DEDE
* --foreground / dark bg #0A0F1A
* --muted-foreground #64748B
* --tertiary-fuchsia #23E5E5 dark-mode links (selected/highlight cyan)
* --secondary-blue #D7F1F7 dark-mode accent
* dark --secondary/border #1E293B
* dark --foreground #F8FAFC
* The header and the fonts follow the infrared.city website: see
* site-fonts.css, site-header.css and site-footer.css.
*/
/* Light (Material "default" scheme + `primary: custom`). */
:root,
[data-md-color-scheme="default"] {
--md-primary-fg-color: #2b7c85;
--md-primary-fg-color--light: #c8dede;
--md-primary-fg-color--dark: #093e3e;
--md-primary-bg-color: #ffffff;
--md-primary-bg-color--light: #ffffffb3;
--md-accent-fg-color: #176587;
--md-accent-fg-color--transparent: #1765871a;
--md-accent-bg-color: #ffffff;
--md-accent-bg-color--light: #ffffffb3;
--md-typeset-a-color: #2b7c85;
}
/* Header and tab bar: white surface, dark text, so the teal logo shows. */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
--md-primary-fg-color: #ffffff;
--md-primary-bg-color: #0a0f1a;
--md-primary-bg-color--light: #0a0f1ab3;
}
[data-md-color-scheme="default"] .md-search__form {
background-color: #f1f5f9;
}
[data-md-color-scheme="default"] .md-search__form:hover {
background-color: #e2e8f0;
}
/* Dark (Material "slate" scheme). */
[data-md-color-scheme="slate"] {
--md-primary-fg-color: #2b7c85;
--md-primary-fg-color--light: #c8dede;
--md-primary-fg-color--dark: #093e3e;
--md-primary-bg-color: #f8fafc;
--md-primary-bg-color--light: #f8fafcb3;
--md-accent-fg-color: #d7f1f7;
--md-accent-fg-color--transparent: #d7f1f71a;
--md-accent-bg-color: #0a0f1a;
--md-accent-bg-color--light: #0a0f1ab3;
--md-default-bg-color: #0a0f1a;
--md-default-bg-color--light: #0a0f1ab3;
--md-default-bg-color--lighter: #0a0f1a4d;
--md-default-bg-color--lightest: #0a0f1a1a;
--md-default-fg-color: #f8fafcde;
--md-default-fg-color--light: #f8fafcb3;
--md-default-fg-color--lighter: #f8fafc4d;
--md-default-fg-color--lightest: #f8fafc1a;
--md-typeset-color: #f8fafc;
--md-typeset-a-color: #23e5e5;
--md-code-bg-color: #1e293b;
--md-code-fg-color: #f8fafc;
--md-footer-bg-color: #0a0f1a;
--md-footer-bg-color--dark: #060a12;
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
--md-primary-fg-color: #0a0f1a;
}
[data-md-color-scheme="slate"] .md-search__form {
background-color: #1e293b;
}
[data-md-color-scheme="slate"] .md-search__form:hover {
background-color: #2b3a52;
}
/*
* Sidebar and TOC links rest at 70% white and Material hovers them to
* --md-accent-fg-color (#d7f1f7, near-white): the same colour, so the hover is
* invisible. Body links are unaffected (they rest cyan and hover to the
* accent). Hover/focus the nav links to the dark-mode link cyan and underline
* them instead.
*/
[data-md-color-scheme="slate"] .md-nav__link[href]:hover,
[data-md-color-scheme="slate"] .md-nav__link[href]:focus,
[data-md-color-scheme="slate"] .md-nav__link[for]:hover,
[data-md-color-scheme="slate"] .md-nav__link[href]:hover code,
[data-md-color-scheme="slate"] .md-nav__link[href]:focus code {
color: #23e5e5;
/* Brightness barely differs from the resting grey, so don't rely on hue. */
text-decoration: underline;
text-underline-offset: 0.2em;
}
/*
* The website header (overrides/partials/site-header.html) carries the logo.
* The docs bar under it shows "SDK Docs" and the version menu, see
* site-header.css.
*/
/*
* Side-by-side guide layout: text on the left, the figure on the right,
* each half of the content column. The figure stays in view while the text
* scrolls and is scaled to fit the window height. Only on a phone (below
* 48em) do the two stack, figure first. Guide pages hide the right-hand
* table of contents (front matter `hide: [toc]`) so the columns have room.
* Only Material theme tokens, so light and dark both work. Markdown usage
* (needs attr_list and md_in_html); `.side.right` is the same layout:
*
* 
*
...text...
*
*/
.md-typeset .side {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.5rem 2rem;
align-items: start;
margin: 1.5em 0;
}
/* Grid children must be allowed to shrink, or a long code line pushes the
* column wider than the page and the code block is clipped. */
.md-typeset .side > div,
.md-typeset .side > figure {
min-width: 0;
}
.md-typeset .side > div {
order: 1;
}
.md-typeset .side > figure {
order: 2;
/* Material makes a figure shrink to its content; an SVG without width
* attributes then falls back to 300 px. Fill the half column instead. */
width: 100%;
position: sticky;
top: calc(var(--md-header-height, 2.4rem) + 1rem);
margin: 0;
padding: 0;
}
/* Markdown wraps the image in a
. */
.md-typeset .side > figure p {
margin: 0;
}
/* Fill the half column, then shrink to the window height. */
.md-typeset .side > figure img {
display: block;
width: 100%;
height: auto;
max-height: calc(100vh - var(--md-header-height, 2.4rem) - 2rem);
object-fit: contain;
object-position: top;
}
.md-typeset .side > div > :first-child {
margin-top: 0;
}
@media screen and (max-width: 47.99em) {
.md-typeset .side {
grid-template-columns: minmax(0, 1fr);
}
.md-typeset .side > figure {
order: 0;
position: static;
}
.md-typeset .side > figure img {
max-height: none;
}
}
/* Code names in a table beside a figure stay on one line; the table
* scrolls in its own wrapper instead of breaking a name in two. */
.md-typeset .side table code {
white-space: nowrap;
}
/* Light only, as on the website. The diagrams are SVG images that follow
* prefers-color-scheme; an image takes the colour scheme of its element, so
* this keeps them light when the operating system is set to dark. */
:root,
.md-typeset img {
color-scheme: light;
}