publish: increase legibility for code in dark mode

Makes the rules that set both a background and foreground color come
last in the CSS, increasing their specificity. Changes the highlight to a
lighter grey, to better stand out. Correctly aligns highlights with code
block backgrounds.

Fixes #2684
This commit is contained in:
Liam Fitzgerald 2020-04-15 13:06:47 +10:00
parent b978d4f824
commit 50dca97b07

View File

@ -167,7 +167,7 @@ a {
.cm-s-tlon span.cm-variable-3, .cm-s-tlon span.cm-type { color: black; }
.cm-s-tlon span.cm-property { color: black; }
.cm-s-tlon span.cm-operator { color: black; }
.cm-s-tlon span.cm-comment { color: black; background-color: var(--light-gray); padding:2px; border-radius: 2px;}
.cm-s-tlon span.cm-comment { color: black; background-color: var(--light-gray); display: inline-block; border-radius: 2px;}
.cm-s-tlon span.cm-string { color: var(--dark-gray); }
.cm-s-tlon span.cm-string-2 { color: var(--gray); }
.cm-s-tlon span.cm-qualifier { color: #555; }
@ -362,10 +362,6 @@ md img {
background: #333;
color: #fff;
}
.CodeMirror-selected {
background: #4d4d4d !important;
color: white;
}
.cm-s-tlon span.cm-def {
color: white;
@ -392,12 +388,7 @@ md img {
color: white;
}
.cm-s-tlon span.cm-comment {
color: black;
background-color: var(--gray);
padding: 2px;
border-radius: 2px;
}
.cm-s-tlon span.cm-string {
color: var(--gray);
}
@ -417,4 +408,18 @@ md img {
.cm-s-tlon span.cm-link {
color: var(--gray);
}
}
/* set rules w/ both color & bg-color last to preserve legibility */
.CodeMirror-selected {
background: var(--medium-gray) !important;
color: white;
}
.cm-s-tlon span.cm-comment {
color: black;
display: inline-block;
padding: 0;
background-color: rgba(255,255,255, 0.3);
border-radius: 2px;
}
}