mirror of
https://github.com/pesde-pkg/pesde.git
synced 2025-05-04 10:33:47 +01:00
feat: more admonition styles
This commit is contained in:
LukaDev
parent
420d42664a
commit
b7afacebf3
2 changed files with 110 additions and 100 deletions
108
website/src/admonitions.css
Normal file
108
website/src/admonitions.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.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);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
@import "admonitions.css";
|
||||
|
||||
:root {
|
||||
--color-background: 255 245 230;
|
||||
--color-card: 245 230 210;
|
||||
|
|
@ -90,103 +92,3 @@ body {
|
|||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.admonition {
|
||||
@apply my-4 rounded-sm border-l-4 px-4 py-3 prose-p:my-2 prose-pre:my-4;
|
||||
border-color: var(--admonition-border);
|
||||
background-color: var(--admonition-bg);
|
||||
--shiki-background: rgb(255 255 255 / 0.3);
|
||||
}
|
||||
|
||||
.admonition * {
|
||||
color: theme(colors.light);
|
||||
}
|
||||
|
||||
.admonition a,
|
||||
.admonition a * {
|
||||
color: var(--admonition-text);
|
||||
}
|
||||
|
||||
.admonition pre {
|
||||
@apply border border-[--admonition-border];
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.admonition {
|
||||
border-color: var(--admonition-border-dark);
|
||||
background-color: var(--admonition-bg-dark);
|
||||
--shiki-background: rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
.admonition-title * {
|
||||
color: var(--admonition-text-dark);
|
||||
}
|
||||
|
||||
.admonition a,
|
||||
.admonition a * {
|
||||
color: var(--admonition-text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.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-bg-dark: theme(colors.blue.500 / 0.1);
|
||||
--admonition-border-dark: theme(colors.blue.500 / 0.6);
|
||||
--admonition-text-dark: theme(colors.blue.100);
|
||||
--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-bg-dark: theme(colors.green.500 / 0.1);
|
||||
--admonition-border-dark: theme(colors.green.500 / 0.6);
|
||||
--admonition-text-dark: theme(colors.green.100);
|
||||
--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-bg-dark: theme(colors.purple.500 / 0.1);
|
||||
--admonition-border-dark: theme(colors.purple.500 / 0.6);
|
||||
--admonition-text-dark: theme(colors.purple.100);
|
||||
--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-bg-dark: theme(colors.yellow.500 / 0.1);
|
||||
--admonition-border-dark: theme(colors.yellow.500 / 0.6);
|
||||
--admonition-text-dark: theme(colors.yellow.100);
|
||||
--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-bg-dark: theme(colors.red.500 / 0.1);
|
||||
--admonition-border-dark: theme(colors.red.500 / 0.6);
|
||||
--admonition-text-dark: theme(colors.red.100);
|
||||
--admonition-icon: url(lucide-static/icons/octagon-alert.svg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue