iAWriter-ish-style2

iaw2.css

/* iAWriter-ish style. */
.cursorWrapper .x-cursor {
    opacity: 1;
    position: relative;
    background: #00bbff;
    width: 3px;
    left: -1px;
    top: 0;
    left: 0;
    transition: opacity;
    pointer-events: none;
    transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0);
}

.x-cursor:after {
    background: linear-gradient(to right, #00bbffaa, transparent);
    transform: rotate(var(--cursor-drag-angle));
    transform-origin: 1px center;
    opacity: 0.1;
}

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

/* Blinking */
.cursorWrapper .x-cursor0,
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 0s both infinite;
}

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

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0.2;
    }
}

/* Afterimage */
.x-cursor0::after,
.x-cursor1::after {
    animation: ax 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both;
}

@keyframes a1 {}

@keyframes a2 {}

@keyframes ax {
    0% {
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    80% {
        opacity: 0.95;
    }

    90% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}