Options to modify cursor style

Thanks, this is excellent.

This is my current CSS. Adding back the cursor blink with a 2 second delay after typing stops before the blinking resumes. The delay gives me time to think. The blinking is impatiently waiting for more words. Helps me with longform writing.

/* iAWriter-ish style. The cursor colour in a light theme */
.theme-light .x-cursor {
    opacity: 1;
    background: #00bbff;
    width: 4px;
    left: -1px;
    top: -2px;
    height: calc(6px + var(--cursor-height));
    transition: opacity;
    top: calc( -6px - var(--header-height));
}

/* iAWriter-ish style. The cursor colour in a dark theme */
.theme-dark .x-cursor {
    opacity: 1;
    background: #2c95b4;
    width: 4px;
    left: -1px;
    top: -2px;
    height: calc(6px + var(--cursor-height));
    transition: opacity;
    top: calc( -6px - var(--header-height));
}



.cm-editor * {
    caret-color: transparent !important;
}



/* Disable movement effect */
.cursorWrapper .x-cursor::after {
    display: none;
}


/* Blinking */

.cursorWrapper .x-cursor0,
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 0s both infinite;
    animation-delay: 2s;
}



@keyframes blink1 {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    65% {
        opacity: 0;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0.2;
    }
}


2 Likes

I noticed that on iOS, the regular cursor keeps blinking ‘behind’ the new, non-blinking (in my setup), thicker one. Only on iOS, not on desktop. This seems strange.

The Ninja Cursor tweak works great, thank you! However, it is strange to me that an app that is all about writing doesn’t have a proper, easily noticeable and customizable cursor by default.

1 Like

The Ninja Cursor animation does eat up quite a bit of CPU though, so I disabled it… I think a bigger colorful static cursor is still more noticeable than the default blinking one.

Also just noticed the cursor doesn’t move along when headings jump to the right showing the hash symbols, when you use the mouse to place the cursor. Really wish there was a less hacky way to do this :-/

Where are you putting these styles? It has no impact when I add it to custom.css (but other styles in that file appear to be working).

1 Like

Hello. Thanks to you, I got acquainted with the plugin for the cursor, and a special thanks for the code for setting it up.

Tell me, is it possible to somehow change the code so that the wide cursor does not overlap the letter, but looks like in the screenshot that I attached? I am very far from the code, and yesterday I searched for 2 hours on this forum, reddit, and even in the css tutorial how to do this, but i couldn’t do it the way i want.

Thank you very much in advance if you can answer me.

image

Maybe try it with the default theme, and turn off other snippets as a test.

This is what mine looks like. Using minimal theme. Sometimes I use default theme. On the second image, selecting text, I see a little bit of overlap. I’m using 4px for cursor width. My font size is 20. My zoom level is 100%. If you are making the cursor wider and the font is smaller you would probably get more overlap. So increasing the font size would help.

Screenshot_2023-05-25_12-49-27

Screenshot_2023-05-25_12-49-50

Here is what it looks like when I change the width to 8px, so I guess making a block width doesn’t work great. At least it’s not a single pixel wide.

Screenshot_2023-05-25_13-05-16


That’s cool. Over all this is kind of a hackish way to get a bigger/brighter cursor. Might not be worth it for everyone.

Hello. What you show in the screenshots is exactly what I’m trying to solve - I’m trying to make a more visible and wider cursor that doesn’t overlap the text.

I saw a guy’s theme where the cursor looks like this, but I don’t like the theme at all (and I don’t know how to find his theme) and I also use the minimal theme.

In my searches, I even got to a site with css guides (the guy above gave a link to it) and tried to embed code from them into the code you cited above, but nothing happened (as I already wrote, I don’t know how to code).

Formally, what I’m trying to achieve is a block cursor like in the screenshot (a wide, visible one that highlights the whole character and doesn’t overlap it).
image

The only thing I found close to what I want is your plugin and your code described here. And I agree - it’s a hell of a lot of effort for such a banal but necessary feature )) Thanks again for the plugin and help, by the way, you’re cool!

However, now that we seem to understand each other quite well. Is it possible to do what I want with your plugin, or should I give up and hope that one day the obsidian developers will introduce such a feature themselves? Logically, if such a solution is sewn into one of the themes, it should be realizable right?

If you give me a direction where to look or even help with such a code, I would be just happy!

To clarify, that’s not my plugin or my code. I just use the plugin this way.

But to answer your question I don’t believe caret-shape is recognized yet. Someone else mentioned this above. Hopefully in an update.

For now you can try this. Make as wide as you need. Use an rgb color picker to find the color you want, keep the a value at 0.5. The RGB numbers are for the color and A is the alpha channel (opacity).

You might have to change left from -1px to something else to adjust the offset. Here is what mine looked like when messing around with it.

Screenshot_2023-05-26_14-04-12

    background: rgba(78, 163, 191, 0.5);
    width: 14px;
    left: -1px;
1 Like

Indeed, something I got confused with this, the creator of the ninja cursor - vorotamoroz.

In any case, you helped me make everything exactly the way I wanted. Thank you very much!