kotaindah55_extended-markdown-syntax/styles.css

.cmx-align-left {
    text-align: left;
}
.cmx-align-right {
    text-align: right;
}
.cmx-align-center {
    text-align: center;
}
.cmx-align-justify {
    text-align: justify;
}

.cmx-underline {
    text-decoration: underline;
}
.cmx-superscript {
    vertical-align: top;
    font-size: var(--font-smallest);
}
.cmx-subscript {
    vertical-align: bottom;
    font-size: var(--font-smallest);
}

/* .cm-selectionBackground {
    transition-duration: 0.1s;
    transition-property: left, width;
}
.cm-s-obsidian .cm-cursor {
    transition-property: left, top;
    transition-duration: 0.1s;
} */

.cmx-highlight:has(.cm-highlight) {
    padding-inline: 2px;
    border-radius: 2px;
    background-color: var(--text-highlight-bg);
    .cm-s-obsidian & .cm-highlight {
        background-color: transparent;
    }
}

mark {
    padding-inline: 2px;
    border-radius: 2px;
}

.cmx-highlight {
    background-color: var(--text-highlight-bg);
}

.cmx-highlight-red, .es-item-red .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-red-rgb), 0.5);
    }
}
.cmx-highlight-orange, .es-item-orange .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-orange-rgb), 0.5);
    }
}
.cmx-highlight-yellow, .es-item-yellow .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-yellow-rgb), 0.5);
    }
}
.cmx-highlight-green, .es-item-green .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-green-rgb), 0.5);
    }
}
.cmx-highlight-cyan, .es-item-cyan .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-cyan-rgb), 0.5);
    }
}
.cmx-highlight-blue, .es-item-blue .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-blue-rgb), 0.5);
    }
}
.cmx-highlight-purple, .es-item-purple .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-purple-rgb), 0.5);
    }
}
.cmx-highlight-pink, .es-item-pink .menu-item-title {
    &, &:is(mark) {
        background-color: rgba(var(--color-pink-rgb), 0.5);
    }
}
.cmx-highlight-accent, .es-item-accent .menu-item-title {
    &, &:is(mark) {
        background-color: hsla(var(--color-accent-hsl), 0.5)
    }
}
.cmx-highlight-default, .es-item-default .menu-item-title {
    &, &:is(mark) {
        background-color: var(--text-highlight-bg);
    }
}

.cmx-color-btn {
    margin-inline: 2px;
    width: 12px;
    display: inline-block;
    height: 12px;
    border: solid 1px;
    border-color: #ffffff44;
    vertical-align: middle;
    border-radius: 2px;
    background-color: inherit;
}

.menu.es-highlight-colors-modal {
    & > .menu-item {
        padding-top: 3px;
        padding-bottom: 3px;
        & > .menu-item-title {
            /* flex: 0 1 auto; */
            padding-inline: 2px;
            padding-block: 1px;
            border-radius: 2px;
        }
    }
}

.cmx-spoiler:not(.cmx-spoiler-formatting) {
    border-radius: 2px;
    transition-duration: 0.1s;
    transition-property: color;
    .theme-dark & {
        background-color: var(--color-base-25);
    }
    .theme-light & {
        background-color: var(--color-base-40);
    }
    &.cmx-spoiler-hidden:not(:is(:hover)) {
        color: transparent;
    }
}

spoiler {
    border-radius: 2px;
    transition-duration: 0.1s;
    transition-property: color;
    .theme-dark & {
        background-color: var(--color-base-25);
    }
    .theme-light & {
        background-color: var(--color-base-40);
    }
    &:not(:is(.cmx-revealed)) {
        color: transparent;
    }
}