Skip to content

Instantly share code, notes, and snippets.

@kepano
Last active February 4, 2022 14:04
Show Gist options
  • Save kepano/c7f3d1d672d9c489421097d26d3de4b6 to your computer and use it in GitHub Desktop.
Save kepano/c7f3d1d672d9c489421097d26d3de4b6 to your computer and use it in GitHub Desktop.
Relationship lines and folding for Minimal Theme
/* TOC
Relationship lines in Preview
Relationship lines in Edit mode
Folding padding adjustment
Folding icons in Preview
Folding icons in Edit mode
*/
/* Relationship lines in Preview */
.markdown-preview-view ul ul {
position:relative;
}
.markdown-preview-view ul ul::before {
content:'';
border-left:1px solid var(--background-modifier-border);
position:absolute;
left:-14px;
top:0;
bottom:0;
}
.markdown-preview-view ul.contains-task-list::before {
top:5px;
}
.markdown-preview-view .task-list-item-checkbox {
margin-left:-21px;
}
/* Relationship lines in Edit mode */
.cm-hmd-list-indent > .cm-tab {
display:inline-block;
}
.cm-hmd-list-indent > .cm-tab:after {
content:" ";
display:block;
width:1px;
position:absolute;
top:1px;
border-right:1px solid var(--background-modifier-border);
height:100%;
}
/* Add padding to account for gutter in Edit mode when folding is on */
body:not(.plugin-sliding-panes-rotate-header) .view-header-title,
.allow-fold-headings.markdown-preview-view.is-readable-line-width .markdown-preview-sizer,
.allow-fold-lists.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
padding-left:16px;
}
/* Folding icons in Preview */
.markdown-preview-view .heading-collapse-indicator.collapse-indicator svg,
.markdown-preview-view ol > li .collapse-indicator svg,
.markdown-preview-view ul > li .collapse-indicator svg {
opacity:0;
}
h1:hover .heading-collapse-indicator.collapse-indicator svg,
h2:hover .heading-collapse-indicator.collapse-indicator svg,
h3:hover .heading-collapse-indicator.collapse-indicator svg,
h4:hover .heading-collapse-indicator.collapse-indicator svg,
h5:hover .heading-collapse-indicator.collapse-indicator svg,
.markdown-preview-view .is-collapsed .collapse-indicator svg,
.markdown-preview-view .collapse-indicator:hover svg {
opacity:1;
}
.markdown-preview-view .is-collapsed h1::after,
.markdown-preview-view .is-collapsed h2::after,
.markdown-preview-view .is-collapsed h3::after,
.markdown-preview-view .is-collapsed h4::after,
.markdown-preview-view .is-collapsed h5::after,
.markdown-preview-view ol .is-collapsed::after,
.markdown-preview-view ul .is-collapsed::after {
content:"...";
padding:5px;
color:var(--text-faint);
}
.markdown-preview-view ol > li.task-list-item .collapse-indicator,
.markdown-preview-view ul > li.task-list-item .collapse-indicator {
margin-left:-42px;
}
.markdown-preview-view ol > li .collapse-indicator {
padding-right:20px;
}
.markdown-preview-view .heading-collapse-indicator.collapse-indicator {
margin-left:-25px;
padding-right:8px;
}
.markdown-preview-view .collapse-indicator {
margin-left:-40px;
padding-bottom:10px;
padding-top:8px;}
.markdown-preview-view ul > li:not(.task-list-item) .collapse-indicator {
padding-right:20px;}
.markdown-preview-view ul > li:not(.task-list-item)::before {
content:'';
border-radius:50%;
background:var(--text-faint);
margin-right:10px;
margin-top:0px;
display:inline-block;
line-height:0;
height:0.15em;
width:0.15em;
border:1px solid var(--text-faint);
vertical-align:middle;
color:transparent
}
.markdown-preview-view ul > li:not(.task-list-item).is-collapsed::before {
box-shadow:0 0 0px 4px var(--background-modifier-border);
}
.list-collapse-indicator .collapse-indicator .collapse-icon {
opacity:0;
}
/* Folding icons in Edit mode */
.CodeMirror-foldmarker {
color:var(--text-faint);
cursor:default;
margin-left:5px;
}
.CodeMirror-foldgutter-folded {
margin-top:-3px;
transform:rotate(-90deg);
}
.CodeMirror-foldgutter-open {
margin-top:-1px;
width:16px;
height:20px;
}
.CodeMirror-foldgutter-folded:after,
.CodeMirror-foldgutter-open:after {
background-repeat:no-repeat;
background-position:50% 50%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='currentColor' stroke='currentColor' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
color:transparent;
}
.theme-dark .CodeMirror-foldgutter-folded:after,
.theme-dark .CodeMirror-foldgutter-open:after {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='%23FFFFFF' stroke='%23FFFFFF' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
}
.CodeMirror-foldgutter-open:after {
opacity:0;
}
.CodeMirror-foldgutter-folded:after,
.CodeMirror-code > div:hover .CodeMirror-foldgutter-open:after {
opacity:0.3;
}
.CodeMirror-code > div:hover .CodeMirror-foldgutter-open:hover:after,
.CodeMirror-code > div:hover .CodeMirror-foldgutter-folded:hover:after {
opacity:1;
}
@kepano
Copy link
Author

kepano commented Dec 23, 2020

@mgmeyers thanks, this is now added

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment