obsidian-plugin/dragonish_obsidian-heading-decorator
1
0
Fork 0
mirror of https://github.com/dragonish/obsidian-heading-decorator.git synced 2026-07-22 05:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dragonish_obsidian-heading-.../styles.css
dragonish a889e0bda3
feat: allow for easy customization of decorator styles 
No longer use pseudo-element rendering decorators, but use entity
rendering instead.
2025-04-18 23:35:39 +08:00

309 lines
12 KiB
CSS
Raw Blame History

/* reading start */
.custom-heading-decorator.reading-custom-heading-decorator {
display: inline-block;
opacity: 20%;
user-select: none;
transition: 0.25s ease-out;
}
.custom-heading-decorator.reading-custom-heading-decorator.before-inside-heading-decorator,
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator {
margin-inline-end: var(--size-2-3);
}
.is-collapsed
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator,
.is-collapsed
[dir="auto"]
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator,
.is-collapsed
[dir="ltr"]
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator,
.markdown-preview-view.allow-fold-headings
[data-heading]:hover
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator,
.markdown-preview-view.allow-fold-headings
[data-heading][dir="auto"]:hover
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator,
.markdown-preview-view.allow-fold-headings
[data-heading][dir="ltr"]:hover
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator {
translate: calc(-1 * var(--size-4-3));
}
.is-collapsed
[dir="rtl"]
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator,
.markdown-preview-view.allow-fold-headings
[data-heading][dir="rtl"]:hover
.custom-heading-decorator.reading-custom-heading-decorator.before-heading-decorator {
translate: var(--size-4-3);
}
.custom-heading-decorator.reading-custom-heading-decorator.after-inside-heading-decorator,
.custom-heading-decorator.reading-custom-heading-decorator.after-heading-decorator {
margin-inline-start: var(--size-2-3);
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="10%"] {
opacity: 10%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="20%"] {
opacity: 20%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="30%"] {
opacity: 30%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="40%"] {
opacity: 40%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="50%"] {
opacity: 50%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="60%"] {
opacity: 60%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="70%"] {
opacity: 70%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="80%"] {
opacity: 80%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="90%"] {
opacity: 90%;
}
.custom-heading-decorator.reading-custom-heading-decorator[data-decorator-opacity="100%"] {
opacity: 100%;
}
/* reading end */
/* preview start */
.custom-heading-decorator.preview-custom-heading-decorator {
display: inline-block;
opacity: 20%;
user-select: none;
transition: 0.25s ease-out;
}
.cm-focused
.cm-active
.custom-heading-decorator.preview-custom-heading-decorator,
.cm-line:has(.cm-header.cm-formatting)
.custom-heading-decorator.preview-custom-heading-decorator,
.cm-focused
.cm-active
.custom-heading-decorator.preview-custom-heading-decorator,
.cm-line:has(.cm-header.cm-formatting)
.custom-heading-decorator.preview-custom-heading-decorator {
display: none;
}
.custom-heading-decorator.preview-custom-heading-decorator.before-inside-heading-decorator,
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator {
margin-inline-end: var(--size-2-3);
}
.is-live-preview
.cm-line:has(> .is-collapsed)
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator,
.is-live-preview
.cm-line[dir="auto"]:has(> .is-collapsed)
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator,
.is-live-preview
.cm-line[dir="ltr"]:has(> .is-collapsed)
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator,
.is-live-preview
.cm-line:has(.cm-fold-indicator):hover
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator,
.is-live-preview
.cm-line[dir="auto"]:has(.cm-fold-indicator):hover
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator,
.is-live-preview
.cm-line[dir="ltr"]:has(.cm-fold-indicator):hover
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator {
translate: calc(-1 * var(--size-4-3));
}
.is-live-preview
.cm-line[dir="rtl"]:has(> .is-collapsed)
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator,
.is-live-preview
.cm-line[dir="rtl"]:has(.cm-fold-indicator):hover
.custom-heading-decorator.preview-custom-heading-decorator.before-heading-decorator {
translate: var(--size-4-3);
}
.custom-heading-decorator.preview-custom-heading-decorator.after-inside-heading-decorator,
.custom-heading-decorator.preview-custom-heading-decorator.after-heading-decorator {
margin-inline-start: var(--size-2-3);
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="10%"] {
opacity: 10%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="20%"] {
opacity: 20%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="30%"] {
opacity: 30%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="40%"] {
opacity: 40%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="50%"] {
opacity: 50%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="60%"] {
opacity: 60%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="70%"] {
opacity: 70%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="80%"] {
opacity: 80%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="90%"] {
opacity: 90%;
}
.custom-heading-decorator.preview-custom-heading-decorator[data-decorator-opacity="100%"] {
opacity: 100%;
}
/* preview end */
/* source start */
.custom-heading-decorator.source-custom-heading-decorator {
display: inline-block;
opacity: 20%;
user-select: none;
transition: 0.25s ease-out;
}
.cm-focused
.cm-active
.custom-heading-decorator.source-custom-heading-decorator,
.cm-focused
.cm-active
.custom-heading-decorator.source-custom-heading-decorator {
display: none;
}
.custom-heading-decorator.source-custom-heading-decorator.before-inside-heading-decorator,
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator {
margin-inline-end: var(--size-2-3);
}
.cm-line:has(> .is-collapsed)
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator,
.cm-line[dir="auto"]:has(> .is-collapsed)
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator,
.cm-line[dir="ltr"]:has(> .is-collapsed)
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator,
.cm-line:has(.cm-fold-indicator):hover
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator,
.cm-line[dir="auto"]:has(.cm-fold-indicator):hover
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator,
.cm-line[dir="ltr"]:has(.cm-fold-indicator):hover
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator {
translate: calc(-1 * var(--size-4-3));
}
.cm-line[dir="rtl"]:has(> .is-collapsed)
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator,
.cm-line[dir="rtl"]:has(.cm-fold-indicator):hover
.custom-heading-decorator.source-custom-heading-decorator.before-heading-decorator {
translate: var(--size-4-3);
}
.custom-heading-decorator.source-custom-heading-decorator.after-inside-heading-decorator,
.custom-heading-decorator.source-custom-heading-decorator.after-heading-decorator {
margin-inline-start: var(--size-2-3);
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="10%"] {
opacity: 10%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="20%"] {
opacity: 20%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="30%"] {
opacity: 30%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="40%"] {
opacity: 40%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="50%"] {
opacity: 50%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="60%"] {
opacity: 60%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="70%"] {
opacity: 70%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="80%"] {
opacity: 80%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="90%"] {
opacity: 90%;
}
.custom-heading-decorator.source-custom-heading-decorator[data-decorator-opacity="100%"] {
opacity: 100%;
}
/* source end */
/* outline start */
.outline-custom-heading-decorator.before-heading-decorator::before,
.outline-custom-heading-decorator.after-heading-decorator::after {
content: attr(data-heading-decorator);
opacity: 20%;
}
.outline-custom-heading-decorator.before-heading-decorator::before {
margin-inline-end: var(--size-4-1);
}
.outline-custom-heading-decorator.after-heading-decorator::after {
margin-inline-start: var(--size-4-1);
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]::after {
opacity: 10%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]::after {
opacity: 20%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]::after {
opacity: 30%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]::after {
opacity: 40%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]::after {
opacity: 50%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]::after {
opacity: 60%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]::after {
opacity: 70%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]::after {
opacity: 80%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]::after {
opacity: 90%;
}
.outline-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]::before,
.outline-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]::after {
opacity: 100%;
}
/* outline end */
Reference in a new issue View git blame Copy permalink