bennyxguo / Obsidian-Obsidianite

🎨 Obsidian.md custom theme, it's dark and simple but yet still stays sparkles!
MIT License
285 stars 50 forks source link

Bullet lists in edit mode not compatible with different fonts #32

Closed OscarAblinger closed 1 year ago

OscarAblinger commented 3 years ago

I'm using the Obsidianite theme but wanted to change the fonts. Sadly that introduced a visual bug with the bullets. For one the bullet was halved. And the not-focused lines would also be moved a bit to the right, making vertical movements slightly more annoying.

I understand that you don't necessarily support different fonts, so feel free to close this issue again. However, since I fixed it in a quick CSS snippet, I figured that it might be useful to some people:

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list-ul {
    text-indent: inherit !important;
    white-space: inherit !important;
    min-width: inherit !important;
    visibility: hidden;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list-ul::after {
    left: 0 !important;
    visibility: visible;
}

All of the !important styles only overwrite some of the Obsidianite CSS, so if it was integrated into the theme, you would just remove the lines that originally change those properties. Essentially, instead of adding a dot after the text and then moving it a fixed amount to the left, I just added the dot at the start of the line on top and just made the normal text invisible. That way it should be compatible with any font.

For reference: With out the fix: grafik With the fix: grafik It also works with the default fonts: grafik

bennyxguo commented 2 years ago

This should no longer be a problem with the live preview mode in the latest code.