import vault
This commit is contained in:
Marcel Arndt
+527
@@ -0,0 +1,527 @@
|
||||
/* === 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
|
||||
*/
|
||||
Reference in New Issue
Block a user