Meta Post - Common CSS Hacks

Share & showcase
543

Here’s a quick fix that works with Live Preview.
cc: @dorkloon and @Ziv

/* Modified by Christian (Chhrriissyy#6548). Original by MooddooM */
/* This version sets the line focus for both edit and insert mode. */
/* If you want to make it edit mode only, add the `.cm-fat-cursor` CSS class selector to both light & dark mode. /*

/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
    width: 0.5em;
    background: #d65d0e;
    opacity: 60% !important;
}


/* LIGHT MODE */
/*if you want the highlight to present in both normal and insert mode of vim*/
.theme-light /* .cm-fat-cursor */ .cm-active {
    background-color: rgba(0, 0, 0, 10%);
}

/* DARK MODE */
.theme-dark /* .cm-fat-cursor */ .cm-active {
    background-color: rgba(95, 95, 95, 30%);
}

Just a quick heads up: this doesn’t fix the cursor styling, just the line indicator.

4 Likes