Template:Docs/styles.css: Difference between revisions
Template page
More languages
More actions
Content deleted Content added
OHC identity seed |
Rebrand doc chrome (admonitions, meta badges, pills) to OHC palette with Care·ui tinted cards (via update-page on MediaWiki MCP Server) |
||
| Line 1: | Line 1: | ||
/* CARE documentation components — admonitions, version pills, metadata |
/* CARE documentation components — admonitions, version pills, metadata |
||
badges. |
badges. Same OHC palette / theme-aware approach as OHC/styles.css: |
||
teal #0f8b6c · lime #b8f36f · sage line #d8e1db. */ |
|||
/* Admonitions (Docusaurus :::note/:::tip/:::info/:::warning parity) ----- */ |
/* Admonitions (Docusaurus :::note/:::tip/:::info/:::warning parity) ----- */ |
||
.docs-admonition { border-radius: |
.docs-admonition { border-radius: 12px; padding: 0.7em 1em; margin: 0.8em 0; border-left: 4px solid #6b7280; background: rgba(107, 114, 128, 0.06); } |
||
.docs-admonition__title { font-weight: 700; margin-bottom: 0.25em; } |
.docs-admonition__title { font-weight: 700; margin-bottom: 0.25em; } |
||
.docs-admonition__body { line-height: 1.55; } |
.docs-admonition__body { line-height: 1.55; } |
||
.docs-admonition--note { border-left-color: #6b7280; } |
.docs-admonition--note { border-left-color: #6b7280; background: rgba(107, 114, 128, 0.06); } |
||
.docs-admonition--info { border-left-color: #0ea5e9; } |
.docs-admonition--info { border-left-color: #0ea5e9; background: rgba(14, 165, 233, 0.06); } |
||
.docs-admonition--tip { border-left-color: # |
.docs-admonition--tip { border-left-color: #0f8b6c; background: rgba(15, 139, 108, 0.07); } |
||
.docs-admonition--warning { border-left-color: # |
.docs-admonition--warning { border-left-color: #d9822b; background: rgba(217, 130, 43, 0.08); } |
||
/* Frozen-version banner -------------------------------------------------- */ |
/* Frozen-version banner -------------------------------------------------- */ |
||
.docs-banner { border-radius: |
.docs-banner { border-radius: 12px; padding: 0.7em 1em; margin: 0.6em 0 1em; font-size: 0.95em; } |
||
.docs-banner--frozen { background: rgba(14, 165, 233, 0.08); box-shadow: inset 0 0 0 1px #0ea5e9; } |
.docs-banner--frozen { background: rgba(14, 165, 233, 0.08); box-shadow: inset 0 0 0 1px #0ea5e9; } |
||
/* Version pills ----------------------------------------------------------- */ |
/* Version pills ----------------------------------------------------------- */ |
||
.docs-verpills { margin: 0.4em 0 0.8em; font-size: 0.9em; color: var(--color |
.docs-verpills { margin: 0.4em 0 0.8em; font-size: 0.9em; color: var(--color-subtle, #54595d); } |
||
.docs-verpills a { display: inline-block; padding: 0.1em 0.7em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-color-base, # |
.docs-verpills a { display: inline-block; padding: 0.1em 0.7em; border-radius: 999px; color: #0f8b6c; box-shadow: inset 0 0 0 1px var(--border-color-base, #d8e1db); text-decoration: none; } |
||
.docs-verpills a:hover { background: rgba(15, 139, 108, 0.08); } |
|||
/* Metadata badge strip ---------------------------------------------------- */ |
/* 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 { 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: 999px; font-weight: 600; background: var(--color-surface-2, # |
.docs-meta__badge { padding: 0.15em 0.75em; border-radius: 999px; font-weight: 600; color: var(--color-emphasized, #173d34); background: var(--color-surface-2, #eef3f0); box-shadow: inset 0 0 0 1px var(--border-color-base, #d8e1db); } |
||
.docs-meta__badge--type { background: # |
.docs-meta__badge--type { background: #0f8b6c; color: #ffffff; text-transform: capitalize; } |
||
.docs-meta__badge a { color: #0f8b6c; } |
|||
Revision as of 14:17, 11 August 2026
/* CARE documentation components — admonitions, version pills, metadata
badges. Same OHC palette / theme-aware approach as OHC/styles.css:
teal #0f8b6c · lime #b8f36f · sage line #d8e1db. */
/* Admonitions (Docusaurus :::note/:::tip/:::info/:::warning parity) ----- */
.docs-admonition { border-radius: 12px; padding: 0.7em 1em; margin: 0.8em 0; border-left: 4px solid #6b7280; background: rgba(107, 114, 128, 0.06); }
.docs-admonition__title { font-weight: 700; margin-bottom: 0.25em; }
.docs-admonition__body { line-height: 1.55; }
.docs-admonition--note { border-left-color: #6b7280; background: rgba(107, 114, 128, 0.06); }
.docs-admonition--info { border-left-color: #0ea5e9; background: rgba(14, 165, 233, 0.06); }
.docs-admonition--tip { border-left-color: #0f8b6c; background: rgba(15, 139, 108, 0.07); }
.docs-admonition--warning { border-left-color: #d9822b; background: rgba(217, 130, 43, 0.08); }
/* Frozen-version banner -------------------------------------------------- */
.docs-banner { border-radius: 12px; padding: 0.7em 1em; margin: 0.6em 0 1em; font-size: 0.95em; }
.docs-banner--frozen { background: rgba(14, 165, 233, 0.08); box-shadow: inset 0 0 0 1px #0ea5e9; }
/* Version pills ----------------------------------------------------------- */
.docs-verpills { margin: 0.4em 0 0.8em; font-size: 0.9em; color: var(--color-subtle, #54595d); }
.docs-verpills a { display: inline-block; padding: 0.1em 0.7em; border-radius: 999px; color: #0f8b6c; box-shadow: inset 0 0 0 1px var(--border-color-base, #d8e1db); text-decoration: none; }
.docs-verpills a:hover { background: rgba(15, 139, 108, 0.08); }
/* 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: 999px; font-weight: 600; color: var(--color-emphasized, #173d34); background: var(--color-surface-2, #eef3f0); box-shadow: inset 0 0 0 1px var(--border-color-base, #d8e1db); }
.docs-meta__badge--type { background: #0f8b6c; color: #ffffff; text-transform: capitalize; }
.docs-meta__badge a { color: #0f8b6c; }