marndt/personal-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

import vault

Browse Source
This commit is contained in:
Marcel Arndt
2026-07-16 14:04:45 +02:00
commit a2ad5f5c6d
90 changed files with 31429 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.obsidian/snippets/Colored Sidebar Items.css
Vendored
+651
View File
@@ -0,0 +1,651 @@
/*------------------------------------------------------------------------------
Obsidian Colored Sidebar Items by CyanVoxel v2.0.0
A colored sidebar CSS snippet inspired by
the "Coloured Folders" snippet by Lithou.
This snippet targets folders beginning with numbered prefixes, and applies full
color formatting based on the root colors listed below. The prefixes are both
customizable and extensible; feel free to change, add, and remove them based on
your own titles and vault structure! By default I have a range of 8+1 colors,
however I've provided some other common colors as a starting point for your own
customization. Just swap out the color variable names in the prefix groups.
------------------------------------------------------------------------------*/
:root {
/* ================================ Colors ================================ */
--red: #e22c3c; /* Default Prefix: None */
--red-orange: #e9440b; /* Default Prefix: None */
--orange: #ee6748; /* Default Prefix: None */
--amber: #fa9f50; /* Default Prefix: None */
--yellow: #ffd85e; /* Default Prefix: None */
--lime: #97e768; /* Default Prefix: None */
--mint: #52eea3; /* Default Prefix: 00 */
--cyan: #51e1e9; /* Default Prefix: 10 */
--cool-cyan: #43cfea; /* Default Prefix: None */
--light-blue: #54b6f8; /* Default Prefix: 20 */
--blue: #437cf3; /* Default Prefix: 30 */
--blue-violet: #6f51f4; /* Default Prefix: None */
--violet: #9446f8; /* Default Prefix: 40 */
--purple: #c952ed; /* Default Prefix: 50 */
--magenta: #e54f9b; /* Default Prefix: 60 */
--hot-red: #e3365e; /* Default Prefix: 70 */
--cool-gray: #515768; /* Default Prefix: 99 */
--default-text-color: #d0d0d0;
--highlight: #fff;
--shadow: #0b0c2c;
--nav-item-weight-hover: bold;
}
/* Light Theme Specific Properties */
.theme-light {
--contrast-color: var(--shadow);
--default-text-color: var(--shadow);
--bg-contrast-amount: 70%;
--fg-contrast-amount: 30%;
--medium-contrast-amount: 60%;
--active-contrast-amount: 30%;
/* Darker Versions of Bright Colors for Light Theme */
--yellow: color-mix(in srgb, #ffd85e 90%, var(--shadow));
--lime: color-mix(in srgb, #97e768 90%, var(--shadow));
--mint: color-mix(in srgb, #52eea3 85%, var(--shadow));
--cyan: color-mix(in srgb, #51e1e9 85%, var(--shadow));
--cool-cyan: color-mix(in srgb, #43cfea 85%, var(--shadow));
--light-blue: color-mix(in srgb, #54b6f8 90%, var(--shadow));
}
/* Dark Theme Specific Properties */
.theme-dark {
--contrast-color: var(--highlight);
--bg-contrast-amount: 15%;
--fg-contrast-amount: 40%;
--medium-contrast-amount: 20%;
--active-contrast-amount: 10%;
}
/* All Folder Titles */
.nav-folder-title {
font-weight: bold;
border-radius: 5px;
}
/* Narrower Padding on Desktop*/
@media only screen and (min-width: 768px) {
.nav-file-title,
.nav-folder-title {
/* padding: 3px 5px 2px 4px !important; */
padding-top: 3px !important;
padding-right: 5px !important;
padding-bottom: 2px !important;
padding-left: 15px;
}
}
/*
============================ Folder Title Prefixes =============================
The following groups of prefixes are divided by the numbering prefix that they
target. For example, prefix '00' targets any folder titles beginning with '00',
such as '00 - Maps of Content'. The only other piece of information that changes
between the prefix groups are the color variables. Change or expand on any of
these to suit your own folder structure and vault theme!
*/
/* ------------------------------- 00 Prefix -------------------------------- */
.nav-folder-title[data-path^="00"] {
color: var(--mint);
--nav-item-color-hover: color-mix(
in srgb,
var(--mint) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--mint) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--mint) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(in srgb, var(--mint) 60%, transparent);
}
.nav-folder-title[data-path^="00"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--mint) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="00"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--mint) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="00"])
.nav-file-title {
color: color-mix(
in srgb,
var(--mint) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--mint) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--mint) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--mint) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 10 Prefix -------------------------------- */
.nav-folder-title[data-path^="10"] {
color: var(--cyan);
--nav-item-color-hover: color-mix(
in srgb,
var(--cyan) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--cyan) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--cyan) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.nav-folder-title[data-path^="10"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--cyan) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="10"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--cyan) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="10"])
.nav-file-title {
color: color-mix(
in srgb,
var(--cyan) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--cyan) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--cyan) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--cyan) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 20 Prefix -------------------------------- */
.nav-folder-title[data-path^="20"] {
color: var(--light-blue);
--nav-item-color-hover: color-mix(
in srgb,
var(--light-blue) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--light-blue) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--light-blue) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(
in srgb,
var(--light-blue) 60%,
transparent
);
}
.nav-folder-title[data-path^="20"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--light-blue) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="20"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--light-blue) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="20"])
.nav-file-title {
color: color-mix(
in srgb,
var(--light-blue) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--light-blue) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--light-blue) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--light-blue) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 30 Prefix -------------------------------- */
.nav-folder-title[data-path^="30"] {
color: var(--blue);
--nav-item-color-hover: color-mix(
in srgb,
var(--blue) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--blue) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--blue) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(in srgb, var(--blue) 60%, transparent);
}
.nav-folder-title[data-path^="30"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--blue) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="30"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--blue) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="30"])
.nav-file-title {
color: color-mix(
in srgb,
var(--blue) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--blue) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--blue) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--blue) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 40 Prefix -------------------------------- */
.nav-folder-title[data-path^="40"] {
color: var(--violet);
--nav-item-color-hover: color-mix(
in srgb,
var(--violet) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--violet) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--violet) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(in srgb, var(--violet) 60%, transparent);
}
.nav-folder-title[data-path^="40"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--violet) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="40"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--violet) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="40"])
.nav-file-title {
color: color-mix(
in srgb,
var(--violet) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--violet) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--violet) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--violet) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 50 Prefix -------------------------------- */
.nav-folder-title[data-path^="50"] {
color: var(--purple);
--nav-item-color-hover: color-mix(
in srgb,
var(--purple) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--purple) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--purple) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(in srgb, var(--purple) 60%, transparent);
}
.nav-folder-title[data-path^="50"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--purple) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="50"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--purple) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="50"])
.nav-file-title {
color: color-mix(
in srgb,
var(--purple) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--purple) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--purple) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--purple) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 60 Prefix -------------------------------- */
.nav-folder-title[data-path^="60"] {
color: var(--magenta);
--nav-item-color-hover: color-mix(
in srgb,
var(--magenta) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--magenta) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--magenta) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(
in srgb,
var(--magenta) 60%,
transparent
);
}
.nav-folder-title[data-path^="60"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--magenta) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="60"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--magenta) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="60"])
.nav-file-title {
color: color-mix(
in srgb,
var(--magenta) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--magenta) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--magenta) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--magenta) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 70 Prefix -------------------------------- */
.nav-folder-title[data-path^="70"] {
color: var(--hot-red);
--nav-item-color-hover: color-mix(
in srgb,
var(--hot-red) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--hot-red) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--hot-red) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(
in srgb,
var(--hot-red) 60%,
transparent
);
}
.nav-folder-title[data-path^="70"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--hot-red) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="70"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--hot-red) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="70"])
.nav-file-title {
color: color-mix(
in srgb,
var(--hot-red) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--hot-red) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--hot-red) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--hot-red) var(--active-contrast-amount),
transparent
);
}
/* ------------------------------- 99 Prefix -------------------------------- */
.nav-folder-title[data-path^="99"] {
color: var(--cool-gray);
--nav-item-color-hover: color-mix(
in srgb,
var(--cool-gray) var(--fg-contrast-amount),
var(--contrast-color)
);
--nav-item-background-hover: color-mix(
in srgb,
var(--cool-gray) var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--cool-gray) 40%,
transparent
);
--nav-collapse-icon-color: color-mix(
in srgb,
var(--cool-gray) 60%,
transparent
);
}
.nav-folder-title[data-path^="99"]:hover {
--nav-collapse-icon-color: color-mix(
in srgb,
var(--cool-gray) 60%,
var(--contrast-color)
);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="99"]) {
--nav-indentation-guide-color: color-mix(
in srgb,
var(--cool-gray) var(--medium-contrast-amount),
transparent
);
}
.tree-item-children
.nav-folder:has(.nav-folder-title[data-path^="99"])
.nav-file-title {
color: color-mix(
in srgb,
var(--cool-gray) var(--medium-contrast-amount),
var(--default-text-color)
);
--nav-item-background-hover: color-mix(
in srgb,
color-mix(in srgb, var(--cool-gray) 50%, var(--highlight))
var(--bg-contrast-amount),
transparent
);
--background-modifier-border-focus: color-mix(
in srgb,
var(--cool-gray) 40%,
transparent
);
--nav-item-background-active: color-mix(
in srgb,
var(--cool-gray) var(--active-contrast-amount),
transparent
);
}
.obsidian/snippets/MCL Gallery Cards.css
Vendored
+527
View File
@@ -0,0 +1,527 @@
/* === README ===
Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
ver 0.9.9 (draft upd 2024-01-14)
- minor performance improvement by reducing image gallery has() scope, focusing on editing view
ver 0.9.8 (updated 2023-11-03)
- re-fixes #50
v0.9.7 (updated 2023-10-13)
- fixes #50 i.e. Gallery Card not working with Minimal due to Minimal max-width specificity
Ver 0.9.5 (updated 2023-07-30)
- fixes on minimal float affecting Minimal own wide table feature
- fixes on properties padding affecting Minimal
- fixes Mermaid zoom in Editing View
Ver 0.9.4 (updated 2023-07-06)
- improve Float Image for editing text in Editing View
- fix for Float Image for Minimal (and respect width settings). No longer require cssClass "minimal-float" but require Style Settings
- improve Image Gallery especially for use in Live Preview without callout
Ver 0.9.2 (updated 2023-05-27)
- fix div width for float image also affecting normal image embed
Ver 0.9.0 (updated 2023-04-01)
- image float
- banner background
- card view for dataview table
This snippet is part of MCL collection of snippets for customising layout, and it provides the following
- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
- use together with MCL Multi Column [!blank-container] for invisible container
- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
- Image Zoom via css
- Dimension control for images in lists <ul>
Credits to @kepano Minimal Theme and @SlRvb ITS Theme for inspiration
*/
/* === Master Setting === */
/* set the defaults */
body{
--img-border-radius: 15px;
--img-max-height: 300px;
--img-max-width: 350px;
--img-max-height-list: 270px;
--img-max-width-list: 300px;
--callout-gallery-gap: 5px;
--gallery-snw-display: none;
}
img {border-radius: var(--img-border-radius);}
/* === Image Gallery using <p> and Callout === */
/* Editing and Reading View - Gallery using <p> and Callout. Using <p> (in Reading View) to contain and format as gallery view using metadata="gallery" to contain and format as gallery view */
/* Create display: flex and key adjustment on margin and gap */
.image-gallery .markdown-rendered div:has(> p .image-embed) > p,
div[data-callout-metadata*="gallery"].callout > .callout-content > p
{ display: flex; gap: var(--callout-gallery-gap); margin-top: calc( var(--callout-gallery-gap) ); margin-bottom: 0; }
.image-gallery .markdown-rendered div:has(> p .image-embed) { margin-top: var(--callout-gallery-gap); }
div[data-callout-metadata*="gallery"].callout > .callout-content { --callout-content-padding: 0.5rem 0 0 0; }
/* Introduce subtle border and make the gallery as object-fit: cover */
.image-gallery .markdown-rendered div:has(> p .image-embed) > p img,
div[data-callout-metadata*="gallery"].callout > .callout-content > p img
{ max-height: var(--img-max-height); border: 1px solid var(--background-modifier-border); object-fit: cover; display: block;}
/* display: block for img is important to control the hidden margin-bottom but for Minimal, it uses display: flex for top level divs which pose another "margin" issues no plan to solve yet as this is not critical */
/* Hack to emulate Reading View masonry in Editing View (for use without callout) - there's no <p> tag to be container but we can hack to use .cm-line with the help of :has() */
/* improved the css performance */
.image-gallery div.cm-line:not(.HyperMD-list-line):not(.cm-active):has(> .image-embed:not(.cm-callout)) { display: flex; gap: var(--callout-gallery-gap); --img-gallery__buffer-display: none; }
.image-gallery div.cm-line > :is(img.cm-widgetBuffer,span[contenteditable]) { display: var(--img-gallery__buffer-display) !important; }
.image-gallery div:not(.cm-callout):not(.HyperMD-list-line).image-embed img { max-height: calc(var(--img-max-height)/1); display: unset; object-fit: cover; }
/* -- Adjustment for Themes -- */
/* Special Adjustment for Shimmering Focus. Reading View. Overriding max-width */
body:not(.is-mobile) .app-container.app-container .image-gallery p img[src],
body:not(.is-mobile) .app-container.app-container div[data-callout-metadata*="gallery"].callout img[src]
{ max-width: 100%; width: unset; margin-block: unset;}
/* Minimal. Editing View. Left margin. */
.markdown-source-view.mod-cm6 div[data-callout-metadata*="gallery"] .internal-embed.image-embed { margin-left: 0 !important; width: unset;}
/* Minimal. Editing View. Revert img max width */
body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer>.cm-content>div:has(.image-embed) img { max-width: 100%; }
/* Minimal. Disable Max Width */
body[class*="minimal-tab-title"] {
&.full-width-media .markdown-preview-view .image-embed img:not(.link-favicon):not(.emoji):not([width]),
&.full-width-media .markdown-preview-view img:not(.link-favicon):not(.emoji):not([width]) {
/* max-width: 100%; */
}
}
/* -- Adjustment for Plugins -- */
/* Special Adjustment - for SNW plugin */
.image-gallery div[data-embed-type="image"] > p .snw-embed-preview,
.image-gallery .internal-embed.image-embed ~ .snw-reference.snw-embed,
div[data-callout-metadata*="gallery"].callout > .callout-content > p .snw-embed-preview
{ display: var(--gallery-snw-display); width: min-content; height: min-content; }
div[data-callout-metadata*="gallery"].callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}
/* === Images in Lists === */
/* limit the width when in a list (ul only) */
body:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
{ max-height: var(--img-max-height-list); max-width: var(--img-max-width-list); margin-inline: 0; display: unset; object-fit: cover; }
/* clamping max width to viewport when in mobile. possibly can adopt for desktop as well */
body.is-mobile:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
{ max-width: clamp(calc(var(--img-max-width-list)/2), var(--img-max-width-list), 100%);}
/*
div:not(.cm-callout).image-embed img { max-height: 200px; max-width: 300px; height: 200px; object-fit: cover;}
*/
/* === Image Float === */
/* variables */
body {
--float-left-margin: 4px 12px 4px 0;
--float-right-margin: 4px 0 4px 12px;
--float-snw-display: none;
}
/* float in both Live Preview and Reading View */
img[alt^="left"], img[alt^="float-left"] { float: left; margin: var(--float-left-margin); }
img[alt^="right"], img[alt^="float-right"] { float: right; margin: var(--float-right-margin); }
/* disable box control for parent div to the float */
.internal-embed.image-embed[alt*="float-left"],
.internal-embed.image-embed[alt*="float-right"]
{display: contents; }
/* provide a float "escape" by allowing user to to add <div class="no-float"></div> */
div.no-float {clear: both; display: inline-grid; height: 1px; width: 100%; background-color: var(--background-secondary);}
/* remove the br between image and paragraph in Reading View */
p > :is(.image-embed[alt*="left"],.image-embed[alt*="right"]) + br {display: none;}
/* -- Adjustment for Plugins */
/* Breadcrumbs with Minimal. Fix to support plugin */
body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }
/* SNW plugin */
.internal-embed.image-embed:is([alt="left"],[alt*="|left"],[alt*="left|"],[alt*="float-left"],[alt="right"],[alt*="|right"],[alt*="right|"],[alt*="float-right"]) + .snw-reference.snw-embed { display: var(--float-snw-display); }
.internal-embed.image-embed:is([alt="left"],[alt*="|left"],[alt*="left|"],[alt*="float-left"],[alt="right"],[alt*="|right"],[alt*="right|"],[alt*="float-right"]) + .snw-reference.snw-embed + br { display: none;}
/* -- Adjustment for Themes -- */
/* Blue Topaz. uses body[class*="notebook-liked-markdown-page"] as identifier */
body[class*="notebook-liked-markdown-page"] .view-content .internal-embed.is-loaded img[alt*="left"]:not([class*="emoji"]) { margin: var(--float-left-margin) !important; }
body[class*="notebook-liked-markdown-page"] .view-content .internal-embed.is-loaded img[alt*="right"]:not([class*="emoji"]) { margin: var(--float-right-margin) !important; }
/* Minimal. Uses body[class*="minimal-tab-title"] as identifier */
body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6 .internal-embed.image-embed[alt*="float"] {width: auto !important; max-width: unset; margin-left: 0 !important;}
/* Minimal. Minimal Float. (duplicate from Multi Column. Redid "minimal-float" for Minimal V7.0 */
/* minimal own wide table will not work together with float */
/* undo the Minimal "cm-line" sizing */
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer>.cm-content>div,
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.embedded-backlinks,
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.inline-title,
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer>.metadata-container
{ max-width: none; width: auto; }
/* Re-set the default "cm-sizer" width but respect Minimal Settings */
:is(body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)), .minimal-float.markdown-source-view.mod-cm6) .cm-sizer { max-width: var(--max-width); width: var(--line-width); }
/* to be deleted by 30 Sep 2023 */
/* Duplicate from Multi Column, in case users don't enable that snippet (row 426-437) */
/* Special Adjustment for Minimal theme. Undo the theme flex layout by default. To apply per note basis */
/* .contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .markdown-preview-sizer { display: unset; } */
/* Special Adjustment for Minimal theme Live Preview float support. Need to revert cm-content width to default theme but cm-embed to auto */
/* body[class*="minimal-tab-title"] .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer { width: calc(var(--line-width-adaptive) - var(--folding-offset)); max-width: calc(var(--max-width) - var(--folding-offset)); margin-right: auto; margin-left: max(calc(50% + var(--folding-offset) - var(--line-width-adaptive)/ 2), calc(50% + var(--folding-offset) - var(--max-width)/ 2))!important; } */
/* .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-line { width: auto; max-width: 100%; margin-left: 0 !important; } */
/* .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout> :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) { max-width: 98%; } */
/* .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout > .callout { width: auto; } */
/* Special Adjustment for Minimal theme Live Preview float support. Undo margin-left for Image */
/* .minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .internal-embed.image-embed { margin-left: auto !important; } */
/* === Image Zoom === */
/* must check "Enable Image Zoom via CSS" via Style Settings */
/* set scale to 100% for images */
.image-zoom .view-content :is(.cm-editor, .markdown-preview-view) img { max-width: 100%; cursor: zoom-in; }
/* css zoom for images */
body.image-zoom:not(.is-mobile) .view-content :is(.cm-editor,.markdown-preview-view) img:active,
body.image-zoom:not(.is-mobile) .view-content .image-embed:active,
.image-zoom :is(.HyperMD-list-line,ul) .image-embed.image-embed img:active {
cursor: zoom-out; display: block; background: rgba(0,0,0,0.5);
max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
object-fit: contain; margin: -0.5px auto 0; padding: 0; text-align: center;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
}
/* === Mermaid SVG max-width 100% and zoom on click === */
/* for Mermaid SVG zoom, must check "Enable Mermaid Zoom via CSS" via Style Settings */
/* set scale to 100% for mermaid diagram */
body:not(.mermaid-scale-off) .view-content :is(.cm-editor, .markdown-preview-view) .mermaid svg { max-width: 100%; height: 100%}
body.mermaid-scale-off .mermaid { overflow-x: auto; }
.mermaid-zoom .view-content .mermaid svg { cursor: zoom-in; }
/* css zoom for mermaid diagram */
body.mermaid-zoom:not(.is-mobile) .view-content .markdown-reading-view .mermaid svg:active {
cursor: zoom-out; display: block; object-fit:contain; margin: -0.5px auto 0; padding: 0;
max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
text-align: center; z-index: 100; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
}
/* editing view */
body.mermaid-zoom:not(.is-mobile) .markdown-source-view .cm-embed-block:has(.mermaid svg:active) {
text-align: center;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
position: fixed;
background: rgba(0,0,0,0.8)
}
body.mermaid-zoom:not(.is-mobile) .markdown-source-view. .cm-embed-block:has(.mermaid svg:active) .mermaid { overflow-x: hidden; }
body.mermaid-zoom:not(.is-mobile) .markdown-source-view .mermaid svg:active {
cursor: zoom-out;
position: fixed;
width: 100%; height: 100%;
top: 0; left: 0;
}
/* === Dataview related ===*/
/* Change Dataview table into card view
- no style settings option yet
*/
body {
--bg-color-dv-card: var(--background-modifier-backlinks);
--border-color-dv-card: var(--background-modifier-border);
}
.dv-card table.dataview { position: relative; display: flex; flex-direction: column; font-size: 0.9em; }
/* convert the thead */
.dv-card table.dataview thead { display: flex; flex-flow: row-reverse; border-radius: var(--size-4-2); position: relative; padding-bottom: 0.4em; }
.dv-card table.dataview thead tr { margin: 0; }
.dv-card:is(*,.markdown-source-view.mod-cm6) table.dataview.table-view-table thead th { padding-left: 0; padding: 0.2em 1.3em 0 0.3em; border-width: 0; font-size: 0.9rem; color: var(--text-faint); font-family: var(--h3-font);}
/* convert the tbody into card like structure */
.dv-card table.dataview tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-gap: var(--size-4-2); }
.dv-card table.dataview tbody tr { background-color: var(--bg-color-dv-card); display: flex; flex-direction: column; border: 1px solid var(--border-color-dv-card); border-radius: var(--size-4-2); margin-top: 0; margin-bottom: 0; }
.dv-card table.dataview tbody tr:hover { background-color: var(--background-secondary) !important; }
.dv-card table.dataview tbody td { display: flex; padding-block: 0; }
.dv-card table.dataview tbody td:first-child { font-weight: var(--bold-weight); }
.dv-card table.dataview tbody td:not(:first-child) { color: var(--text-muted); font-size: 0.9em; }
.dv-card table.dataview tbody td:last-child { padding-bottom: 0.5em; }
.dv-card table.dataview tbody td:not(:last-child):not(:first-child)>.el-p:not(.el-embed-image) { border-bottom: 1px solid var(--border-color-dv-card); width: 100%; }
.dv-card table.dataview tbody td > * { padding-block: 0.5em; }
.dv-card table.dataview tbody td > ul { padding-block: 0.2em; }
/* Remove the li indent and other cosmetics */
.dv-card table.dataview :is(ul,ol) { padding-inline-start: 0; margin-block: 0 !important; }
.dv-card table.dataview li:not(:last-of-type).dataview-result-list-li {border-bottom: 1px dashed DarkSlateGray;}
.dv-card table.dataview li.dataview-result-list-li::marker { color: transparent; }
/* Special Adjustment for Stardust's Table Enhancer plugin */
table.dataview .table-height-adjust th, .table-height-adjust tr { height: revert !important; }
/* Special Adjustment for Listive theme */
.dv-card .table-view-table li:not(.cards li.dataview-result-list-li) {margin-left: revert; }
/* Special Adjustment for thead background for most themes */
.dv-card thead :is(tr, th.table-view-th) {background-color: transparent;}
.dv-card thead :is(tr, th) {border-width: 0;}
/*=== MCL Banner ===*/
/* banner using css only -- https://forum.obsidian.md/t/css-how-to-style-the-first-image-in-a-note/52839/ */
body {
--mcl-banner-height-normal: 200px;
--mcl-banner-height-tall: 300px;
--mcl-banner-overlap-title-adj: 0px;
--mcl-banner-no-title-adj: 0px;
}
body:not(.show-inline-title) .markdown-reading-view {
--mcl-banner-no-title-adj: 25px; /* reading view bigger to adjust for minor overlap */
}
body:not(.show-inline-title) .markdown-source-view {
--mcl-banner-no-title-adj: 15px;
}
/* make the div (in LP) containing the image doesn't control the css box-sizing */
.markdown-source-view .cm-line:has(> .internal-embed.image-embed > img[alt*="mcl-banner"]),
.markdown-source-view :is(.internal-embed.image-embed, .cm-line):has(> img[alt*="mcl-banner"]) { display: contents; }
/* original forum post snippet with minor tweak */
img[alt*="mcl-banner"] {
position: absolute;
top: 0; left: 0;
height: var(--mcl-banner-height-normal); width: 100%;
margin-right: auto; margin-left: auto;
object-fit: cover; object-position: 50% 50%;
overflow: hidden;
user-select: none;
/* z-index: -1; */
}
img[alt*="mcl-banner"][alt*="gradient"] {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
/* padding to distance text content from banner V1 *//*
.view-content:has(img[alt*="mcl-banner"]) .inline-title
{ position: relative; padding-top: calc(var(--mcl-banner-height-normal) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj)); z-index: 30; }
.view-content:has(img[alt*="mcl-banner"][alt*="-tall"]) :is(.cm-content > div:first-child, .mod-header)
{ padding-top: calc(var(--mcl-banner-height-tall) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj) ); }
/* padding to distance text content from banner V2 */
.view-content:has(img[alt*="mcl-banner"]) :is(.cm-sizer, .markdown-preview-section)
{ padding-top: calc(var(--mcl-banner-height-normal) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj)); }
.view-content:has(img[alt*="mcl-banner"][alt*="-tall"]) :is(.cm-sizer, .markdown-preview-section)
{ padding-top: calc(var(--mcl-banner-height-tall) - 50px + var(--mcl-banner-overlap-title-adj) + var(--mcl-banner-no-title-adj) ); }
.view-content:has(img[alt*="mcl-banner"]) .inline-title
{ position: relative; z-index: 30; }
/* add option to adjust vertical position by adding the alt metadata "higher" or "lower" */
img[alt*="mcl-banner"][alt*="y-30"] { object-position: 50% 20%; }
img[alt*="mcl-banner"][alt*="y-20"] { object-position: 50% 30%; }
img[alt*="mcl-banner"][alt*="y-10"] { object-position: 50% 40%; }
img[alt*="mcl-banner"][alt*="y+10"] { object-position: 50% 60%; }
img[alt*="mcl-banner"][alt*="y+20"] { object-position: 50% 70%; }
img[alt*="mcl-banner"][alt*="y+30"] { object-position: 50% 80%; }
/* tall adjustment */
img[alt*="mcl-banner"][alt*="-tall"] { height: var(--mcl-banner-height-tall); }
/* minor tweak for me, since i have snippet to make image has rounded corner */
img[alt*="mcl-banner"] { border-radius: revert; }
/* minor tweak for me, to hide snw block reference counter for the banner */
.internal-embed.media-embed.image-embed.is-loaded + .snw-reference.snw-embed {display: none;}
/* === Image Aspect Ratio === */
/* Apply to any images using either hashtag after image url or image alt-text */
.internal-embed.image-embed[src*="1-1"] > img,
img[src*="1-1"],
img[alt*="1-1"]
{ aspect-ratio: 1/1; object-fit: cover; }
.internal-embed.image-embed[src*="4-3"] > img,
img[src*="4-3"],
img[alt*="4-3"]
{ aspect-ratio: 4/3; object-fit: cover; }
.internal-embed.image-embed[src*="16-9"] > img,
img[src*="16-9"],
img[alt*="16-9"]
{ aspect-ratio: 16/9; object-fit: cover; }
/* === Image Caption === */
/* This will only works with local images, web images cannot be supported
mainly because obsidian doesn't render a parent div for the image.
Local images with md link still works. */
:is(.markdown-source-view.mod-cm6, .markdown-reading-view) .internal-embed.image-embed[src*="caption"] { display: inline-block; width: fit-content; }
.image-embed[src*="caption"]::after { content: attr(alt); display: block; text-align: center; font-style: italic; }
/* === ALPHA VERSION testing Timeline in lists === */
/*
.tag-mcltimeline > ul > li > *:not(ul) { text-align: center; align-self: baseline; }
.tag-mcltimeline > ul > li {
display: grid;
grid-template-columns: 0 3fr 7fr;
grid-template-rows: auto;
grid-template-areas:
"indicator timeline details"
"indicator . details";
grid-column-gap: 1em;
}
.tag-mcltimeline > ul > li > ul { grid-area: details; text-align: left; }
.tag-mcltimeline > ul > li > .collapse-indicator { grid-area: indicator; }
.tag-mcltimeline > ul ul { margin-left: 0.5em; }
*/
/* @settings
name: Modular CSS Layout - Gallery Cards
id: modular-css-layout-gc
settings:
-
id: gc-general-title
title: General Image Settings
type: heading
level: 2
collapsed: true
-
id: image-zoom
title: Enable Image Zoom via CSS
type: class-toggle
-
id: img-border-radius
title: Image Border Radius (any unit, no space)
type: variable-text
default: 15px
-
id: gc-callout-title
title: Image Gallery Settings
description: For image gallery using `gallery` callout-metadata and `image-gallery` YAML
type: heading
level: 2
collapsed: true
-
id: gallery-snw-display
title: Hide Strange New World Indicators in Image Gallery
type: variable-select
default: none
options:
-
label: Show
value: inline-block
-
label: Hide
value: none
-
id: callout-gallery-gap
title: Gallery Callout Gap (any unit, no space)
type: variable-text
default: 5px
-
id: img-max-height
title: Max Height for Images (any unit, no space)
type: variable-text
default: 300px
-
id: img-max-width
title: Max Width for Images (any unit, no space)
type: variable-text
default: 350px
-
id: gc-float-title
title: Image Float / Aside
type: heading
level: 2
collapsed: true
-
id: float-left-margin
title: Margin for Image Float Right (any unit, no space)
description: Enter in following order - "top right bottom left"
type: variable-text
default: 4px 12px 4px 0px
-
id: float-right-margin
title: Margin for Image Float Right (any unit, no space)
description: Enter in following order - "top right bottom left"
type: variable-text
default: 4px 0px 4px 12px
-
id: float-snw-display
title: Hide SNW indicator in Image Float / Aside
type: variable-select
default: none
options:
-
label: Show
value: inline-block
-
label: Hide
value: none
-
id: gc-list-title
title: Image in List Settings
type: heading
level: 2
collapsed: true
-
id: list-image-control-off
title: Disable Control for Image in List
description: Disabling will revert image dimension to Obsidian default behaviour
type: class-toggle
-
id: img-max-height-list
title: Max Height for Images (any unit, no space)
type: variable-text
default: 270px
-
id: img-max-width-list
title: Max Width for Images (any unit, no space)
type: variable-text
default: 300px
-
id: gc-mermaid-title
title: Mermaid SVG Settings
type: heading
level: 2
collapsed: true
-
id: mermaid-scale-off
title: Disable scaling for Mermaid diagram
description: Disabling will revert Mermaid diagram dimension to Obsidian default behaviour
type: class-toggle
-
id: mermaid-zoom
title: Enable Image Zoom via CSS
type: class-toggle
*/
.obsidian/snippets/MCL Multi Column.css
Vendored
+879
View File
@@ -0,0 +1,879 @@
/* === README ===
Snippet: MCL Multi Column / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
Ver 0.10.0 (updated 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: 1em;
--callout-margin: 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; 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 <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 (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-bg-color: var(--background-secondary);
--mcl-card-gap: 0.2em;
--mcl-card-border-width: 1px;
--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: 0.5em; 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: 1em
-
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 12px
-
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: 12px 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: 0.2em
-
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: '#'
*/
.obsidian/snippets/MCL Wide Views.css
Vendored
+396
View File
@@ -0,0 +1,396 @@
/* === 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.5rem;
--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
*/
.obsidian/snippets/layout.css
Vendored
+9
View File
@@ -0,0 +1,9 @@
.two-columns {
display: flex;
flex-direction: row;
gap: 20px;
}
.column {
flex: 1;
}