195 lines
3.2 KiB
SCSS
195 lines
3.2 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;
|
|
}
|
|
|
|
.callout-content {
|
|
opacity: 1;
|
|
max-height: 500px;
|
|
transition: opacity 500ms, max-height 500ms;
|
|
}
|
|
|
|
&.collapsed {
|
|
.callout-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.callout-fold svg {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.callout-content {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[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-orange;
|
|
|
|
.callout-title {
|
|
color: $callout-fg-orange;
|
|
}
|
|
}
|
|
|
|
&[data-callout="success"] {
|
|
background-color: $callout-bg-green;
|
|
|
|
.callout-title {
|
|
color: $callout-fg-green;
|
|
}
|
|
}
|
|
|
|
&[data-callout="question"] {
|
|
background-color: $callout-bg-cyan;
|
|
|
|
.callout-title {
|
|
color: $callout-fg-cyan;
|
|
}
|
|
}
|
|
|
|
&[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;
|
|
}
|