194 lines
No EOL
4.9 KiB
CSS
194 lines
No EOL
4.9 KiB
CSS
:root {
|
|
--callout-bug: var(--color-red);
|
|
--callout-default: var(--color-blue);
|
|
--callout-error: var(--color-red);
|
|
--callout-example: var(--color-purple);
|
|
--callout-fail: var(--color-red);
|
|
--callout-important: var(--color-cyan);
|
|
--callout-info: var(--color-blue);
|
|
--callout-question: var(--color-orange);
|
|
--callout-success: var(--color-green);
|
|
--callout-summary: var(--color-cyan);
|
|
--callout-tip: var(--color-cyan);
|
|
--callout-todo: var(--color-blue);
|
|
--callout-warning: var(--color-orange);
|
|
--callout-quote: rgb(158, 158, 158);
|
|
|
|
--callout-title-weight: bold;
|
|
|
|
--callout-radius: var(--border-radius);
|
|
|
|
--callout-border-opacity: 25%;
|
|
--callout-background-opacity: 10%;
|
|
--callout-content-padding: 0;
|
|
--callout-content-background: transparent;
|
|
}
|
|
.callout {
|
|
--callout-color: var(--callout-default);
|
|
/* --callout-icon: lucide-pencil; */
|
|
}
|
|
|
|
.callout[data-callout="abstract"],
|
|
.callout[data-callout="summary"],
|
|
.callout[data-callout="tldr"] {
|
|
--callout-color: var(--callout-summary);
|
|
/* --callout-icon: lucide-clipboard-list; */
|
|
}
|
|
|
|
.callout[data-callout="info"] {
|
|
--callout-color: var(--callout-info);
|
|
/* --callout-icon: lucide-info; */
|
|
}
|
|
|
|
.callout[data-callout="todo"] {
|
|
--callout-color: var(--callout-todo);
|
|
/* --callout-icon: lucide-check-circle-2; */
|
|
}
|
|
|
|
.callout[data-callout="important"] {
|
|
--callout-color: var(--callout-important);
|
|
/* --callout-icon: lucide-flame; */
|
|
}
|
|
|
|
.callout[data-callout="tip"],
|
|
.callout[data-callout="hint"] {
|
|
--callout-color: var(--callout-tip);
|
|
/* --callout-icon: lucide-flame; */
|
|
}
|
|
|
|
.callout[data-callout="success"],
|
|
.callout[data-callout="check"],
|
|
.callout[data-callout="done"] {
|
|
--callout-color: var(--callout-success);
|
|
/* --callout-icon: lucide-check; */
|
|
}
|
|
|
|
.callout[data-callout="question"],
|
|
.callout[data-callout="help"],
|
|
.callout[data-callout="faq"] {
|
|
--callout-color: var(--callout-question);
|
|
/* --callout-icon: help-circle; */
|
|
}
|
|
|
|
.callout[data-callout="warning"],
|
|
.callout[data-callout="caution"],
|
|
.callout[data-callout="attention"] {
|
|
--callout-color: var(--callout-warning);
|
|
/* --callout-icon: lucide-alert-triangle; */
|
|
}
|
|
|
|
.callout[data-callout="failure"],
|
|
.callout[data-callout="fail"],
|
|
.callout[data-callout="missing"] {
|
|
--callout-color: var(--callout-fail);
|
|
/* --callout-icon: lucide-x; */
|
|
}
|
|
|
|
.callout[data-callout="danger"],
|
|
.callout[data-callout="error"] {
|
|
--callout-color: var(--callout-error);
|
|
/* --callout-icon: lucide-zap; */
|
|
}
|
|
|
|
.callout[data-callout="bug"] {
|
|
--callout-color: var(--callout-bug);
|
|
/* --callout-icon: lucide-bug; */
|
|
}
|
|
|
|
.callout[data-callout="example"] {
|
|
--callout-color: var(--callout-example);
|
|
/* --callout-icon: lucide-list; */
|
|
}
|
|
|
|
.callout[data-callout="quote"],
|
|
.callout[data-callout="cite"] {
|
|
--callout-color: var(--callout-quote);
|
|
/* --callout-icon: quote-glyph; */
|
|
}
|
|
|
|
.callout {
|
|
overflow: hidden;
|
|
border-style: solid;
|
|
|
|
border-color: color-mix(in srgb, var(--callout-color) var(--callout-border-opacity), transparent);
|
|
border-width: var(--callout-border-width);
|
|
border-radius: var(--callout-radius);
|
|
margin-block: 1em;
|
|
margin-inline: 0;
|
|
mix-blend-mode: var(--callout-blend-mode);
|
|
background-color: color-mix(in srgb, var(--callout-color) var(--callout-background-opacity), transparent);
|
|
padding: 0.75em;
|
|
padding-inline-start: 1.5em;
|
|
--callout-title-color: var(--callout-color);
|
|
}
|
|
|
|
.callout.is-collapsible .callout-title {
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.callout-title {
|
|
padding: var(--callout-title-padding);
|
|
display: flex;
|
|
gap: calc(var(--spacing)/4);
|
|
font-size: var(--callout-title-size);
|
|
color: rgb(var(--callout-color));
|
|
line-height: var(--line-height-tight);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.callout-title-inner {
|
|
--font-weight: var(--callout-title-weight);
|
|
font-weight: var(--font-weight);
|
|
color: var(--callout-title-color);
|
|
}
|
|
/* .callout-title {
|
|
--font-weight: var(--callout-title-weight);
|
|
font-weight: var(--font-weight);
|
|
color: var(--callout-title-color);
|
|
padding: var(--callout-title-padding);
|
|
font-size: var(--callout-title-size);
|
|
line-height: var(--line-height-tight);
|
|
} */
|
|
|
|
|
|
.callout-content {
|
|
overflow-block: auto;
|
|
padding: var(--callout-content-padding);
|
|
background-color: var(--callout-content-background);
|
|
}
|
|
|
|
.callout-content .callout {
|
|
margin-block-start: 20px;
|
|
}
|
|
|
|
.callout-icon {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.callout-icon .tabler-icon {
|
|
color: var(--callout-color);
|
|
}
|
|
|
|
.callout-icon::after {
|
|
content: "\200B";
|
|
}
|
|
|
|
/* .callout-fold {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-inline-end: var(--size-4-2);
|
|
}
|
|
|
|
.callout-fold::after {
|
|
content: "\200B";
|
|
}
|
|
|
|
.callout-fold .svg-icon {
|
|
transition: transform 100ms ease-in-out;
|
|
}
|
|
|
|
.callout-fold.is-collapsed .svg-icon {
|
|
transform: rotate(calc(var(--direction) * -1 * 90deg));
|
|
} */ |