short-callout.css

/* @settings

name: Short callout (snippet)
id: shortco-style
settings:
    - 
        id: shortco-padding
        title: Callout padding
        description: "Breathing space between callout border and title/content (in rem units)."
		type: variable-number-slider
		default: 0.2
		format: rem
		min: 0
		max: 2
		step: 0.05
	- 
		id: shortco-margin-top
		title: Callout top margin
		description: "Additional space between callout and previous paragraph (in rem units). Note: the minimal margin is theme-dependent (`--p-spacing`)."
		type: variable-number-slider
		default: 0
		format: rem
		min: 0
		max: 5
		step: 0.1
	- 
		id: shortco-content-margin-left
		title: Callout content left margin
		description: "Space between callout title and content (in rem units)."
		type: variable-number-slider
		default: 0.5
		format: rem
		min: 0
		max: 5
		step: 0.05
    - 
        id: shortco-border-color
        title: Callout border color
		description: "Default is `--background-modifier-border`."
        type: variable-color
        format: hex
        opacity: false
        default: '#'
*/

body {
	--shortco-padding: 0.2rem;
	--shortco-border-color: var(--background-modifier-border);
	--shortco-content-margin-left: 0.5rem;
	--shortco-margin-top: 0;
}

/* Define icons for different callouts*/
.callout[data-callout="quelle:"],
.callout[data-callout="source:"] {
	--callout-icon: lucide-quote;
	--callout-color: transparent;
}

.callout[data-callout="book-copy:"] {
	--callout-icon: lucide-book-copy;
	--callout-color: transparent;
}

.callout[data-callout="zitat:"],
.callout[data-callout="quote:"] {
	--callout-icon: message-square-quote;
	--callout-color: transparent;
}

.callout[data-callout="project:"] {
	--callout-icon: lucide-codesandbox;
	--callout-color: 52, 188, 161;
}

/* Parent container of callouts ending with ":" */
/* div.cm-callout:has(.callout[data-callout$=":"]) { */
/* } */

/* The following selectors target all callouts ending with ":" (e.g. > [!book-copy:]) */
.callout[data-callout$=":"] {
	border-width: 1px;
	border-color: var(--shortco-border-color);
	border-radius: 0;
	border-style: solid none solid none;
	padding: var(--shortco-padding);
	display: inline-flex;
	align-items: center;
	margin-top: var(--shortco-margin-top);
}

.callout[data-callout$=":"] > div.callout-title {
	float: left;
	margin: 0 0 0 var(--shortco-padding);
	padding: 0;
}

.callout[data-callout$=":"] > div.callout-content {
	margin-right: var(--shortco-padding);
	margin-left: var(--shortco-padding);
	padding: 0;
}

.callout[data-callout$=":"] > div.callout-content > p {
	margin: 0 0 0 var(--shortco-content-margin-left);
}