Hey, that did it! Thanks!
1 Like
Here’s my updated snippet that incorporates all the fixes as well as solves the latest bug with the cursor blinking during typing as well as the cursor sometimes not blinking when idle. In the code I did reduce the animation delay to 1 second.
/* iAWriter-ish style. */
.cursorWrapper .x-cursor {
background: rgba(49, 177, 235, 1);
width: 3px;
left: -1px;
top: calc( -6px - var(--header-height));;
height: calc(12px + var(--cursor-height));
transition: opacity;
}
/* The cursor colour in a light theme */
.theme-light .x-cursor {
background: rgba(49, 177, 235, 1);
}
/*The cursor colour in a dark theme */
.theme-dark .x-cursor {
/* replace if you want purple cursor
background: rgba(225,187, 225, 1); */
background: rgba(49, 177, 235, 1);
}
/* remove normal cursor when ninjacursor is installed.
Alternative method: caret-color: rgba(0, 0, 0, 1);
*/
body:has(.x-cursor) .cm-editor * {
caret-color: transparent;
}
/* Disable movement effect */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Remove normal cursor on text selection */
.cm-cursorLayer {
animation: none !important;
visibility: hidden !important;
}
/* Blinking */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 1s 1s both infinite;
}
@keyframes blink1 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0.3;}
95% { opacity: 0; }
100% { opacity: 0.3; }
}
@keyframes blink0 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0.3;}
95% { opacity: 0; }
100% { opacity: 0.3; }
}
10 Likes
Thanks for the solution with the Ninja Cursor plugin! Does anyone know how to remove the multi-cursor effect when selecting multiple lines?
Ninja Cursor plugin is used with the snippet proposed by BrambleBrain with small color changes
Thank you, it works really well!
Amazing. Thank you 
I used this fix and the color and width changed but the cursor no sits on the line below where it should be. Am I missing something obvious?
Remove the extra semicolon (;) in top: calc( -6px - var(--header-height));;
Thanks for everyone’s work so far it’s way nicer than default already.
I also have a request/idea for this.
In Vim editing mode, I want the caret to be a solid block overlaid on the text with low opacity when reading/browsing. And then when I hit any key which switches to insert mode (i, a) I want the caret to turn into a vertical blinking caret positioned directly after the overlaid character. Default size, color, and blink rate are all fine. I think this is the default behavior in Vim.
Is this possible?
Ok I love the contributions, and based on TRU and Bramble Brain ones, I made a small adjustments to match IA writer color and cursor position (somehow below the line). Don’t forget about using the ninja cursor plugin. Hope it works, it does to me. I’m don’t know much about CSS.
/* iAWriter-ish style. The cursor colour in a light theme */
.theme-light .x-cursor {
opacity: 1;
background: rgba(1, 183, 255, 1);
width: 2px;
left: -1px;
top: -2px;
height: calc(6px + var(--cursor-height));
transition: opacity;
top: calc( -4px - var(--header-height));
}
/* iAWriter-ish style. The cursor colour in a dark theme */
.theme-dark .x-cursor {
opacity: 1;
background: rgba(1, 183, 255, 1);
width: 2px;
left: -1px;
top: -2px;
height: calc(6px + var(--cursor-height));
transition: opacity;
top: calc( -4px - var(--header-height));
}
.cm-editor * {
caret-color: transparent !important;
}
/* Disable movement effect */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Blinking */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 1s 1s both infinite;
}
@keyframes blink1 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0.3;}
95% { opacity: 0; }
100% { opacity: 0.3; }
}
@keyframes blink0 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0.3;}
95% { opacity: 0; }
100% { opacity: 0.3; }
}
caret-shape is in the W3C CSS UI Level 4 specification and is under development. It’ll allow us to set our cursor to auto | bar | block | underscore natively.
1 Like
Here is my css snippet for ninja plugin that has those fixes and features:
- Use user accent color by default (settings>appearence>accent color)
- [fix] when multi-cursors: in addition to the active ninja cursor, display other carets bigger with the custom color, with no animation
- [fix] when text is selected: hide ninja cursor to use a custom caret. This fixes weird ninja caret position in some case like multi-lines selection on list.
- [fix] hide ninja in reading mode
/* [Cursor] custom ninja */
/* only apply if ninja cursor plugin is installed */
/* disable ninja cursor when selection (to avoid weird position) */
body:has(.cm-cursor-primary) .x-cursor {
display: none;
}
/* style only on source mode */
body:has(.x-cursor):has(.workspace-leaf.mod-active > [data-mode="source"]) {
/* --my-cursor-color: #ff31f5; */
--my-cursor-color: hsl(
var(--accent-h),
calc(var(--accent-s) + 100%),
calc(var(--accent-l) - 5%)
);
--ninja-cursor-height: 10px;
--ninja-cursor-top: calc((var(--ninja-cursor-height) / -2) + 1px);
--ninja-cursor-width: 3px;
--ninja-cursor-blink-speed: 1.2s;
/* Remove normal cursor animation if multi-cursors */
.cm-cursorLayer:has(.cm-cursor-secondary) {
animation: none !important;
}
/* Customize the default caret when text is selected or multi-cursors */
.cm-s-obsidian .cm-cursor,
.cm-s-obsidian .cm-dropCursor {
border-left-color: var(--my-cursor-color);
border-left-width: var(--ninja-cursor-width);
}
.x-cursor {
background: var(--my-cursor-color);
opacity: 1;
width: var(--ninja-cursor-width);
left: -1px;
height: calc(var(--ninja-cursor-height) + var(--cursor-height));
max-height: calc(var(--font-ui-large) * 2);
top: calc(var(--ninja-cursor-top) - var(--header-height));
/* transition: all 80ms !important; */
transition: opacity;
}
/* Disable movement effect */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Blinking */
.cursorWrapper .x-cursor0 {
animation: blink0 var(--ninja-cursor-blink-speed)
var(--ninja-cursor-blink-speed) both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 var(--ninja-cursor-blink-speed)
var(--ninja-cursor-blink-speed) both infinite;
}
/* Hides Regular Cursor when Ninja Cursor Installed */
.cm-editor * {
caret-color: transparent;
}
}
body:has(.x-cursor):has(.workspace-leaf.mod-active > [data-mode="preview"])
.x-cursor {
display: none;
}
@keyframes blink1 {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0.3;
}
95% {
opacity: 0;
}
100% {
opacity: 0.3;
}
}
@keyframes blink0 {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0.3;
}
95% {
opacity: 0;
}
100% {
opacity: 0.3;
}
}