/* reading mode */
.markdown-preview-view p {
text-align: justify;
text-justify: inter-word;
}
/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-line {
text-align: justify;
text-justify: inter-word;
}
body {
--file-line-width: 700px;
}
/* Center tables on the page */
.markdown-preview-view table {
margin-left: auto;
margin-right: auto;
}
body {
--image-border-color: var(--background-modifier-border);
--image-border-width: 1px;
--image-border-padding: 8px;
--image-border-background: var(--td);
}
/*----Image Positions/Adjustments----*/
body {
--micro: 70px;
--tiny: 100px;
--small: 200px;
--small-med: 300px;
--med-small: 400px;
--medium: 500px;
--med-tall: 600px;
--tall: 700px;
}
.popover.hover-popover {
--micro: 70px;
--tiny: 100px;
--small: 150px;
--small-med: 200px;
--med-small: 250px;
--medium: 300px;
--med-tall: 450px;
--tall: 500px;
}
/*----Mobile----*/
@media (max-width: 500px) {
.theme-dark, .theme-light {
/*Mobile Sizes*/
--radius: 0px;
--micro: 70px;
--tiny: 100px;
--small: 150px;
--small-med: 200px;
--med-small: 250px;
--medium: 300px;
--med-tall: 450px;
--tall: 500px;
}
}
/*-Image Sizing-*/
/*Fit image within bounds WITHOUT stretching*/
img:is([alt*=cover], [alt*=cvr]),
.image-embed:is([src*="#cover"], [src*="#cvr"]),
span.image-embed:is([src*="#cover"], [src*="#cvr"]) img {
object-fit: cover;
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative]):is([alt*=wmicro],
[alt*=wtiny],
[alt*=wsmall],
[alt*=ws-med],
[alt*=wm-sm],
[alt*=wmed],
[alt*=wm-tl],
[alt*=wtall],
[alt*=wfull]) {
width: var(--image-adj-size-w);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative]):is([alt*=hmicro],
[alt*=htiny],
[alt*=hsmall],
[alt*=hs-med],
[alt*=hm-sm],
[alt*=hmed],
[alt*=hm-tl],
[alt*=htall],
[alt*=hfull]) {
height: var(--image-adj-size-h);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hmicro] {
--image-adj-size-h: var(--micro);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=htiny] {
--image-adj-size-h: var(--tiny);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hsmall] {
--image-adj-size-h: var(--small);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hs-med] {
--image-adj-size-h: var(--small-med);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hm-sm] {
--image-adj-size-h: var(--med-small);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hmed] {
--image-adj-size-h: var(--medium);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hm-tl] {
--image-adj-size-h: var(--med-tall);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=htall] {
--image-adj-size-h: var(--tall);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=hfull] {
--image-adj-size-h: 100%;
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wmicro] {
--image-adj-size-w: var(--micro);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wtiny] {
--image-adj-size-w: var(--tiny);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wsmall] {
--image-adj-size-w: var(--small);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=ws-med] {
--image-adj-size-w: var(--small-med);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wm-sm] {
--image-adj-size-w: var(--med-small);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wmed] {
--image-adj-size-w: var(--medium);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wm-tl] {
--image-adj-size-w: var(--med-tall);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wtall] {
--image-adj-size-w: var(--tall);
}
:is(.view-content, .popover) img[alt][alt]:not([alt*=relative])[alt*=wfull] {
--image-adj-size-w: 100%;
}
.image-embed[alt][alt*=relative],
div:not(.image-embed) > img[alt][alt*=relative] {
--micro: 10%;
--tiny: 20%;
--small: 30%;
--small-med: 40%;
--med-small: 50%;
--medium: 60%;
--med-tall: 70%;
--tall: 85%;
}
.image-embed[alt][alt*=relative][alt*=wmicro],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wmicro] {
width: var(--micro);
}
.image-embed[alt][alt*=relative][alt*=wtiny],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wtiny] {
width: var(--tiny);
}
.image-embed[alt][alt*=relative][alt*=wsmall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wsmall] {
width: var(--small);
}
.image-embed[alt][alt*=relative][alt*=ws-med],
div:not(.image-embed) > img[alt][alt*=relative][alt*=ws-med] {
width: var(--small-med);
}
.image-embed[alt][alt*=relative][alt*=wm-sm],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wm-sm] {
width: var(--med-small);
}
.image-embed[alt][alt*=relative][alt*=wmed],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wmed] {
width: var(--medium);
}
.image-embed[alt][alt*=relative][alt*=wm-tl],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wm-tl] {
width: var(--med-tall);
}
.image-embed[alt][alt*=relative][alt*=wtall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=wtall] {
width: var(--tall);
}
.image-embed[alt][alt*=relative][alt*=hmicro],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hmicro] {
width: var(--micro);
}
.image-embed[alt][alt*=relative][alt*=htiny],
div:not(.image-embed) > img[alt][alt*=relative][alt*=htiny] {
width: var(--tiny);
}
.image-embed[alt][alt*=relative][alt*=hsmall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hsmall] {
width: var(--small);
}
.image-embed[alt][alt*=relative][alt*=hs-med],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hs-med] {
width: var(--small-med);
}
.image-embed[alt][alt*=relative][alt*=hm-sm],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hm-sm] {
width: var(--med-small);
}
.image-embed[alt][alt*=relative][alt*=hmed],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hmed] {
width: var(--medium);
}
.image-embed[alt][alt*=relative][alt*=hm-tl],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hm-tl] {
width: var(--med-tall);
}
.image-embed[alt][alt*=relative][alt*=htall],
div:not(.image-embed) > img[alt][alt*=relative][alt*=htall] {
width: var(--tall);
}
.image-embed[alt][alt*=relative][alt*=hfull],
div:not(.image-embed) > img[alt][alt*=relative][alt*=hfull] {
width: 100%;
}
.image-embed[alt][alt*=relative],
div:not(.image-embed) > img[alt][alt*=relative] {
display: block;
margin: auto;
max-height: 100%;
object-fit: cover;
}
/*Height*/
/*Image Locations*/
/*Center Image*/
.img-adj-center.img-adj-center img,
img:is([alt~=ctr], [alt~=center]) {
display: block;
margin-left: auto;
margin-right: auto;
}
.img-adj-center.img-adj-center .is-live-preview img {
margin-left: auto !important;
margin-right: auto !important;
}
/*Left & Right*/
.markdown-rendered img:is([alt~=left], [alt~=locl]), .markdown-rendered img:is([src*="#left"], [src*="#locl"]), .markdown-rendered .image-embed:is([alt~=left], [alt~=locl]), .markdown-rendered .image-embed:is([src*="#left"], [src*="#locl"]) {
float: left;
margin-right: 2%;
margin-top: 0px;
margin-bottom: 0px;
float: inline-start;
}
.markdown-rendered img:is([alt~=right], [alt~=locr]), .markdown-rendered img:is([src*="#right"], [src*="#locr"]), .markdown-rendered .image-embed:is([alt~=right], [alt~=locr]), .markdown-rendered .image-embed:is([src*="#right"], [src*="#locr"]) {
float: right;
margin-left: 2%;
margin-bottom: 0px;
float: inline-end;
}
/*--Image Position--*/
img[alt*="p+"], .image-embed[src*="#p+"] img {
object-fit: cover;
}
/*Inner Image*/
img[alt*="p+c"], .image-embed[src*="#p+c"] img {
object-position: center;
}
img[alt*="p+t"], .image-embed[src*="#p+t"] img {
object-position: top;
}
img[alt*="p+b"], .image-embed[src*="#p+b"] img {
object-position: bottom;
}
img[alt*="p+l"], .image-embed[src*="#p+l"] img {
object-position: left;
}
img[alt*="p+r"], .image-embed[src*="#p+r"] img {
object-position: right;
}
img[alt*="p+cl"], .image-embed[src*="#p+cl"] img {
object-position: 15%;
}
img[alt*="p+ccl"], .image-embed[src*="#p+ccl"] img {
object-position: 25%;
}
img[alt*="p+cr"], .image-embed[src*="#p+cr"] img {
object-position: 60%;
}
img[alt*="p+ccr"], .image-embed[src*="#p+ccr"] img {
object-position: 75%;
}
img[alt*="p+tc"], .image-embed[src*="#p+tc"] img {
object-position: 50% 10%;
}
img[alt*="p+tcc"], .image-embed[src*="#p+tcc"] img {
object-position: 50% 20%;
}
img[alt*="p+cct"], .image-embed[src*="#p+cct"] img {
object-position: 50% 30%;
}
img[alt*="p+ct"], .image-embed[src*="#p+ct"] img {
object-position: 50% 40%;
}
img[alt*="p+cb"], .image-embed[src*="#p+cb"] img {
object-position: 50% 60%;
}
img[alt*="p+ccb"], .image-embed[src*="#p+ccb"] img {
object-position: 50% 70%;
}
img[alt*="p+bc"], .image-embed[src*="#p+bc"] img {
object-position: 50% 80%;
}
img[alt*="p+bcc"], .image-embed[src*="#p+bcc"] img {
object-position: 50% 90%;
}
/*Invert Colors*/
.theme-dark img[alt*=invertb], .theme-dark .image-embed[src*="#invertb"] {
filter: invert(1) hue-rotate(180deg);
}
.theme-dark img[alt*=invertbc],
.theme-dark .image-embed[src*="#invertbc"] {
filter: invert(1) hue-rotate(180deg) contrast(1.5);
}
.theme-light img[alt*=invertw], .theme-light .image-embed[src*="#invertw"] {
filter: invert(1) hue-rotate(180deg);
}
.theme-light img[alt*=invertwc], .theme-light .image-embed[src*="#invertwc"] {
filter: invert(1) hue-rotate(180deg) contrast(1.45);
}
img:is([alt*=flip-x],
[alt*=flip-horizontal]) {
transform: scale(-1, 1);
}
img:is([alt*=flip-y],
[alt*=flip-vertical]) {
transform: scale(1, -1);
}
img:is([alt*=flip-xy],
[alt*=flip-vertical-horizontal]) {
transform: scale(-1, -1);
}
/*Fit image within bounds WITHOUT stretching*/
img[alt*=cover],
img:is([alt*=cover], [alt*=cvr]),
.image-embed:is([src*="#cover"], [src*="#cvr"]),
span.image-embed:is([src*="#cover"], [src*="#cvr"]) img {
object-fit: cover;
}
/*Fix Float Issues*/
:is(img, .image-embed)[alt*=clear],
.image-embed[src*="#clear"] {
clear: both;
}
img[alt*=unclr],
.image-embed[src*="#unclr"] {
clear: none !important;
}
img:is([alt~=lp], [alt~=live-preview]):is([alt*=right], [alt*=locr]),
.image-embed:is([alt~=lp], [alt~=live-preview]):is([alt*=right], [alt*=locr]) {
float: right !important;
}
img:is([alt~=lp], [alt~=live-preview]):is([alt*=left], [alt*=locl]),
.image-embed:is([alt~=lp], [alt~=live-preview]):is([alt*=left], [alt*=locl]) {
float: left !important;
}
.clear-hr {
--hr-width: 100%;
}
.clear-headings :is(h1, h2, h3, h4, h5, h6),
.clear-heading-1 h1,
.clear-heading-2 h2,
.clear-heading-3 h3,
.clear-heading-4 h4,
.clear-heading-5 h5,
.clear-heading-6 h6 {
clear: both;
}
/*Banners*/
img[alt*=banner]:not([width]),
.image-embed[alt*=banner]:not([width]) img {
display: block;
object-fit: cover;
width: 100%;
margin-bottom: 0px;
clear: both;
}
img[alt~=banner],
.image-embed[alt~=banner] img,
.image-embed[src*="#banner"] {
height: var(--small);
}
img[alt~="banner+small"],
.image-embed[alt~="banner+small"] img,
.image-embed[src*="#banner+small"] {
height: var(--tiny);
}
img[alt~="banner+tall"],
.image-embed[alt~="banner+tall"] img,
.image-embed[src*="#banner+tall"] {
height: var(--medium);
}
:is(img, .internal-embed)[alt*=sban],
:is(img, .internal-embed)[alt~=sban],
.internal-embed[src*="#sban"] img {
object-fit: cover;
width: 100%;
}
/*Portait*/
img[alt*=portrait],
.image-embed[alt*=portrait] img {
object-fit: cover;
}
.image-embed[src~="#portrait"] {
height: var(--small-med);
width: 40%;
}
.image-embed[src~="#portrait+small"] {
height: var(--small);
width: 25%;
}
.image-embed[src~="#portrait+tall"] {
height: 500px;
width: 50%;
}
img:is([alt~=portrait],
[alt*="portrait+"]),
.image-embed:is([alt~=portrait],
[alt*="portrait+"]) img {
--img-adj-portrait-size: var(--med-small);
height: var(--img-adj-portrait-size);
width: calc(var(--img-adj-portrait-size) / 1.7);
}
img[alt~="portrait+small"],
.image-embed[alt~="portrait+small"] img {
--img-adj-portrait-size: var(--small-med);
}
img[alt~="portrait+tall"],
.image-embed[alt~="portrait+tall"] img {
--img-adj-portrait-size: var(--medium);
}
/*Profile*/
img[alt*=profile],
.image-embed[alt*=profile] img {
object-fit: cover;
border-radius: 50%;
}
img[alt~=profile],
.image-embed[alt~=profile] img,
.image-embed[src*="#profile"] {
height: var(--tiny);
width: var(--tiny);
}
img[alt~="profile+medium"],
.image-embed[alt~="profile+medium"] img,
.image-embed[src*="#profile+medium"] {
height: var(--small);
width: var(--small);
}
img[alt~="profile+tall"],
.image-embed[alt~="profile+tall"] img,
.image-embed[src*="#profile+tall"] {
height: var(--medium);
width: var(--medium);
}
img[alt~=sprf] {
object-fit: cover;
border-radius: 100%;
}
/*Image Shapes*/
img[alt][alt*=circle] {
border-radius: 50%;
}
img[alt~=square],
.image-embed[alt~=square] img {
border-radius: 0;
}
img[alt~=border],
.internal-embed[alt~=border] img {
border: var(--image-border-width) solid var(--image-border-color);
padding: var(--image-border-padding);
background: var(--image-border-background);
}
.image-captions .image-embed::after,
.image-embed[src*="#cap"]::after {
content: attr(alt);
color: var(--inactive, var(--faint-text));
display: block;
text-align: center;
}
.image-embed[src*="#cap"] {
display: inline-block;
}
.image-embed[src*="#cap"] img {
float: unset !important;
object-fit: cover;
}
.image-embed[src*="#cap"][src*="#hmicro"] img {
height: var(--micro);
}
.image-embed[src*="#cap"][src*="#htiny"] img {
height: var(--tiny);
}
.image-embed[src*="#cap"][src*="#hsmall"] img {
height: var(--small);
}
.image-embed[src*="#cap"][src*="#hs-med"] img {
height: var(--small-med);
}
.image-embed[src*="#cap"][src*="#hm-sm"] img {
height: var(--med-small);
}
.image-embed[src*="#cap"][src*="#hmed"] img {
height: var(--medium);
}
.image-embed[src*="#cap"][src*="#hm-tl"] img {
height: var(--med-tall);
}
.image-embed[src*="#cap"][src*="#htall"] img {
height: var(--tall);
}
.image-embed[src*="#cap"][src*="#hfull"] img {
height: 100%;
}
.image-embed[src*="#cap"][src*="#wmicro"], .image-embed[src*="#cap"][src*="#wmicro"] img {
width: var(--micro);
}
.image-embed[src*="#cap"][src*="#wtiny"], .image-embed[src*="#cap"][src*="#wtiny"] img {
width: var(--tiny);
}
.image-embed[src*="#cap"][src*="#wsmall"], .image-embed[src*="#cap"][src*="#wsmall"] img {
width: var(--small);
}
.image-embed[src*="#cap"][src*="#ws-med"], .image-embed[src*="#cap"][src*="#ws-med"] img {
width: var(--small-med);
}
.image-embed[src*="#cap"][src*="#wm-sm"], .image-embed[src*="#cap"][src*="#wm-sm"] img {
width: var(--med-small);
}
.image-embed[src*="#cap"][src*="#wmed"], .image-embed[src*="#cap"][src*="#wmed"] img {
width: var(--medium);
}
.image-embed[src*="#cap"][src*="#wm-tl"], .image-embed[src*="#cap"][src*="#wm-tl"] img {
width: var(--med-tall);
}
.image-embed[src*="#cap"][src*="#wtall"], .image-embed[src*="#cap"][src*="#wtall"] img {
width: var(--tall);
}
.image-embed[src*="#cap"][src*="#wfull"], .image-embed[src*="#cap"][src*="#wfull"] img {
width: 100%;
}
.mobile-image-viewer img[alt][alt][alt] {
height: 100%;
width: 100%;
object-fit: contain;
}
/*@settings
name: Image Adjustments
id: image-adjustments
settings:
-
id: info-text-SlRvb-img-adj
type: info-text
title: Image Adjustments by SlRvb
description: "[Image Adjustments Snippet How-To Guide](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments)"
markdown: true
-
title: List Overlap Fix
description: Fix list bullets overlapping with images
id: img-adj-list
type: class-toggle
default: true
-
title: Clear Images
description: Push image under/over headings or horizontal lines
id: img-adj-clears
type: heading
level: 1
collapsed: true
-
title: Horizontal Lines
description: Push image under/over any horizontal lines
id: clear-hr
type: class-toggle
-
title: Headings
description: Push image under/over all headings 1-6
id: clear-headings
type: class-toggle
-
title: Heading Specific
description: Push image under/over some headings and not others
id: img-adj-clears-headings
type: heading
level: 2
collapsed: true
-
title: Header 1
id: clear-heading-1
type: class-toggle
-
title: Header 2
id: clear-heading-2
type: class-toggle
-
title: Header 3
id: clear-heading-3
type: class-toggle
-
title: Header 4
id: clear-heading-4
type: class-toggle
-
title: Header 5
id: clear-heading-5
type: class-toggle
-
title: Header 6
id: clear-heading-6
type: class-toggle
*/
/*Theme fixes*/
.img-adj-list :is(ul, ol) {
display: flow-root;
}
.indent {.el-p, .cm-line:not(.HyperMD-header):not(.HyperMD-list-line) { text-indent: 20px; }}
/* === README for MCL Wide Views snippet / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
Ver 0.9.6 (updated 2023-09-09) - Code refactor to make use predefined variables and more efficient code base
- refactor all wide views features. require Obsidian installer v1.1.9.
- fixed all issues from previous codebase
Version 0.9.4 (updated 2023-07-05)
- fixed wide-backlinks not working since Obsidian V1
- improved support for Minimal V7
What is this snippet for?
- for any users to use with any theme to complement any missing page/block width control
- available cssClass:
- wide-page
- wide-table
- wide-dataview
- wide-callout
- wide-backlinks
- narrow-page
- style settings toggle
- is-adj-rll with adj-rll-max-width input
Important Notice
- this snippet requires Obsidian installer version (not app version) of 1.1.9 or higher as it requires Electron v21
Credits
- Kevin Powell Youtube channel
*/
/* === Wide Page === */
/* -- Main Code - EV & RV -- */
body .wide-page { --file-line-width: 100%; }
/* -- Special adjustment for Community Themes */
/* Minimal */
body[class*="minimal-tab-title"] .wide-page {
--line-width: 100%;
--max-width: 95%;
--container-table-width: var(--line-width);
--container-table-max-width: var(--max-width);
}
/* AnuPpuccin */
/* body .wide-page { --anp-preview-width-pct: 100%; } */
/* === Adjustable RLL === */
/* cssClass toggle to allow users to adjust the RLL via Style Settings.
Obsidian v1.0.0 makes it easier to do adjustable RLL ;) */
/* -- Main Code - Editing and Reading View -- */
body.is-adj-rll .view-content { --file-line-width: var(--adj-rll-max-width); }
/* === Narrow Page === */
/* cssClass YAML to allow users with disabled RLL to introduce RLL per
page/note basis. width is following obsidian default setting, or you
can change it via MCL's Adjustable RLL */
/* -- Main Code - Editing and Reading View -- */
.narrow-page.markdown-source-view .cm-sizer,
.narrow-page.markdown-preview-view .markdown-preview-sizer {
max-width: var(--file-line-width);
margin-inline: auto;
}
/* === General Setups for Wide Blocks === */
/* -- Setup for @container -- */
:is(.wide-table-global, .wide-dataview-global, .wide-callout-global, .wide-backlinks-global) .markdown-source-view.is-readable-line-width,
:is(.wide-table-global, .wide-dataview-global, .wide-callout-global, .wide-backlinks-global) .markdown-preview-view.is-readable-line-width,
:is(.wide-table, .wide-dataview, .wide-callout, .wide-backlinks).markdown-source-view.is-readable-line-width,
:is(.wide-table, .wide-dataview, .wide-callout, .wide-backlinks).markdown-preview-view.is-readable-line-width {
container-name: content-view;
container-type: inline-size;
}
/* === Wide Blocks - Wide Table === */
/* -- Mai.n Code - EV & RV -- */
body {
--wide-tbl-left-ev-adj: -4rem;
--wide-tbl-min-left-ev: 0.4rem;
--wide-tbl-width-ev: calc( var(--file-line-width) - var(--wide-tbl-left-ev-adj) );
}
body:has(.cm-gutters) {
--wide-tbl-left-ev-adj: 1rem;
--wide-tbl-min-left-ev: 6rem;
}
@container content-view (width > 50px) {
/* editing view */
:is(.wide-table-global, .wide-table) .cm-embed-block.cm-table-widget {
width: calc(100cqi - 4rem);
margin-left: calc( max( 100cqi - var(--wide-tbl-width-ev), var(--wide-tbl-min-left-ev) ) / 2 * -1 ) !important;
}
/* reading view */
:is(.wide-table-global .markdown-preview-view, .wide-table.markdown-preview-view) div:has(> table) {
width: 100cqi;
margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important;
}
/* centering the table a bit */
:is(.wide-table-global, .wide-table) .cm-embed-block.cm-table-widget table,
:is(.wide-table-global .markdown-preview-view, .wide-table.markdown-preview-view) div > table
{ margin-inline: auto; }
}
/* -- Special adjustment for Community Themes */
/* Minimal, complete re-write for the theme due to many !important used by the theme */
body[class*="minimal-tab-title"] {
--wide-tbl-left-adj: -4rem;
--wide-tbl-width-adj: 2rem;
}
body[class*="minimal-tab-title"]:has(.cm-gutters) {
--wide-tbl-left-adj: -4rem;
--wide-tbl-width-adj: 0rem;
}
body[class*="minimal-tab-title"]:has(.cm-gutters).minimal-theme {
--wide-tbl-left-adj: 0rem;
}
@container content-view (width > 50px) {
body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget,
body[class*="minimal-tab-title"] .wide-table.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget {
width: calc(100cqi - 4rem) !important;
max-width: 100%;
margin-left: calc( var(--wide-tbl-left-adj) / 2 * -1 ) !important;
}
body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-preview-view .markdown-preview-sizer div:has(> table),
body[class*="minimal-tab-title"] .wide-table.markdown-preview-view .markdown-preview-sizer div:has(> table) {
width: calc(100cqi - 2rem - var(--wide-tbl-width-adj) ) !important;
max-width: 100%;
margin-left: calc( var(--wide-tbl-left-adj) / 2 * -1 ) !important;
}
/* centering the table a bit */
body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget table,
body[class*="minimal-tab-title"] .wide-table.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-embed-block.cm-table-widget table,
body[class*="minimal-tab-title"][class*="wide-table-global"] .markdown-preview-view .markdown-preview-sizer div > table,
body[class*="minimal-tab-title"] .wide-table.markdown-preview-view .markdown-preview-sizer div > table
{ margin-inline: auto; }
}
/* Catppuccin */
body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-tbl-left-ev-adj: -8rem; }
/* === Wide Blocks - Wide Dataview === */
/* there are options to enable it (a) per page basis and (b) globally
however, editing view is a hackaround */
/* -- Main Code - EV & RV -- */
body {
--wide-dv-left-ev-adj: -4rem;
--wide-dv-min-left-ev: 0.5rem;
--wide-dv-width-ev: calc( var(--file-line-width) - var(--wide-dv-left-ev-adj) );
}
body:has(.cm-gutters) {
--wide-dv-left-ev-adj: 1.7rem;
--wide-dv-min-left-ev: 6.5rem;
}
@container content-view (width > 50px) {
:is(.wide-dataview-global, .wide-dataview) .cm-preview-code-block:has(> .block-language-dataview),
:is(.wide-dataview-global, .wide-dataview) .cm-preview-code-block:has(> .block-language-dataviewjs) {
width: calc(100cqi - 4rem );
margin-left: calc( max( 100cqi - var(--wide-dv-width-ev), var(--wide-dv-min-left-ev) ) / 2 * -1 ) !important;
}
:is(.wide-dataview-global, .wide-dataview) div:has(> .block-language-dataview),
:is(.wide-dataview-global, .wide-dataview) div:has(> .block-language-dataviewjs) {
width: 100cqi;
margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important;
}
}
/* -- Special adjustment for Community Themes */
/* Minimal, complete re-write for the theme */
body[class*="minimal-tab-title"] {
--wide-dv-width-adj: 2rem;
}
body[class*="minimal-tab-title"]:has(.cm-gutters) {
--wide-dv-left-ev-adj: -4rem;
--wide-dv-width-adj: 0rem;
}
body[class*="minimal-tab-title"]:has(.cm-gutters).minimal-theme {
--wide-dv-left-ev-adj: 0rem;
}
@container content-view (width > 50px) {
body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataview),
body[class*="minimal-tab-title"] .wide-dataview.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataview),
body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataviewjs),
body[class*="minimal-tab-title"] .wide-dataview.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-preview-code-block:has(> .block-language-dataviewjs) {
width: calc(100cqi - 4rem);
max-width: 100%;
margin-left: calc( var(--wide-dv-left-ev-adj) / 2 * -1 ) !important;
}
body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-preview-view div:has(> .block-language-dataview),
body[class*="minimal-tab-title"] .wide-dataview.markdown-preview-view div:has(> .block-language-dataview),
body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-preview-view div:has(> .block-language-dataviewjs),
body[class*="minimal-tab-title"] .wide-dataview.markdown-preview-view div:has(> .block-language-dataviewjs) {
width: calc(100cqi - 2rem - var(--wide-dv-width-adj) );
max-width: 100%;
margin-left: calc( var(--wide-dv-left-ev-adj) / 2 * -1 ) !important;
}
/* centering the table a bit */
body[class*="minimal-tab-title"][class*="wide-dataview-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content table,
body[class*="minimal-tab-title"] .wide-dataview.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content table,
body[class*="minimal-tab-title"] .wide-dataview.markdown-preview-view .markdown-preview-sizer div > table {
width: calc( 100% );
}
}
/* Catppuccin */
body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-dv-left-ev-adj: -8rem; }
/* === Wide Blocks - Wide Callout === */
/* there are options to enable it (a) per page basis and (b) globally
however, editing view is a hackaround
!important needed because app's default uses it `.markdown-source-view.mod-cm6 .cm-content > *` */
/* -- Main Code - EV & RV -- */
body {
--wide-co-left-ev-adj: -3.8rem;
--wide-co-min-left-ev: 0.5rem;
--wide-co-width-ev-adj: 4rem;
--wide-co-width-ev: calc(var(--file-line-width) - var(--wide-co-left-ev-adj) );
}
body:has(.cm-gutters) {
--wide-co-left-ev-adj: 1.7rem;
--wide-co-min-left-ev: 6.5rem;
}
@container content-view (width > 50px) {
:is(.wide-callout-global, .wide-callout) .cm-embed-block.cm-callout {
width: calc( 100cqi - var(--wide-co-width-ev-adj) );
margin-left: calc( max( 100cqi - var(--wide-co-width-ev), var(--wide-co-min-left-ev) ) / 2 * -1 ) !important;
}
:is(.wide-callout-global, .wide-callout) .markdown-preview-sizer > div:has(> .callout) {
width: 100cqi;
margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important;
}
}
/* -- Special adjustment for Community Themes */
/* Minimal, complete re-write for the theme */
body[class*="minimal-tab-title"] { --folding-toggle: 1; }
body.minimal-theme { --folding-toggle: 0; }
body.minimal-theme:not(:has(.cm-gutters)) { --folding-toggle: 1; }
@container content-view (width > 50px) {
body[class*="minimal-tab-title"][class*="wide-callout-global"] .markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-embed-block.cm-callout,
body[class*="minimal-tab-title"] .wide-callout.markdown-source-view .cm-contentContainer.cm-contentContainer .cm-content .cm-embed-block.cm-callout {
width: calc(100cqi - 4rem);
max-width: 100%;
margin-left: calc( var(--folding-offset) * var(--folding-toggle) ) !important;
}
body[class*="minimal-tab-title"][class*="wide-callout-global"] .markdown-preview-view .markdown-preview-sizer > div:has(> .callout),
body[class*="minimal-tab-title"] .wide-callout.markdown-preview-view .markdown-preview-sizer > div:has(> .callout) {
width: calc(100cqi - 2rem - 2rem * var(--folding-toggle) );
max-width: calc(100% - 0rem);
margin-left: calc( var(--folding-offset) * var(--folding-toggle) ) !important;
}
}
/* AnuPpuccin */
body[class*="anp-"] { --wide-co-width-ev-adj: 3.5rem; }
/* Catppuccin */
body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-co-left-ev-adj: -7.8rem; }
/* === Wide Blocks - Wide Backlinks === */
/* -- Main Code - EV & RV -- */
body {
--wide-bl-left-ev-adj: 4rem;
--wide-bl-width-ev: calc(var(--file-line-width) + var(--wide-bl-left-ev-adj) );
}
@container content-view (width > 50px) {
:is(.wide-backlinks-global .markdown-source-view, .wide-backlinks.markdown-source-view) .embedded-backlinks {
width: calc(100cqi - 3.5rem);
margin-left: calc( max( 100cqi - var(--wide-bl-width-ev), 1rem ) / 2 * -1 );
}
:is(.wide-backlinks-global .markdown-preview-view, .wide-backlinks.markdown-preview-view) .embedded-backlinks {
width: calc(100cqi - 0rem);
margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 );
}
}
/* -- Special adjustment for Community Themes */
/* Minimal, complete re-write for the theme */
body[class*="minimal-tab-title"] {
--wide-bl-width-adj: 4rem;
}
body[class*="minimal-tab-title"]:has(.cm-gutters) {
--wide-bl-width-adj: 0rem;
}
@container content-view (width > 50px) {
body[class*="minimal-tab-title"][class*="wide-backlinks-global"] .markdown-source-view .cm-sizer .embedded-backlinks,
body[class*="minimal-tab-title"] .wide-backlinks.markdown-source-view .cm-sizer .embedded-backlinks {
width: calc(100cqi - 4.5rem);
max-width: unset;
margin-left: calc( var(--wide-bl-width-adj) / 2 * 1 ) !important;
}
body[class*="minimal-tab-title"][class*="wide-backlinks-global"] .markdown-preview-view .embedded-backlinks,
body[class*="minimal-tab-title"] .wide-backlinks.markdown-preview-view .embedded-backlinks {
width: calc( 100cqi - 2rem - var(--wide-bl-width-adj)/2 );
margin-left: calc( max( 100cqi - var(--line-width) - var(--wide-bl-width-adj) , 4rem ) / 2 * -1 ) !important;
}
}
/* Catppuccin */
body[class*="ctp-"].is-adj-rll:not([class*="anp-default"]) { --wide-bl-left-ev-adj: 13.5rem; }
/* @settings
name: Modular CSS Layout - Wide Views
id: modular-css-layout-wv
settings:
-
id: adj-rll-title
title: Adjustable RLL Settings
description: Control max-width for all page/note by default. RLL must be **enabled**
type: heading
level: 2
collapsed: true
-
id: is-adj-rll
title: Enable Adjustable RLL
description: Add is-adj-rll class to the body element
type: class-toggle
-
id: adj-rll-max-width
title: Max Width for Normal Width page
description: Can use any unit e.g. px, em, ch
type: variable-text
default: 700px
-
id: wide-view-title
title: Vault-wide toggle for Wide Blocks
description: For wide -table/-dataview/-callout/-backlinks. RLL must be **enabled**
type: heading
level: 2
collapsed: true
-
id: wide-dataview-global
title: Enable `wide-dataview` vault-wide
description: use `wide-dataview` in yaml to enable only for selected note/page
type: class-toggle
-
id: wide-table-global
title: Enable `wide-table` vault-wide
description: use `wide-table` in yaml to enable only for selected note/page
type: class-toggle
-
id: wide-callout-global
title: Enable `wide-callout` vault-wide
description: use `wide-callout` in yaml to enable only for selected note/page
type: class-toggle
-
id: wide-backlinks-global
title: Enable `wide-backlinks` vault-wide
description: use `wide-backlinks` in yaml to enable only for selected note/page
type: class-toggle
-
id: narrow-view-title
title: Narrow Page Settings
description: Control max-width page/note with cssClass `narrow-page`. RLL must be **disabled**
type: heading
level: 2
collapsed: true
-
id: narrow-max-width
title: Max Width for Narrow View page (any unit e.g. px, em, ch)
type: variable-text
default: 750px
*/
/*----------------------*\
*! Gradient Headers !*
\*----------------------*/
/** Colors **/
:root .theme-light {
--h1-color: #262626;
--h1-gradient: var(--h1-color), #525252, #808080;
--h2-color: #1B5D88;
--h2-gradient: var(--h2-color), #156599, #0E6EAD;
--h3-color: #0670B8;
--h3-gradient: var(--h4-color), #156599, #0A7AC4;
--h4-color: #0670b8;
--h4-gradient: var(--h4-color), #388dc6, #519bcd;
--h5-color: #1e88e5;
--h5-gradient: var(--h5-color), #03a9f4, #26c6da;
--h6-color: #8e24aa;
--h6-gradient: var(--h6-color), #9c27b0, #9575cd;
}
:root .theme-dark {
--h1-color: #D2D2D2;
--h1-gradient: var(--h1-color), #E8E8E8, #FFFFFF;
--h2-color: #D47F00;
--h2-gradient: var(--h2-color), #FFAE00, #FFAE00;
--h3-color: #F09000;
--h3-gradient: var(--h3-color), #FFAE00, #FFBD2E;
--h4-color: #FFAE00;
--h4-gradient: var(--h4-color), #FFBD2E, #FFBD2E;
--h5-color: #90caf9;
--h5-gradient: var(--h5-color), #80deea, #80cbc4;
--h6-color: #ce93d8;
--h6-gradient: var(--h6-color), #b39ddb, #f8bbd0;
}
/** Gradient Headers **/
/* Fix formatting symbol colors */
.cm-formatting-header {
color: inherit;
}
/* Add text-clipped background gradients */
.cm-header:not(.cm-formatting),
:is(h1, h2, h3, h4, h5, h6) {
background: linear-gradient(0deg, var(--gradient-header));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: fit-content;
}
/* Apply the gradient variables */
.cm-header-1,
h1 {
--gradient-header: var(--h1-gradient);
}
.cm-header-2,
h2 {
--gradient-header: var(--h2-gradient);
}
.cm-header-3,
h3 {
--gradient-header: var(--h3-gradient);
}
.cm-header-4,
h4 {
--gradient-header: var(--h4-gradient);
}
.cm-header-5,
h5 {
--gradient-header: var(--h5-gradient);
}
.cm-header-6,
h6 {
--gradient-header: var(--h6-gradient);
}
/* change header font in editing view */
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
font-family: GaramondNo2DCDReg !important;
}
/* change header font in reading view */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
font-family: GaramondNo2DCDReg !important;
}
/* shorten the gap between header and text */
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
margin-block-end: 0.2em; /* default is 1em */
margin-block-start: 0.3em; /* default is 1em */
}
.mod-cm6 .cm-editor .HyperMD-header, .markdown-reading-view .markdown-preview-section :is(h1,h2,h3,h4,h5,h6) {
line-height: 1.8em !important;
margin: 0px 0px 5px 0px !important;
}
.el-p p{
margin: 0px 0px 10px 0px !important;
}
.markdown-rendered p {
margin-bottom: 0px;
}
/* for bullet and numbered lists */
ul.has-list-bullet {
margin-top: 0px;
}
ol {
margin-top: 0px;
}
/* for blockquotes */
blockquote {
margin-top: 0px;
}
/* Header Sizes */
body {
--h1-size: 32px;
--h2-size: 26px;
--h3-size: 21px;
--h4-size: 18px;
}
/* Smaller
padding */
.markdown-preview-view hr {
margin-top: 20px;
margin-bottom: 20px;
}
/* Gradient background css-class */
.theme-dark .blue {
background-image: linear-gradient(rgba(54, 63, 71), rgba(9, 23, 46));
}
.theme-dark .blight {
background-image: linear-gradient(rgba(45, 48, 43), rgba(15, 25, 13));
}
/* Actual dynamic accent */
.theme-dark {
--accent-h: 41!important;
--accent-s: 100%!important;
--accent-l: 45%!important;
}
.theme-light {
--accent-h: 210!important;
--accent-s: 100%!important;
--accent-l: 30%!important;
}
.red {
background-color: #FFE2DF;
}
/* Dynamic text-muted colour for Colorez specifically */
.theme-dark {
--color-gray: #6e6e6e;
}
.theme-light {
--color-gray: #bfbfbf;
}
/* === README ===
Snippet: MCL Multi Column / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
Ver 0.9.11 (draft 2024-09-01)
- introduce fw dw and pw
- added left-right margin for Float Callout
- refactor List Column code to improve performance
Ver 0.9.10 (updated 2024-06-26)
- fix issues #81 and #89
Ver 0.9.9 (updated 2024-01-25)
- code cleanup (including -small -medium -large)
- improve css performance on float but require cssclass use again
Ver 0.9.8 (updated 2023-11-03)
- fixes on sub-callout becomes flexible height (and introduce option for such)
Ver 0.9.7 (updated 2023-10-13)
- GH FR issue #41, #42 and fixed GH issue #35. MC Callout now supports sub-blockquote and sub-paragraph
- GH FR issue #43. MC Callout now supports Multi Column within Multi Column
Ver 0.9.5 (updated 2023-07-30)
- fixes on minimal float affecting Minimal own wide table feature
- fixes on properties padding affecting Minimal
Ver 0.9.4 (updated 2023-07-06)
- improved MC Callout compatibility with Minimal theme V7.0
- improved MC Callout compatibility with Blue Topaz
Ver 0.9.3 (updated 2023-06-24)
- add support for List Column for li that's also a header
- fixes on column ruler to apply properly only for List Column on first ul only
- fixes on Float Callout in LP not floating due to additional div layer
Ver 0.9.2 (updated 2023-05-27)
- fix MC List Card mistakenly affect non List Card bullet list padding in same note
- fix obsidian default bullet "draw" not rendered properly in List Column (for the ones using tag and contextual typography plugin)
Ver 0.9.1 (updated 2023-04-06)
- fix MC "fixed center" option not properly coded
- fix MC List Grid previous not support sublist
- fix MC List Column margin top for first column
- fix MC List Grid for first bullet header
Ver 0.9.0 (updated 2023-04-01)
- MC - add option to hide SNW block ref for images in MC Callout
- MC - added wide option for List Grid/Card
- MC - added option to adjust float callout top margin
- MC - added fixed width option
- fix support minimal Callout style Outlined
- List Column/Grid/Card fully support :has()
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
- trainbuffer for numerous help and assisted css snippets
*/
body{
/* 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;
--list-grid-wide-min-width: 350px;
}
.theme-dark {
/* --background-mcl-card: hsl(300, 5%, 15%); */
}
.theme-light {
/* --background-mcl-card: hsl(300, 5%, 90%); */
}
/* === General === */
/* -- Fixed Width definition -- */
/* quadruple the last .callout to win specificity with main multi-column callout */
div[data-callout-metadata*="fw"].callout.callout.callout { flex-grow: 0; flex-shrink: 0;}
div[data-callout-metadata*="fw1"].callout.callout.callout.callout { flex-basis: 100px; width: 100px; }
div[data-callout-metadata*="fw2"].callout.callout.callout.callout { flex-basis: 200px; width: 200px; }
div[data-callout-metadata*="fw3"].callout.callout.callout.callout { flex-basis: 300px; width: 300px; }
div[data-callout-metadata*="fw4"].callout.callout.callout.callout { flex-basis: 400px; width: 400px; }
div[data-callout-metadata*="fw5"].callout.callout.callout.callout { flex-basis: 500px; width: 500px; }
div[data-callout-metadata*="fw6"].callout.callout.callout.callout { flex-basis: 600px; width: 600px; }
div[data-callout-metadata*="fw7"].callout.callout.callout.callout { flex-basis: 700px; width: 700px; }
div[data-callout-metadata*="fw8"].callout.callout.callout.callout { flex-basis: 800px; width: 800px; }
div[data-callout-metadata*="fw9"].callout.callout.callout.callout { flex-basis: 900px; width: 900px; }
div[data-callout-metadata*="pw1"].callout.callout.callout.callout { flex-basis: 10%; width: 10%; }
div[data-callout-metadata*="pw2"].callout.callout.callout.callout { flex-basis: 18%; width: 18%; }
div[data-callout-metadata*="pw3"].callout.callout.callout.callout { flex-basis: 28%; width: 28%; }
div[data-callout-metadata*="pw4"].callout.callout.callout.callout { flex-basis: 38%; width: 38%; }
div[data-callout-metadata*="pw5"].callout.callout.callout.callout { flex-basis: 48%; width: 48%; }
div[data-callout-metadata*="pw6"].callout.callout.callout.callout { flex-basis: 58%; width: 58%; }
div[data-callout-metadata*="pw7"].callout.callout.callout.callout { flex-basis: 68%; width: 68%; }
div[data-callout-metadata*="pw8"].callout.callout.callout.callout { flex-basis: 78%; width: 78%; }
div[data-callout-metadata*="pw9"].callout.callout.callout.callout { flex-basis: 88%; width: 88%; }
/* 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*="mw0"].callout.callout { flex-basis: 0; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw1"].callout { flex: 1 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw2"].callout { flex: 2 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw3"].callout { flex: 3 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw4"].callout { flex: 4 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw5"].callout { flex: 5 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw6"].callout { flex: 6 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw7"].callout { flex: 7 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw8"].callout { flex: 8 0 auto; }
div[data-callout="multi-column"].callout > .callout-content > div[data-callout-metadata*="dw9"].callout { flex: 9 0 auto; }
/* === Multi Column Callout (MCC) === */
/* some issues still persists
(2) some theme uses transparency to affect .callout-title */
/* common MCC variables */
body {
--mcc-img-snw-display: none;
--callout-min-width: 200px;
--callout-nowrap-min-width: 250px;
--callout-gap: 0em;
--callout-margin: 0px;
--border-radius: 0px
}
[data-callout="multi-column"].callout {
--callout-blend-mode: normal;
}
/* -- Main MCC Code -- */
/* 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:not([data-callout="multi-column"]) { display: flex; flex-direction: column; }
div[data-callout="multi-column"].callout:not(.is-collapsed) .callout { margin-inline: var(--callout-margin); margin-block: 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,blockquote,p) { 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 */
div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed { box-shadow: unset; height: min-content;}
}
/* -- MCC Variant - Flexible Height for Subcallout / Children -- */
/* also useful if one wants to have non callout children like table and don't want to fill the height */
div[data-callout="multi-column"].callout {}
div[data-callout="multi-column"][data-callout-metadata*="flex-h"].callout { align-items: flex-start; }
/* -- MCC Variation - Fixed Columns -- */
div[data-callout="multi-column"][data-callout-metadata*="col3"]:not([data-callout-metadata*="icons"]).callout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* -- MCC Variation - Icons -- */
/* Main code */
div[data-callout="multi-column"][data-callout-metadata*="icons"] {
&.callout { justify-content: center; }
&.callout .callout { display: flex; flex-direction: row; flex-wrap: wrap; }
&.callout.callout .callout-content > p { flex-grow: 1; text-align: center; }
/* Options for number of columns */
&[data-callout-metadata*="col2"].callout.callout .callout-content > p { flex-basis: 40%; }
&[data-callout-metadata*="col3"].callout.callout .callout-content > p { flex-basis: 30%; }
&[data-callout-metadata*="col4"].callout.callout .callout-content > p { flex-basis: 22%; }
&[data-callout-metadata*="col5"].callout.callout .callout-content > p { flex-basis: 18%; }
/* listive theme */
&.callout p:first-child { margin-top: revert; }
}
/* -- MCC Variation - Fixed Width Option -- */
/* Fixed Width Option (using callout-metadata) */
div[data-callout="multi-column"][data-callout-metadata*="center-fixed"].callout { justify-content: center; }
div[data-callout="multi-column"][data-callout-metadata*="left-fixed"].callout { justify-content: flex-start; }
div[data-callout="multi-column"][data-callout-metadata*="right-fixed"].callout { justify-content: flex-end; }
div[data-callout="multi-column"][data-callout-metadata*="fixed"].callout > .callout-content > *:is(div,ul) { flex-grow: 0; }
/* Callout size for Fixed Width Option */
div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="small"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-small-width) * 0.5 ); }
div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="medium"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-medium-width) * 0.65); }
div[data-callout="multi-column"][data-callout-metadata*="fixed"][data-callout-metadata*="large"].callout > .callout-content > *:is(div,ul) { flex-basis: calc( var(--float-large-width) * 0.8); }
/* -- MCC Variation - No Wrap Option -- */
/* No-Wrap Option (using callout-metadata) - for single row with horizontal scrollbar */
div[data-callout="multi-column"][data-callout-metadata*="no-wrap"].callout {
flex-wrap: nowrap; overflow-x: scroll;
& > .callout-content > *:is(div,ul) { flex-shrink: 0; }
}
/* No-Wrap Option, Width Options. Legacy width option. better to dw, pw and fw options at the top */
.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="small"] { flex-basis: 300px; }
.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="medium"] { flex-basis: 400px; }
.callout[data-callout="multi-column"][data-callout-metadata*="no-wrap"] .callout[data-callout-metadata*="large"] { flex-basis: 600px; }
/* Align center for items in callout */
div[data-callout="multi-column"] .callout[data-callout-metadata*="center"] { text-align: center; }
/* -- Special Adjustment for Community Themes -- */
/* 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;}
/* Blue Topaz - remove box shadow from main [!multi-column] */
body[class*="notebook-liked-markdown-page"].shade-callout-style .callout[data-callout="multi-column"] { box-shadow: unset !important; }
/* 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; }
/* 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;}
/* Minimal -- Callout Outline, to ensure sub-callout not overlapped and hidden */
.callouts-outlined div[data-callout="multi-column"].callout:not(.is-collapsed) .callout:not([data-callout="multi-column"]) {
margin-top: 1em;
}
/* -- Special Adjustment for Plugins / Markdown Elements -- */
/* SNW plugin */
div[data-callout*="multi-column"].callout .callout-content span.image-embed + .snw-reference { display: var(--mcc-img-snw-display); }
/* === 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; border-radius: 0px; 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;}
/* -- No Margin for only child -- */
div[data-callout*="blank"].callout .callout-content > p:only-child {
margin-block: 0;
}
/* -- Special Adjustment for Themes -- */
/* 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 === */
/* float uses callout-metadata to control the layout. can apply to any callout */
/* variables */
body {
--float-small-width: 300px;
--float-medium-width: 400px;
--float-large-width: 600px;
--float-left-callout-margin: 0 15px 0 0;
--float-right-callout-margin: 0 0 0 15px;
--float-callout-top-margin: 0em;
--float-callout-bottom-margin: 0em;
--float-callout-snw-display: none;
}
/* variables */
body {
--float-left-callout-margin-inline: 0 12px;
--float-right-callout-margin-inline: 12px 0;
--float-snw-display: none;
}
/* -- Main Code. Use media query so that floats only works when there's enough width */
@media (min-width: 500px){
.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) { display: inline; z-index: 30;}
.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > div > .callout { float: left; z-index: 30; }
.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > .edit-block-button { display: none; }
.markdown-reading-view div[data-callout-metadata*="left"].callout {float: left;}
.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) { display: inline; z-index: 30;}
.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > div > .callout { float: right; z-index: 30; }
.markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > .edit-block-button { display: none; }
.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;}
/* remove margin from first para in the float callout */
.callout:is(div[data-callout-metadata*="left"],div[data-callout-metadata*="right"]) .callout-content > :is(p:first-child,ul:first-child,ol:first-child) {margin-top: 0;}
/* Adjustable Gap */
/* 26Mar2023 only top for now, to work on left-right later */
.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="left"]),
.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="right"])
{ margin-top: calc(1em * var(--line-height-normal) + var(--float-callout-top-margin)); }
/**/
.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="left"]),
.markdown-reading-view div[data-callout-metadata*="left"].callout {
margin-inline: var(--float-left-callout-margin-inline);
}
.markdown-source-view.mod-cm6 .callout:is(div[data-callout-metadata*="right"]),
.markdown-reading-view div[data-callout-metadata*="right"].callout {
margin-inline: var(--float-right-callout-margin-inline);
}
}
/* -- FC Size Options -- */
/* legacy width option. better to dw, pw and fw options at the top */
[data-callout-metadata*="-small"].callout {width: var(--float-small-width);}
[data-callout-metadata*="-medium"].callout {width: var(--float-medium-width);}
[data-callout-metadata*="-large"].callout {width: var(--float-large-width);}
/* -- 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; }
/* for Blockquote underlap the float layout -- to remove by 30Jun2024, no longer needed */
/* .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 */
/* 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 -- */
/* Minimal. Minimal Float. Updated for Minimal V7.4.7 */
/* "Reset" the default "cm-sizer" width but respect Minimal Settings, and require cssclass ".minimal-float" as Minimal own wide table will not work together with float i.e. removing :not(:has(table)) from .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);
}
.cm-contentContainer.cm-contentContainer > .cm-content > div,
.cm-sizer > .embedded-backlinks,
.cm-sizer > .inline-title,
.cm-sizer > .metadata-container {
max-width: none; width: auto;
}
}
/* Minimal. Previous Minimal Float but with performance issue. Kept for reference until 30 June 2024 */ /*
: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); }
: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; }
/* Minimal - fix to support Breadcrumbs plugin. Sub to the above LP float fix for Minimal */
body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }
/* Minimal - Size Option fix due to !important */
/* 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$="small"].callout { width: var(--float-small-width) !important; 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$="medium"].callout { width: var(--float-medium-width) !important; 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; }
}
/* === List Column ===*/
/* supported for (1) css :has(), (2) yaml cssclass, (3) CT plugin, and (4) MA plugin
- CSS :has() can be applied to sublists, so no column rule. CT plugin apply to div that houses the ul, so column gap is different
- xx-column-list for first level only list, but apply anywhere but xx-column-list-block apply at block level. Both require JV's Markdown Attributes plugin
*/
/* -- List Column/Grid/Card general styling -- */
/* hide tag in rendered view, dim it in edit mode and small size */
:is(div[class*="mcl"].markdown-rendered, .markdown-rendered) a[href*="#mcl"] {display: none;}
/* :is(div[class*="mcl"].markdown-rendered, .markdown-rendered div[class*="mcl"]) a[href*="#mcl"] {display: none;} */
.cm-s-obsidian .HyperMD-list-line span[class*="mcl"] {background-color: var(--background-primary) !important; color: var(--text-faint); font-size: 0.9rem; }
/* -- List Column using YAML cssclass and Markdown Attributes i.e. {.three-column-list-block} -- */
/* define the column gap and column rule */
.two-column-list div > ul, .two-column-list-block,
.three-column-list div > ul, .three-column-list-block,
.four-column-list div > ul, .four-column-list-block,
.multi-column-list div > ul, .multi-column-list-block
{ column-gap: 3rem; column-rule: var(--col-rule-width) solid var(--col-rule-color); }
/* define the column count, for fixed number of columns, to subject it to note's width (in future can use @container when installer v1.2.7 widely used ) */
@media (min-width: 500px ){
.two-column-list div > ul, .two-column-list-block {columns: 2; }
.three-column-list div > ul, .three-column-list-block {columns: 3; }
.four-column-list div > ul, .four-column-list-block {columns: 4; }
}
.multi-column-list div > ul, .multi-column-list-block { column-width: var(--list-min-width); }
/* Special adjustment for footnotes applied with -colum-list-block -- obsidian creates a
tag at the last */
.footnotes [class$="-column-list-block"] li:last-of-type br:last-of-type {display: none;}
/* -- List Column Using Tag (using CSS has) -- */
/* set the column rules at ul level and adjust the margin */
ul:has(> li > [data-heading] > [href*="#mcl/list-column"]),
ul:has(> li > [href*="#mcl/list-column"]) {
margin-top: 0;
column-width: var(--list-min-width); column-gap: 1rem;
column-rule: var(--col-rule-width) solid var(--col-rule-color);
}
/* give some margin for the div, for first ul only */
div:has(> ul > li > [href*="#mcl/list-column"]),
div:has(> ul > li > [data-heading] > [href*="#mcl/list-column"])
{ margin-top: 0.8em; }
/* readjust [!blank] display contents */
div[data-callout*="blank"] > .callout-content:has(li [href*="#mcl/list-column"]) {display: block; margin: 0; padding: 0; }
/* -- General Adjustment for List Column -- */
/* Adjustment for misaligned bullets (this is a hack, need to find better solution later) */
ul:has([href="#mcl/list-column"]) li > .list-bullet::after, /* :has() */
.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclass */
.tag-mcllist-column ul li > .list-bullet::after, /* contextual typography */
ul[class*="column-list"] li > .list-bullet::after /* markdown attributes */
{ position: relative; }
/* -- Special Adjustment for Plugins for List Column -- */
/* for Custom Classes */
div.cc-container:has(li > [href="#mcl/list-column"]) { width: 100%; }
/* === List Grid (using hashtag) === */
/* supported (1) :has() and (2) Contextual Typography plugin */
/* -- Main Code -- */
ul:has(> li > [data-heading] > [href*="#mcl/list-grid"]),
ul:has(> li > [href*="#mcl/list-grid"]),
div[class*="mcllist-grid"] ul:first-child
{ display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr)); }
ul:has(> li > [data-heading] > [href*="#mcl/list-grid-wide"]),
ul:has(> li > [href*="#mcl/list-grid-wide"]),
div[class*="mcllist-grid-wide"] ul:first-child
{ grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-wide-min-width),1fr)); }
ul:has(> li > [data-heading] > [href*="#mcl/list-grid"]) > li:not(:last-of-type),
ul:has(> li > [href*="#mcl/list-grid"]) > li:not(:last-of-type),
div[class*="mcllist-grid"] ul:first-child > li:not(:last-of-type)
{ padding-right: 1.6em; }
ul:has(> li > [data-heading] > [href*="#mcl/list-grid-sm"]),
ul:has(> li > [href*="#mcl/list-grid-sm"]),
div[class*="mcllist-grid-sm"] ul:first-child
{ --list-grid-min-width: 20%; }
/* - 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);}
}
/* === List Card (using hashtag) === */
/* supported (1) :has() and (2) Contextual Typography plugin */
body {
--mcl-card-header-border-width: 1px;
--mcl-card-header-border-radius: 0px;
--mcl-card-bg-color: var(--background-secondary);
--mcl-card-gap: 0.2em;
--mcl-card-border-width: 1px;
--mcl-card-border-radius: 0px;
--mcl-card-border-color: var(--background-modifier-border);
}
/* -- Main Code -- */
/* make the list grid, remove some ul padding */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), [class*="mcllist-card"]) ul:first-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr)); margin-block-start: 0.5em; }
:is(div:has(> ul [data-heading*="#mcl/list-card-wide"]), [class*="mcllist-card-wide"]) ul:first-child { grid-template-columns: repeat(auto-fit, minmax(var(--list-grid-wide-min-width),1fr));}
/* unindent first level bullet */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) { padding-left: 0.1em; } /* with v1.6 this is somewhat redundant */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) > li { margin-inline-start: 0; }
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul { padding-left: 0; }
:is(.is-mobile .markdown-preview-section) :is(div:has([data-heading*="#mcl/list-card"]), .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(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li {position: relative;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li:hover > .collapse-indicator,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li:hover > .collapse-indicator {opacity: 1;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > .collapse-indicator,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .tag-mcllist-card, .tag-mcllist-card .callout-content) > ul > li > ul > li > .collapse-indicator {position: absolute; right: 0.7em; padding-right: 0;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul::before {display: none;}
/* decorate the first heading for cards */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [data-heading*="#mcl/list-card"]) .callout-content, .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 */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > .list-bullet::after,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > ul > li > .list-bullet::after,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li::before,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li::before,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > .list-bullet::after,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li > .list-bullet::after {visibility: hidden;}
/* remove the indentation guide */
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul ul ul)::before {--indentation-guide-width: 0;}
.markdown-rendered.show-indentation-guide :is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li > ul::before,
.markdown-rendered.show-indentation-guide :is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li > ol::before {border-right: 0; border-left: 0; }
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) li {list-style: none;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) li li li {list-style: circle;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) .callout ul:not(ul ul) > li,
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .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: 0px; background-color: var(--mcl-card-bg-color);}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul) > li img {width: 100%;}
:is(div:has(> ul [data-heading*="#mcl/list-card"]), div:has(> ul [href*="#mcl/list-card"]), .tag-mcllist-card) ul img {margin: 0; float: none;}
/* -- Special Adjustment for Themes -- */
/* Sanctum */
.markdown-rendered .tag-mcllist-card ul img[alt*=right] {margin: 0;}
/* === Style Settings === */
/* @settings
name: Modular CSS Layout - Multi Column
id: modular-css-layout-mc
settings:
-
id: multi-column-title
title: Multi Column Callout Settings
type: heading
level: 1
collapsed: true
-
id: mc-callout-general-title
title: MCC -- General
type: heading
level: 2
collapsed: false
-
id: mcc-img-snw-display
title: Hide SNW indicator for images in MC Callout
type: variable-select
default: none
options:
-
label: Show
value: inline
-
label: Hide
value: none
-
id: mc-callout-width-title
title: MCC -- Width
type: heading
level: 2
collapsed: false
-
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: mc-callout-gap-title
title: MCC -- Gap & Margin
type: heading
level: 2
collapsed: false
-
id: callout-gap
title: Sub-Callout Gap (any unit)
description: NO spacing between figure and unit
type: variable-text
default: 0em
-
id: callout-margin
title: Sub-Callout Margin (any unit)
description: to allow some spacing for box-shadow
type: variable-text
default: 0px
-
id: float-callout-title
title: Float Callout Settings
type: heading
level: 1
collapsed: true
-
id: float-callout-general-title
title: FC -- General
type: heading
level: 2
collapsed: false
-
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: float-width-title
title: FC -- Width
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: FC -- Gap & Margin
type: heading
level: 2
collapsed: false
-
id: float-callout-top-margin
title: Adjust top margin for Float Left and Float Right
description: Can use em or px unit
type: variable-text
default: 0em
-
id: float-left-callout-margin-inline
title: Adjust left-right margin for Float Left Callout
description: Enter in this order - "left right". Can use em or px unit
type: variable-text
default: 0px 0px
-
id: float-right-callout-margin-inline
title: Adjust left-right margin for Float Right Callout
description: Enter in this order - "left right". Can use em or px unit
type: variable-text
default: 0px 0px
-
id: mc-list-column-title
title: List Column
description: using `{.xxx-column-list-xxx}` and `#mcl/list-column`
type: heading
level: 1
collapsed: true
-
id: list-column-width-title
title: Width control for List Column
type: heading
level: 2
collapsed: false
-
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: list-column-deco-title
title: Decoratives control for List Column
type: heading
level: 2
collapsed: false
-
id: col-rule-width
title: Ruler (vertical line between columns) width for List Column
description: in px unit. Set to 0 to disable ruler
type: variable-number-slider
default: 1
min: 0
max: 4
step: 1
format: px
-
id: col-rule-color
title: Ruler (vertical line between columns) color for List Column
type: variable-themed-color
format: hsl
opacity: true
default-light: '#'
default-dark: '#'
-
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-card-width-title
title: Width control for List Grid and List Card
type: heading
level: 2
collapsed: false
-
id: list-grid-min-width
title: Minimum width for normal List Grid/Card
description: For `#mcl-list-grid` or `#mcl-list-card`. Can use em or px unit
type: variable-text
default: 250px
-
id: list-grid-wide-min-width
title: Minimum width for Wide List Grid/Card
description: For `#mcl/list-grid-wide` or `#mcl/list-card-wide`. Can use em or px unit
type: variable-text
default: 350px
-
id: list-card-deco-title
title: Decoratives control for List Card
type: heading
level: 2
collapsed: false
-
id: mcl-card-header-border-width
title: Bottom border for first header in List Card
description: Can use em or px unit. Set to 0 to disable the border
type: variable-text
default: 1px
-
id: mcl-card-bg-color
title: Background color for List Card
type: variable-themed-color
format: hsl
opacity: true
default-light: '#'
default-dark: '#'
-
id: mcl-card-gap
title: Gap between cards for List Card
description: Can use em or px unit
type: variable-text
default: 0em
-
id: mcl-card-border-width
title: Border width for each card in List Card
description: Can use em or px unit. Set to 0 to disable the border
type: variable-text
default: 1px
-
id: mcl-card-border-color
title: Border color for each card in List Card
type: variable-themed-color
format: hsl
opacity: true
default-light: '#'
default-dark: '#'
*/
/* Fix colour distortion for images in callouts */
body {
--callout-blend-mode: normal;
}
/* don't display title for idea and quote callouts */
.callout[data-callout="quote"] .callout-title-inner {
display: none;
}
/* remove top and bottom margins and add left margin for idea and quote callouts */
.callout[data-callout="quote"] .callout-content p {
margin-block-start: 0;
margin-block-end: 0;
margin-left: .5em;
margin-right: 1em;
}
/* align icon and content side-by-side */
.callout[data-callout="quote"] {
display: flex;
align-items: flex-start;
}
/* v-align icon in center of first line */
.callout[data-callout="quote"] .callout-title .callout-icon {
min-height: 1.5em;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Grey "Info" callout w/title */
.theme-light .callout[data-callout="info"] {
--callout-icon: none;
--callout-color: grey;
border: 2px solid #e0e0e0;
padding: 10px 10px 10px 10px;
color: #545454;
}
.theme-dark .callout[data-callout="info"] {
--callout-icon: none;
--callout-color: grey;
border: 2px solid #545454;
padding: 10px 10px 10px 10px;
color: #999999;
}
/* Grey "Info" callout without title */
.callout[data-callout="info-"] .callout-title-inner {
display: none;
}
.callout[data-callout="info-"] .callout-icon {
display: none;
}
.callout[data-callout="info-"] .callout-content p:first-child{
font-size: 100%;
text-align: left;
}
.theme-light .callout[data-callout="info-"] {
--callout-icon: none;
--callout-color: grey;
border: 2px solid #e0e0e0;
padding: 0px 10px 15px 10px;
}
.theme-dark .callout[data-callout="info-"] {
--callout-icon: none;
--callout-color: grey;
border: 2px solid #545454;
padding: 0px 10px 15px 10px;
}
/* Character profile infobox */
.callout[data-callout="profile"] .callout-icon {
display: none;
}
.callout[data-callout="profile"] .callout-title .callout-title-inner {
margin-top: 0px;
font-weight: 400;
}
.callout[data-callout="profile"] .callout-content p:first-child{
font-size: 100%;
text-align: left;
}
.theme-dark .callout[data-callout="profile"] {
--callout-color: ;
--callout-icon: none;
border-radius: 0px
margin-top: 0px;
padding: 0px 10px 10px 10px;
}
.theme-light .callout[data-callout="profile"] {
--callout-color: ;
--callout-icon: none;
border: 0px solid #e0e0e0;
border-radius: 0px
margin-top: 0px;
padding: 0px 10px 10px 10px;
}