Abbie Gonzalez

Visual DOS 2024 is a game that takes place in an alternate reality where DOS remained everyone's primary operating system. Because it takes place in an alternate reality, I wanted parts of the UI to feel foreign, and slightly different. One of the ways I acheive this is by using an uncommon caret (insertion point) design. The idea of this design is to show text to the left will be deleted if pressing backspace, and to show where the next letter will appear if you type it.

It doesn't work exactly like Raskin's vision, where there would be changes to indicate the direction you were going in, but it serves it's purpose, and I find it delightful to use.

My understanding is these classes are not reachable through the API, so this was done using a plugin called Apc Customize UI++, and the stylesheet for it is below:

":root" : {
            "--cursor-color": "rgb(220, 138, 120)",
            "--cursor-color": "black"
        },
        ".monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor" : {
            "transition": "all 0.15s"
        },

        ".monaco-editor .cursors-layer.cursor-underline-style > .cursor": {
            "border-bottom": "2px solid var(--cursor-color)",
            "border-top": "2px solid var(--cursor-color)",
            "border-radius" : "3px",
            "background": "transparent !important",
            "height": "1rem !important",
            "width": "1em !important",
            "overflow": "visible !important",
            "margin-top": "-1rem",
            "box-sizing": "content-box",
            "animations-name": "none !important"
        },

        ".cursor-smooth" : {
            "animation": "vdos-right 0.5s ease-in-out 0s 20 alternate;"
        },

        ".monaco-editor .cursors-layer.cursor-underline-style" : {
            "overflow":"visible"
        },
        ".monaco-editor .cursors-layer.cursor-underline-style > .cursor::before": {
            "height":"0.9rem !important",
            "background": "transparent !important",
            "border-right-width": "2px !important",
            "border-right-style": "solid !important",
            "border-right":"2px solid var(--cursor-color)",
            "border-bottom" : "3px solid red",
            "border-radius" : "2px",
            "display": "block",
            "content": "' '",
            "position": "absolute",
            "box-sizing": "content-box",
            "width": "1em",
            "left": "-1em",
            "transition" : "all 1s !important",
            "animation": "monaco-cursor-smooth 0.5s ease-in-out 0s infinite alternate"
        },

        "@keyframes vdos-right": {
            "0%" : {
                "opacity" : "100%"
            }
        }

I'm overriding the underline cursor for this, and the smooth animation, so the following settings need to be set too:

"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorBlinking": "smooth",
"editor.cursorStyle": "underline",

After making these changes, you'll have a caret in Visual Studio that looks just like the below.