add css for monaco & codemirror editors

Author: picaq

blog/gists/user-styles.md

@@ -9,6 +9,107 @@ nav_order: 2
 
 Custom user-defined style sheets to better browse the web.
 
+## Monaco & CodeMirror editors
+
+```css
+/* fixes offset cursor in editor */
+.monaco-editor .view-lines .view-line, .cm-line {
+    /* for iosevka: editor font size * 1.10138462 */
+    font-size: 110.138462% !important; 
+    font-family: Iosevka !important;
+    font-feature-settings: "liga" 0;
+}
+
+code, pre, .tio-markdown_code, [id^="file"], .file-info, .CodeMirror-linenumber, #copilot-button-positioner, .cm-gutterElement {
+    font-family: Iosevka !important;
+    font-feature-settings: "liga" 0;
+}
+
+/* remove horrendous dots in coderpad */
+.monaco-editor .mtkw {
+    color: #0000 !important
+}
+
+/* cursor */ 
+    .cursor.monaco-mouse-cursor-text,
+    .cm-cursor.cm-cursor-primary
+{
+        background-color: #e9b6c5bf !important;
+        border-color: #e9b6c5bf !important;
+}
+
+/* colors */
+
+:root {
+         --comment-green: #6a9955;
+    --comment-steel-blue: rgb(97, 124, 149) !important;
+          --keyword-pink: #c586c0;
+         --keyword-lilac: rgb(177, 135, 232);
+}
+
+/* matching bracket colors */
+
+.view-line .mtk3 {
+    color: var(--comment-steel-blue);
+}
+
+.bracket-highlighting-0, .bracket-highlighting-3, .bracket-highlighting-6, .bracket-highlighting-9, .bracket-highlighting-12, .bracket-highlighting-15, .bracket-highlighting-18 {
+    color: #ffd700a6 !important
+}
+
+.view-line .mtk13, .mtk9.bracket-highlighting-1, .bracket-highlighting-4, .bracket-highlighting-7, .bracket-highlighting-10, .bracket-highlighting-13, .bracket-highlighting-16, .bracket-highlighting-19 {
+    color: var(--keyword-pink) !important;
+}
+
+.bracket-highlighting-2, .bracket-highlighting-5, .bracket-highlighting-8, .bracket-highlighting-11, .bracket-highlighting-14, .bracket-highlighting-17, .bracket-highlighting-20 {
+    color: cornflowerblue !important;
+}
+
+/* colors */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: rgb(115, 176, 112);
+}
+
+.cm-s-textmate span.cm-property {
+    color: rgba(219, 210, 198, .89);
+}
+
+.cm-s-textmate span.cm-def {
+    color: rgb(122, 158, 208);
+}
+
+.cm-s-textmate span.cm-keyword {
+    color: #b187e8;
+}
+
+.cm-s-textmate span.cm-variable-2 {
+    color: rgb(140, 190, 198);
+}
+
+.cm-s-textmate span.cm-comment {
+    color: rgb(97, 124, 149);
+}
+
+.cm-s-textmate span.cm-operator {
+    color: rgb(86, 166, 114);
+}
+
+.cm-s-textmate span.cm-number {
+    color: rgb(90, 185, 196);
+}
+
+.view-lines {
+      /* softer colors */
+    filter: saturate(0.7) brightness(1) sepia(0.1);
+}
+
+.tio-markdown_img {
+    filter: invert(.894) hue-rotate(177deg);
+    opacity: .67;
+}
+```
+
 ## Light Themes & Printing