Last active
August 28, 2025 13:39
-
-
Save anpigon/e0d39e255835a2f94d102cb8b3b44137 to your computer and use it in GitHub Desktop.
MCL Wide Views.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* === README for MCL Wide Views snippet / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay | |
| Ver 0.9.7 (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-base | |
| - 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-base, .wide-callout, .wide-backlinks).markdown-source-view.is-readable-line-width, | |
| :is(.wide-table, .wide-dataview, .wide-base, .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; | |
| } | |
| .is-live-preview:is(.wide-dataview-global, .wide-dataview) div:has(> .block-language-dataview), | |
| :is(.wide-dataview-global, .wide-dataview) div:has(> .block-language-dataviewjs) { | |
| width: calc(100cqi - 4rem); | |
| margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 + 2rem) !important; | |
| } | |
| :is(.wide-base) .cm-preview-code-block:has(> .block-language-base) { | |
| 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-base) div:has(> .block-language-base) { | |
| width: 100cqi; | |
| margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 ) !important; | |
| } | |
| .is-live-preview:is(.wide-base) .cm-preview-code-block:has(> .block-language-base) { | |
| width: calc(100cqi - 4rem); | |
| margin-left: calc( max( 100cqi - var(--file-line-width), 1rem ) / 2 * -1 + 2rem) !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 | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment