Template:Docs/styles.css: Difference between revisions

/* OHC Network Wiki -- component styles, careui design system.
   Colour comes exclusively from the --ohc-* token layer in
   MediaWiki:Common.css; do not introduce literals here. Note the
   TemplateStyles sanitizer rejects var() in border-radius, font-family,
   padding and border-color, so those stay literal.
   Reference: [[OHC Network Wiki:Design/careui]] */

/* Admonitions (Docusaurus :::note/:::tip/:::info/:::warning parity) ----- */
.docs-admonition { border-radius: 10px; padding: 0.7em 1em; margin: 0.8em 0; border-left: 4px solid var(--ohc-soft-foreground); background: var(--ohc-status-neutral-bg); }
.docs-admonition__title { font-weight: 700; margin-bottom: 0.25em; }
.docs-admonition__body { line-height: 1.55; }
.docs-admonition--note { border-left-color: var(--ohc-soft-foreground); background: var(--ohc-status-neutral-bg); }
.docs-admonition--info { border-left-color: var(--ohc-status-info); background: var(--ohc-status-info-bg); }
.docs-admonition--tip { border-left-color: var(--ohc-primary); background: var(--ohc-primary-bg); }
.docs-admonition--warning { border-left-color: var(--ohc-status-warning); background: var(--ohc-status-warning-bg); }

/* Frozen-version banner -------------------------------------------------- */
.docs-banner { border-radius: 10px; padding: 0.7em 1em; margin: 0.6em 0 1em; font-size: 0.95em; }
.docs-banner--frozen { background: var(--ohc-status-info-bg); box-shadow: inset 0 0 0 1px var(--ohc-status-info); }

/* Version pills ----------------------------------------------------------- */
.docs-verpills { margin: 0.4em 0 0.8em; font-size: 0.9em; color: var(--ohc-soft-foreground); }
.docs-verpills a { display: inline-block; padding: 0.1em 0.7em; border-radius: 9999px; color: var(--ohc-primary); box-shadow: inset 0 0 0 1px var(--ohc-border); text-decoration: none; }
.docs-verpills a:hover { background: var(--ohc-primary-bg); }

/* Metadata badge strip ---------------------------------------------------- */
.docs-meta { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; margin: 0.3em 0 1.2em; font-size: 0.82em; }
.docs-meta__badge { padding: 0.15em 0.75em; border-radius: 9999px; font-weight: 600; color: var(--ohc-foreground); background: var(--ohc-muted-background); box-shadow: inset 0 0 0 1px var(--ohc-border); }
.docs-meta__badge--type { background: var(--ohc-primary); color: var(--ohc-primary-foreground); text-transform: capitalize; }
.docs-meta__badge a { color: var(--ohc-primary); }

/* Links inside a primary-filled surface must take the surface's
   foreground, or they inherit --color-link and land emerald-on-emerald. */
.docs-meta__badge--type a,
.docs-meta__badge--type a:visited,
.docs-meta__badge--type a.external { color: var(--ohc-primary-foreground); }