search

mgmeyers / obsidian-indentation-guides

GNU General Public License v3.0
44 stars 0 forks source link

CSS for Prism Indentation #8

Open brimwats1 opened 2 years ago

brimwats1 commented 2 years ago

thought i'd offer you my CSS for prisim indentation if you wanted to incorporate it into your CSS:

looks like this: image

.cm-hmd-list-indent .cm-tab {
    position:                   relative;
}

.cm-hmd-list-indent .cm-tab::before {
    content:                    "";
    border-left:                1px solid var(--base0);
    position:                   absolute;
    left:                       2px;
    top:                        -9px;
    bottom:                     -9999px;
}

.cm-s-obsidian .HyperMD-list-line {
    padding-top:                0.4em;
    position:                   relative;
    overflow:                   hidden;
}

/* Adding a rule line before ul list -- EDITOR Mode  */

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-list-line-1::after {
    content:                    '';
    border-left:                5px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #fb4934;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.HyperMD-list-line-2::after {
    content:                    '';
    border-left:                27px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #fe8019;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.HyperMD-list-line-3::after {
    content:                    '';
    border-left:                40px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    top:                        0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #fabd2f;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.HyperMD-list-line-4::after {
    content:                    '';
    border-left:                55px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    top:                        0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #b8bb26;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.HyperMD-list-line-5::before {
    content:                    '';
    border-left:                68px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    top:                        0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #8ec07c;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.HyperMD-list-line-6::before {
    content:                    '';
    border-left:                83px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    top:                        0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #83a598;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.HyperMD-list-line-7::before {
    content:                    '';
    border-left:                95px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    top:                        0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #d3869b;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.HyperMD-list-line-8::before {
    content:                    '';
    border-left:                110px solid var(--text-accent);
    position:                   absolute;
    left:                       0em;
    top:                        0em;
    bottom:                     0;
    height:                     100%;
    border-color:               #d65d0e;
    clip-path:                  polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
brimwats1 commented 2 years ago

it may be a bit larger than it needs to be—i've had the snippet forever