Marcel Arndt
396 lines
17 KiB
CSS
396 lines
17 KiB
CSS
/* === 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
|
|
|
|
*/ |