blog/assets/css/extended/admonitions.css

70 lines
1.4 KiB
CSS

:root {
--info-background: #d1ecf1;
--info-text: #0c5460;
--success-background: #d4edda;
--success-text: #155724;
--danger-background: #f8d7da;
--danger-text: #721c24;
--warning-background: #fff3cd;
--warning-text: #856404;
}
@media (prefers-color-scheme: dark) {
:root {
--info-background: #0c5460;
--info-text: #d1ecf1;
--success-background: #155724;
--success-text: #d4edda;
--danger-background: #721c24;
--danger-text: #f8d7da;
--warning-background: #856404;
--warning-text: #fff3cd;
}
}
.admonition .title {
font-weight: bold;
margin-bottom: 0;
}
.admonition {
background-color: var(--nc-bg-2);
box-shadow: 0 0 8px -1px var(--nc-bg-3);
border: 1px solid var(--nc-bg-3);
padding: 1ex 1.5ex;
border-radius: 5px;
margin-bottom: 1rem;
}
.admonition > :last-child {
margin-bottom: 0;
}
.admonition.info {
--nc-bg-2: var(--info-background);
--nc-bg-3: var(--info-text);
color: var(--info-text);
}
.admonition.success {
--nc-bg-2: var(--success-background);
--nc-bg-3: var(--success-text);
color: var(--success-text);
}
.admonition.warning {
--nc-bg-2: var(--warning-background);
--nc-bg-3: var(--warning-text);
color: var(--warning-text);
}
.admonition.danger {
--nc-bg-2: var(--danger-background);
--nc-bg-3: var(--danger-text);
color: var(--danger-text);
}
.admonition a {
color: inherit;
}