Skip to content

Instantly share code, notes, and snippets.

  • Star 19 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
/* RAINBOW INDENT COLORS */
:root {
/* default */
--font-use-default: var(--default-font);
--font-size-use-default: var(--editor-font-size);
--indent-use-default: 1.8ch;
/* ------- */
/* theme */
--font-use-theme: inherit;
--font-size-use-theme: inherit;
--indent-use-theme: 1.8ch;
/* ----- */
/* wide */
--font-use-wide: monospace;
--font-size-use-wide: 12.5px;
--indent-use-wide: 4.0155ch;
/* ---- */
/* custom */
--font-use-custom: Arial;
--font-size-use-custom: 13px;
--indent-use-custom: 14.5px;
/* ------ */
/* SET FROM VARIABLES ABOVE UPDATING LAST WORD (e.g. ...-default) */
/* Copy and replace one of following: default, theme, wide, custom */
--rb-indent-font-family: var(--font-use-wide);
--rb-indent-font-size: var(--font-size-use-wide);
--rb-indent-width: var(--indent-use-wide);
--rb-left-offset: 3px;
/* ---------------------------------------------- */
--rb-line-width: 2px;
--rb-color-count: 8;
--rb-indent-1: #6854c1;
--rb-indent-2: #c724b1;
--rb-indent-3: #ff6900;
--rb-indent-4: #f6be00;
--rb-indent-5: #e4002b;
--rb-indent-6: #97d700;
--rb-indent-7: #00ab84;
--rb-indent-8: #00a3e0;
--rb-indent-bg-size: calc(var(--rb-color-count) * var(--rb-indent-width)) 1px;
--rb-indent-rainbow-bg: linear-gradient(
to right,
var(--rb-indent-1) 0 var(--rb-line-width),
transparent var(--rb-line-width) calc(1 * var(--rb-indent-width)),
var(--rb-indent-2) calc(1 * var(--rb-indent-width)) calc(1 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(1 * var(--rb-indent-width) + var(--rb-line-width)) calc(2 * var(--rb-indent-width)),
var(--rb-indent-3) calc(2 * var(--rb-indent-width)) calc(2 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(2 * var(--rb-indent-width) + var(--rb-line-width)) calc(3 * var(--rb-indent-width)),
var(--rb-indent-4) calc(3 * var(--rb-indent-width)) calc(3 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(3 * var(--rb-indent-width) + var(--rb-line-width)) calc(4 * var(--rb-indent-width)),
var(--rb-indent-5) calc(4 * var(--rb-indent-width)) calc(4 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(4 * var(--rb-indent-width) + var(--rb-line-width)) calc(5 * var(--rb-indent-width)),
var(--rb-indent-6) calc(5 * var(--rb-indent-width)) calc(5 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(5 * var(--rb-indent-width) + var(--rb-line-width)) calc(6 * var(--rb-indent-width)),
var(--rb-indent-7) calc(6 * var(--rb-indent-width)) calc(6 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(6 * var(--rb-indent-width) + var(--rb-line-width)) calc(7 * var(--rb-indent-width)),
var(--rb-indent-8) calc(7 * var(--rb-indent-width)) calc(7 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(7 * var(--rb-indent-width) + var(--rb-line-width)) calc(8 * var(--rb-indent-width))
);
}
.mod-cm6.is-live-preview .HyperMD-list-line.cm-line:not(.HyperMD-list-line-1) {
overflow: hidden;
}
.mod-cm6.is-live-preview .HyperMD-list-line.cm-line .cm-hmd-list-indent {
position: relative;
font-family: var(--rb-indent-font-family) !important;
font-size: var(--rb-indent-font-size) !important;
vertical-align: top;
}
.mod-cm6.is-live-preview .HyperMD-list-line.cm-line .cm-hmd-list-indent::before {
content: '';
font-family: var(--rb-indent-font-family) !important;
font-size: var(--rb-indent-font-size) !important;
display: block;
position: absolute;
width: 100%;
top: -1.6em;
padding-bottom: 999em;
background-image: var(--rb-indent-rainbow-bg);
background-size: var(--rb-indent-bg-size);
left: var(--rb-left-offset);
}
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-list-line {
padding-top: 0.15em;
padding-bottom: 0.15em;
}
@gaminglifez
Copy link

hello, may I know is how to implement this css to my obsidian? I couldn't get it work when imported as CSS snippets

@merlinuwe
Copy link

I have the same issue.

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