oliverbooth.dev/src/scss/markdown-callouts.scss

184 lines
3.0 KiB
SCSS

$callout-bg-blue: #1b2735;
$callout-bg-cyan: #233232;
$callout-bg-green: #223026;
$callout-bg-orange: #332a21;
$callout-bg-red: #352223;
$callout-bg-purple: #2c2835;
$callout-bg-grey: #2b2b2b;
$callout-fg-blue: #157aff;
$callout-fg-cyan: #53dfdd;
$callout-fg-green: #44cf6e;
$callout-fg-orange: #e9973f;
$callout-fg-red: #fb464c;
$callout-fg-purple: #a882ff;
$callout-fg-grey: #9e9e9e;
.callout {
font-size: 16px;
border-radius: 5px;
padding: 20px;
margin-bottom: 1rem;
.callout-title {
font-weight: bold;
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}
&.collapsible {
.callout-fold {
transform: rotate(180deg);
transition: transform 500ms;
margin-left: 0.5em;
svg {
transform: rotate(180deg);
transition: transform 500ms;
}
}
.callout-title {
cursor: pointer;
transition: margin-bottom 500ms;
}
&.collapsed {
.callout-title {
margin-bottom: 0;
}
.callout-fold svg {
transform: rotate(0deg);
}
}
}
&[data-callout="note"] {
background-color: $callout-bg-blue;
.callout-title {
color: $callout-fg-blue;
}
}
&[data-callout="abstract"] {
background-color: $callout-bg-cyan;
.callout-title {
color: $callout-fg-cyan;
}
}
&[data-callout="info"] {
background-color: $callout-bg-blue;
.callout-title {
color: $callout-fg-blue;
}
}
&[data-callout="todo"] {
background-color: $callout-bg-blue;
.callout-title {
color: $callout-fg-blue;
}
}
&[data-callout="tip"] {
background-color: $callout-bg-cyan;
.callout-title {
color: $callout-fg-cyan;
}
}
&[data-callout="important"] {
background-color: $callout-bg-cyan;
.callout-title {
color: $callout-fg-cyan;
}
}
&[data-callout="success"] {
background-color: $callout-bg-green;
.callout-title {
color: $callout-fg-green;
}
}
&[data-callout="question"] {
background-color: $callout-bg-orange;
.callout-title {
color: $callout-fg-orange;
}
}
&[data-callout="warning"] {
background-color: $callout-bg-orange;
.callout-title {
color: $callout-fg-orange;
}
}
&[data-callout="failure"] {
background-color: $callout-bg-red;
.callout-title {
color: $callout-fg-red;
}
}
&[data-callout="danger"] {
background-color: $callout-bg-red;
.callout-title {
color: $callout-fg-red;
}
}
&[data-callout="bug"] {
background-color: $callout-bg-red;
.callout-title {
color: $callout-fg-red;
}
}
&[data-callout="example"] {
background-color: $callout-bg-purple;
.callout-title {
color: $callout-fg-purple;
}
}
&[data-callout="cite"] {
background-color: $callout-bg-grey;
.callout-title {
color: $callout-fg-grey;
}
}
&[data-callout="update"] {
background-color: $callout-bg-blue;
.callout-title {
color: $callout-fg-blue;
}
}
}
svg.lucide {
width: 16px;
}