You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
11 KiB
265 lines
11 KiB
2 years ago
|
/* === README ===
|
||
|
|
Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
|
||
|
|
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)
|
||
|
|
Version 0.6.2 (updated 2022-10-22)
|
||
|
|
- rollover main branch to support Obsidian 1.0.0
|
||
|
|
Version 0.5.0 (updated 2022-09-17)
|
||
|
|
- added mermaid scale and zoom feature. FR #19 on GH.
|
||
|
|
version 0.3.1 (2022-06-26)
|
||
|
|
- fix table mis-formatting
|
||
|
|
- completed callout and paragraph-based image gallery
|
||
|
|
- added dimension control for images in lists
|
||
|
|
|
||
|
|
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);}
|
||
|
|
|
||
|
|
img[alt*="right"] {float: right; margin-left: 0.5em; }
|
||
|
|
|
||
|
|
|
||
|
|
/* === 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[data-embed-type="image"] > 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[data-embed-type="image"].el-embed-image.el-p { 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[data-embed-type="image"] > 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 */
|
||
|
|
|
||
|
|
/* Editing View - as alternate to <p> in Reading View since there's no natural container in Editing View using <p> */
|
||
|
|
.image-gallery div:not(.cm-callout):not(.HyperMD-list-line).image-embed img
|
||
|
|
{ max-height: calc(var(--img-max-height)/1.5); display: unset; object-fit: cover; margin-right: var(--callout-gallery-gap); }
|
||
|
|
/* previously i have max-width: 50% */
|
||
|
|
|
||
|
|
/* 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;}
|
||
|
|
|
||
|
|
/* Special Adjustment for Minimal theme. Left margin. Editing Live Preview. */
|
||
|
|
.markdown-source-view.mod-cm6.is-readable-line-width .internal-embed
|
||
|
|
{ margin-left: 0 !important; width: unset;}
|
||
|
|
/* Special Adjustment for Minimal theme. Override width: 100% */
|
||
|
|
.full-width-media .image-gallery .image-embed img:not(.emoji):not([width]) { width: unset; }
|
||
|
|
|
||
|
|
/* 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 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%}
|
||
|
|
.mermaid-zoom .view-content :is(.markdown-preview-view) .mermaid svg { cursor: zoom-in; }
|
||
|
|
|
||
|
|
/* css zoom for mermaid diagram */
|
||
|
|
body.mermaid-zoom:not(.is-mobile) .view-content :is(.cm-edito,.markdown-preview-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);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* === ALPHA VERSION table-card === */
|
||
|
|
/* setting the borders */
|
||
|
|
.table-card table > tbody > tr,
|
||
|
|
.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody tr {border: 1px solid black; border-radius: 0.5em;}
|
||
|
|
.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody td {border-right: unset;}
|
||
|
|
|
||
|
|
:is(.theme-light, .theme-dark) .table-card table,
|
||
|
|
.table-card:is(*,.is-live-preview.is-live-preview) table :is(td,tr) {background-color: unset;}
|
||
|
|
.table-card .dataview.table-view-table.dataview.table-view-table {border: unset;} /* for primary */
|
||
|
|
.table-card table tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0.5em; clear: both;}
|
||
|
|
.table-card table > tbody > tr {display: flex; flex-direction: column; padding-inline: 0.5em;}
|
||
|
|
|
||
|
|
.table-card:is(*,.is-live-preview) table.table-view-table > tbody > tr > td:not(:first-child) {border-top: 1px solid gray; }
|
||
|
|
.table-card table.table-view-table > tbody > tr {margin: unset;}
|
||
|
|
|
||
|
|
/* thead adjustment */
|
||
|
|
/* table > thead {display: flex; } */
|
||
|
|
.table-card table > thead {float: right;}
|
||
|
|
.table-card table.table-view-table > thead > tr {margin: unset;}
|
||
|
|
.table-card table.table-view-table > thead > tr > th {border: unset;}
|
||
|
|
.table-card .dataview.table-view-table.dataview.table-view-table :is(thead, th) {padding-block: unset;}
|
||
|
|
|
||
|
|
|
||
|
|
/* === 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-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
|
||
|
|
*/
|