MCL Gallery Cards.css

/* === README ===
	Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
	Version 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
	Version 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
	Version 0.9.2 (updated 2023-05-27)
	- fix div width for float image also affecting normal image embed
	Version 0.9.0 (updated 2023-04-01)
	- image float
	- banner background
	- card view for dataview table
	Version 0.8.1 (updated 2022-12-10)
	- fix gallery margin-left for minimal to be more targetted (fix issue with note embed issue)
	- fix issue with Breadcrumbs plugin and minimal-float where the plugin "banner" flushed to left
	Version 0.8.0 (updated 2022-11-28)
	- adjustment for SNW plugin indicators in image gallery. Option to hide (default) or show.
	- fix gap between the images in image gallery (especially the vertical vs horizontal gap)

	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 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 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 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() */
		.image-gallery div.cm-line:has(> .image-embed:not(.cm-callout)):not(.HyperMD-list-line):not(.cm-active) { display: flex; gap: var(--callout-gallery-gap); }
		.image-gallery div.cm-line:has(> .image-embed:not(.cm-callout)):not(.HyperMD-list-line):not(.cm-active) > :is(img,span) { display: none !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%; }

	/* -- 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"] { float: left; margin: var(--float-left-margin); }
	img[alt*="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) {
		top: 20%; left: 0;
		z-index: 100;
		position: fixed;
	}
	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;
		max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
		background: rgba(0,0,0,0.8);
	}


/* === 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: Max Height for Images (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: Max Height for Images (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
*/