-
Notifications
You must be signed in to change notification settings - Fork 3
/
styles.css
125 lines (107 loc) · 2.53 KB
/
styles.css
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
.cursorWrapper {
--cursor-x1: "0px";
--cursor-x2: "0px";
--cursor-y1src: "0px";
--cursor-y2src: "0px";
--cursor-offset-y: "0px";
--cursor-drag-distance: "0px";
--cursor-drag-angle: "0deg";
--cursor-drag-width: "0px";
--cursor-drag-height: "0px";
--cursor-height: 18px;
--cursor-y1: calc(var(--cursor-y1src) + var(--cursor-offset-y));
--cursor-y2: calc(var(--cursor-y2src) + var(--cursor-offset-y));
--cursor-visibility: "hidden";
/* --cursor-margin-height: calc(var(--header-height)); */
}
.x-cursor {
position: relative;
top: 0;
left: 0;
height: var(--cursor-height);
width: 8px;
display: inline-block;
user-select: none;
background: var(--text-normal);
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
opacity: 0;
pointer-events: none;
visibility: var(--cursor-visibility);
will-change: transform, opacity, height, width, transform-origin, background-color;
}
.x-cursor:after {
content: "";
height: var(--cursor-drag-height);
width: var(--cursor-drag-width);
display: inline-block;
user-select: none;
background: linear-gradient(to right, var(--text-normal), transparent);
transform: rotate(var(--cursor-drag-angle));
transform-origin: 4px center;
opacity: 0.5;
pointer-events: none;
will-change: transform, opacity, height, width, transform-origin, background-color;
}
.x-cursor0 {
animation: a1 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both;
}
.x-cursor1 {
animation: a2 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both;
}
.cursorWrapper {
display: block;
overflow: hidden;
user-select: none;
pointer-events: none;
background-color: transparent;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
-webkit-app-region: initial !important;
}
@keyframes a1 {
0% {
transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0);
background-color: var(--text-normal);
opacity: 0;
}
4% {
opacity: 1;
}
80% {
opacity: 0.95;
}
90% {
transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0);
background-color: var(--text-normal);
opacity: 0.9;
}
100% {
opacity: 0;
}
}
@keyframes a2 {
0% {
transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0);
background-color: var(--text-normal);
opacity: 0;
}
4% {
opacity: 1;
}
80% {
opacity: 0.95;
}
90% {
transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0);
background-color: var(--text-normal);
opacity: 0.9;
}
100% {
opacity: 0;
}
}