Css to hide folded frontmatter

Share & showcase
1

We can fold frontmatter to hide our metadata, but that line with “> …” symbols remains and is still distracting. I like to have a very clean view of my notes in live preview, but still want to be able to edit my metadata. So I wrote this css snippet. It makes folded frontmatter line invisible, but it is revealed on hover, so we can still easily open and edit metadata.

.view-content .is-live-preview 
.cm-line:not(.HyperMD-header, .HyperMD-list-line) 
.is-collapsed .collapse-indicator svg.svg-icon,
.view-content .is-live-preview 
.cm-line:not(.HyperMD-header, .HyperMD-list-line)
.cm-foldPlaceholder {
visibility: hidden;
}

.view-content .is-live-preview 
.cm-line:not(.HyperMD-header, .HyperMD-list-line):hover 
.is-collapsed .collapse-indicator svg.svg-icon,
.view-content .is-live-preview 
.cm-line:not(.HyperMD-header, .HyperMD-list-line):hover
.cm-foldPlaceholder {
visibility: visible;
}

This css only works in live preview. If you want it to work in the source view too, remove .is-live-preview bits. Also if you remove :not(.HyperMD-header, .HyperMD-list-line) bits it will hide fold indicators not only in frontmatter, but also in folded lists and headers.

3 Likes
2

Great. You can also simplify this a bit:

	.view-content .is-live-preview .cm-line:not(.HyperMD-header, .HyperMD-list-line):not(:hover) .is-collapsed .collapse-indicator svg.svg-icon,
	.view-content .is-live-preview .cm-line:not(.HyperMD-header, .HyperMD-list-line):not(:hover) .cm-foldPlaceholder {
		visibility: hidden;
	}
1 Like