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.
2 Likes
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;
}
}
1 Like
Only this worked for me… many thanks friend… was looking for it for a while
OMG… this worked! Although it doesn’t always work, still it’s great… was searching this for a while
I’ve created plugin to give the cursor smooth animation like VSCode does. Currently, you would have to install it manually or via BRAT.
Here’s the plugin:
1 Like
Thank you. Your plugin does exactly what I want.
thank you for this!
The only thing that doesn’t work for me is moving in/out of tables with the mouse: it requires double clicking for the cursor to be visible and sometimes you have to do a lot of extra clicks on different cells before the cursor becomes visible again.
Do you have the same issue or any suggestions?
hey - sorry to necro this but do you have any idea how to make the cursor align properly when eg selecting a header or code block (because the added hash signs/backticks cause the cursor to be misaligned)?
would appreciate any advice - don’t want to work solely in source mode
thank you!
I stopped trying to modify the cursor style because too many issues. There is no workaround until chromium support better cursor styling natively.
1 Like
Ah that’s a shame, i am feeling similarly in regards to all the issues. any idea if that’s known to be planned for the future for chromium, or are we just waiting to hear?
Now, in CSS, caret-color is well supported. But caret-shape is still in the Working Draft status for CSS 4. It would be stand for defining any of these shape: auto, bar, block, underscore. Same for caret-animation. Other solution implied javascript to replace native caret with a custom one, basically an html element that you could customize like:
input {
caret-color: transparent;
}
.custom-caret {
position: absolute;
width: 2px;
height: 16px;
background: red;
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
But don’t bother since you will encounter some unexpected behavior and frustration in a complex app like obsidian.
1 Like