809 lines
43 KiB
CSS
809 lines
43 KiB
CSS
/* === README ===
|
|
Snippet: MCL Multi Column / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
|
|
Version 0.10.0 (beta, draft updated 2023-07-15)
|
|
- introduce fw dw and pw
|
|
Version 0.9.5 (updated 2023-07-30)
|
|
- fixes on minimal float affecting Minimal own wide table feature
|
|
- fixes on properties padding affecting Minimal
|
|
Version 0.9.4 (updated 2023-07-06)
|
|
- improved MC Callout compatibility with Minimal theme V7.0
|
|
- improved MC Callout compatibility with Blue Topaz
|
|
Version 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
|
|
Version 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)
|
|
Version 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
|
|
Version 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()
|
|
Version 0.8.1 (updated 2023-01-10)
|
|
- fix issue with Breadcrumbs plugin and minimal-float where the plugin "banner" flushed to left
|
|
Version 0.8.0 (updated 2022-11-26)
|
|
- feature: `no-wrap` option for `[!multi-column]` using callout-metadata
|
|
|
|
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
|
|
*/
|
|
|
|
|
|
|
|
body{
|
|
--callout-min-width: 200px;
|
|
--callout-nowrap-min-width: 250px;
|
|
--callout-gap: 0.5rem;
|
|
--callout-margin: 5px;
|
|
/* 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;
|
|
--mcl-card-header-border-width: 1px;
|
|
--mcl-card-bg-color: var(--background-secondary);
|
|
--mcl-card-gap: 0.2em;
|
|
--mcl-card-border-width: 1px;
|
|
--mcl-card-border-color: var(--background-modifier-border);
|
|
}
|
|
.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: 20%; width: 20%; }
|
|
div[data-callout-metadata*="pw3"].callout.callout.callout.callout { flex-basis: 30%; width: 30%; }
|
|
div[data-callout-metadata*="pw4"].callout.callout.callout.callout { flex-basis: 40%; width: 40%; }
|
|
div[data-callout-metadata*="pw5"].callout.callout.callout.callout { flex-basis: 50%; width: 50%; }
|
|
div[data-callout-metadata*="pw6"].callout.callout.callout.callout { flex-basis: 60%; width: 60%; }
|
|
div[data-callout-metadata*="pw7"].callout.callout.callout.callout { flex-basis: 70%; width: 70%; }
|
|
div[data-callout-metadata*="pw8"].callout.callout.callout.callout { flex-basis: 80%; width: 80%; }
|
|
div[data-callout-metadata*="pw9"].callout.callout.callout.callout { flex-basis: 90%; width: 90%; }
|
|
|
|
|
|
/* 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 "DIV"'s Using Callout === */
|
|
/* some issues still persists
|
|
(2) some theme uses transparency to affect .callout-title */
|
|
|
|
/* -- Main multi-column snippet using Callout */
|
|
/* variables */
|
|
body {
|
|
--mcc-img-snw-display: none;
|
|
}
|
|
|
|
/* 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 { 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) { 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 */
|
|
/* adjusted for Obsidian 0.16.x, removed a number of previous adjustment as no longer required */
|
|
div[data-callout="multi-column"].callout > div.callout-content .callout.is-collapsed { box-shadow: unset; height: min-content;}
|
|
}
|
|
|
|
|
|
/* -- MCC Variation - Icons -- */
|
|
|
|
/* Main code */
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"].callout { justify-content: center; }
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"].callout .callout { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"].callout.callout .callout-content > p { flex-grow: 1; text-align: center; }
|
|
/* Options for number of columns */
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"][data-callout-metadata*="col2"].callout.callout .callout-content > p { flex-basis: 40%; }
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"][data-callout-metadata*="col3"].callout.callout .callout-content > p { flex-basis: 30%; }
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"][data-callout-metadata*="col4"].callout.callout .callout-content > p { flex-basis: 22%; }
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"][data-callout-metadata*="col5"].callout.callout .callout-content > p { flex-basis: 18%; }
|
|
|
|
/* listive theme */
|
|
div[data-callout="multi-column"][data-callout-metadata*="icons"].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;}
|
|
div[data-callout="multi-column"][data-callout-metadata*="no-wrap"].callout > .callout-content > *:is(div,ul) { flex-shrink: 0; flex-basis: var(--callout-nowrap-min-width) }
|
|
/* No-Wrap Option, Width Options */
|
|
.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 Sanctum because it has "column" callout, Obsidian v0.16.x. Not required for multi-flex as it Sanctum expects the name ends with *=column */
|
|
.callout[data-callout*=column] .callout-title { display: flex; }
|
|
.callout[data-callout*=column] .callout-content { display: unset; }
|
|
|
|
/* 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; }
|
|
/* Special Adjustment -- for 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;}
|
|
|
|
/* for Minimal -- Callout Outline */
|
|
.callouts-outlined div[data-callout="multi-column"].callout:not(.is-collapsed) .callout {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
|
|
/* == Special Adjustment for Plugins / Markdown Elements */
|
|
|
|
/* Special Adjustment for SNW plugin */
|
|
div[data-callout*="multi-column"].callout .callout-content span.image-embed + .snw-reference { display: var(--mcc-img-snw-display); }
|
|
|
|
|
|
|
|
|
|
/* === Multi Column Flex "DIV"'s Using Callout === */
|
|
/* - Still EXPERIMENTAL, different theme approach border and background differently, but 0.16.x seems to align most */
|
|
|
|
/* adjusted for Obsidian 0.16.x */
|
|
div[data-callout="multi-column-flex-height"].callout > .callout-title { display: none; }
|
|
div[data-callout="multi-column-flex-height"].callout > .callout-content { display: contents; }
|
|
div[data-callout="multi-column-flex-height"].callout
|
|
{ display: flex; flex-wrap: wrap; gap: var(--callout-gap); background: unset; border: unset; margin: unset; padding: unset; clear: both; }
|
|
|
|
div[data-callout="multi-column-flex-height"].callout > .callout-content > *:is(div,ul) {flex: 1 1 var(--callout-min-width); margin: 0; }
|
|
div[data-callout="multi-column-flex-height"].callout .callout { border: unset; box-shadow: unset; }
|
|
/* need to reintroduce border-left as original callout put border on the parent callout */
|
|
div[data-callout="multi-column-flex-height"].callout > .callout-content .callout .callout-title { border-top-left-radius: 3px;}
|
|
div[data-callout="multi-column-flex-height"].callout > .callout-content .callout .callout-content { margin: 0; border-bottom-left-radius: 3px; height: min-height;}
|
|
|
|
/* "fix" for theme with negative margin & box shadow. Applicable for Prism theme */
|
|
div[data-callout="multi-column-flex-height"].callout > .callout-content { margin-top: unset;}
|
|
div[data-callout="multi-column-flex-height"].callout:not(.is-collapsed) { box-shadow: unset; }
|
|
|
|
|
|
/* === 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; 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;}
|
|
|
|
/* Special Adjustment for Themes */
|
|
|
|
/* Shimmering Focus. Differing font size in callout *//* no longer required as of v3.272
|
|
div[data-callout*="blank"] .callout-content :is(p,ul,li) { font-size: unset; line-height: inherit; }
|
|
div[data-callout*="blank"] .callout-content :is(li) { margin: unset; }
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* -- 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)); }
|
|
}
|
|
|
|
/* -- FC Size Options -- */
|
|
/* -- small and medium for screen > 500px and large only for screen > 750px */
|
|
@media (min-width: 500px){
|
|
div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > div:is([data-callout-metadata*="left"],[data-callout-metadata*="right"])[data-callout-metadata*="-small"].callout,
|
|
div:is([data-callout-metadata*="left"],[data-callout-metadata*="right"])[data-callout-metadata*="-small"].callout {width: var(--float-small-width);}
|
|
div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > div:is([data-callout-metadata*="left"],[data-callout-metadata*="right"])[data-callout-metadata*="-medium"].callout,
|
|
div:is([data-callout-metadata*="left"],[data-callout-metadata*="right"])[data-callout-metadata*="-medium"].callout {width: var(--float-medium-width);}
|
|
}
|
|
@media (min-width: 750px){
|
|
div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > div:is([data-callout-metadata*="left"],[data-callout-metadata*="right"])[data-callout-metadata*="-large"].callout,
|
|
div[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 */
|
|
.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. (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 */
|
|
/* Minimal - Undo the theme flex layout by default. To apply per note basis */
|
|
/* body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .markdown-preview-sizer { display: unset; } */
|
|
/* Minimal - 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; } */
|
|
/* body[class*="minimal-tab-title"] .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: none; margin-left: 0 !important;} */
|
|
/* body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout > .callout { width: auto; } */
|
|
/* Minimal - 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; } */
|
|
|
|
/* 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 - Gaps/Margin adjustment. to be removed by 31 Aug 2023 */
|
|
/* body[class*="minimal-tab-title"] .minimal-float.wide-page div[data-callout*="blank"].cm-callout:is(div[data-callout-metadata*="left"]) { margin-left: 20px !important; } */
|
|
|
|
|
|
/* 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 <br> tag at the last <li> */
|
|
.footnotes [class$="-column-list-block"] li:last-of-type br:last-of-type {display: none;}
|
|
|
|
|
|
/* -- List Column Using Tag (CSS :has() and CT plugin) -- */
|
|
|
|
/* - List Column using Contextual Typography plugin */
|
|
.tag-mcllist-column > .callout[data-callout*="blank"],
|
|
.tag-mcllist-column > .callout > .callout-content,
|
|
.tag-mcllist-column:not([data-callout]) { column-width: var(--list-min-width); column-gap: 1rem; column-rule: var(--col-rule-width) solid var(--col-rule-color); }
|
|
.tag-mcllist-column.cm-callout {padding-block: 1em;} /* add block padding only for the one in callout */
|
|
.tag-mcllist-column .callout:first-of-type { margin-top: 0; }
|
|
|
|
.tag-mcllist-column ul:first-of-type,
|
|
div:has(> ul > li > [href*="#mcl/list-column"]) ul:first-of-type
|
|
{ margin-top: 0; }
|
|
|
|
/* - List Column using :has() */
|
|
ul:has(> li > [data-heading] > [href*="#mcl/list-column"]),
|
|
ul:has(> li > [href*="#mcl/list-column"])
|
|
{ column-width: var(--list-min-width); column-gap: 1rem; }
|
|
|
|
/* - List Column using :has() but override for LC on first ul to have column rule */
|
|
div:has(> ul > li > [data-heading] > [href*="#mcl/list-column"]),
|
|
div:has(> ul > li > [href*="#mcl/list-column"]),
|
|
div[data-callout*="blank"] > .callout-content:has(> ul > li > [data-heading] > [href*="#mcl/list-column"]),
|
|
div[data-callout*="blank"] > .callout-content:has(> ul > li > [href*="#mcl/list-column"])
|
|
{ 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 */
|
|
|
|
/* List Grid */
|
|
|
|
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;}
|
|
|
|
/* - 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 */
|
|
|
|
/* make the list grid, remove some ul padding */
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), [class*="mcllist-card"]) ul:first-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--list-grid-min-width),1fr));}
|
|
: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));}
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) ul ul:not(ul ul ul) { padding-left: 0.1em; }
|
|
: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 { 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 [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 [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 [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 [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 [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"]), .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"]), .tag-mcllist-card) > div > div > ul > li > .list-bullet::after,
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) > div > div > ul > li > ul > li > .list-bullet::after,
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) > ul > li::before,
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > ul > li::before,
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) > ul > li > .list-bullet::after,
|
|
:is(div:has(> ul [data-heading*="#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"]), .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"]), .tag-mcllist-card) li {list-style: none;}
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) li li li {list-style: circle;}
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) .callout ul:not(ul ul) > li,
|
|
:is(div:has(> ul [data-heading*="#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: 0.5em; background-color: var(--mcl-card-bg-color);}
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) ul:not(ul ul) > li img {width: 100%;}
|
|
:is(div:has(> ul [data-heading*="#mcl/list-card"]), .tag-mcllist-card) ul img {margin: 0; float: none;}
|
|
|
|
/* special adjustment for 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: 0.5rem
|
|
-
|
|
id: callout-margin
|
|
title: Sub-Callout Margin (any unit)
|
|
description: to allow some spacing for box-shadow
|
|
type: variable-text
|
|
default: 5px
|
|
|
|
|
|
|
|
-
|
|
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 the margin-top (any unit)
|
|
type: variable-text
|
|
default: 0em
|
|
|
|
|
|
|
|
-
|
|
id: mc-list-column-title
|
|
title: List Column Settings
|
|
description: using `{.xxx-column-list-xxx}` and `#mcl/list-column`
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
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: col-rule-color
|
|
title: Column Ruler Color
|
|
type: variable-themed-color
|
|
format: hsl
|
|
opacity: true
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: col-rule-width
|
|
title: Column Ruler Width (in px)
|
|
type: variable-number-slider
|
|
default: 1
|
|
min: 0
|
|
max: 4
|
|
step: 1
|
|
format: px
|
|
|
|
-
|
|
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-min-width
|
|
title: Minimum Grid/Card Width (in px/em or similar)
|
|
type: variable-text
|
|
default: 250px
|
|
-
|
|
id: list-grid-wide-min-width
|
|
title: Minimum Wide Grid/Card Width (in px/em or similar)
|
|
description: using `#mcl/list-grid-wide` and `#mcl/list-card-wide`
|
|
type: variable-text
|
|
default: 350px
|
|
-
|
|
id: mcl-card-bg-color
|
|
title: List Card Background Color
|
|
type: variable-themed-color
|
|
format: hsl
|
|
opacity: true
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: mcl-card-header-border-width
|
|
title: Bottom Border for List Card Header (in px/em or similar)
|
|
description: set to 0 to disable the border
|
|
type: variable-text
|
|
default: 1px
|
|
-
|
|
id: mcl-card-gap
|
|
title: List Card Gap (in px/em or similar)
|
|
type: variable-text
|
|
default: 0.2em
|
|
-
|
|
id: mcl-card-border-width
|
|
title: List Card Border Width (in px/em or similar)
|
|
type: variable-text
|
|
default: 1px
|
|
-
|
|
id: mcl-card-border-color
|
|
title: List Card Border Color
|
|
type: variable-themed-color
|
|
format: hsl
|
|
opacity: true
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
|
|
*/
|