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

fix(styles): fix some issues that could not be rendered in live preview

Browse source 
In live preview, if the heading contains tags, the decorator cannot be
rendered.

Fixed: #3
This commit is contained in:
dragonish 2025-03-31 14:27:31 +08:00
parent 670285b8df
commit bd7e486deb
No known key found for this signature in database
GPG key ID: 6F42FA9E807A5177
1 changed files with 32 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
styles.css
View file

@ -83,10 +83,10 @@
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
):not(:has(.cm-header.cm-formatting-header))::before,
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
:has(.cm-header.cm-formatting)
:has(.cm-header.cm-formatting-header)
)::after {
display: inline-block;
content: attr(data-heading-decorator);
@ -97,51 +97,51 @@
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before {
):not(:has(.cm-header.cm-formatting-header))::before {
margin-inline-end: var(--size-2-3);
}
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active
):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before,
):not(:has(.cm-header.cm-formatting-header)):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,
):not(:has(.cm-header.cm-formatting-header)):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,
):not(:has(.cm-header.cm-formatting-header)):has(> .is-collapsed)::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator:has(
.cm-fold-indicator
):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before,
):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:has(
.cm-fold-indicator
):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before,
):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:has(
.cm-fold-indicator
):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before {
):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before {
translate: calc(-1 * var(--size-4-3));
}
.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,
):not(:has(.cm-header.cm-formatting-header)):has(> .is-collapsed)::before,
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:has(
.cm-fold-indicator
):not(.cm-active):not(:has(.cm-header.cm-formatting)):hover::before {
):not(.cm-active):not(:has(.cm-header.cm-formatting-header)):hover::before {
translate: var(--size-4-3);
}
.is-live-preview
.preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
:has(.cm-header.cm-formatting)
:has(.cm-header.cm-formatting-header)
)::after {
margin-inline-start: var(--size-2-3);
}
@ -149,101 +149,101 @@
.is-live-preview
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::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,
):not(:has(.cm-header.cm-formatting-header))::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 {
):not(:has(.cm-header.cm-formatting-header))::after {
opacity: 100%;
}
/* preview end */