CSS that targets when Callout is being edited?

[jack212]

Hi - is it possible to edit the border that appears when you are editing a CSS callout?

Thanks for any help!

[ariehen]

The CSS that defines the border is

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before, 
.markdown-source-view.mod-cm6 .cm-blockquote-border:before {
    content: "\200b";
    display: block;
    width: 1px;
    border-inline-start: var(--blockquote-border-thickness) solid var(--blockquote-border-color);
    color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

but it looks like it’s the same as the regular block quote border as well. e.g. changing the color using the --blockquote-border-color variable:

body {
    --blockquote-border-color: hotpink;
}

If you don’t mind changing the block quote border as well, that would be the easiest. Or this does the same but for only in Live Preview (no change in Reading view block quotes):

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before {
    --blockquote-border-color: hotpink;
}

---

Using this (for example):

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-callout.HyperMD-quote:before {
    border-inline-start: var(--blockquote-border-thickness) dotted limegreen;
}

changes the first line, the start of the callout, but not the others. The second on lines are just regular .HyperMD-quote lines in the inspector.

Hopefully something here can get you started!

[jack212]

Amazing - that’s it! Thank you so much!!