animated-cursor/styles.css at master · jianwu111/animated-cursor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* @settings

name: Animated Cursor
id: kotaindah55-animated-cursor
settings:

	-
		id: cursor-move-speed
		title: Cursor speed
		description: The speed of each cursor movement in miliseconds.
		type: variable-number
		format: ms
		default: 80
	-
		id: cursor-blink-rate
		title: Blink rate
		description: The length of a full cursor blink cycle in miliseconds.
		type: variable-number
		format: ms
		default: 1000
	-
		id: cursor-blink-count
		title: Blink count
		description: The limit of blink counts in a sequence. Resetted each time it's moving. Stop blinking when it sets to 0.
		type: variable-number
		default: 10
	-
		id: cursor-blink-infinity
		title: Infinity blinking
		description: Whether the blinking is infinity. When turned on, "Blink count" setting doesn't have any effect.
		type: class-toggle

*/

:root {
	--cursor-move-speed: 80ms;
	--cursor-move-easing: ease;
	--cursor-blink-rate: 1000ms;
	--cursor-blink-count: 10;
	--cursor-blink-easing: ease-in-out;
}

@keyframes cm-cursor-blink {
	0%, 40% {
		opacity: 0;
	}
	80%, 100% {
		opacity: 1;
	}
}

.markdown-source-view.mod-cm6 .cm-content {
	caret-color: transparent;
}

.cm-editor.cm-focused>.cm-scroller>.cm-cursorLayer.cm-blinkLayer,
.cm-editor>.cm-scroller>.cm-cursorLayer.cm-overTableCell.cm-blinkLayer {
	animation-name: cm-cursor-blink !important;
	animation-duration: calc(var(--cursor-blink-rate) / 2) !important;
	animation-timing-function: var(--cursor-blink-easing);
	animation-direction: alternate-reverse;
	animation-iteration-count: calc(var(--cursor-blink-count) * 2);
}

.cursor-blink-infinity .cm-editor.cm-focused>.cm-scroller>.cm-cursorLayer.cm-blinkLayer,
.cursor-blink-infinity .cm-editor>.cm-scroller>.cm-cursorLayer.cm-overTableCell.cm-blinkLayer {
	animation-iteration-count: infinite;
}

.cm-editor.cm-focused>.cm-scroller>.cm-cursorLayer:not(.cm-blinkLayer) {
	animation-name: none !important;
	animation-duration: 0 !important;
	animation: none !important;
}

.table-cell-wrapper .cm-cursorLayer {
	display: none;
}

.cm-editor .cm-cursor {
	transition-property: transform, top, left;
	transition-duration: var(--cursor-move-speed);
	transition-timing-function: var(--cursor-move-easing);
	border-left-width: 2px;
}

.cm-cursorLayer.cm-overTableCell .cm-cursor,
.cm-hasTablePointed .cm-cursorLayer .cm-cursor {
	display: block;
}