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
@@ -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;
+ }
}
