obsidian-plugin/dragonish_obsidian-heading-decorator
1
0
Fork 0
mirror of https://github.com/dragonish/obsidian-heading-decorator.git synced 2026-07-22 12:20:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dragonish_obsidian-heading-.../styles.css
dragonish dd6b92e792
enh: optimize the interaction between the decorator and the collapse button 
No longer add space characters to the boundary of
decorator content, instead use styles to control the
spacing between decorators and headings.
2025-03-12 15:57:17 +08:00

382 lines
13 KiB
CSS
Raw Blame History

/* reading start */
.reading-custom-heading-decorator.before-heading-decorator::before,
.reading-custom-heading-decorator.after-heading-decorator::after {
display: inline-block;
content: attr(data-heading-decorator);
opacity: 20%;
transition: 0.25s ease-out;
}
.reading-custom-heading-decorator.before-heading-decorator::before {
margin-inline-end: 6px;
}
.is-collapsed
> .reading-custom-heading-decorator.before-heading-decorator::before,
.is-collapsed
> .reading-custom-heading-decorator.before-heading-decorator[dir="auto"]::before,
.is-collapsed
> .reading-custom-heading-decorator.before-heading-decorator[dir="ltr"]::before,
.reading-custom-heading-decorator.before-heading-decorator:hover::before,
.reading-custom-heading-decorator.before-heading-decorator[dir="auto"]:hover::before,
.reading-custom-heading-decorator.before-heading-decorator[dir="ltr"]:hover::before {
translate: -12px;
}
.is-collapsed
> .reading-custom-heading-decorator.before-heading-decorator[dir="rtl"]::before,
.reading-custom-heading-decorator.before-heading-decorator[dir="rtl"]:hover::before {
translate: 12px;
}
.reading-custom-heading-decorator.after-heading-decorator::after {
margin-inline-start: 6px;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]::after {
opacity: 10%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]::after {
opacity: 20%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]::after {
opacity: 30%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]::after {
opacity: 40%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]::after {
opacity: 50%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]::after {
opacity: 60%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]::after {
opacity: 70%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]::after {
opacity: 80%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]::after {
opacity: 90%;
}
.reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]::before,
.reading-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]::after {
opacity: 100%;
}
/* reading end */
/* preview start */
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
:has(.cm-header.cm-formatting)
)::after {
display: inline-block;
content: attr(data-heading-decorator);
opacity: 20%;
transition: 0.25s ease-out;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before {
margin-inline-end: 6px;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):hover::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):hover::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):hover::before {
translate: -12px;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):hover::before {
translate: 12px;
}
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
:has(.cm-header.cm-formatting)
)::after {
margin-inline-start: 6px;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 10%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 20%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 30%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 40%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 50%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 60%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 70%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 80%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 90%;
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 100%;
}
/* preview end */
/* source start */
.source-custom-heading-decorator.before-heading-decorator:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator:not(
.cm-active
)::after {
display: inline-block;
content: attr(data-heading-decorator);
opacity: 20%;
transition: 0.25s ease-out;
}
.source-custom-heading-decorator.before-heading-decorator:not(
.cm-active
)::before {
margin-inline-end: 6px;
}
.source-custom-heading-decorator.before-heading-decorator:not(.cm-active):has(
> .is-collapsed
)::before,
.source-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
.cm-active
):has(> .is-collapsed)::before,
.source-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
.cm-active
):has(> .is-collapsed)::before,
.source-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):hover::before,
.source-custom-heading-decorator.before-heading-decorator[dir="auto"]:not(
.cm-active
):hover::before,
.source-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not(
.cm-active
):hover::before {
translate: -12px;
}
.source-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
.cm-active
):has(> .is-collapsed)::before,
.source-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not(
.cm-active
):hover::before {
translate: 12px;
}
.source-custom-heading-decorator.after-heading-decorator:not(
.cm-active
)::after {
margin-inline-start: 6px;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
)::after {
opacity: 10%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active
)::after {
opacity: 20%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active
)::after {
opacity: 30%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active
)::after {
opacity: 40%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active
)::after {
opacity: 50%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active
)::after {
opacity: 60%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active
)::after {
opacity: 70%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active
)::after {
opacity: 80%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active
)::after {
opacity: 90%;
}
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active
)::before,
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active
)::after {
opacity: 100%;
}
/* source end */
Reference in a new issue View git blame Copy permalink