├── .gitignore ├── Custom page preview.css ├── Dark PDF export.css ├── Easy multi-column notes.css ├── Folder prefix.css ├── Indent headings.css ├── Note color scheme.css ├── README.md ├── UNLICENSE ├── screenshots └── Easy-multi-column-notes-demo.mp4 └── src ├── Indent headings.scss └── multicol.scss /.gitignore: -------------------------------------------------------------------------------- 1 | /*.css 2 | !Custom page preview.css 3 | !Note color scheme.css 4 | !Easy multi-column notes.css 5 | !Indent headings.css 6 | !Dark PDF export.css 7 | !Folder prefix.css 8 | -------------------------------------------------------------------------------- /Custom page preview.css: -------------------------------------------------------------------------------- 1 | /* Custom page preview v1.4 2 | github.com/zamsyt */ 3 | 4 | .callout[data-callout="page-preview"] { 5 | --callout-icon: lucide-inspect; 6 | --callout-color: 150,150,150; 7 | mix-blend-mode: normal; 8 | padding: 0; } 9 | 10 | /* Editing */ 11 | .callout[data-callout="page-preview"] .callout-title { 12 | padding: var(--callout-padding); } 13 | .markdown-source-view > * > * > * > * > * > * > .callout[data-callout="page-preview"] .callout-content { 14 | border: 1px solid var(--background-modifier-border); 15 | border-radius: var(--callout-radius); } 16 | 17 | 18 | .callout[data-callout="page-preview"] .callout-content { 19 | display: flex; 20 | background: var(--background-secondary); } 21 | 22 | .hover-popover .callout[data-callout="page-preview"] .callout-content { 23 | display: flex !important; } 24 | 25 | /* text */ 26 | .callout[data-callout="page-preview"] .callout-content > :first-child { 27 | margin: 1em; } 28 | 29 | /* image */ 30 | .callout[data-callout="page-preview"] .callout-content > :last-child:not(:first-child) { 31 | margin: 0; 32 | margin-left: auto; 33 | flex-basis: 45%; 34 | flex-shrink: 0; } 35 | .callout[data-callout="page-preview"] .callout-content > :last-child:not(:first-child) img { 36 | display: block; 37 | object-fit: cover; 38 | height: 100%; 39 | width: 100%; } 40 | 41 | /* Fill the whole window */ 42 | .hover-popover .markdown-preview-sizer > div > :not(.callout[data-callout="page-preview"]) { 43 | display: none; } 44 | :root:root:root .hover-popover .markdown-preview-view { 45 | padding: 0; } 46 | .hover-popover .markdown-preview-sizer { 47 | min-height: 0 !important; } 48 | :root .hover-popover { 49 | min-height: var(--size-4-12); } 50 | :root .hover-popover > .markdown-embed { 51 | height: auto; 52 | max-height: var(--popover-height); } 53 | .hover-popover .callout[data-callout="page-preview"] { 54 | margin: 0; } 55 | 56 | /* Hide callout title */ 57 | .hover-popover .callout[data-callout="page-preview"] .callout-title { 58 | display: none; } 59 | 60 | 61 | /* Revert to normal preview when there's no Page preview callout. 62 | Requires installer v1.1.9 */ 63 | .hover-popover .markdown-preview-sizer:not(:has(.callout[data-callout="page-preview"])) > div > * { 64 | display: block; } 65 | :root:root .hover-popover .markdown-preview-view:not(:has(.callout[data-callout="page-preview"])) { 66 | padding: var(--file-margins); } 67 | 68 | /* Hide in reading view */ 69 | .markdown-reading-view > * > * > * > .callout[data-callout="page-preview"] { 70 | display: none; } 71 | -------------------------------------------------------------------------------- /Dark PDF export.css: -------------------------------------------------------------------------------- 1 | /* Dark PDF export v0.3.0 2 | github.com/zamsyt */ 3 | 4 | @media print { 5 | :root body { 6 | /* Blockquotes */ 7 | --blockquote-border-color: var(--interactive-accent); 8 | /* Callouts */ 9 | --callout-blend-mode: var(--highlight-mix-blend-mode); 10 | --callout-bug: var(--color-red-rgb); 11 | --callout-default: var(--color-blue-rgb); 12 | --callout-error: var(--color-red-rgb); 13 | --callout-example: var(--color-purple-rgb); 14 | --callout-fail: var(--color-red-rgb); 15 | --callout-important: var(--color-cyan-rgb); 16 | --callout-info: var(--color-blue-rgb); 17 | --callout-question: var(--color-yellow-rgb); 18 | --callout-success: var(--color-green-rgb); 19 | --callout-summary: var(--color-cyan-rgb); 20 | --callout-tip: var(--color-cyan-rgb); 21 | --callout-todo: var(--color-blue-rgb); 22 | --callout-warning: var(--color-orange-rgb); 23 | /* Checkboxes */ 24 | --checkbox-marker-color: var(--background-primary); 25 | --checkbox-color: var(--interactive-accent); 26 | --checkbox-color-hover: var(--interactive-accent-hover); 27 | --checkbox-border-color: var(--text-faint); 28 | --checkbox-border-color-hover: var(--text-muted); 29 | --checklist-done-color: var(--text-muted); 30 | /* Code */ 31 | --code-background: var(--background-primary-alt); 32 | --code-normal: var(--text-muted); 33 | --code-comment: var(--text-faint); 34 | --code-function: var(--color-yellow); 35 | --code-important: var(--color-orange); 36 | --code-keyword: var(--color-pink); 37 | --code-operator: var(--color-red); 38 | --code-property: var(--color-cyan); 39 | --code-punctuation: var(--text-muted); 40 | --code-string: var(--color-green); 41 | --code-tag: var(--color-red); 42 | --code-value: var(--color-purple); 43 | /* Embeds */ 44 | --embed-border-left: 2px solid var(--interactive-accent); 45 | /* Blocks */ 46 | --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), 47 | inset 0 0 0 1px var(--background-modifier-border); 48 | /* Headings */ 49 | --heading-formatting: var(--text-faint); 50 | /* Horizontal rules */ 51 | --hr-color: var(--background-modifier-border); 52 | /* Icons */ 53 | --icon-color: var(--text-muted); 54 | --icon-color-hover: var(--text-muted); 55 | --icon-color-active: var(--text-accent); 56 | --icon-color-focused: var(--text-normal); 57 | /* Indentation guide */ 58 | --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); 59 | --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); 60 | /* Links */ 61 | --link-color: var(--text-accent); 62 | --link-color-hover: var(--text-accent-hover); 63 | --link-external-color: var(--text-accent); 64 | --link-external-color-hover: var(--text-accent-hover); 65 | --link-unresolved-color: var(--text-accent); 66 | --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); 67 | /* Lists */ 68 | --list-marker-color: var(--text-faint); 69 | --list-marker-color-hover: var(--text-muted); 70 | --list-marker-color-collapsed: var(--text-accent); 71 | /* Search */ 72 | --search-clear-button-color: var(--text-muted); 73 | --search-icon-color: var(--text-muted); 74 | --search-result-background: var(--background-primary); 75 | /* Sliders */ 76 | --slider-thumb-border-color: var(--background-modifier-border-hover); 77 | --slider-track-background: var(--background-modifier-border); 78 | /* Swatch for color inputs */ 79 | --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); 80 | /* Tables */ 81 | --table-border-color: var(--background-modifier-border); 82 | --table-header-border-color: var(--table-border-color); 83 | --table-header-color: var(--text-normal); 84 | /* Tags */ 85 | --tag-color: var(--text-accent); 86 | --tag-color-hover: var(--text-accent); 87 | --tag-background: hsla(var(--interactive-accent-hsl), 0.1); 88 | --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); 89 | --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); 90 | --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); 91 | /* Workspace */ 92 | --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); 93 | /* Backgrounds */ 94 | --background-primary: var(--color-base-00); 95 | --background-primary-alt: var(--color-base-10); 96 | --background-secondary: var(--color-base-20); 97 | --background-modifier-hover: rgba(var(--mono-rgb-100), 0.075); 98 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 99 | --background-modifier-border: var(--color-base-30); 100 | --background-modifier-border-hover: var(--color-base-35); 101 | --background-modifier-border-focus: var(--color-base-40); 102 | --background-modifier-error-rgb: var(--color-red-rgb); 103 | --background-modifier-error: var(--color-red); 104 | --background-modifier-error-hover: var(--color-red); 105 | --background-modifier-success-rgb: var(--color-green-rgb); 106 | --background-modifier-success: var(--color-green); 107 | /* Inputs */ 108 | --background-modifier-form-field: var(--color-base-00); 109 | /* Text */ 110 | --text-normal: var(--color-base-100); 111 | --text-muted: var(--color-base-70); 112 | --text-faint: var(--color-base-50); 113 | --text-error: var(--color-red); 114 | --text-success: var(--color-green); 115 | --text-selection: hsla(var(--color-accent-hsl), 0.2); 116 | --text-accent: var(--color-accent); 117 | --text-accent-hover: var(--color-accent-2); 118 | --interactive-normal: var(--color-base-00); 119 | --interactive-hover: var(--color-base-10); 120 | --interactive-accent-hsl: var(--color-accent-hsl); 121 | --interactive-accent: var(--color-accent-1); 122 | --interactive-accent-hover: var(--color-accent-2); 123 | 124 | color-scheme: dark; 125 | --highlight-mix-blend-mode: lighten; 126 | --mono-rgb-0: 0, 0, 0; 127 | --mono-rgb-100: 255, 255, 255; 128 | --color-red-rgb: 251, 70, 76; 129 | --color-red: #fb464c; 130 | --color-orange-rgb: 233, 151, 63; 131 | --color-orange: #E9973F; 132 | --color-yellow-rgb: 224, 222, 113; 133 | --color-yellow: #E0DE71; 134 | --color-green-rgb: 68, 207, 110; 135 | --color-green: #44CF6E; 136 | --color-cyan-rgb: 83, 223, 221; 137 | --color-cyan: #53DFDD; 138 | --color-blue-rgb: 2, 122, 255; 139 | --color-blue: #027aff; 140 | --color-purple-rgb: 168, 130, 255; 141 | --color-purple: #a882ff; 142 | --color-pink-rgb: 250, 153, 205; 143 | --color-pink: #FA99CD; 144 | --color-base-00: #1e1e1e; 145 | --color-base-10: #242424; 146 | --color-base-20: #262626; 147 | --color-base-25: #2a2a2a; 148 | --color-base-30: #363636; 149 | --color-base-35: #3F3F3F; 150 | --color-base-40: #555; 151 | --color-base-50: #666; 152 | --color-base-60: #999; 153 | --color-base-70: #bababa; 154 | --color-base-100: #dadada; 155 | --color-accent-hsl: var(--accent-h), 156 | var(--accent-s), 157 | var(--accent-l); 158 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 159 | --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%)); 160 | --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%)); 161 | --background-modifier-form-field: var(--color-base-25); 162 | --background-secondary-alt: var(--color-base-30); 163 | --interactive-normal: var(--color-base-30); 164 | --interactive-hover: var(--color-base-35); 165 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 166 | --background-modifier-cover: rgba(10, 10, 10, 0.4); 167 | --text-highlight-bg: rgba(255, 208, 0, 0.4); 168 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 169 | --text-selection: hsla(var(--interactive-accent-hsl), 0.25); 170 | --input-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 171 | 0 2px 4px 0 rgba(0,0,0,.15), 172 | 0 1px 1.5px 0 rgba(0,0,0,.1), 173 | 0 1px 2px 0 rgba(0,0,0,.2), 174 | 0 0 0 0 transparent; 175 | --input-shadow-hover: inset 0 0.5px 1px 0.5px rgba(255, 255, 255, 0.16), 176 | 0 2px 3px 0 rgba(0,0,0,.3), 177 | 0 1px 1.5px 0 rgba(0,0,0,.2), 178 | 0 1px 2px 0 rgba(0,0,0,.4), 179 | 0 0 0 0 transparent; 180 | --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 181 | 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 182 | 0px 15px 30px rgba(0, 0, 0, 0.3); 183 | --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 184 | 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 185 | 0px 30px 90px rgba(0, 0, 0, 0.2); 186 | 187 | box-shadow: 0 0 0 100vh var(--background-primary); /*Fill the end of the last page*/ 188 | } 189 | } 190 | 191 | .print .markdown-preview-view { 192 | background-color: var(--background-primary); 193 | color: var(--text-normal); 194 | } 195 | -------------------------------------------------------------------------------- /Easy multi-column notes.css: -------------------------------------------------------------------------------- 1 | /* Multicolumn Notes v0.5.4 2 | github.com/zamsyt */ 3 | .markdown-preview-view div:has(> hr) + * > hr, 4 | .markdown-source-view :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + *, 5 | .callout-content hr + hr { 6 | break-after: column; } 7 | 8 | .mod-header, 9 | .frontmatter-container, 10 | .cm-line:has(.cm-hmd-frontmatter), 11 | .cm-line:has(.cm-hmd-frontmatter) + .cm-line:has(br:only-child) { 12 | column-span: all; } 13 | 14 | /* Add vertical lines */ 15 | .cm-contentContainer > *, 16 | .markdown-preview-sizer, 17 | .callout-content { 18 | column-rule: solid var(--hr-thickness) var(--hr-color); } 19 | 20 | /* Hide double
s */ 21 | .hr:has(+ .hr):not(:has(+ * + .cm-active)), 22 | .hr + .hr:not(:has(+ .cm-active)), 23 | .el-hr:has(+ .el-hr), .el-hr + .el-hr, 24 | hr:has(+ hr), hr + hr { 25 | --hr-color: transparent; } 26 | 27 | .markdown-preview-view div:has(> hr) + * > hr, 28 | .markdown-preview-view div:has(+ * > hr) > hr, 29 | .markdown-preview-view hr + hr, 30 | .markdown-preview-view hr:has(+ hr) { 31 | margin: 0; } 32 | 33 | /* Disable Readable line length for multi-column notes */ 34 | .markdown-source-view.is-live-preview:has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)), 35 | .markdown-preview-view:has(> * > .el-hr + .el-hr + :not(.mod-footer)) { 36 | --file-line-width: 100%; } 37 | 38 | /* Live preview */ 39 | .is-live-preview .cm-contentContainer > :has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)) { 40 | column-count: 2; } 41 | .is-live-preview .cm-contentContainer > :has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)) { 42 | column-count: 3; } 43 | .is-live-preview .cm-contentContainer > :has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)) { 44 | column-count: 4; } 45 | .is-live-preview .cm-contentContainer > :has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)) { 46 | column-count: 5; } 47 | .is-live-preview .cm-contentContainer > :has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) ~ :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)) { 48 | column-count: 6; } 49 | 50 | /* Reading view 51 | Requires Contextual Typography */ 52 | .markdown-preview-sizer:has(> .el-hr + .el-hr + :not(.mod-footer)) { 53 | column-count: 2; } 54 | .markdown-preview-sizer:has(> .el-hr + .el-hr ~ .el-hr + .el-hr + :not(.mod-footer)) { 55 | column-count: 3; } 56 | .markdown-preview-sizer:has(> .el-hr + .el-hr ~ .el-hr + .el-hr ~ .el-hr + .el-hr + :not(.mod-footer)) { 57 | column-count: 4; } 58 | .markdown-preview-sizer:has(> .el-hr + .el-hr ~ .el-hr + .el-hr ~ .el-hr + .el-hr ~ .el-hr + .el-hr + :not(.mod-footer)) { 59 | column-count: 5; } 60 | .markdown-preview-sizer:has(> .el-hr + .el-hr ~ .el-hr + .el-hr ~ .el-hr + .el-hr ~ .el-hr + .el-hr ~ .el-hr + .el-hr + :not(.mod-footer)) { 61 | column-count: 6; } 62 | 63 | /* Callouts */ 64 | .callout-content:has(> hr + hr:not(:last-child)) { 65 | column-count: 2; } 66 | .callout-content:has(> hr + hr ~ hr + hr:not(:last-child)) { 67 | column-count: 3; } 68 | .callout-content:has(> hr + hr ~ hr + hr ~ hr + hr:not(:last-child)) { 69 | column-count: 4; } 70 | .callout-content:has(> hr + hr ~ hr + hr ~ hr + hr ~ hr + hr:not(:last-child)) { 71 | column-count: 5; } 72 | .callout-content:has(> hr + hr ~ hr + hr ~ hr + hr ~ hr + hr ~ hr + hr:not(:last-child)) { 73 | column-count: 6; } 74 | 75 | /* Make first elements of columns have consistent top margins */ 76 | .canvas-node-content > * > .markdown-preview-view div:has(> hr) + div:has(> hr) + div > :first-child, 77 | .inline-embed .markdown-embed-content .callout-content hr + hr + p { 78 | margin-top: 0; } 79 | 80 | /* Fix embed excess height */ 81 | .markdown-embed .markdown-preview-sizer { 82 | min-height: 0 !important; } 83 | 84 | /* Fix list bullet alignment */ 85 | .markdown-rendered .list-bullet { 86 | float: none; 87 | left: -1em; 88 | margin-left: 0; } 89 | -------------------------------------------------------------------------------- /Folder prefix.css: -------------------------------------------------------------------------------- 1 | /* Folder prefix v0.1.1 2 | github.com/zamsyt */ 3 | :not(.mod-root) > .nav-folder-title { 4 | min-height: calc(var(--nav-item-size) * var(--line-height-tight) + var(--size-4-2)); 5 | & > .nav-folder-title-content::first-letter { 6 | font-size: 0; 7 | } 8 | &:has(> .nav-folder-title-content.is-being-renamed), 9 | body:is(:not(.sort-prefix-hidden), .sort-prefix-show-on-hover) &:hover:has(> .nav-folder-title-content), 10 | body:is(:not(.sort-prefix-hidden), .sort-prefix-show-on-active-menu) &.has-active-menu, 11 | body.sort-prefix-show-on-focus .workspace-leaf.mod-active &.has-focus, 12 | body.sort-prefix-always-visible & { 13 | padding-top: 0; 14 | padding-bottom: 0; 15 | padding-right: 0; 16 | 17 | & > .nav-folder-title-content::first-letter { 18 | font-size: unset; 19 | border: var(--input-border-width) solid var(--background-modifier-border); 20 | background: var(--background-modifier-form-field); 21 | margin-right: 2px; 22 | padding: var(--size-2-1) var(--size-2-3); 23 | line-height: calc(var(--nav-item-size) * var(--line-height-tight) + var(--size-4-2)); 24 | border-radius: 5px; 25 | } 26 | 27 | & > .nav-folder-collapse-indicator { 28 | margin-top: var(--size-4-1); 29 | } 30 | } 31 | } 32 | 33 | .view-header-breadcrumb::first-letter { 34 | border: var(--input-border-width) solid var(--background-modifier-border); 35 | margin-right: 2px; 36 | padding: var(--size-2-1) var(--size-2-3); 37 | border-radius: 5px; 38 | } 39 | 40 | /* @settings 41 | name: Folder prefix 42 | id: sort-prefix 43 | settings: 44 | - 45 | id: sort-prefix-info 46 | description: "[Docs](https://github.com/zamsyt/obsidian-snippets/wiki/Folder-prefix)" 47 | type: info-text 48 | markdown: true 49 | - 50 | id: sort-prefix-visibility 51 | title: Folder prefix visibility 52 | type: class-select 53 | allowEmpty: false 54 | default: sort-prefix-hidden 55 | options: 56 | - label: hidden 57 | value: sort-prefix-hidden 58 | - label: always visible 59 | value: sort-prefix-always-visible 60 | - 61 | id: sort-prefix-show-on-hover 62 | title: Show on hover 63 | type: class-toggle 64 | default: true 65 | - 66 | id: sort-prefix-show-on-active-menu 67 | title: Show on right-click 68 | description: Show folder prefix when right-click menu is active 69 | type: class-toggle 70 | default: true 71 | - 72 | id: sort-prefix-show-on-focus 73 | title: Show on focus 74 | description: Show folder prefix when focused using the keyboard 75 | type: class-toggle 76 | */ 77 | 78 | -------------------------------------------------------------------------------- /Indent headings.css: -------------------------------------------------------------------------------- 1 | /* Indent headings v0.3.0 2 | github.com/zamsyt */ 3 | :root:root .cm-content > div, .markdown-preview-view > * > div { 4 | margin-left: calc(max(0, var(--heading-level) - 1) * 20px) !important; } 5 | 6 | .markdown-embed-content { 7 | --heading-level: 0; } 8 | 9 | .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 10 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 11 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 12 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 13 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 14 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 15 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 16 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h1) ~ *, 17 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> h1) ~ *, 18 | .markdown-source-view .HyperMD-header ~ .HyperMD-header-1 ~ *, .markdown-preview-view div:has(> h1) ~ *, 19 | .markdown-source-view .HyperMD-header-1 ~ * { 20 | --heading-level: 1; } 21 | 22 | .HyperMD-header-1, div:has(> h1) { 23 | --heading-level: 1 !important; } 24 | 25 | .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 26 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 27 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 28 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 29 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 30 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 31 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 32 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h2) ~ *, 33 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> h2) ~ *, 34 | .markdown-source-view .HyperMD-header ~ .HyperMD-header-2 ~ *, .markdown-preview-view div:has(> h2) ~ *, 35 | .markdown-source-view .HyperMD-header-2 ~ * { 36 | --heading-level: 2; } 37 | 38 | .HyperMD-header-2, div:has(> h2) { 39 | --heading-level: 2 !important; } 40 | 41 | .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 42 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 43 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 44 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 45 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 46 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 47 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 48 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h3) ~ *, 49 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> h3) ~ *, 50 | .markdown-source-view .HyperMD-header ~ .HyperMD-header-3 ~ *, .markdown-preview-view div:has(> h3) ~ *, 51 | .markdown-source-view .HyperMD-header-3 ~ * { 52 | --heading-level: 3; } 53 | 54 | .HyperMD-header-3, div:has(> h3) { 55 | --heading-level: 3 !important; } 56 | 57 | .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 58 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 59 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 60 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 61 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 62 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 63 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 64 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h4) ~ *, 65 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> h4) ~ *, 66 | .markdown-source-view .HyperMD-header ~ .HyperMD-header-4 ~ *, .markdown-preview-view div:has(> h4) ~ *, 67 | .markdown-source-view .HyperMD-header-4 ~ * { 68 | --heading-level: 4; } 69 | 70 | .HyperMD-header-4, div:has(> h4) { 71 | --heading-level: 4 !important; } 72 | 73 | .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 74 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 75 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 76 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 77 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 78 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 79 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 80 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h5) ~ *, 81 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> h5) ~ *, 82 | .markdown-source-view .HyperMD-header ~ .HyperMD-header-5 ~ *, .markdown-preview-view div:has(> h5) ~ *, 83 | .markdown-source-view .HyperMD-header-5 ~ * { 84 | --heading-level: 5; } 85 | 86 | .HyperMD-header-5, div:has(> h5) { 87 | --heading-level: 5 !important; } 88 | 89 | .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 90 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 91 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 92 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 93 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 94 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 95 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 96 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> [data-heading]) ~ div:has(> h6) ~ *, 97 | .markdown-source-view .HyperMD-header ~ .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> [data-heading]) ~ div:has(> h6) ~ *, 98 | .markdown-source-view .HyperMD-header ~ .HyperMD-header-6 ~ *, .markdown-preview-view div:has(> h6) ~ *, 99 | .markdown-source-view .HyperMD-header-6 ~ * { 100 | --heading-level: 6; } 101 | 102 | .HyperMD-header-6, div:has(> h6) { 103 | --heading-level: 6 !important; } 104 | -------------------------------------------------------------------------------- /Note color scheme.css: -------------------------------------------------------------------------------- 1 | /* Note color scheme v1.0 */ 2 | .markdown-source-view, .markdown-preview-view { 3 | --blockquote-border-color: var(--interactive-accent); 4 | --callout-blend-mode: var(--highlight-mix-blend-mode); 5 | --callout-bug: var(--color-red-rgb); 6 | --callout-default: var(--color-blue-rgb); 7 | --callout-error: var(--color-red-rgb); 8 | --callout-example: var(--color-purple-rgb); 9 | --callout-fail: var(--color-red-rgb); 10 | --callout-important: var(--color-cyan-rgb); 11 | --callout-info: var(--color-blue-rgb); 12 | --callout-question: var(--color-yellow-rgb); 13 | --callout-success: var(--color-green-rgb); 14 | --callout-summary: var(--color-cyan-rgb); 15 | --callout-tip: var(--color-cyan-rgb); 16 | --callout-todo: var(--color-blue-rgb); 17 | --callout-warning: var(--color-orange-rgb); 18 | --canvas-dot-pattern: var(--color-base-30); 19 | --canvas-color-1: var(--color-red-rgb); 20 | --canvas-color-2: var(--color-orange-rgb); 21 | --canvas-color-3: var(--color-yellow-rgb); 22 | --canvas-color-4: var(--color-green-rgb); 23 | --canvas-color-5: var(--color-cyan-rgb); 24 | --canvas-color-6: var(--color-purple-rgb); 25 | --checkbox-marker-color: var(--background-primary); 26 | --checkbox-color: var(--interactive-accent); 27 | --checkbox-color-hover: var(--interactive-accent-hover); 28 | --checkbox-border-color: var(--text-faint); 29 | --checkbox-border-color-hover: var(--text-muted); 30 | --checklist-done-color: var(--text-muted); 31 | --code-background: var(--background-primary-alt); 32 | --code-normal: var(--text-muted); 33 | --code-comment: var(--text-faint); 34 | --code-function: var(--color-yellow); 35 | --code-important: var(--color-orange); 36 | --code-keyword: var(--color-pink); 37 | --code-operator: var(--color-red); 38 | --code-property: var(--color-cyan); 39 | --code-punctuation: var(--text-muted); 40 | --code-string: var(--color-green); 41 | --code-tag: var(--color-red); 42 | --code-value: var(--color-purple); 43 | --collapse-icon-color: var(--text-faint); 44 | --collapse-icon-color-collapsed: var(--text-accent); 45 | --divider-color: var(--background-modifier-border); 46 | --divider-color-hover: var(--interactive-accent); 47 | --embed-border-left: 2px solid var(--interactive-accent); 48 | --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), 49 | inset 0 0 0 1px var(--background-modifier-border); 50 | --graph-text: var(--text-normal); 51 | --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); 52 | --graph-node: var(--text-muted); 53 | --graph-node-unresolved: var(--text-faint); 54 | --graph-node-focused: var(--text-accent); 55 | --graph-node-tag: var(--color-green); 56 | --graph-node-attachment: var(--color-yellow); 57 | --heading-formatting: var(--text-faint); 58 | --hr-color: var(--background-modifier-border); 59 | --icon-color: var(--text-muted); 60 | --icon-color-hover: var(--text-muted); 61 | --icon-color-active: var(--text-accent); 62 | --icon-color-focused: var(--text-normal); 63 | --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); 64 | --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); 65 | --link-color: var(--text-accent); 66 | --link-color-hover: var(--text-accent-hover); 67 | --link-external-color: var(--text-accent); 68 | --link-external-color-hover: var(--text-accent-hover); 69 | --link-unresolved-color: var(--text-accent); 70 | --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); 71 | --list-marker-color: var(--text-faint); 72 | --list-marker-color-hover: var(--text-muted); 73 | --list-marker-color-collapsed: var(--text-accent); 74 | --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2); 75 | --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05); 76 | --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1); 77 | --search-clear-button-color: var(--text-muted); 78 | --search-icon-color: var(--text-muted); 79 | --search-result-background: var(--background-primary); 80 | --slider-thumb-border-color: var(--background-modifier-border-hover); 81 | --slider-track-background: var(--background-modifier-border); 82 | --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); 83 | --tab-background-active: var(--background-primary); 84 | --tab-text-color: var(--text-faint); 85 | --tab-text-color-active: var(--text-muted); 86 | --tab-text-color-focused: var(--text-muted); 87 | --tab-text-color-focused-active: var(--text-muted); 88 | --tab-text-color-focused-highlighted: var(--text-accent); 89 | --tab-text-color-focused-active-current: var(--text-normal); 90 | --tab-container-background: var(--background-secondary); 91 | --tab-divider-color: var(--background-modifier-border-hover); 92 | --tab-outline-color: var(--divider-color); 93 | --table-border-color: var(--background-modifier-border); 94 | --table-header-border-color: var(--table-border-color); 95 | --table-header-color: var(--text-normal); 96 | --tag-color: var(--text-accent); 97 | --tag-color-hover: var(--text-accent); 98 | --tag-background: hsla(var(--interactive-accent-hsl), 0.1); 99 | --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); 100 | --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); 101 | --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); 102 | --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); 103 | --background-primary: var(--color-base-00); 104 | --background-primary-alt: var(--color-base-10); 105 | --background-secondary: var(--color-base-20); 106 | --background-modifier-hover: rgba(var(--mono-rgb-100), 0.075); 107 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 108 | --background-modifier-border: var(--color-base-30); 109 | --background-modifier-border-hover: var(--color-base-35); 110 | --background-modifier-border-focus: var(--color-base-40); 111 | --background-modifier-error-rgb: var(--color-red-rgb); 112 | --background-modifier-error: var(--color-red); 113 | --background-modifier-error-hover: var(--color-red); 114 | --background-modifier-success-rgb: var(--color-green-rgb); 115 | --background-modifier-success: var(--color-green); 116 | --background-modifier-form-field: var(--color-base-00); 117 | --text-normal: var(--color-base-100); 118 | --text-muted: var(--color-base-70); 119 | --text-faint: var(--color-base-50); 120 | --text-error: var(--color-red); 121 | --text-success: var(--color-green); 122 | --text-selection: hsla(var(--color-accent-hsl), 0.2); 123 | --text-accent: var(--color-accent); 124 | --text-accent-hover: var(--color-accent-2); 125 | --interactive-normal: var(--color-base-00); 126 | --interactive-hover: var(--color-base-10); 127 | --interactive-accent-hsl: var(--color-accent-hsl); 128 | --interactive-accent: var(--color-accent-1); 129 | --interactive-accent-hover: var(--color-accent-2); 130 | background-color: var(--background-primary); 131 | color: var(--text-normal); 132 | } 133 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian snippets by Zamsyt 2 | 3 | - [Custom page preview](../../wiki/Custom-page-preview) 4 | - [Dark PDF export](../../wiki/Dark-PDF-export) 5 | - [Easy multi-column notes](../../wiki/Easy-multi-column-notes) 6 | - [Folder prefix](../../wiki/Folder-prefix) 7 | - [Indent headings](../../wiki/Indent-headings) 8 | - [Note color scheme](../../wiki/Note-color-scheme) 9 | 10 | ## [Easy multi-column notes](../../wiki/Easy-multi-column-notes) 11 | 12 | https://user-images.githubusercontent.com/102934832/230377504-a1c40c6e-5f06-4cf0-b160-a88e9c83adb9.mp4 13 | -------------------------------------------------------------------------------- /UNLICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /screenshots/Easy-multi-column-notes-demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zamsyt/obsidian-snippets/85cb22f083ff0d231176d125e04c3e9b0c03a7c8/screenshots/Easy-multi-column-notes-demo.mp4 -------------------------------------------------------------------------------- /src/Indent headings.scss: -------------------------------------------------------------------------------- 1 | /* Indent headings v0.3.0 2 | github.com/zamsyt */ 3 | :root:root .cm-content > div, .markdown-preview-view > * > div { 4 | margin-left: calc(max(0, var(--heading-level) - 1) * 20px) !important; 5 | } 6 | 7 | $max-headings: 10; 8 | 9 | .markdown-embed-content { 10 | --heading-level: 0; 11 | } 12 | 13 | @for $i from 1 through 6 { 14 | %heading-#{$i} { 15 | --heading-level: #{$i}; 16 | } 17 | 18 | .HyperMD-header-#{$i}, div:has(> h#{$i}) { 19 | --heading-level: #{$i} !important; 20 | } 21 | } 22 | 23 | $rv-headers: ""; 24 | $cm-headers: ""; 25 | @for $_ from 0 to $max-headings { 26 | @for $i from 1 through 6 { 27 | .markdown-preview-view #{$rv-headers} div:has(> h#{$i}) ~ *, 28 | .markdown-source-view #{$cm-headers} .HyperMD-header-#{$i} ~ * { 29 | @extend %heading-#{$i}; 30 | } 31 | } 32 | $rv-headers: $rv-headers + "div:has(> [data-heading]) ~"; 33 | $cm-headers: $cm-headers + ".HyperMD-header ~"; 34 | } 35 | -------------------------------------------------------------------------------- /src/multicol.scss: -------------------------------------------------------------------------------- 1 | /* Multicolumn Notes v0.5.4 2 | github.com/zamsyt */ 3 | $max-columns: 6; 4 | 5 | .markdown-preview-view div:has(> hr) +*> hr, 6 | .markdown-source-view :is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + *, 7 | .callout-content hr + hr { 8 | break-after: column; 9 | } 10 | 11 | .mod-header, 12 | .frontmatter-container, 13 | .cm-line:has(.cm-hmd-frontmatter), 14 | .cm-line:has(.cm-hmd-frontmatter) + .cm-line:has(br:only-child) { 15 | column-span: all; 16 | } 17 | 18 | /* Add vertical lines */ 19 | .cm-contentContainer > *, 20 | .markdown-preview-sizer, 21 | .callout-content { 22 | column-rule: solid var(--hr-thickness) var(--hr-color); 23 | } 24 | 25 | /* Hide double
s */ 26 | .hr:has(+ .hr):not(:has(+*+ .cm-active)), 27 | .hr + .hr:not(:has(+ .cm-active)), 28 | .el-hr:has(+ .el-hr), .el-hr + .el-hr, 29 | hr:has(+ hr), hr + hr { 30 | --hr-color: transparent; 31 | } 32 | 33 | .markdown-preview-view div:has(> hr) + * > hr, 34 | .markdown-preview-view div:has(+ * > hr) > hr, 35 | .markdown-preview-view hr + hr, 36 | .markdown-preview-view hr:has(+ hr) { 37 | margin: 0; 38 | } 39 | 40 | /* Disable Readable line length for multi-column notes */ 41 | .markdown-source-view.is-live-preview:has(:is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr) + .cm-line:not(:last-child)), 42 | .markdown-preview-view:has(> * > .el-hr + .el-hr + :not(.mod-footer)) { 43 | --file-line-width: 100%; 44 | } 45 | 46 | /* Live preview */ 47 | $hrX2: ":is(.HyperMD-hr:not(.HyperMD-quote), .hr) + :is(.HyperMD-hr, .hr)"; 48 | $hrs: $hrX2; 49 | @for $i from 2 through $max-columns { 50 | .is-live-preview .cm-contentContainer > :has(#{$hrs} + .cm-line:not(:last-child)) { 51 | column-count: $i; 52 | } 53 | $hrs: "#{$hrs} ~ #{$hrX2}"; 54 | } 55 | 56 | /* Reading view 57 | Requires Contextual Typography */ 58 | $hrs: ".el-hr + .el-hr"; 59 | @for $i from 2 through $max-columns { 60 | .markdown-preview-sizer:has(> #{$hrs} + :not(.mod-footer)) { 61 | column-count: $i; 62 | } 63 | $hrs: $hrs + "~ .el-hr + .el-hr" 64 | } 65 | 66 | /* Callouts */ 67 | $hrs: "hr + hr"; 68 | @for $i from 2 through $max-columns { 69 | .callout-content:has(> #{$hrs}:not(:last-child)) { 70 | column-count: $i; 71 | } 72 | $hrs: $hrs + "~ hr + hr" 73 | } 74 | 75 | 76 | /* Make first elements of columns have consistent top margins */ 77 | // app.css: `.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view .markdown-preview-pusher + div > *:first-child` 78 | .canvas-node-content > * > .markdown-preview-view div:has(> hr) + div:has(> hr) + div > :first-child, 79 | // app.css: `.inline-embed .markdown-embed-content p:first-child { margin-top: 0; }` 80 | // Surely this is not intentional? (this targets ALL top-level paragraphs since they're all under their own divs) 81 | // Well, to make this consistent in embedded callouts: 82 | .inline-embed .markdown-embed-content .callout-content hr + hr + p { 83 | margin-top: 0; 84 | } 85 | 86 | /* Fix embed excess height */ 87 | .markdown-embed .markdown-preview-sizer { 88 | min-height: 0 !important; } 89 | 90 | /* Fix list bullet alignment */ 91 | // app.css: 92 | // ``` 93 | // .markdown-rendered .list-bullet { 94 | // float: left; 95 | // margin-left: -1em; 96 | // } 97 | // ``` 98 | // Looks like Chromium doesn't like this combination of columns, float and absolute positioning. Here's a replacement: 99 | .markdown-rendered .list-bullet { 100 | float: none; 101 | left: -1em; 102 | margin-left: 0; 103 | } 104 | --------------------------------------------------------------------------------