From e692c310982278bc966cd36c980ede95769f6e74 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 30 Apr 2026 21:44:01 -0400 Subject: [PATCH] Admonition restyle: Lucide icons, per-variant color schemes - Info uses Lucide Info (blue) - Tip uses Lucide Lightbulb (green) - Note uses Lucide StickyNote (neutral dark) - Warning/Caution use Lucide TriangleAlert (amber) - Danger uses Lucide OctagonAlert (red) Hide default heading text and inject icon via ::before for a tighter inline layout. Shared base rules for radius/padding/icon position; each variant only overrides colors and the SVG. Refs #492 Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 149 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 6a3b48ed13..035570b0a3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -436,3 +436,152 @@ html[data-theme='dark'] { margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding); } + +/* Admonition base — shared layout for all variants */ +.theme-admonition { + border-radius: 10px; + padding: 1rem 1.25rem 1rem 3rem; + position: relative; +} + +.theme-admonition [class*=admonitionHeading_] { + display: none; +} + +.theme-admonition::before { + content: ''; + position: absolute; + left: 1.1rem; + top: 1.1rem; + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-position: center; +} + +.theme-admonition [class*=admonitionContent_], +.theme-admonition [class*=admonitionContent_] p:last-child { + margin-bottom: 0; +} + +/* Info — Lucide Info icon, blue */ +.theme-admonition-info { + background-color: rgba(40, 58, 247, 0.05); + border: 1px solid rgba(40, 58, 247, 0.18); + color: #283AF7; +} + +.theme-admonition-info::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283AF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-info [class*=admonitionContent_], +.theme-admonition-info [class*=admonitionContent_] p { + color: #283AF7; +} + +.theme-admonition-info a { + color: #283AF7; + text-decoration: underline; +} + +/* Tip — Lucide Lightbulb icon, green */ +.theme-admonition-tip { + background-color: rgba(21, 128, 61, 0.05); + border: 1px solid rgba(21, 128, 61, 0.2); + color: #15803D; +} + +.theme-admonition-tip::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); +} + +.theme-admonition-tip [class*=admonitionContent_], +.theme-admonition-tip [class*=admonitionContent_] p { + color: #15803D; +} + +.theme-admonition-tip a { + color: #15803D; + text-decoration: underline; +} + +/* Note — Lucide StickyNote icon, neutral gray */ +.theme-admonition-note, +.theme-admonition-secondary { + background-color: #FFFFFF; + border: 1px solid var(--ifm-color-border); + color: #041834; +} + +.theme-admonition-note::before, +.theme-admonition-secondary::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041834' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M15 3v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); +} + +.theme-admonition-note [class*=admonitionContent_], +.theme-admonition-note [class*=admonitionContent_] p, +.theme-admonition-secondary [class*=admonitionContent_], +.theme-admonition-secondary [class*=admonitionContent_] p { + color: #041834; +} + +.theme-admonition-note a, +.theme-admonition-secondary a { + color: var(--ifm-link-color); + text-decoration: underline; +} + +/* Warning / Caution — Lucide TriangleAlert icon, amber */ +.theme-admonition-warning, +.theme-admonition-caution { + background-color: #FEFAE0; + border: 1px solid #F0DA8C; + color: #8A6B00; +} + +.theme-admonition-warning::before, +.theme-admonition-caution::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6B00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-warning [class*=admonitionContent_], +.theme-admonition-warning [class*=admonitionContent_] p, +.theme-admonition-caution [class*=admonitionContent_], +.theme-admonition-caution [class*=admonitionContent_] p { + color: #8A6B00; +} + +.theme-admonition-warning a, +.theme-admonition-caution a { + color: #8A6B00; + text-decoration: underline; +} + +.theme-admonition-warning code, +.theme-admonition-caution code { + background-color: rgba(138, 107, 0, 0.1); + border-color: rgba(138, 107, 0, 0.2); + color: #8A6B00; +} + +/* Danger — Lucide OctagonAlert icon, red */ +.theme-admonition-danger { + background-color: rgba(159, 7, 18, 0.05); + border: 1px solid rgba(159, 7, 18, 0.2); + color: #9F0712; +} + +.theme-admonition-danger::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F0712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); +} + +.theme-admonition-danger [class*=admonitionContent_], +.theme-admonition-danger [class*=admonitionContent_] p { + color: #9F0712; +} + +.theme-admonition-danger a { + color: #9F0712; + text-decoration: underline; +}