1/*2 * The site's palette is 012's: the 16 ANSI colors of the reference3 * palettes the golden screens are drawn in (e2e/palette_test.go), mapped4 * to the same roles the app gives them (internal/ui/theme). Cyan marks5 * where you are (the pointer, the mode indicator), bright black draws the6 * header bands, blue is links and the selection.7 */8@import '@fontsource/jetbrains-mono/400.css';9@import '@fontsource/jetbrains-mono/500.css';10@import '@fontsource/jetbrains-mono/600.css';11@import '@fontsource/jetbrains-mono/400-italic.css';1213:root {14 /* Light reference palette */15 --ansi-black: #1d1f21;16 --ansi-red: #c82829;17 --ansi-green: #718c00;18 --ansi-yellow: #b58900;19 --ansi-blue: #4271ae;20 --ansi-magenta: #8959a8;21 --ansi-cyan: #3e999f;22 --ansi-white: #d6d6d6;23 --ansi-bright-black: #8e908c;24 --ansi-bright-white: #ffffff;25 --term-bg: #fafafa;26 --term-fg: #1d1f21;2728 /* Roles, as the light terminal theme assigns them */29 --role-accent-bg: var(--ansi-cyan);30 --role-accent-fg: var(--ansi-black);31 --role-header-bg: var(--ansi-white);32 --role-header-fg: var(--ansi-black);33 --role-selection-bg: var(--ansi-blue);34 --role-selection-fg: var(--ansi-bright-white);35 --role-bar: var(--ansi-blue);36 --role-muted: #5b5d5a;37 --role-frame: var(--ansi-bright-black);38 --role-grid: #e2e2e2;39 --role-link: var(--ansi-blue);40 --role-panel-bg: #f0f0f0;4142 --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;43 --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;4445 --ifm-color-primary: #4271ae;46 --ifm-color-primary-dark: #3b669d;47 --ifm-color-primary-darker: #386094;48 --ifm-color-primary-darkest: #2e4f7a;49 --ifm-color-primary-light: #5580b8;50 --ifm-color-primary-lighter: #5f88bc;51 --ifm-color-primary-lightest: #7c9ec9;52 --ifm-color-success: var(--ansi-green);53 --ifm-color-warning: var(--ansi-yellow);54 --ifm-color-danger: var(--ansi-red);55 --ifm-color-info: var(--ansi-cyan);5657 --ifm-background-color: var(--term-bg);58 --ifm-background-surface-color: var(--role-panel-bg);59 --ifm-font-color-base: var(--term-fg);60 --ifm-font-family-base: var(--font-sans);61 --ifm-font-family-monospace: var(--font-mono);62 --ifm-heading-font-family: var(--font-mono);63 --ifm-heading-font-weight: 600;64 --ifm-font-size-base: 16px;65 --ifm-line-height-base: 1.65;66 --ifm-link-color: var(--role-link);67 --ifm-code-font-size: 88%;68 --ifm-code-border-radius: 0;69 --ifm-global-radius: 0;70 --ifm-button-border-radius: 0;71 --ifm-pagination-nav-border-radius: 0;72 --ifm-alert-border-radius: 0;73 --ifm-card-border-radius: 0;74 --ifm-toc-border-color: var(--role-grid);75 --ifm-hr-background-color: var(--role-grid);76 --ifm-table-border-color: var(--role-grid);77 --ifm-table-head-background: var(--role-header-bg);78 --ifm-table-head-color: var(--role-header-fg);79 --ifm-table-stripe-background: transparent;80 --ifm-navbar-background-color: var(--term-bg);81 --ifm-navbar-shadow: none;82 --ifm-menu-color-background-active: transparent;83 --ifm-footer-background-color: var(--role-header-bg);84 --docusaurus-highlighted-code-line-bg: rgba(66, 113, 174, 0.14);85 --search-local-highlight-color: var(--ansi-cyan);86}8788[data-theme='dark'] {89 /* Dark reference palette */90 --ansi-black: #1d1f21;91 --ansi-red: #cc6666;92 --ansi-green: #b5bd68;93 --ansi-yellow: #f0c674;94 --ansi-blue: #81a2be;95 --ansi-magenta: #b294bb;96 --ansi-cyan: #8abeb7;97 --ansi-white: #c5c8c6;98 --ansi-bright-black: #666666;99 --ansi-bright-blue: #7aa6da;100 --ansi-bright-white: #eaeaea;101 --term-bg: #1d1f21;102 --term-fg: #c5c8c6;103104 --role-header-bg: var(--ansi-bright-black);105 --role-header-fg: var(--ansi-bright-white);106 --role-selection-fg: var(--ansi-black);107 --role-bar: var(--ansi-cyan);108 --role-muted: #969896;109 --role-grid: #313436;110 --role-link: var(--ansi-bright-blue);111 --role-panel-bg: #181a1b;112113 --ifm-color-primary: #8abeb7;114 --ifm-color-primary-dark: #74b2a9;115 --ifm-color-primary-darker: #69aca3;116 --ifm-color-primary-darkest: #4f958b;117 --ifm-color-primary-light: #a0cac5;118 --ifm-color-primary-lighter: #abd0cc;119 --ifm-color-primary-lightest: #cce2df;120 --ifm-footer-background-color: var(--role-panel-bg);121 --ifm-table-stripe-background: transparent;122 --docusaurus-highlighted-code-line-bg: rgba(138, 190, 183, 0.12);123}124125/* ---------- Type ---------- */126127body {128 font-feature-settings: 'kern', 'liga';129 -webkit-font-smoothing: antialiased;130}131132.markdown h1,133.markdown h2,134.markdown h3 {135 letter-spacing: -0.01em;136}137138.markdown h1 {139 font-size: 2.1rem;140}141142/* A heading reads as a row label: a short cyan bar before it, like the143 pointer sitting in column A. */144.markdown h2 {145 font-size: 1.45rem;146 margin-top: 2.6rem;147 padding-top: 0.9rem;148 border-top: 1px solid var(--role-grid);149}150151.markdown h2::before {152 content: '';153 display: inline-block;154 width: 0.55em;155 height: 0.95em;156 margin-right: 0.55em;157 vertical-align: -0.08em;158 background: var(--role-accent-bg);159}160161.markdown h3 {162 font-size: 1.12rem;163}164165code {166 border: none;167 background: var(--role-panel-bg);168 color: inherit;169 padding: 0.1em 0.35em;170}171172[data-theme='dark'] code {173 background: #26282b;174}175176pre code,177.prism-code {178 font-size: 0.86rem;179}180181.theme-code-block {182 border-left: 3px solid var(--role-frame);183 box-shadow: none;184}185186kbd {187 font-family: var(--font-mono);188 font-size: 0.85em;189 border: none;190 box-shadow: none;191 border-radius: 0;192 background: var(--role-header-bg);193 color: var(--role-header-fg);194 padding: 0.05em 0.45em;195}196197/* ---------- Tables: the grid ---------- */198199.markdown table {200 display: table;201 width: 100%;202 border-collapse: collapse;203 font-size: 0.93rem;204}205206.markdown table thead tr {207 border-bottom: none;208}209210.markdown table th {211 font-family: var(--font-mono);212 font-weight: 500;213 font-size: 0.85rem;214 text-align: left;215 background: var(--role-header-bg);216 color: var(--role-header-fg);217 border-color: var(--role-header-bg);218}219220.markdown table td {221 vertical-align: top;222}223224.markdown table tr:hover td {225 background: color-mix(in srgb, var(--role-selection-bg) 10%, transparent);226}227228/* ---------- Links and images ---------- */229230.markdown a {231 text-decoration: underline;232 text-underline-offset: 0.18em;233 text-decoration-thickness: 1px;234}235236.markdown a:hover {237 text-decoration-thickness: 2px;238}239240.markdown img {241 display: block;242 border: 1px solid var(--role-frame);243 margin: 1rem 0;244}245246/* Stills of 012 come in a dark and a light picture, marked as GitHub247 marks them (#gh-dark-mode-only), and the site shows the one for its248 color mode. Each draws its own window, so it has no border. */249[data-theme='light'] .markdown img[src$='#gh-dark-mode-only'],250[data-theme='dark'] .markdown img[src$='#gh-light-mode-only'] {251 display: none;252}253254.markdown img[src$='-mode-only'] {255 border: 0;256}257258/* ---------- Navbar: the control panel's first line ---------- */259260.navbar {261 border-bottom: 1px solid var(--role-grid);262 font-family: var(--font-mono);263 height: 3.4rem;264}265266.navbar__title {267 font-weight: 600;268 letter-spacing: 0.02em;269}270271.navbar__link {272 font-weight: 400;273 font-size: 0.9rem;274}275276.navbar__link--active {277 color: var(--role-accent-fg);278 background: var(--role-accent-bg);279}280281.navbar__logo {282 height: 1.6rem;283}284285/* The landing page draws its own control panel with the indicator. */286html:has([data-control-panel]) .navbar .mode-chip {287 display: none;288}289290/* The sections fit beside the search box down to the width the navbar291 collapses at: links a little tighter, and the indicator only where292 there's room for it too. */293.navbar__items .navbar__item {294 padding-left: 0.5rem;295 padding-right: 0.5rem;296 white-space: nowrap;297}298299@media (max-width: 1279px) {300 .navbar .mode-chip {301 display: none;302 }303304 .navbar__items .navbar__item {305 padding-left: 0.35rem;306 padding-right: 0.35rem;307 }308309 .navbar__link {310 font-size: 0.82rem;311 }312313 .navbar__search-input {314 width: 10rem;315 }316}317318/* The landing page's control panel lists the sections in its menu bar,319 so the navbar leaves them to it wherever both would show. */320@media (min-width: 997px) {321 html:has([data-control-panel]) .navbar__items:not(.navbar__items--right) > .navbar__item {322 display: none;323 }324}325326.mode-chip {327 font-family: var(--font-mono);328 font-weight: 600;329 font-size: 0.78rem;330 letter-spacing: 0.08em;331 padding: 0.18rem 0.5rem;332 margin-left: 0.5rem;333 background: var(--role-accent-bg);334 color: var(--role-accent-fg);335}336337/* ---------- Sidebar and table of contents ---------- */338339.menu {340 font-size: 0.92rem;341}342343.menu__link,344.menu__caret {345 border-radius: 0;346}347348.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible > .menu__link {349 font-family: var(--font-mono);350 font-weight: 500;351 font-size: 0.86rem;352 text-transform: uppercase;353 letter-spacing: 0.05em;354}355356.menu__link--active:not(.menu__link--sublist) {357 background: var(--role-accent-bg);358 color: var(--role-accent-fg);359 font-weight: 500;360}361362.table-of-contents__link--active {363 color: var(--ifm-color-primary);364 font-weight: 500;365}366367.table-of-contents__link--active::before {368 content: '> ';369 font-family: var(--font-mono);370}371372.theme-doc-toc-desktop {373 font-size: 0.86rem;374}375376/* ---------- Admonitions: context-line messages ---------- */377378.alert {379 border-width: 0 0 0 4px;380 box-shadow: none;381}382383.theme-admonition [class^='admonitionHeading'] {384 font-family: var(--font-mono);385 letter-spacing: 0.05em;386}387388/* ---------- Pagination and footer: the status line ---------- */389390.pagination-nav__link {391 border-color: var(--role-grid);392}393394.pagination-nav__label {395 font-family: var(--font-mono);396}397398.footer {399 font-family: var(--font-mono);400 font-size: 0.85rem;401 border-top: 1px solid var(--role-grid);402}403404.footer__copyright .mode-chip {405 margin: 0 1ch 0 0;406}407408.footer__bottom {409 text-align: left;410}411412/* ---------- Search ---------- */413414.navbar__search-input {415 font-family: var(--font-mono);416 border-radius: 0;417}418419::selection {420 background: var(--role-selection-bg);421 color: var(--role-selection-fg);422}423424/* ---------- Diagrams: Mermaid, framed as a code block is ---------- */425426.mermaid-012 {427 margin: 0 0 var(--ifm-leading);428 padding: 1rem 0.75rem;429 border-left: 3px solid var(--role-frame);430 overflow-x: auto;431 text-align: center;432}433434.mermaid-012 > svg {435 max-width: 100%;436 height: auto;437}