/* * Derived from KKKZOZ/hugo-admonitions (https://github.com/KKKZOZ/hugo-admonitions/) * Copyright (c) 2024 KKKZOZ, Licensed under MIT License */ :root { /* GitHub Core Types (5) */ --adm-note-border: theme('colors.blue.500'); --adm-note-bg: theme('colors.blue.50'); --adm-note-text: theme('colors.blue.900'); --adm-tip-border: theme('colors.teal.500'); --adm-tip-bg: theme('colors.teal.50'); --adm-tip-text: theme('colors.teal.900'); --adm-important-border: theme('colors.purple.500'); --adm-important-bg: theme('colors.purple.50'); --adm-important-text: theme('colors.purple.900'); --adm-warning-border: theme('colors.orange.500'); --adm-warning-bg: theme('colors.orange.50'); --adm-warning-text: theme('colors.orange.900'); --adm-caution-border: theme('colors.red.500'); --adm-caution-bg: theme('colors.red.50'); --adm-caution-text: theme('colors.red.900'); /* Extended Types (10) */ --adm-abstract-border: theme('colors.cyan.500'); --adm-abstract-bg: theme('colors.cyan.50'); --adm-abstract-text: theme('colors.cyan.900'); --adm-info-border: theme('colors.sky.500'); --adm-info-bg: theme('colors.sky.50'); --adm-info-text: theme('colors.sky.900'); --adm-todo-border: theme('colors.slate.500'); --adm-todo-bg: theme('colors.slate.50'); --adm-todo-text: theme('colors.slate.800'); --adm-success-border: theme('colors.green.500'); --adm-success-bg: theme('colors.green.50'); --adm-success-text: theme('colors.green.900'); --adm-question-border: theme('colors.amber.500'); --adm-question-bg: theme('colors.amber.50'); --adm-question-text: theme('colors.amber.900'); --adm-failure-border: theme('colors.pink.500'); --adm-failure-bg: theme('colors.pink.50'); --adm-failure-text: theme('colors.pink.900'); --adm-danger-border: theme('colors.red.500'); --adm-danger-bg: theme('colors.red.50'); --adm-danger-text: theme('colors.red.900'); --adm-bug-border: theme('colors.rose.500'); --adm-bug-bg: theme('colors.rose.50'); --adm-bug-text: theme('colors.rose.900'); --adm-example-border: theme('colors.purple.600'); --adm-example-bg: theme('colors.purple.50'); --adm-example-text: theme('colors.purple.900'); --adm-quote-border: theme('colors.gray.500'); --adm-quote-bg: theme('colors.gray.50'); --adm-quote-text: theme('colors.gray.800'); } /* CSS Custom Properties - Dark Mode (30 variables: 15 types × 2 properties) */ html.dark { /* GitHub Core Types (5) */ --adm-note-bg: theme('colors.blue.900 / 0.6'); --adm-note-text: theme('colors.blue.100'); --adm-tip-bg: theme('colors.teal.900 / 0.6'); --adm-tip-text: theme('colors.teal.100'); --adm-important-bg: theme('colors.purple.900 / 0.6'); --adm-important-text: theme('colors.purple.100'); --adm-warning-bg: theme('colors.orange.900 / 0.6'); --adm-warning-text: theme('colors.orange.100'); --adm-caution-bg: theme('colors.red.900 / 0.6'); --adm-caution-text: theme('colors.red.100'); /* Extended Types (10) */ --adm-abstract-bg: theme('colors.cyan.900 / 0.6'); --adm-abstract-text: theme('colors.cyan.100'); --adm-info-bg: theme('colors.sky.900 / 0.6'); --adm-info-text: theme('colors.sky.100'); --adm-todo-bg: theme('colors.slate.800'); --adm-todo-text: theme('colors.slate.100'); --adm-success-bg: theme('colors.green.900 / 0.6'); --adm-success-text: theme('colors.green.100'); --adm-question-bg: theme('colors.amber.900 / 0.6'); --adm-question-text: theme('colors.amber.100'); --adm-failure-bg: theme('colors.pink.900 / 0.6'); --adm-failure-text: theme('colors.pink.100'); --adm-danger-bg: theme('colors.red.900 / 0.6'); --adm-danger-text: theme('colors.red.100'); --adm-bug-bg: theme('colors.rose.900 / 0.6'); --adm-bug-text: theme('colors.rose.100'); --adm-example-bg: theme('colors.purple.900 / 0.6'); --adm-example-text: theme('colors.purple.100'); --adm-quote-bg: theme('colors.gray.900 / 0.6'); --adm-quote-text: theme('colors.gray.100'); } /* Base Styles */ .admonition .admonition-content > * { margin-block: 0 !important; } .admonition .admonition-content > * + * { margin-top: 1.25em !important; } .admonition { @apply my-3; } .prose .admonition + * { @apply mt-0; } /* Type-Specific Palettes Using CSS Variables */ .admonition[data-type="note"] { border-color: var(--adm-note-border); background-color: var(--adm-note-bg); color: var(--adm-note-text); } .admonition[data-type="tip"] { border-color: var(--adm-tip-border); background-color: var(--adm-tip-bg); color: var(--adm-tip-text); } .admonition[data-type="important"] { border-color: var(--adm-important-border); background-color: var(--adm-important-bg); color: var(--adm-important-text); } .admonition[data-type="warning"] { border-color: var(--adm-warning-border); background-color: var(--adm-warning-bg); color: var(--adm-warning-text); } .admonition[data-type="caution"] { border-color: var(--adm-caution-border); background-color: var(--adm-caution-bg); color: var(--adm-caution-text); } .admonition[data-type="abstract"] { border-color: var(--adm-abstract-border); background-color: var(--adm-abstract-bg); color: var(--adm-abstract-text); } .admonition[data-type="info"] { border-color: var(--adm-info-border); background-color: var(--adm-info-bg); color: var(--adm-info-text); } .admonition[data-type="todo"] { border-color: var(--adm-todo-border); background-color: var(--adm-todo-bg); color: var(--adm-todo-text); } .admonition[data-type="success"] { border-color: var(--adm-success-border); background-color: var(--adm-success-bg); color: var(--adm-success-text); } .admonition[data-type="question"] { border-color: var(--adm-question-border); background-color: var(--adm-question-bg); color: var(--adm-question-text); } .admonition[data-type="failure"] { border-color: var(--adm-failure-border); background-color: var(--adm-failure-bg); color: var(--adm-failure-text); } .admonition[data-type="danger"] { border-color: var(--adm-danger-border); background-color: var(--adm-danger-bg); color: var(--adm-danger-text); } .admonition[data-type="bug"] { border-color: var(--adm-bug-border); background-color: var(--adm-bug-bg); color: var(--adm-bug-text); } .admonition[data-type="example"] { border-color: var(--adm-example-border); background-color: var(--adm-example-bg); color: var(--adm-example-text); } .admonition[data-type="quote"] { border-color: var(--adm-quote-border); background-color: var(--adm-quote-bg); color: var(--adm-quote-text); }