You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
17 KiB
327 lines
17 KiB
2 years ago
|
/* === README ===
|
||
|
|
Snippet: MCL Wide Views / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
|
||
|
|
Version 0.6.3 (updated 2022-11-18)
|
||
|
|
- compatibility update to Minimal theme v6.1.9 especially multi column admonition and wide-page
|
||
|
|
Version 0.6.2 (updated 2022-10-22)
|
||
|
|
- update to support Obsidian 1.0.0
|
||
|
|
- Fix wide-page not renderring properly in editing view (conflict with global/vault wide settings
|
||
|
|
- Adjusted the variable for Adjustable RLL to make use of Obsidian default variable --file-line-width. Changes not break the settings as I mapped it to MCL own variable --adj-rll-max-width
|
||
|
|
- Fix for wide-table not renderring properly in editing view for Minimal theme.
|
||
|
|
Version 0.6.0 (updated 2022-09-25)
|
||
|
|
- fix to support Obsidian v0.16.x (mostly editing view and global settings)
|
||
|
|
- code cleanup
|
||
|
|
|
||
|
|
What is this snippet for?
|
||
|
|
- for any users to use with any theme to complement any missing page/block width control
|
||
|
|
- some features will require mgmeyer's Contextual Typography (CT) plugin
|
||
|
|
- available cssClass:
|
||
|
|
- wide-page
|
||
|
|
- wide-dataview (require CT plugin)
|
||
|
|
- wide-table (require CT plugin)
|
||
|
|
- wide-callout
|
||
|
|
- wide-backlinks
|
||
|
|
- narrow-page
|
||
|
|
- cssClass toggle: is-adj-rll and adj-rll-max-width
|
||
|
|
|
||
|
|
Credits
|
||
|
|
- Kevin Powell Youtube channel
|
||
|
|
- hydescarf for accomodating my snippets adjustment
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* @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 (any unit e.g. px, em, ch)
|
||
|
|
type: variable-text
|
||
|
|
default: 750px
|
||
|
|
|
||
|
|
-
|
||
|
|
id: wide-view-title
|
||
|
|
title: Wide Page/Dataview/Table/Backlinks/Callout Settings
|
||
|
|
description: Control max-width block for page with cssClass `wide-page`. RLL can be enabled or disabled
|
||
|
|
type: heading
|
||
|
|
level: 2
|
||
|
|
collapsed: true
|
||
|
|
-
|
||
|
|
id: normal-max-width
|
||
|
|
title: Max Width for Normal Width block (any unit e.g. px, em, ch)
|
||
|
|
type: variable-text
|
||
|
|
default: 750px
|
||
|
|
-
|
||
|
|
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
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
body{
|
||
|
|
--normal-max-width: var(--file-line-width);
|
||
|
|
--narrow-max-width: var(--file-line-width);
|
||
|
|
--adj-rll-max-width: 750px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === Wide Page === */
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Editing View ---
|
||
|
|
- set Readable Line Length (RLL) to wide (100%) for any css class with "wide" word in it.
|
||
|
|
- "width:100%" added for Blue Topaz
|
||
|
|
- .cm-content added to override Mado 11
|
||
|
|
- focus to fix for v0.16.x -- .markdown-source-view.mod-cm6 .cm-sizer
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - WPEV - */
|
||
|
|
/* Main code */
|
||
|
|
/* Set the containers (all relevant levels) to max-width 100%. Applicable to global and per note (cssClass) */
|
||
|
|
/* selector for editing container .cm-sizer */
|
||
|
|
:is(body[class*="wide-"], div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width) .cm-sizer,
|
||
|
|
/* selector for sub containers
|
||
|
|
- .cm-contentContainer, .cm-contentContainer > .cm-content, .cm-contentContainer > .cm-content > div
|
||
|
|
- .embedded-backlinks, .embedded-backlinks > div */
|
||
|
|
:is(body[class*="wide-"]:not(.max-view-enabled), div[class*="wide-"].markdown-source-view.mod-cm6) :is(.cm-contentContainer.cm-contentContainer, .cm-contentContainer.cm-contentContainer > .cm-content, .cm-contentContainer.cm-contentContainer > .cm-content > div, .embedded-backlinks, .embedded-backlinks > div)
|
||
|
|
{ max-width: 100%; width: 98%;}
|
||
|
|
|
||
|
|
/* Special adjustment - for Minimal
|
||
|
|
- it has table also set with max-width. but table require separate line because we don't want width: 100% as that would stretch the table
|
||
|
|
- but for callout, require width: auto */
|
||
|
|
div[class*="wide-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content table { max-width: 100% }
|
||
|
|
div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > .callout { max-width: 100%; width: auto;}
|
||
|
|
/* overriding margin-left setting to obsidian "default" */
|
||
|
|
div[class*="wide-page"].markdown-source-view.mod-cm6 .embedded-backlinks,
|
||
|
|
div[class*="wide-page"].markdown-source-view.mod-cm6 .cm-contentContainer > .cm-content > div
|
||
|
|
{margin-left: 20px !important; }
|
||
|
|
div[class*="wide-"].markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block:is(.cm-callout, .admonition-parent) > .callout
|
||
|
|
{ margin-left: 0 !important; }
|
||
|
|
|
||
|
|
div[class*="wide-page"].markdown-source-view.mod-cm6.is-readable-line-width table
|
||
|
|
{margin-left: unset !important; }
|
||
|
|
|
||
|
|
/* Additional Note
|
||
|
|
- Yin Yang uses .markdown-source-view.mod-cm6 { width: !important;}. I'm skipping fixes for this until there's user request
|
||
|
|
- added :is(body:not(.max-view-enabled) .mod-root) to accomodate for Shimmering Focus, does not affect other themes */
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Reading View --- */
|
||
|
|
/* -- similar to Editing View (WPEV), set the RLL to 100% for any css class with "wide" word in it
|
||
|
|
- :is() used for OR between global toggle and "cssClass" in yaml
|
||
|
|
- "width:100%" added for Blue Topaz */
|
||
|
|
|
||
|
|
/* - WPRV - */
|
||
|
|
/* Main code */
|
||
|
|
/* Set the containers (all relevant levels) to max-width 100%. Applicable to global and per note (cssClass) */
|
||
|
|
body[class*="wide-"] :is(.markdown-preview-sizer.markdown-preview-sizer, .markdown-preview-sizer.markdown-preview-sizer > div),
|
||
|
|
div[class*="wide-"].markdown-preview-view :is(.markdown-preview-sizer.markdown-preview-sizer, .markdown-preview-sizer.markdown-preview-sizer > div)
|
||
|
|
{ max-width: 100%; margin-inline: auto; width: 100%;}
|
||
|
|
|
||
|
|
/* Special adjustment - for Minimal theme */
|
||
|
|
div[class*="wide-"].markdown-preview-view {padding-inline: 30px;}
|
||
|
|
|
||
|
|
/* special line just for Atom theme -- commented out for now */
|
||
|
|
/*
|
||
|
|
div[class*="wide-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer,
|
||
|
|
div[class*="wide-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer > div
|
||
|
|
{ max-width: 100% !important; } */
|
||
|
|
|
||
|
|
|
||
|
|
/* === Wide Blocks (i.e. Dataview, Table, Callout & Backlink) === */
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Editing View ---
|
||
|
|
- For Editing View, the approach is slightly different. After "wide-page" set all max-width to 100%, I adjust the .cm-content > * blocks to normal width and then selectively target blocks for wide width
|
||
|
|
- must note to ensure specificity rule over some theme), then
|
||
|
|
- global settings selector need to be separated to ensure it is not conditional to cssClass yaml
|
||
|
|
- `body[class*="wide-"]` used for global settings, `div[class*="wide-"].markdown-preview-view` used for per note cssClass
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - WBEV - */
|
||
|
|
/* Main code */
|
||
|
|
/* Generally set all blocks to normal width, no need (yet) for global settings as I didn't adjust it Wide Page above */
|
||
|
|
/* set .cm-sizer > .inline-title to normal width. has to be separated because i don't want margin auto */
|
||
|
|
:is(body[class*="wide-"]:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6:not(.wide-page), div.markdown-source-view.mod-cm6:is(.wide-dataview,.wide-table,.wide-backlinks,.wide-callout)) .cm-sizer > .inline-title
|
||
|
|
{ max-width: var(--normal-max-width); width: 100%; margin-inline: auto; }
|
||
|
|
/* set normal width to `.cm-content > div` and `.embedded-links` only (override the WPEV) */
|
||
|
|
:is(body[class*="wide-"]:not(.max-view-enabled) .markdown-source-view.mod-cm6:not(.wide-page), div[class*="wide-"].markdown-source-view.mod-cm6:not(.wide-page)) :is(.cm-contentContainer.cm-contentContainer > .cm-content > div, .cm-sizer > .embedded-backlinks)
|
||
|
|
{ max-width: var(--normal-max-width); margin-inline: auto !important; } /* important for margin needed because app.css:1473 use it for .cm-contentContainer > .cm-content > * */
|
||
|
|
|
||
|
|
/* selectors to set dataview, table, callout and/or backlinks to wide */
|
||
|
|
:is(body.wide-dataview-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-dataview"].markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer > div > div:is(.cm-preview-code-block),
|
||
|
|
:is(body.wide-table-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-table"].markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer > div > div:is(.HyperMD-table-row, .cm-table-widget),
|
||
|
|
:is(body.wide-callout-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-callout"].markdown-source-view.mod-cm6) .cm-contentContainer.cm-contentContainer > div > div:is(.cm-callout),
|
||
|
|
/* selectors to set backlinks to wide -- not fix yet for 0.16.x */
|
||
|
|
:is(body.wide-backlinks-global:not(.max-view-enabled) .mod-root .markdown-source-view.mod-cm6, div[class*="-backlinks"].markdown-source-view.mod-cm6) .cm-sizer > div:is(.embedded-backlinks)
|
||
|
|
{ max-width: 100%; }
|
||
|
|
|
||
|
|
|
||
|
|
/* Special adjustment - for Minimal */
|
||
|
|
:is(body:not(.max-view-enabled) .mod-root) div[class*="-dataview"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > div > div:is(.cm-preview-code-block) > div
|
||
|
|
{ width: unset;}
|
||
|
|
/* Special adjustment - for Minimal - to override custom margin-left that uses !important */
|
||
|
|
.wide-table.markdown-source-view.mod-cm6.is-readable-line-width table {margin-left: auto !important; }
|
||
|
|
|
||
|
|
/* Additional Notes
|
||
|
|
- Minimal removes inline padding for .markdown-source-view.mod-cm6 .cm-scroller so it is flushed to the very edges (no way to adjust currently)
|
||
|
|
- added :is(body:not(.max-view-enabled) .mod-root) to accomodate for Shimmering Focus, does not affect other themes */
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Reading View ---
|
||
|
|
- Similar to WBEV, the approach is to leverage on WPRV setting all blocks to wide, set `.markdown-preview-sizer > div` to normal and set related block to wide again
|
||
|
|
- For Reading View, wide-dataview and wide-table will require Contextual Typography plugin
|
||
|
|
- :is() used to couple global toggle with yaml cssClass
|
||
|
|
- wide backlinks still cannot be implemented in 0.16.x as the it is located one div deeper than `.markdown-preview-sizer > div` which means I need to do "look-back", achievable only with :has()
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - WBRV - */
|
||
|
|
/* Main code */
|
||
|
|
/* set the containers to normal width */
|
||
|
|
:is(body[class*="wide-"] .markdown-preview-view:not(.wide-page), div[class*="wide-"].markdown-preview-view:not(.wide-page)) .markdown-preview-sizer.markdown-preview-sizer > div
|
||
|
|
{ max-width: var(--normal-max-width); margin-inline: auto; } /* important is for Atom theme */
|
||
|
|
/* set the related blocks to wide width */
|
||
|
|
:is(body.wide-dataview-global, div[class*="-dataview"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.el-lang-dataview),
|
||
|
|
:is(body.wide-table-global, div[class*="-table"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.el-table),
|
||
|
|
:is(body.wide-callout-global, div[class*="-callout"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div[data-callout],
|
||
|
|
/* comment out wide backlinks as no possible fix (yet) for 0.16.x due to notes above *//*
|
||
|
|
:is(body.wide-backlinks-global, div[class*="-backlinks"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.embedded-backlinks)
|
||
|
|
{ max-width: 100%; }
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Special adjustment - for Minimal - it also somehow set the table width within dataview block */
|
||
|
|
:is(body.wide-dataview-global, div[class*="-dataview"].markdown-preview-view) .markdown-preview-sizer.markdown-preview-sizer > div:is(.el-lang-dataview) table
|
||
|
|
{ max-width: 100%; }
|
||
|
|
/* Special adjustment - for Minimal - to override Minimal custom width */
|
||
|
|
body[class*="global"].contextual-typography .markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div { width: 100%; }
|
||
|
|
|
||
|
|
/* Additional Notes
|
||
|
|
- .markdown-preview-section is same div as .markdown-preview-sizer
|
||
|
|
- Atom uses !important for .markdown-preview-view.is-readable-line-width .markdown-preview-section {...}
|
||
|
|
- cannot adjust this at the moment without disrupting other theme's layout */
|
||
|
|
|
||
|
|
|
||
|
|
/* Editing and Reading View -- Special Adjustment
|
||
|
|
- for table for all theme, since its table not auto margin */
|
||
|
|
:is(body.wide-table-global, div[class*="wide-table"]) table { margin-inline: auto; }
|
||
|
|
|
||
|
|
|
||
|
|
/* === Narrow Page === */
|
||
|
|
/* cssClass YAML to allow users with disabled RLL to introduce RLL per page/note basis */
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Editing View ---
|
||
|
|
- Set Readable Line Length (RLL) to wide (100%) for any css class with "wide" word in it
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - NPEV - */
|
||
|
|
/* Main code */
|
||
|
|
/* set the containers to narrow width. `div.cm-content` added to override Mado 11 */
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer,
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content,
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content > div,
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks,
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks > div
|
||
|
|
{ max-width: var(--narrow-max-width); margin-inline: auto; }
|
||
|
|
|
||
|
|
/* Special adjustment - for Minimal */
|
||
|
|
/* it has table also set with max-width. but table require separate line because we don't want margin: auto that would center the table relative to other elements like para */
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content table
|
||
|
|
{ max-width: var(--narrow-max-width); }
|
||
|
|
/* for Minimal theme but affecting all theme. Minimal apparently uses !important to control margin the adjustment is still safe because for narrow-page you would want margin: auto anyway */
|
||
|
|
div[class*="narrow-"].markdown-source-view.mod-cm6:not(.is-readable-line-width) .cm-contentContainer
|
||
|
|
{ margin-inline: auto !important; }
|
||
|
|
|
||
|
|
|
||
|
|
/* --- Reading View ---
|
||
|
|
- Similar to Editing View, set the RLL to 100% for any css class with "wide" word in it.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - NPRV - */
|
||
|
|
/* Main code */
|
||
|
|
/* set the note with cssClass: narrow- to max-width of the narrow width */
|
||
|
|
div[class*="narrow-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer, /* double-up for specificity */
|
||
|
|
div[class*="narrow-"].markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer > div
|
||
|
|
{ max-width: var(--narrow-max-width); margin-inline: auto;}
|
||
|
|
|
||
|
|
/* Special adjustment - for Minimal theme */
|
||
|
|
div[class*="narrow-"].markdown-preview-view {padding-inline: 30px;}
|
||
|
|
|
||
|
|
|
||
|
|
/* === 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 -- just single line css ;) */
|
||
|
|
|
||
|
|
/* --- Editing and Reading View --- */
|
||
|
|
/* - AREV and ARRV - */
|
||
|
|
body.is-adj-rll { --file-line-width: var(--adj-rll-max-width); }
|
||
|
|
|
||
|
|
/* I still save below snippet for future references. May delete later */
|
||
|
|
|
||
|
|
/* --- Editing View ---
|
||
|
|
- Set Readable Line Length (RLL) to wide (100%) for any css class with "wide" word in it.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - AREV - */
|
||
|
|
/* Main code */
|
||
|
|
/* set the containers to the custom adj rll width. `div.cm-content` added to override Mado 11 *//*
|
||
|
|
.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer,
|
||
|
|
.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content,
|
||
|
|
.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content table, /* for minimal *//*
|
||
|
|
.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .cm-content > div,
|
||
|
|
.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks,
|
||
|
|
.is-adj-rll .markdown-source-view.mod-cm6 .cm-contentContainer.cm-contentContainer > .embedded-backlinks > div
|
||
|
|
{ max-width: var(--adj-rll-max-width); margin-inline: auto; }
|
||
|
|
|
||
|
|
/* --- Reading View ---
|
||
|
|
- Similar to Editing View, set the RLL to 100% for any css class with "wide" word in it
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* - ARRV - */
|
||
|
|
/* Main code */
|
||
|
|
/* set the containers to the custom adj rll width *//*
|
||
|
|
.is-adj-rll .markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer, /* double-up for specificity *//*
|
||
|
|
.is-adj-rll .markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer > div
|
||
|
|
{ max-width: var(--adj-rll-max-width); margin-inline: auto;}
|