Skip to content

Instantly share code, notes, and snippets.

@kepano

kepano/minimal-folding.css

Last active February 4, 2022 14:04

  • Select an option

    Learn more about clone URLs

Select an option

Learn more about clone URLs
Download ZIP

Revisions

  1. Stephan Ango revised this gist Dec 23, 2020. 1 changed file with 8 additions and 8 deletions.
    16 changes: 8 additions & 8 deletions minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,6 @@
    */


    /* Relationship lines in Preview */

    .markdown-preview-view ul ul {
    @@ -29,7 +28,8 @@
    margin-left:-21px;
    }

    /* Relationship lines in Edit mode */
    /* Relationship lines in Edit mode */


    .cm-hmd-list-indent > .cm-tab {
    display:inline-block;
    @@ -44,7 +44,6 @@
    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,
    @@ -56,6 +55,7 @@ body:not(.plugin-sliding-panes-rotate-header) .view-header-title,
    /* 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;
    }
    @@ -69,21 +69,24 @@ h5:hover .heading-collapse-indicator.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;
    @@ -92,10 +95,8 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    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%;
    @@ -124,7 +125,6 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    cursor:default;
    margin-left:5px;
    }

    .CodeMirror-foldgutter-folded {
    margin-top:-3px;
    transform:rotate(-90deg);
  2. Stephan Ango revised this gist Dec 22, 2020. 1 changed file with 11 additions and 9 deletions.
    20 changes: 11 additions & 9 deletions minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -28,15 +28,6 @@
    .markdown-preview-view .task-list-item-checkbox {
    margin-left:-21px;
    }
    .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 ul .is-collapsed::after {
    content:"...";
    padding:5px;
    color:var(--text-faint);
    }

    /* Relationship lines in Edit mode */

    @@ -79,6 +70,17 @@ h5:hover .heading-collapse-indicator.collapse-indicator 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 ul .is-collapsed::after {
    content:"...";
    padding:5px;
    color:var(--text-faint);
    }

    .markdown-preview-view ul > li.task-list-item .collapse-indicator {
    margin-left:-42px;
    }
  3. Stephan Ango revised this gist Dec 22, 2020. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -28,7 +28,11 @@
    .markdown-preview-view .task-list-item-checkbox {
    margin-left:-21px;
    }
    .markdown-preview-view .is-collapsed::after {
    .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 ul .is-collapsed::after {
    content:"...";
    padding:5px;
    color:var(--text-faint);
  4. Stephan Ango revised this gist Dec 22, 2020. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    /* TOC
    Relationship lines in Preview
    Relationship lines in Editor
    Relationship lines in Edit mode
    Folding padding adjustment
    Folding icons in Preview
    Folding icons in Editor
    Folding icons in Edit mode
    */

    @@ -34,7 +34,7 @@
    color:var(--text-faint);
    }

    /* Relationship lines in edit mode */
    /* Relationship lines in Edit mode */

    .cm-hmd-list-indent > .cm-tab {
    display:inline-block;
    @@ -111,7 +111,7 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    opacity:0;
    }

    /* Folding icons in Editor */
    /* Folding icons in Edit mode */

    .CodeMirror-foldmarker {
    color:var(--text-faint);
    @@ -149,4 +149,4 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    .CodeMirror-code > div:hover .CodeMirror-foldgutter-open:hover:after,
    .CodeMirror-code > div:hover .CodeMirror-foldgutter-folded:hover:after {
    opacity:1;
    }
    }
  5. Stephan Ango revised this gist Dec 22, 2020. 1 changed file with 10 additions and 4 deletions.
    14 changes: 10 additions & 4 deletions minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -11,23 +11,28 @@

    /* Relationship lines in Preview */

    ul ul {
    .markdown-preview-view ul ul {
    position:relative;
    }
    ul ul::before {
    .markdown-preview-view ul ul::before {
    content:'';
    border-left:1px solid var(--background-modifier-border);
    position:absolute;
    left:-14px;
    top:0;
    bottom:0;
    }
    ul.contains-task-list::before {
    .markdown-preview-view ul.contains-task-list::before {
    top:5px;
    }
    .markdown-preview-view .task-list-item-checkbox {
    margin-left:-21px;
    }
    .markdown-preview-view .is-collapsed::after {
    content:"...";
    padding:5px;
    color:var(--text-faint);
    }

    /* Relationship lines in edit mode */

    @@ -111,6 +116,7 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    .CodeMirror-foldmarker {
    color:var(--text-faint);
    cursor:default;
    margin-left:5px;
    }

    .CodeMirror-foldgutter-folded {
    @@ -143,4 +149,4 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    .CodeMirror-code > div:hover .CodeMirror-foldgutter-open:hover:after,
    .CodeMirror-code > div:hover .CodeMirror-foldgutter-folded:hover:after {
    opacity:1;
    }
    }
  6. Stephan Ango revised this gist Dec 22, 2020. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,15 +12,15 @@
    /* Relationship lines in Preview */

    ul ul {
    position: relative;
    position:relative;
    }
    ul ul::before {
    content:'';
    border-left: 1px solid var(--background-modifier-border);
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    border-left:1px solid var(--background-modifier-border);
    position:absolute;
    left:-14px;
    top:0;
    bottom:0;
    }
    ul.contains-task-list::before {
    top:5px;
    @@ -35,13 +35,13 @@ ul.contains-task-list::before {
    display:inline-block;
    }
    .cm-hmd-list-indent > .cm-tab:after {
    content: " ";
    display: block;
    width: 1px;
    position: absolute;
    top: 1px;
    content:" ";
    display:block;
    width:1px;
    position:absolute;
    top:1px;
    border-right:1px solid var(--background-modifier-border);
    height: 100%;
    height:100%;
    }


    @@ -124,14 +124,14 @@ h5:hover .heading-collapse-indicator.collapse-indicator svg,
    }
    .CodeMirror-foldgutter-folded:after,
    .CodeMirror-foldgutter-open:after {
    background-repeat: no-repeat;
    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");
    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");
    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;
  7. Stephan Ango created this gist Dec 22, 2020.
    146 changes: 146 additions & 0 deletions minimal-folding.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,146 @@
    /* TOC
    Relationship lines in Preview
    Relationship lines in Editor
    Folding padding adjustment
    Folding icons in Preview
    Folding icons in Editor
    */


    /* Relationship lines in Preview */

    ul ul {
    position: relative;
    }
    ul ul::before {
    content:'';
    border-left: 1px solid var(--background-modifier-border);
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    }
    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 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 ul > li.task-list-item .collapse-indicator {
    margin-left:-42px;
    }
    .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 Editor */

    .CodeMirror-foldmarker {
    color:var(--text-faint);
    cursor:default;
    }

    .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;
    }