@emmaexcel/shakecursor 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/overlay.global.js +19 -21
- package/dist/overlay.js +19 -21
- package/package.json +1 -1
package/dist/overlay.global.js
CHANGED
|
@@ -27,31 +27,27 @@
|
|
|
27
27
|
position: fixed;
|
|
28
28
|
left: 0;
|
|
29
29
|
top: 0;
|
|
30
|
-
width:
|
|
31
|
-
height:
|
|
30
|
+
width: 32px;
|
|
31
|
+
height: 32px;
|
|
32
32
|
pointer-events: none;
|
|
33
33
|
z-index: 2147483647;
|
|
34
34
|
display: none;
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
/* Offset to center the "tip" of the pointer */
|
|
36
|
+
margin-left: -4px;
|
|
37
|
+
margin-top: -4px;
|
|
38
|
+
filter: drop-shadow(0 0 8px rgba(66, 133, 244, 0.6));
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
.custom-cursor.active {
|
|
40
42
|
display: block;
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
.cursor-
|
|
45
|
+
.cursor-shape {
|
|
44
46
|
width: 100%;
|
|
45
47
|
height: 100%;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
animation: rotate-gradient 2s linear infinite;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@keyframes rotate-gradient {
|
|
53
|
-
from { transform: rotate(0deg); }
|
|
54
|
-
to { transform: rotate(360deg); }
|
|
48
|
+
fill: white;
|
|
49
|
+
stroke: var(--ai-blue);
|
|
50
|
+
stroke-width: 2px;
|
|
55
51
|
}
|
|
56
52
|
|
|
57
53
|
.toast {
|
|
@@ -95,15 +91,15 @@
|
|
|
95
91
|
z-index: 2147483644;
|
|
96
92
|
pointer-events: none;
|
|
97
93
|
display: none;
|
|
98
|
-
|
|
94
|
+
/* Thicker, more professional border */
|
|
95
|
+
border: 4px solid transparent;
|
|
99
96
|
border-radius: var(--ai-radius);
|
|
100
|
-
|
|
97
|
+
/*Conic gradient on border only, no gray background fill */
|
|
98
|
+
background: linear-gradient(transparent, transparent) padding-box,
|
|
101
99
|
conic-gradient(var(--ai-blue), var(--ai-red), var(--ai-yellow), var(--ai-green), var(--ai-blue)) border-box;
|
|
102
100
|
box-shadow:
|
|
103
|
-
0 0
|
|
104
|
-
|
|
105
|
-
opacity: 0.3;
|
|
106
|
-
transition: all 0.15s ease-out;
|
|
101
|
+
0 0 30px color-mix(in srgb, var(--ai-blue), transparent 85%);
|
|
102
|
+
transition: all 0.12s ease-out;
|
|
107
103
|
}
|
|
108
104
|
|
|
109
105
|
.panel {
|
|
@@ -238,7 +234,9 @@
|
|
|
238
234
|
}
|
|
239
235
|
</style>
|
|
240
236
|
<div class="custom-cursor">
|
|
241
|
-
<
|
|
237
|
+
<svg viewBox="0 0 28 32" class="cursor-shape">
|
|
238
|
+
<path d="M2,2 L2,28 L8,22 L14,32 L18,29 L12,19 L22,19 Z" stroke-linejoin="round" stroke-linecap="round" />
|
|
239
|
+
</svg>
|
|
242
240
|
</div>
|
|
243
241
|
<div class="toast" role="status">
|
|
244
242
|
<span class="pulse"></span>
|
package/dist/overlay.js
CHANGED
|
@@ -237,31 +237,27 @@ function g(t) {
|
|
|
237
237
|
position: fixed;
|
|
238
238
|
left: 0;
|
|
239
239
|
top: 0;
|
|
240
|
-
width:
|
|
241
|
-
height:
|
|
240
|
+
width: 32px;
|
|
241
|
+
height: 32px;
|
|
242
242
|
pointer-events: none;
|
|
243
243
|
z-index: 2147483647;
|
|
244
244
|
display: none;
|
|
245
|
-
|
|
246
|
-
|
|
245
|
+
/* Offset to center the "tip" of the pointer */
|
|
246
|
+
margin-left: -4px;
|
|
247
|
+
margin-top: -4px;
|
|
248
|
+
filter: drop-shadow(0 0 8px rgba(66, 133, 244, 0.6));
|
|
247
249
|
}
|
|
248
250
|
|
|
249
251
|
.custom-cursor.active {
|
|
250
252
|
display: block;
|
|
251
253
|
}
|
|
252
254
|
|
|
253
|
-
.cursor-
|
|
255
|
+
.cursor-shape {
|
|
254
256
|
width: 100%;
|
|
255
257
|
height: 100%;
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
animation: rotate-gradient 2s linear infinite;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
@keyframes rotate-gradient {
|
|
263
|
-
from { transform: rotate(0deg); }
|
|
264
|
-
to { transform: rotate(360deg); }
|
|
258
|
+
fill: white;
|
|
259
|
+
stroke: var(--ai-blue);
|
|
260
|
+
stroke-width: 2px;
|
|
265
261
|
}
|
|
266
262
|
|
|
267
263
|
.toast {
|
|
@@ -305,15 +301,15 @@ function g(t) {
|
|
|
305
301
|
z-index: 2147483644;
|
|
306
302
|
pointer-events: none;
|
|
307
303
|
display: none;
|
|
308
|
-
|
|
304
|
+
/* Thicker, more professional border */
|
|
305
|
+
border: 4px solid transparent;
|
|
309
306
|
border-radius: var(--ai-radius);
|
|
310
|
-
|
|
307
|
+
/*Conic gradient on border only, no gray background fill */
|
|
308
|
+
background: linear-gradient(transparent, transparent) padding-box,
|
|
311
309
|
conic-gradient(var(--ai-blue), var(--ai-red), var(--ai-yellow), var(--ai-green), var(--ai-blue)) border-box;
|
|
312
310
|
box-shadow:
|
|
313
|
-
0 0
|
|
314
|
-
|
|
315
|
-
opacity: 0.3;
|
|
316
|
-
transition: all 0.15s ease-out;
|
|
311
|
+
0 0 30px color-mix(in srgb, var(--ai-blue), transparent 85%);
|
|
312
|
+
transition: all 0.12s ease-out;
|
|
317
313
|
}
|
|
318
314
|
|
|
319
315
|
.panel {
|
|
@@ -448,7 +444,9 @@ function g(t) {
|
|
|
448
444
|
}
|
|
449
445
|
</style>
|
|
450
446
|
<div class="custom-cursor">
|
|
451
|
-
<
|
|
447
|
+
<svg viewBox="0 0 28 32" class="cursor-shape">
|
|
448
|
+
<path d="M2,2 L2,28 L8,22 L14,32 L18,29 L12,19 L22,19 Z" stroke-linejoin="round" stroke-linecap="round" />
|
|
449
|
+
</svg>
|
|
452
450
|
</div>
|
|
453
451
|
<div class="toast" role="status">
|
|
454
452
|
<span class="pulse"></span>
|