Inconsistent formatting behaviour in Lists

Support
1

Hi,

I believe I'm on a slightly older version than others (v2.3.3), partly because I gathered from this thread that Markdown Editor formatting options are slightly more restricted: Talking about the CodeMirror update.

I've got a custom UserChrome.css file - see code block at bottom - that displays Italic, Bold and [Square Bracketed] text in different colours. In a List, however, it behaves inconsistently - see pic below:

Joplin_Styles

I'd really like to have the Italic and Bold text as different colours to the rest of the list in order to make it stand out. Can anyone give me any pointers to what I'm doing wrong with my UserChrome.css?

Thanks in advance, Dom

/* Background colour -> Dark grey */
div.CodeMirror {
    /* background-color: #222222 !important; */
}

/* Normal text -> off white */
div.CodeMirror-lines * {
    color: #E6E1DC !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

/* Header -> purple */
span.cm-header {
    color: #BE53E6 !important;
    font-weight: bold !important;
}

/*Italics/emphasis = Green*/
span.cm-em {
    color: #1DAA14 !important;
}

/*Bold = Violet*/
span.cm-strong {
    color: #FF308F !important;
}

/*Stikethrough = grey*/
span.cm-strikethrough {
    color: #707070 !important;
    text-decoration: line-through !important;
}

/*Blockquote = turquoise*/
span.cm-quote {
	font-style: italic !important;
	color: #00BFB8 !important;
}

/*horizontal line = brown*/
span.cm-hr {
    color: #604A24 !important;
}

/* List level 1 */
span.cm-variable-2 {
    color: #E6E1DC !important;
}

/* List level 2 */
span.cm-variable-3 {
    color: #968F6C !important;
}

/* List level 3 = Cyan*/
span.cm-keyword {
    color: #00FDFF !important;
}

/*Link text = orange*/
span.cm-link-text {
    color: #E3AE48 !important
}

/*URL = blue*/
span.cm-link, span.cm-string.cm-url {
    color: #19789A !important;
}

/* Exclamation mark on image marker */
span.cm-image-marker {
    color: #00FF00 !important;
}
2

Just the ordering problem. The "List" styling has overwritten them.

Cut out these codes:

/*Italics/emphasis = Green*/
span.cm-em {
    color: #1DAA14 !important;
}

/*Bold = Violet*/
span.cm-strong {
    color: #FF308F !important;
}

/*Stikethrough = grey*/
span.cm-strikethrough {
    color: #707070 !important;
    text-decoration: line-through !important;
}

And then paste it behine this:

/* List level 3 = Cyan*/
span.cm-keyword {
    color: #00FDFF !important;
}

/* PASTE IT HERE */
3

Superb. I knew my CSS skills must have been letting me down. Thanks so much @Nacandev !

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.