MCL Gallery Cards.css

/* === README ===
	Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay

	ver 0.9.9 (draft upd 2024-01-14)
	- minor performance improvement by reducing image gallery has() scope, focusing on editing view
	ver 0.9.8 (updated 2023-11-03)
	- re-fixes #50
	v0.9.7 (updated 2023-10-13)
	- fixes #50 i.e. Gallery Card not working with Minimal due to Minimal max-width specificity
	Ver 0.9.5 (updated 2023-07-30)
	- fixes on minimal float affecting Minimal own wide table feature
	- fixes on properties padding affecting Minimal
	- fixes Mermaid zoom in Editing View
	Ver 0.9.4 (updated 2023-07-06)
	- improve Float Image for editing text in Editing View
	- fix for Float Image for Minimal (and respect width settings). No longer require cssClass "minimal-float" but require Style Settings
	- improve Image Gallery especially for use in Live Preview without callout
	Ver 0.9.2 (updated 2023-05-27)
	- fix div width for float image also affecting normal image embed
	Ver 0.9.0 (updated 2023-04-01)
	- image float
	- banner background
	- card view for dataview table

	This snippet is part of MCL collection of snippets for customising layout, and it provides the following
	- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
		- use together with MCL Multi Column [!blank-container] for invisible container
	- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
	- Image Zoom via css
	- Dimension control for images in lists <ul>

	Credits to @kepano Minimal Theme and @SlRvb ITS Theme for inspiration
*/
/* === Master Setting === */

	/* set the defaults */
	body{
		--img-border-radius: 15px;
		--img-max-height: 300px;
		--img-max-width: 350px;
		--img-max-height-list: 270px;
		--img-max-width-list: 300px;
		--callout-gallery-gap: 5px;
		--gallery-snw-display: none;
	}

	img {border-radius: var(--img-border-radius);}



/* === Image Gallery using <p> and Callout === */

	/* Editing and Reading View - Gallery using <p> and Callout. Using <p> (in Reading View) to contain and format as gallery view using metadata="gallery" to contain and format as gallery view */
		/* Create display: flex and key adjustment on margin and gap */
		.image-gallery .markdown-rendered div:has(> p .image-embed) > p,
		div[data-callout-metadata*="gallery"].callout > .callout-content > p
			{ display: flex; gap: var(--callout-gallery-gap); margin-top: calc( var(--callout-gallery-gap) ); margin-bottom: 0; }
		.image-gallery .markdown-rendered div:has(> p .image-embed) { margin-top: var(--callout-gallery-gap); }
		div[data-callout-metadata*="gallery"].callout > .callout-content { --callout-content-padding: 0.5rem 0 0 0; }
		/* Introduce subtle border and make the gallery as object-fit: cover */
		.image-gallery .markdown-rendered div:has(> p .image-embed) > p img,
		div[data-callout-metadata*="gallery"].callout > .callout-content > p img
			{ max-height: var(--img-max-height); border: 1px solid var(--background-modifier-border); object-fit: cover; display: block;}
		/* display: block for img is important to control the hidden margin-bottom but for Minimal, it uses display: flex for top level divs which pose another "margin" issues no plan to solve yet as this is not critical */

		/* Hack to emulate Reading View masonry in Editing View (for use without callout) - there's no <p> tag to be container but we can hack to use .cm-line with the help of :has() */
		/* improved the css performance */
		.image-gallery div.cm-line:not(.HyperMD-list-line):not(.cm-active):has(> .image-embed:not(.cm-callout)) { display: flex; gap: var(--callout-gallery-gap); --img-gallery__buffer-display: none; }
		.image-gallery div.cm-line > :is(img.cm-widgetBuffer,span[contenteditable]) { display: var(--img-gallery__buffer-display) !important; }
		.image-gallery div:not(.cm-callout):not(.HyperMD-list-line).image-embed img { max-height: calc(var(--img-max-height)/1); display: unset; object-fit: cover; }


	/* -- Adjustment for Themes -- */

		/* Special Adjustment for Shimmering Focus. Reading View. Overriding max-width */
		body:not(.is-mobile) .app-container.app-container .image-gallery p img[src],
		body:not(.is-mobile) .app-container.app-container div[data-callout-metadata*="gallery"].callout img[src]
			{ max-width: 100%; width: unset; margin-block: unset;}

		/* Minimal. Editing View. Left margin. */
		.markdown-source-view.mod-cm6 div[data-callout-metadata*="gallery"] .internal-embed.image-embed { margin-left: 0 !important; width: unset;}

		/* Minimal. Editing View. Revert img max width */
		body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer>.cm-content>div:has(.image-embed) img { max-width: 100%; }

		/* Minimal. Disable Max Width */
		body[class*="minimal-tab-title"] {
			&.full-width-media .markdown-preview-view .image-embed img:not(.link-favicon):not(.emoji):not([width]),
			&.full-width-media .markdown-preview-view img:not(.link-favicon):not(.emoji):not([width]) {
				/* max-width: 100%; */
			}
		}

	/* -- Adjustment for Plugins -- */

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


/* === Images in Lists === */
	/* limit the width when in a list (ul only) */
	body:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
		{ max-height: var(--img-max-height-list); max-width: var(--img-max-width-list); margin-inline: 0; display: unset; object-fit: cover; }

	/* clamping max width to viewport when in mobile. possibly can adopt for desktop as well */
	body.is-mobile:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
		{ max-width: clamp(calc(var(--img-max-width-list)/2), var(--img-max-width-list), 100%);}

	/*
	div:not(.cm-callout).image-embed img { max-height: 200px; max-width: 300px; height: 200px; object-fit: cover;}
	*/


/* === Image Float === */
	/* variables */
	body {
		--float-left-margin: 4px 12px 4px 0;
		--float-right-margin: 4px 0 4px 12px;
		--float-snw-display: none;
	}

	/* float in both Live Preview and Reading View */
	img[alt^="left"], img[alt^="float-left"] { float: left; margin: var(--float-left-margin); }
	img[alt^="right"], img[alt^="float-right"] { float: right; margin: var(--float-right-margin); }
	/* disable box control for parent div to the float */
	.internal-embed.image-embed[alt*="float-left"],
	.internal-embed.image-embed[alt*="float-right"]
		{display: contents; }

	/* provide a float "escape" by allowing user to to add <div class="no-float"></div> */
	div.no-float {clear: both; display: inline-grid; height: 1px; width: 100%; background-color: var(--background-secondary);}

	/* remove the br between image and paragraph in Reading View */
	p > :is(.image-embed[alt*="left"],.image-embed[alt*="right"]) + br {display: none;}


	/* -- Adjustment for Plugins */

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

		/* SNW plugin */
		.internal-embed.image-embed:is([alt="left"],[alt*="|left"],[alt*="left|"],[alt*="float-left"],[alt="right"],[alt*="|right"],[alt*="right|"],[alt*="float-right"]) + .snw-reference.snw-embed { display: var(--float-snw-display); }
		.internal-embed.image-embed:is([alt="left"],[alt*="|left"],[alt*="left|"],[alt*="float-left"],[alt="right"],[alt*="|right"],[alt*="right|"],[alt*="float-right"]) + .snw-reference.snw-embed + br { display: none;}


	/* -- Adjustment for Themes -- */

		/* Blue Topaz. uses body[class*="notebook-liked-markdown-page"] as identifier */
		body[class*="notebook-liked-markdown-page"] .view-content .internal-embed.is-loaded img[alt*="left"]:not([class*="emoji"]) { margin: var(--float-left-margin) !important; }
		body[class*="notebook-liked-markdown-page"] .view-content .internal-embed.is-loaded img[alt*="right"]:not([class*="emoji"]) { margin: var(--float-right-margin) !important; }

		/* Minimal. Uses body[class*="minimal-tab-title"] as identifier */
		body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6 .internal-embed.image-embed[alt*="float"] {width: auto !important; max-width: unset; margin-left: 0 !important;}

		/* Minimal. Minimal Float. (duplicate from Multi Column. Redid "minimal-float" for Minimal V7.0 */
		/* minimal own wide table will not work together with float */
		/* undo the Minimal "cm-line" sizing */
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer>.cm-content>div,
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.embedded-backlinks,
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.inline-title,
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.metadata-container
			{ max-width: none; width: auto; }
		/* Re-set the default "cm-sizer" width but respect Minimal Settings */
		:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer { max-width: var(--max-width); width: var(--line-width); }


		/* to be deleted by 30 Sep 2023 */
		/* Duplicate from Multi Column, in case users don't enable that snippet (row 426-437) */
		/* Special Adjustment for Minimal theme. Undo the theme flex layout by default. To apply per note basis */
			/* .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; } */
			/* .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: 98%; } */
			/* .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; } */



/* === Image Zoom === */
/* must check "Enable Image Zoom via CSS" via Style Settings */

	/* set scale to 100% for images */
	.image-zoom .view-content :is(.cm-editor, .markdown-preview-view) img { max-width: 100%; cursor: zoom-in; }

	/* css zoom for images */
	body.image-zoom:not(.is-mobile) .view-content :is(.cm-editor,.markdown-preview-view) img:active,
	body.image-zoom:not(.is-mobile) .view-content .image-embed:active,
	.image-zoom :is(.HyperMD-list-line,ul) .image-embed.image-embed img:active {
		cursor: zoom-out; display: block; background: rgba(0,0,0,0.5);
		max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
		object-fit: contain; margin: -0.5px auto 0; padding: 0; text-align: center;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
	}

/* === Mermaid SVG max-width 100% and zoom on click  === */
/* for Mermaid SVG zoom, must check "Enable Mermaid Zoom via CSS" via Style Settings */

	/* set scale to 100% for mermaid diagram */
	body:not(.mermaid-scale-off) .view-content :is(.cm-editor, .markdown-preview-view) .mermaid svg { max-width: 100%; height: 100%}
	body.mermaid-scale-off .mermaid { overflow-x: auto; }

	.mermaid-zoom .view-content .mermaid svg { cursor: zoom-in; }

	/* css zoom for mermaid diagram */
	body.mermaid-zoom:not(.is-mobile) .view-content .markdown-reading-view .mermaid svg:active {
		cursor: zoom-out; display: block; object-fit:contain; margin: -0.5px auto 0; padding: 0;
		max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
		text-align: center; z-index: 100; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
	}
	/* editing view */
	body.mermaid-zoom:not(.is-mobile) .markdown-source-view .cm-embed-block:has(.mermaid svg:active) {
		text-align: center;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 100;
		position: fixed;
		background: rgba(0,0,0,0.8)
	}
	body.mermaid-zoom:not(.is-mobile) .markdown-source-view. .cm-embed-block:has(.mermaid svg:active) .mermaid { overflow-x: hidden; }
	body.mermaid-zoom:not(.is-mobile) .markdown-source-view .mermaid svg:active {
		cursor: zoom-out;
		position: fixed;
		width: 100%; height: 100%;
		top: 0; left: 0;
	}


/* === Dataview related ===*/

	/* Change Dataview table into card view
	   - no style settings option yet
	*/

    body {
        --bg-color-dv-card: var(--background-modifier-backlinks);
        --border-color-dv-card: var(--background-modifier-border);
    }
    .dv-card table.dataview { position: relative; display: flex; flex-direction: column; font-size: 0.9em; }

    /* convert the thead */
    .dv-card table.dataview thead { display: flex; flex-flow: row-reverse; border-radius: var(--size-4-2); position: relative; padding-bottom: 0.4em; }
    .dv-card table.dataview thead tr { margin: 0; }
    .dv-card:is(*,.markdown-source-view.mod-cm6) table.dataview.table-view-table thead th { padding-left: 0; padding: 0.2em 1.3em 0 0.3em; border-width: 0; font-size: 0.9rem; color: var(--text-faint); font-family: var(--h3-font);}

    /* convert the tbody into card like structure */
    .dv-card table.dataview tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-gap: var(--size-4-2); }
    .dv-card table.dataview tbody tr { background-color: var(--bg-color-dv-card); display: flex; flex-direction: column; border: 1px solid var(--border-color-dv-card); border-radius: var(--size-4-2); margin-top: 0; margin-bottom: 0; }
    .dv-card table.dataview tbody tr:hover { background-color: var(--background-secondary) !important; }
    .dv-card table.dataview tbody td { display: flex; padding-block: 0; }
    .dv-card table.dataview tbody td:first-child { font-weight: var(--bold-weight); }
    .dv-card table.dataview tbody td:not(:first-child) { color: var(--text-muted); font-size: 0.9em; }
    .dv-card table.dataview tbody td:last-child { padding-bottom: 0.5em; }
    .dv-card table.dataview tbody td:not(:last-child):not(:first-child)>.el-p:not(.el-embed-image) { border-bottom: 1px solid var(--border-color-dv-card); width: 100%; }
    .dv-card table.dataview tbody td > * { padding-block: 0.5em; }
    .dv-card table.dataview tbody td > ul { padding-block: 0.2em; }

    /* Remove the li indent and other cosmetics */
    .dv-card table.dataview :is(ul,ol) { padding-inline-start: 0; margin-block: 0 !important; }
    .dv-card table.dataview li:not(:last-of-type).dataview-result-list-li {border-bottom: 1px dashed DarkSlateGray;}
    .dv-card table.dataview li.dataview-result-list-li::marker { color: transparent; }

    /* Special Adjustment for Stardust's Table Enhancer plugin */
    table.dataview .table-height-adjust th, .table-height-adjust tr { height: revert !important; }

	/* Special Adjustment for Listive theme */
	.dv-card .table-view-table li:not(.cards li.dataview-result-list-li) {margin-left: revert; }

	/* Special Adjustment for thead background for most themes */
	.dv-card thead :is(tr, th.table-view-th) {background-color: transparent;}
	.dv-card thead :is(tr, th) {border-width: 0;}



/*=== MCL Banner ===*/
/* banner using css only -- https://forum.obsidian.md/t/css-how-to-style-the-first-image-in-a-note/52839/ */

    body {
        --mcl-banner-height-normal: 200px;
        --mcl-banner-height-tall: 300px;
        --mcl-banner-overlap-title-adj: 0px;
		--mcl-banner-no-title-adj: 0px;
    }
	body:not(.show-inline-title) .markdown-reading-view {
		--mcl-banner-no-title-adj: 25px; /* reading view bigger to adjust for minor overlap */
	}
	body:not(.show-inline-title) .markdown-source-view {
		--mcl-banner-no-title-adj: 15px;
	}


    /* make the div (in LP) containing the image doesn't control the css box-sizing */
    .markdown-source-view .cm-line:has(> .internal-embed.image-embed > img[alt*="mcl-banner"]),
    .markdown-source-view :is(.internal-embed.image-embed, .cm-line):has(> img[alt*="mcl-banner"]) { display: contents; }

    /* original forum post snippet with minor tweak */
    img[alt*="mcl-banner"] {
        position: absolute;
        top: 0; left: 0;
        height: var(--mcl-banner-height-normal); width: 100%;
        margin-right: auto; margin-left: auto;
        object-fit: cover; object-position: 50% 50%;
        overflow: hidden;
        user-select: none;
		/* z-index: -1; */
     }

     img[alt*="mcl-banner"][alt*="gradient"] {
         -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );
         mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
     }

	 /* padding to distance text content from banner V1 *//*
     .view-content:has(img[alt*="mcl-banner"]) .inline-title
	 	{ position: relative; padding-top: calc(var(--mcl-banner-height-normal) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj)); z-index: 30; }
	.view-content:has(img[alt*="mcl-banner"][alt*="-tall"]) :is(.cm-content > div:first-child, .mod-header)
   	 	{ padding-top: calc(var(--mcl-banner-height-tall) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj) ); }

	 /* padding to distance text content from banner V2 */
	.view-content:has(img[alt*="mcl-banner"]) :is(.cm-sizer, .markdown-preview-section)
   	 	{ padding-top: calc(var(--mcl-banner-height-normal) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj)); }
   	.view-content:has(img[alt*="mcl-banner"][alt*="-tall"]) :is(.cm-sizer, .markdown-preview-section)
  	 	{ padding-top: calc(var(--mcl-banner-height-tall) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj) ); }
	.view-content:has(img[alt*="mcl-banner"]) .inline-title
   	 	{ position: relative; z-index: 30; }



     /* add option to adjust vertical position by adding the alt metadata "higher" or "lower" */
     img[alt*="mcl-banner"][alt*="y-30"] { object-position: 50% 20%; }
     img[alt*="mcl-banner"][alt*="y-20"] { object-position: 50% 30%; }
     img[alt*="mcl-banner"][alt*="y-10"] { object-position: 50% 40%; }
     img[alt*="mcl-banner"][alt*="y+10"] { object-position: 50% 60%; }
     img[alt*="mcl-banner"][alt*="y+20"] { object-position: 50% 70%; }
	 img[alt*="mcl-banner"][alt*="y+30"] { object-position: 50% 80%; }

     /* tall adjustment */
     img[alt*="mcl-banner"][alt*="-tall"] { height: var(--mcl-banner-height-tall); }


     /* minor tweak for me, since i have snippet to make image has rounded corner */
     img[alt*="mcl-banner"] { border-radius: revert; }
     /* minor tweak for me, to hide snw block reference counter for the banner */
    .internal-embed.media-embed.image-embed.is-loaded + .snw-reference.snw-embed {display: none;}


/* === Image Aspect Ratio === */
	/* Apply to any images using either hashtag after image url or image alt-text */
	.internal-embed.image-embed[src*="1-1"] > img,
	img[src*="1-1"],
	img[alt*="1-1"]
		{ aspect-ratio: 1/1; object-fit: cover; }
	.internal-embed.image-embed[src*="4-3"] > img,
	img[src*="4-3"],
	img[alt*="4-3"]
		{ aspect-ratio: 4/3; object-fit: cover; }
	.internal-embed.image-embed[src*="16-9"] > img,
	img[src*="16-9"],
	img[alt*="16-9"]
		{ aspect-ratio: 16/9; object-fit: cover; }


/* === Image Caption === */
	/* This will only works with local images, web images cannot be supported
		mainly because obsidian doesn't render a parent div for the image.
		Local images with md link still works. */
	:is(.markdown-source-view.mod-cm6, .markdown-reading-view) .internal-embed.image-embed[src*="caption"] { display: inline-block; width: fit-content; }
	.image-embed[src*="caption"]::after { content: attr(alt); display: block; text-align: center; font-style: italic; }


/* === ALPHA VERSION testing Timeline in lists === */
/*
    .tag-mcltimeline > ul > li > *:not(ul) { text-align: center; align-self: baseline; }
    .tag-mcltimeline > ul > li {
        display: grid;
        grid-template-columns: 0 3fr 7fr;
        grid-template-rows: auto;
        grid-template-areas:
            "indicator timeline details"
            "indicator . details";
        grid-column-gap: 1em;

    }
    .tag-mcltimeline > ul > li > ul { grid-area: details; text-align: left; }
    .tag-mcltimeline > ul > li > .collapse-indicator { grid-area: indicator; }
    .tag-mcltimeline > ul ul { margin-left: 0.5em; }
*/




/* @settings

name: Modular CSS Layout - Gallery Cards
id: modular-css-layout-gc
settings:

	-
		id: gc-general-title
		title: General Image Settings
		type: heading
		level: 2
		collapsed: true
	-
        id: image-zoom
        title: Enable Image Zoom via CSS
        type: class-toggle
	-
		id: img-border-radius
		title: Image Border Radius (any unit, no space)
		type: variable-text
		default: 15px


    -
        id: gc-callout-title
        title: Image Gallery Settings
		description: For image gallery using `gallery` callout-metadata and `image-gallery` YAML
        type: heading
        level: 2
		collapsed: true
	-
		id: gallery-snw-display
		title: Hide Strange New World Indicators in Image Gallery
		type: variable-select
		default: none
		options:
			-
				label: Show
				value: inline-block
			-
				label: Hide
				value: none
	-
		id: callout-gallery-gap
		title: Gallery Callout Gap (any unit, no space)
		type: variable-text
		default: 5px
    -
        id: img-max-height
        title: Max Height for Images (any unit, no space)
        type: variable-text
        default: 300px
	-
		id: img-max-width
		title: Max Width for Images (any unit, no space)
		type: variable-text
		default: 350px



	-
		id: gc-float-title
	    title: Image Float / Aside
	    type: heading
	    level: 2
		collapsed: true
	-
	    id: float-left-margin
		title: Margin for Image Float Right (any unit, no space)
		description: Enter in following order - "top right bottom left"
	    type: variable-text
	    default: 4px 12px 4px 0px
	-
	    id: float-right-margin
		title: Margin for Image Float Right (any unit, no space)
		description: Enter in following order - "top right bottom left"
	    type: variable-text
	    default: 4px 0px 4px 12px
	-
		id: float-snw-display
		title: Hide SNW indicator in Image Float / Aside
		type: variable-select
		default: none
		options:
			-
				label: Show
				value: inline-block
			-
				label: Hide
				value: none



	-
		id: gc-list-title
	    title: Image in List Settings
	    type: heading
	    level: 2
		collapsed: true
	-
        id: list-image-control-off
        title: Disable Control for Image in List
		description: Disabling will revert image dimension to Obsidian default behaviour
        type: class-toggle
	-
	    id: img-max-height-list
		title: Max Height for Images (any unit, no space)
	    type: variable-text
	    default: 270px
	-
		id: img-max-width-list
		title: Max Width for Images (any unit, no space)
		type: variable-text
		default: 300px

	-
		id: gc-mermaid-title
		title: Mermaid SVG Settings
		type: heading
		level: 2
		collapsed: true
	-
        id: mermaid-scale-off
        title: Disable scaling for Mermaid diagram
		description: Disabling will revert Mermaid diagram dimension to Obsidian default behaviour
        type: class-toggle
	-
        id: mermaid-zoom
        title: Enable Image Zoom via CSS
        type: class-toggle
*/