Callout 扩展.css

/* === README ===
	Snippet: MCL Multi Column / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
	Version 0.8.1 (updated 2023-01-10)
	- fix issue with Breadcrumbs plugin and minimal-float where the plugin "banner" flushed to left
	Version 0.8.0 (updated 2022-11-26)
	- feature: `no-wrap` option for `[!multi-column]` using callout-metadata
	Version 0.7.2 (updated 2022-11-24)
	- fix margin-left for float `right`
	- improved support for Minimal theme for live preview float-right when in normal width note
	Version 0.7.0 (updated 2022-11-18)
	- feature: list column, list grid and list card using tags (need Contextual Typography plugin)
	- feature: float in live preview using float-right
	- refine: [!blank] callout as alternative to [!blank-container]
	Version 0.6.2 (updated 2022-10-22)
	- rollover main branch to support Obsidian 1.0.0
	Version 0.6.1 (updated 2022-10-02). Version number follow overall MCL
	- fix for footnote with -column-list-block created a <br> tag
	What is this snippet for?
	- to allow Obsidian users to change the layout with preset css by just specifying
	  the cssClass in the frontmatter (YAML) or naming the Callout block
	- available cssClass
		- cssClass: two-column-list
		- cssClass: {.two-column-list-block}
		- cssClass: three-column-list
		- cssClass: {.three-column-list-block}
		- cssClass: multi-column-list
	- available Callout format
		- [!multi-column]
		- [!blank] / [!blank-container]
	Compatibility
	- tested to work fine with the following Community Theme
		- Default Theme
		- Big Sur / Blue Topaz / California Cost / Notation / Pisum / Prism / Things / Typewriter (with minor issue on title color)
	- known to be not working
		- Primary (due to the theme heaving theming, box-shadow and so on)
	Credits
	- Kevin Powell Youtube channel
	- https://css-tricks.com/
	- discord OMG members @Cáo thoát tục (Cáo thoát tục#6993), @mulfok (mulfok#6931) and @Rainbell (Rainbell#3617)
	- kepano for accomodating my snippets adjustment
*/

/* @settings
name: Modular CSS Layout - Multi Column
id: modular-css-layout-mc
settings:
    -
        id: multi-column-title
        title: Callout Column Settings
        type: heading
        level: 2
		collapsed: true
    -
        id: callout-min-width
        title: Minimum Sub-Callout Width
        description: for sub-callout in [!multi-column]. in px units
        type: variable-number-slider
        default: 200
        min: 100
        max: 500
        step: 50
		format: px
	-
        id: callout-nowrap-min-width
        title: Minimum NO-WRAP Sub-Callout Width
        description: for sub-callout in [!multi-column|no-wrap]. in px units
        type: variable-number-slider
        default: 250
        min: 100
        max: 500
        step: 50
		format: px
    -
        id: callout-gap
        title: Sub-Callout Gap (any unit)
        description: NO spacing between figure and unit
        type: variable-text
        default: 0.5rem
	-
		id: callout-margin
		title: Sub-Callout Margin (any unit)
		description: to allow some spacing for box-shadow
		type: variable-text
		default: 5px
	-
        id: float-callout-title
        title: Float Callout Settings
        type: heading
        level: 1
		collapsed: true
	-
        id: float-width-title
        title: Float Width Settings
        type: heading
        level: 2
		collapsed: false
    -
        id: float-small-width
        title: Floating Callout Width - Small (in px)
        type: variable-number-slider
        default: 300
        min: 200
        max: 450
        step: 50
		format: px
    -
        id: float-medium-width
        title: Floating Callout Width - Medium (in px)
        type: variable-number-slider
        default: 400
        min: 300
        max: 550
        step: 50
		format: px
    -
        id: float-large-width
        title: Floating Callout Width - Large (in px)
        type: variable-number-slider
        default: 600
        min: 500
        max: 750
        step: 50
		format: px
	-
        id: float-gap-title
        title: Float Gap Settings
        type: heading
        level: 2
		collapsed: false
	-
	    id: float-left-callout-margin
		title: Gap for Float Left (any unit)
		description: Enter in following order - "top right bottom left"
	    type: variable-text
	    default: 0px 15px 0px 0px
	-
	    id: float-right-callout-margin
		title: Gap for Float Right (any unit)
		description: Enter in following order - "top right bottom left"
	    type: variable-text
	    default: 0px 0px 0px 15px
	-
		id: float-callout-snw-display
		title: Hide SNW indicator in Callout Float / Aside
		type: variable-select
		default: none
		options:
			-
				label: Show
				value: inline-block
			-
				label: Hide
				value: none
    -
        id: mc-list-column-title
        title: List Column Settings
		description: using `{.xxx-column-list-xxx}` and `#mcl/list-column`
        type: heading
        level: 1
		collapsed: true
    -
        id: list-min-width
        title: Minimum Column Width (in px)
        type: variable-number-slider
        default: 200
        min: 100
        max: 500
        step: 50
		format: px
    -
        id: col-rule-color
        title: Column Ruler Color
		type: variable-themed-color
		format: hsl
		opacity: true
		default-light: '#'
		default-dark: '#'
    -
        id: col-rule-width
        title: Column Ruler Width (in px)
        type: variable-number-slider
        default: 1
        min: 0
        max: 4
        step: 1
		format: px
	-
        id: mc-list-grid-title
        title: List Grid and List Card
		description: using `#mcl/list-grid` and `#mcl/list-card`
        type: heading
        level: 1
		collapsed: true
	-
        id: list-grid-min-width
        title: Minimum Grid/Card Width (in px/em or similar)
		type: variable-text
		default: 250px
	-
		id: mcl-card-bg-color
		title: List Card Background Color
		type: variable-themed-color
		format: hsl
		opacity: true
		default-light: '#'
		default-dark: '#'
	-
        id: mcl-card-header-border-width
        title: Bottom Border for List Card Header (in px/em or similar)
		description: set to 0 to disable the border
		type: variable-text
		default: 1px
	-
        id: mcl-card-gap
        title: List Card Border Width (in px/em or similar)
		type: variable-text
		default: 0.2em
	-
        id: mcl-card-border-width
        title: List Card Border Width (in px/em or similar)
		type: variable-text
		default: 1px
	-
		id: mcl-card-border-color
		title: List Card Border Color
		type: variable-themed-color
		format: hsl
		opacity: true
		default-light: '#'
		default-dark: '#'
*/


body{
	--callout-min-width: 200px;
	--callout-nowrap-min-width: 250px;
	--callout-gap: 0.5rem;
	--callout-margin: 5px;
	--float-small-width: 300px;
	--float-medium-width: 400px;
	--float-large-width: 600px;
	/* for list column, grid and card */
	--list-min-width: 200px;
	--col-rule-color: var(--background-modifier-border); /* #b3b3b3; */
	--col-rule-width: 1px;
	--list-grid-min-width: 250px;
	--mcl-card-header-border-width: 1px;
	--mcl-card-bg-color: var(--background-secondary);
	--mcl-card-gap: 0.2em;
	--mcl-card-border-width: 1px;
	--mcl-card-border-color: var(--background-modifier-border);
}
.theme-dark {
/*	--background-mcl-card: hsl(300, 5%, 15%); */
}
.theme-light {
/*	--background-mcl-card: hsl(300, 5%, 90%); */
}


/* === Multi Column "DIV"'s Using Callout === */
/* 	some issues still persists
	(2) some theme uses transparency to affect .callout-title */

	/* -- Main multi-column snippet using Callout */

	/* remove callout-title and make callout-content as part of main callout for box formatting */
	div[data-callout="multi-column"].callout > .callout-title { display: none; }
	div[data-callout="multi-column"].callout > .callout-content { display: contents; }
	/* make the main callout a flex and remove box formatting */
	/* --columns: unset to undo Sanctum's mod */
	div[data-callout="multi-column"].callout
		{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; --columns: unset;}
	/* make the subcallout in flex column to allow growing vertically */
	div[data-callout="multi-column"].callout .callout { display: flex; flex-direction: column; }
	div[data-callout="multi-column"].callout:not(.is-collapsed) .callout { margin: 0 var(--callout-margin) var(--callout-margin); } /* to allow spacing for box shadow */
	div[data-callout="multi-column"].callout .callout .callout-content { flex-grow: 1}

	div[data-callout="multi-column"].callout > .callout-content > *:is(div,ul) { flex: 1 1 var(--callout-min-width); margin: 0;}

	/* metadata "wide-x" to control subcallout flexible max width. only discrete 2,4,8,16 */
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="min-0"] { flex-basis: 0; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-2"] { flex-grow: 2; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-3"] { flex-grow: 3; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-4"] { flex-grow: 4; }
	div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="wide-5"] { flex-grow: 5; }


	@media (min-width: 500px) {
		/* .is-collapsed is used to draw the border-left only when it's collapsed */
		/* adjusted for Obsidian 0.16.x, removed a number of previous adjustment as no longer required */
		div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed { box-shadow: unset; height: min-content;}
	}

	 /* Special Adjustment -- for theme with negative margin & box shadow. (e.g. Prism) */
	div[data-callout="multi-column"].callout > .callout-content { margin-top: unset;}
	div[data-callout="multi-column"].callout:not(.is-collapsed) { box-shadow: unset;}

	/* Special Adjustment -- for Sanctum because it has "column" callout, Obsidian v0.16.x. Not required for multi-flex as it Sanctum expects the name ends with *=column */
	.callout[data-callout*=column] .callout-title { display: flex; }
	.callout[data-callout*=column] .callout-content { display: unset; }

	/* Special Adjustment -- for minimal left margin *//*
	.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout="multi-column"].callout
		{ width: 100%; max-width: 100%; margin-inline: 0 !important; }
	/* Special Adjustment -- for Minimal .dataview.list-view-ul width - Minimal set the width with --line-width-adaptive (40rem by default) */
	body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) div[data-callout="multi-column"].callout .dataview.list-view-ul {width: auto;}


/* === Multi Column "DIV"'s Using Callout -- No-Wrap Option === */
		div[data-callout="multi-column"][data-callout-metadata*="no-wrap"].callout {flex-wrap: nowrap; overflow-x: scroll;}
		div[data-callout="multi-column"][data-callout-metadata*="no-wrap"].callout > .callout-content > *:is(div,ul) { flex-shrink: 0; flex-basis: var(--callout-nowrap-min-width) }


/* === Multi Column Flex "DIV"'s Using Callout === */
	/* - Still EXPERIMENTAL, different theme approach border and background differently, but 0.16.x seems to align most */

	/* adjusted for Obsidian 0.16.x */
	div[data-callout="multi-column-flex-height"].callout > .callout-title { display: none; }
	div[data-callout="multi-column-flex-height"].callout > .callout-content { display: contents; }
	div[data-callout="multi-column-flex-height"].callout
		{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; }

	div[data-callout="multi-column-flex-height"].callout > .callout-content > *:is(div,ul) {flex: 1 1 var(--callout-min-width); margin: 0; }
	div[data-callout="multi-column-flex-height"].callout .callout { border: unset; box-shadow: unset; }
	/* need to reintroduce border-left as original callout put border on the parent callout */
	div[data-callout="multi-column-flex-height"].callout > .callout-content .callout .callout-title { border-top-left-radius: 3px;}
	div[data-callout="multi-column-flex-height"].callout > .callout-content .callout .callout-content { margin: 0; border-bottom-left-radius: 3px; height: min-height;}

	 /* "fix" for theme with negative margin & box shadow. Applicable for Prism theme */
	 div[data-callout="multi-column-flex-height"].callout > .callout-content { margin-top: unset;}
	 div[data-callout="multi-column-flex-height"].callout:not(.is-collapsed) { box-shadow: unset; }


/* === Blank Container "DIV"'s - can be used with Main Multi-Column layout above === */

	/* "blank-container" - no bg, no border, no title, no nothing, and remove the ligthen effect */
	div[data-callout*="blank"].callout {--callout-blend-mode: normal;}
	div[data-callout*="blank"].callout > .callout-title { display: none; }
	div[data-callout*="blank"].callout > .callout-content {display: contents;}
	div[data-callout*="blank"].callout { border: 0; padding-top: 0; padding-inline: 5px; background: unset; box-shadow: unset; }

	/* -- No Margin -- */
	/* issues still persists
	   - headers font size not same
	   - "no-margin" not fully workable in editing view due to wide-page override for Minimal theme
	*/
	div[data-callout-metadata*="no-margin"]:is(.cm-callout, .callout.callout, .callout.callout .callout-content) {margin: 0; padding: 0;}

	/* Special Adjustment for Themes */

		/* Shimmering Focus. Differing font size in callout *//* no longer required as of v3.272
		div[data-callout*="blank"] .callout-content :is(p,ul,li) { font-size: unset; line-height: inherit; }
		div[data-callout*="blank"] .callout-content :is(li) { margin: unset; }
		/* Mado. Remove  theme's pseudo left border */
		div[data-callout*="blank"] .callout-content::before { display: none; }


/* === Text Justify === */

	.text-justify :is(.markdown-preview-view p,.markdown-source-view .cm-line) { text-align: justify; }


/* === Floating Callout - Base === */
	/* variables */
	body {
		--float-left-callout-margin: 0 15px 0 0;
		--float-right-callout-margin: 0 0 0 15px;
		--float-callout-snw-display: none;
	}

	/* use media query so that floats only works when there's enough width */
	@media (min-width: 500px){
		.markdown-source-view [data-callout-metadata*="float-left"].cm-embed-block.cm-callout {float: left; padding-top: 0.8em; }
		.markdown-reading-view div[data-callout-metadata*="left"].callout {float: left;}

		.markdown-source-view [data-callout-metadata*="float-right"].cm-embed-block.cm-callout {float: right; padding-top: 0.8em; }
		.markdown-reading-view div[data-callout-metadata*="right"].callout {float: right; }

		.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .callout-content > p:last-of-type { margin-bottom: auto;}

		[data-callout-metadata*="float-right"].cm-embed-block.cm-callout {width: auto !important;}
		/* doing the gap */
		div[data-callout*="blank"].callout:is(div[data-callout-metadata*="left"]) { margin: var(--float-left-callout-margin); }
		div[data-callout*="blank"].callout:is(div[data-callout-metadata*="right"]) {margin: var(--float-right-callout-margin); }
	}


	/* Special Adjustment for Plugins / Markdown Elements */

		/* Option for Caption */
		div:is([data-callout-metadata*="caption"]).callout > .callout-content > p .image-embed[alt]:not([alt$=".png"], [alt$=".jpg"], [alt$=".jpeg"], [alt$=".tiff"])::after {content: attr(alt); text-align: center; display: block; font-style: italic; color: var(--text-muted); }
		div:is([data-callout-metadata*="caption"]).callout > .callout-content > p img:not(.emoji) { display: block; margin-right: auto; margin-left: auto;}

		/* Introduce clear to break the float */
			/* .markdown-preview-view h2, *//* remove this as it has weird spacing effect */
			.embedded-backlinks { clear: both; }

		/* fix for blockquote underlap the float layout */
			.markdown-preview-view :is(blockquote) { overflow-x: auto; } /* fix for blockquote underlap */
			.markdown-preview-view :is(p) { overflow: unset; } /* fix for para not wrapping around float. applicable for Willemstad */

		/* Special Adjustment for SNW plugin */
		div:is([data-callout-metadata*="caption"],[data-callout-metadata*="left"],[data-callout-metadata*="right"]).callout > .callout-content > p .snw-embed-preview { display: var(--float-callout-snw-display); width: min-content; height: min-content; }
		div:is([data-callout-metadata*="caption"],[data-callout-metadata*="left"],[data-callout-metadata*="right"]).callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}


	/* Special Adjustment for Themes */

		/* Special Adjustment for Minimal theme. Undo the theme flex layout by default. To apply per note basis */
			body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .markdown-preview-sizer { display: unset; }
		/* Special Adjustment for Minimal theme Live Preview float support. Need to revert cm-content width to default theme but cm-embed to auto */
			body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer { width: calc(var(--line-width-adaptive) - var(--folding-offset)); max-width: calc(var(--max-width) - var(--folding-offset)); margin-right: auto; margin-left: max(calc(50% + var(--folding-offset) - var(--line-width-adaptive)/ 2), calc(50% + var(--folding-offset) - var(--max-width)/ 2))!important; }
			.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-line { width: auto; max-width: 100%; margin-left: 0 !important; }
			body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout> :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) { max-width: none; margin-left: 0 !important;}
			.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout > .callout { width: auto; }
		/* Special Adjustment for Minimal theme Live Preview float support. Undo margin-left for Image */
			.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .internal-embed.image-embed { margin-left: auto !important; }

			/* fix to support Breadcrumbs plugin */
			body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }


		/* Minimal. For gaps adjustment */
		body[class*="minimal-tab-title"] .minimal-float div[data-callout*="blank"].cm-callout:is(div[data-callout-metadata*="left"]) { margin: var(--float-left-callout-margin) !important; }
		body[class*="minimal-tab-title"] .minimal-float div[data-callout*="blank"].cm-callout:is(div[data-callout-metadata*="right"]) {margin: var(--float-right-callout-margin) !important; }
		body[class*="minimal-tab-title"] .minimal-float.wide-page div[data-callout*="blank"].cm-callout:is(div[data-callout-metadata*="left"]) { margin-left: 20px !important; }

/* === Floating Callout - Size Option === */
	/* Main Code. Set the width for live preview and reading view */
	@media (min-width: 500px){
		div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > div[data-callout-metadata*="-small"].callout,
		div[data-callout-metadata*="-small"].callout {width: var(--float-small-width);}
		div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > div[data-callout-metadata*="-medium"].callout,
		div[data-callout-metadata*="-medium"].callout {width: var(--float-medium-width);}
	}
	@media (min-width: 750px){
		div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > div[data-callout-metadata*="-large"].callout,
		div[data-callout-metadata$="large"].callout {width: var(--float-large-width);}
	}


	/* Special Adjustment for Themes */

		/* Minimal. Uses body[class*="minimal-tab-title"] as identifier. To override (have higher specificity) the width param. Can be merged to main code later on */
		@media (min-width: 500px){
			body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="medium"].callout { width: var(--float-medium-width); margin-left: 0 !important; }
			body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="small"].callout { width: var(--float-small-width); margin-left: 0 !important; }
		}
		@media (min-width: 750px){
			body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout > div[data-callout-metadata$="large"].callout { width: var(--float-large-width); margin-left: 0 !important; }
		}


/* === Multi Column Lists (require Markdown Attributes) === */

	/* - xx-column-list for first level only list, but apply anywhere */
	/* - xx-column-list-block apply at block level - but require JV's Markdown Attributes plugin */

	@media (min-width: 500px ){
		.two-column-list div > ul,   .two-column-list-block {columns: 2; column-gap: 3rem;}
		.three-column-list div > ul,  .three-column-list-block {columns: 3; column-gap: 3rem;}
	}


	/* - dashboard style, page level only, apply to any first level */
	/* -- applicable only when width > 400pt, else just single column */
	/* grid list block level cannot be done, it breaks formatting */
	@media (min-width: 500px) {
		.two-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(2,1fr);}
	}
	@media (min-width: 600px) {
		.three-column-grid-list div > ul { display: grid; grid-column-gap:3em; grid-template-columns:repeat(3,1fr);}
	}

	.multi-column-list div > ul,  .multi-column-list-block { column-width: var(--list-min-width); column-gap: 3rem; column-rule: var(--col-rule-width) solid var(--col-rule-color); }

	/* Special adjustment for footnotes applied with -colum-list-block -- obsidian creates a <br> tag at the last <li> */
	.footnotes [class$="-column-list-block"] li:last-of-type br:last-of-type {display: none;}

	/* Special adjustment for misaligned bullets (this is a hack, need to find better solution later) */
	ul[class*="column-list"] li > .list-bullet::after { position: relative; }
	.markdown-preview-view[class*="column-list"] li > .list-bullet::after { position: relative; }

/* ========================================================================== */
/* === Multi Column List using Tags (require Contextual Typography) === */

	/* hide tag in rendered view, dim it in edit mode */
	:is(div[class*="mcl"].markdown-rendered, .markdown-rendered div[class*="mcl"]) a[href*="#mcl"] {display: none;}
	span[class*="mcl"]	{background-color: var(--background-primary) !important; color: var(--text-faint) !important;}

	/* this is direct alternative to .multi-column-list and .multi-column-list-block */
	.tag-mcllist-column > .callout[data-callout*="blank"],
	.tag-mcllist-column > .callout > .callout-content,
	.tag-mcllist-column:not([data-callout]) { column-width: var(--list-min-width); column-gap: 1rem; column-rule: var(--col-rule-width) solid var(--col-rule-color); }
	.tag-mcllist-column.cm-callout {padding-block: 1em;} /* add block padding only for the one in callout */
	.tag-mcllist-column .callout:first-of-type { margin-top: 0; }
	.tag-mcllist-column ul:first-of-type { margin-top: 0; }
	/* */
	/* -- MCL Grid, alpha */
	.tag-mcllist-grid ul:first-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr));}
	.tag-mcllist-grid ul:first-child > li { border: px solid Gray; border-radius: 0.5em;}
	.tag-mcllist-grid ul:first-child > li:not(:last-of-type) {padding-right: 1.6em;}


	/* -- MCL Grid, alpha */
	.tag-mcllist-card ul:first-child
		{ display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr));}
	.tag-mcllist-card ul ul:not(ul ul ul) { padding-left: 0.1em; }
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul { padding-left: 0; }
	:is(.is-mobile .markdown-rendered) .tag-mcllist-card :is(ol:not(ol ol ol),  ul:not(ul ul ul)) {padding-left: 0;}
	/* reposition the collapse indicator and hover behaviour */
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li {position: relative;}
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:hover > .collapse-indicator,
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li:hover > .collapse-indicator {opacity: 1;}
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > .collapse-indicator,
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li > .collapse-indicator {position: absolute; right: 0;}
	.tag-mcllist-card ul::before {display: none;}
	/* decorate the first heading for cards */
	:is(.tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:not(.is-collapsed) > [data-heading] {border-bottom: var(--mcl-card-header-border-width) solid var(--mcl-card-border-color); margin-bottom: 0.2em;}
	/* hide the list bullet for list-card for first and second level */
	.tag-mcllist-card > div > div > ul > li > .list-bullet::after,
	.tag-mcllist-card > div > div > ul > li > ul > li > .list-bullet::after,
	.tag-mcllist-card > ul > li::before,
	.tag-mcllist-card > ul > li > ul > li::before,
	.tag-mcllist-card > ul > li > .list-bullet::after,
	.tag-mcllist-card > ul > li > ul > li > .list-bullet::after {visibility: hidden;}
	/* remove the indentation guide */
	.tag-mcllist-card ul:not(ul ul ul ul)::before {--indentation-guide-width: 0;}
	.markdown-rendered.show-indentation-guide .tag-mcllist-card li > ul::before,
	.markdown-rendered.show-indentation-guide .tag-mcllist-card li > ol::before {border-right: 0;}
	.tag-mcllist-card li {list-style: none;}
	.tag-mcllist-card li li li {list-style: circle;}
	.tag-mcllist-card .callout ul:not(ul ul) > li,
	.tag-mcllist-card ul:not(ul ul) > li
		{ margin-inline: var(--mcl-card-gap); margin-bottom: calc(var(--mcl-card-gap)*2); padding: 0.3em 0.5em; outline: var(--mcl-card-border-width) solid var(--mcl-card-border-color); border-radius: 0.5em; background-color: var(--mcl-card-bg-color);}
	.tag-mcllist-card ul:not(ul ul) > li img {width: 100%;}
	.tag-mcllist-card ul img {margin: 0; float: none;}

	/* special adjustment for Sanctum */
	.markdown-rendered .tag-mcllist-card ul img[alt*=right] {margin: 0;}