mirror of
https://github.com/pesde-pkg/pesde.git
synced 2025-04-10 22:00:55 +01:00
108 lines
3.3 KiB
CSS
108 lines
3.3 KiB
CSS
.admonition {
|
|
@apply my-4 rounded-sm px-4 py-3 text-[--tw-prose-body] prose-p:my-2 prose-pre:my-4;
|
|
@apply border-l-4 border-[--admonition-border];
|
|
@apply bg-[--admonition-bg];
|
|
|
|
@apply [--shiki-background:theme(colors.white/0.2)];
|
|
@apply dark:[--shiki-background:theme(colors.black/0.2)];
|
|
|
|
--tw-prose-body: theme(colors.light);
|
|
--tw-prose-headings: theme(colors.light);
|
|
--tw-prose-lead: theme(colors.light);
|
|
--tw-prose-links: var(--admonition-text);
|
|
--tw-prose-bold: theme(colors.light);
|
|
--tw-prose-counters: theme(colors.light);
|
|
--tw-prose-bullets: var(--admonition-border);
|
|
--tw-prose-hr: var(--admonition-border);
|
|
--tw-prose-quotes: theme(colors.light);
|
|
--tw-prose-quote-borders: var(--admonition-border);
|
|
--tw-prose-code: theme(colors.light);
|
|
--tw-prose-pre-code: theme(colors.light);
|
|
--tw-prose-pre-bg: var(--shiki-background);
|
|
--tw-prose-th-borders: var(--admonition-border);
|
|
--tw-prose-td-borders: var(--admonition-border);
|
|
}
|
|
|
|
.admonition pre {
|
|
@apply border border-[--admonition-border] bg-[--shiki-background];
|
|
}
|
|
|
|
.admonition-title {
|
|
@apply flex items-center space-x-2 text-lg font-semibold;
|
|
}
|
|
|
|
.admonition-title * {
|
|
color: var(--admonition-text);
|
|
}
|
|
|
|
.admonition-icon {
|
|
@apply inline-block size-6 bg-current;
|
|
mask-image: var(--admonition-icon);
|
|
}
|
|
|
|
.admonition-note {
|
|
--admonition-bg: theme(colors.blue.600 / 0.1);
|
|
--admonition-border: theme(colors.blue.600 / 0.4);
|
|
--admonition-text: theme(colors.blue.950);
|
|
--admonition-icon: url(lucide-static/icons/info.svg);
|
|
}
|
|
|
|
.admonition-tip {
|
|
--admonition-bg: theme(colors.green.600 / 0.1);
|
|
--admonition-border: theme(colors.green.600 / 0.4);
|
|
--admonition-text: theme(colors.green.950);
|
|
--admonition-icon: url(lucide-static/icons/lightbulb.svg);
|
|
}
|
|
|
|
.admonition-info {
|
|
--admonition-bg: theme(colors.purple.600 / 0.1);
|
|
--admonition-border: theme(colors.purple.600 / 0.4);
|
|
--admonition-text: theme(colors.purple.950);
|
|
--admonition-icon: url(lucide-static/icons/message-square-warning.svg);
|
|
}
|
|
|
|
.admonition-warning {
|
|
--admonition-bg: theme(colors.yellow.600 / 0.1);
|
|
--admonition-border: theme(colors.yellow.600 / 0.4);
|
|
--admonition-text: theme(colors.yellow.950);
|
|
--admonition-icon: url(lucide-static/icons/triangle-alert.svg);
|
|
}
|
|
|
|
.admonition-danger {
|
|
--admonition-bg: theme(colors.red.600 / 0.1);
|
|
--admonition-border: theme(colors.red.600 / 0.4);
|
|
--admonition-text: theme(colors.red.950);
|
|
--admonition-icon: url(lucide-static/icons/octagon-alert.svg);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.admonition-note {
|
|
--admonition-bg: theme(colors.blue.500 / 0.1);
|
|
--admonition-border: theme(colors.blue.500 / 0.6);
|
|
--admonition-text: theme(colors.blue.100);
|
|
}
|
|
|
|
.admonition-tip {
|
|
--admonition-bg: theme(colors.green.500 / 0.1);
|
|
--admonition-border: theme(colors.green.500 / 0.6);
|
|
--admonition-text: theme(colors.green.100);
|
|
}
|
|
|
|
.admonition-info {
|
|
--admonition-bg: theme(colors.purple.500 / 0.1);
|
|
--admonition-border: theme(colors.purple.500 / 0.6);
|
|
--admonition-text: theme(colors.purple.100);
|
|
}
|
|
|
|
.admonition-warning {
|
|
--admonition-bg: theme(colors.yellow.500 / 0.1);
|
|
--admonition-border: theme(colors.yellow.500 / 0.6);
|
|
--admonition-text: theme(colors.yellow.100);
|
|
}
|
|
|
|
.admonition-danger {
|
|
--admonition-bg: theme(colors.red.500 / 0.1);
|
|
--admonition-border: theme(colors.red.500 / 0.6);
|
|
--admonition-text: theme(colors.red.100);
|
|
}
|
|
}
|