Is there any way to remove the caret blinking animation?
Yes, use the following adapted CSS.
/* Customization for the Ninja Cursor */
.x-cursor {
position: inline block;
background: var(--caret-color); /* Sets the Ninja Cursor Colour. */
width: 1px; /* Sets the width of the Ninja Cursor. */
transition: all 80ms !important; /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */
top: calc(0px - var(--header-height)); /* Ensures the cursor is inline with selected line. */
--cursor-height: calc(var(font-size) - 2px); /* Sets Ninja Cursor Height. Font-Height variable used to ensure height matches current body text input. For a taller/shorter cursor alter the px. */
max-height: calc(var(--font-ui-large) * 2); /* Caps the height of the Ninja Cursor to the span of two lines. Stops Ninja Cursor spanning several lines by capping it at two. It can be capped at one but the cursor is unable to change height to match headings. */
}
/* Hides the Default Cursor */
body:has(.x-cursor) * {
caret-color: transparent;
}
.cm-cursorLayer {
animation: none !important;
display: none;
}
/* Hides the Default Ninja Cursor Dashing Effect */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Applies the Caret Blinking Effect */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 1s 1s both infinite;
}
/* Keyframes for the Caret Blinking Effect */
@keyframes blink1 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 1;}
95% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes blink0 {
0% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 1;}
95% { opacity: 1; }
100% { opacity: 1; }
}
The variance in opacity creates the blinking effect, therefore to disable this we simply set all the opacity values to 1. Hope this helps!
Hey! Iāve been using this snippet and loving it. There is one problem Iāve encountered however, and that is the method of hiding the default cursor also hides the cursor whenever multiple cursors are used.
I tested with and without the CSS, and it seems to be a problem on ninja-cursorās side, but if someone could come up with a fix that would be great as I donāt have the technical skills to do so.
Hello, Iāve encountered a bug.
When I use Input Method to input Chinese, the cursor will not go back to the end of the text, but always at the beginning of the text.
thanks! wished i could press the like button 100 times
found a small bug: the quick switcher has no cursor with this snippet enabled. the default one and the ninja cursor are both hidden, seems fixable maybe? idk if you can target the quick switcher window with css
The CSS seems to not work as well with Vim mode enabled in Obsidian.
smooth-cursorify for Obsidian (Changelog: Ver 0.03)
Re: Issues / Bugs:
- Iām sorry that I donāt really have the skills or knowledge to be able to help you guys out. From what I know, my best guess is that these operations (Chinese input, VIM, etc) are expecting the default cursor.
- Ver 0.02ās CSS constantly hides the default cursor, no matter the context, so that it doesnāt overlap with the custom Ninja Cursor, leading to having the Ninja Cursor sitting at the beginning of the line whilst you canāt see the default cursor.
- Unfortunately, as we cannot style the default cursor, and Ninja doesnāt have the ability to recognise these operations, we canāt use this method to style its movement at all.
- But by using the CSS made by Fred_V, this version of the CSS will hide Ninja and show the default cursor in certain situations, which hopefully will redress this issue somewhat.
Changelog:
- Rewrite / Retooling: This version makes use of CSS by Fred_V, changed slightly to be more similar to the former version of smooth-cursorify. Incorporating the fixes that their version also includes. (Note: Fred_Vās CSS also includes the smooth-effect, just hidden as a comment, so if you prefer their styling and know how to edit the CSS, I suggest using their version.)
Addendum:
- A prototype plugin, inspired by this thread has been started, its still in its early development but you can find out more details and try it out yourself here. (Disclaimer: Iām not involved with the project, but as I know basically nothing about code, thatās probably for the best.)
CSS / Install Instructions:
- You will need the Ninja Cursor plugin enabled. It can found in Community Plugins.
- You will need to create a CSS Snippet for Obsidian and copy/paste the following CSS.
/* Hides Ninja Cursor during selection to avoid Spanning Across Lines */
body:has(.cm-cursor-primary) .x-cursor {
display: none;
}
/* If the Workspace is active and in source mode, Ninja Cursor is applied. */
body:has(.x-cursor):has(.workspace-leaf.mod-active > [data-mode="source"]) {
--my-cursor-color: var(--caret-color); /* Sets color of your cursors. */
--ninja-cursor-width: 1px; /* Sets the width of your cursors.
/* Removes normal cursor animation if multi cursors. */
.cm-cursorLayer:has(.cm-cursor-secondary) {
animation: none !important;
}
/* Styles the Regular Cursor Caret. */
.cm-s-obsidian .cm-cursor,
.cm-s-obsidian .cm-dropCursor {
border-left-color: var(--my-cursor-color); /* Sets Caret Color. */
border-left-width: var(--ninja-cursor-width) /* Sets Caret Width. */
}
/* Styles Ninja Cursor Caret. */
.x-cursor {
background: var(--my-cursor-color); /* Sets Caret Color. */
opacity: 1; /* Makes Caret Visible. */
width: var(--ninja-cursor-width); /* Sets Caret Width. */
--cursor-height: calc(var(font-size) - 2px); /* Sets Caret Height. */
max-height: calc(var(--font-ui-large) * 2); /* Caps Caret Height at 2x font size. */
top: calc(0px - var(--header-height)); /* Ensures Caret is inline with selected line. */
transition: all 80ms !important; /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */
}
/* Hides the Default Ninja Cursor Dashing Effect. */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Hides Regular Cursor when Ninja Cursor Installed. */
.cm-editor * {
caret-color: transparent;
}
}
/* Applies the Caret Blinking Effect. */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 1s 1s both infinite;
}
/* Keyframes for the Caret Blinking Effect. */
@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; }
}
As always, If you find any better alternatives, be sure to share it here!
(Last post deleted due to the blinking effect being broken, my bad.)