← All changes
|
includes/extensions/Custom_Cursor/assets/style.css
+58
-12
51.1.44
→
51.1.87
View file →
| @@ -11,8 +11,13 @@ | ||
| 11 | 11 | width: var(--ka-cursor-size, 14px); |
| 12 | 12 | height: var(--ka-cursor-size, 14px); |
| 13 | 13 | pointer-events: none; |
| 14 | 14 | z-index: 999999; |
| 15 | + background: transparent !important; | |
| 16 | + border: none !important; | |
| 17 | + outline: none !important; | |
| 18 | + box-shadow: none; | |
| 19 | + -webkit-tap-highlight-color: transparent; | |
| 15 | 20 | transform: translate3d(var(--ka-cursor-x, -9999px), var(--ka-cursor-y, -9999px), 0) scale(var(--ka-cursor-scale, 1)); |
| 16 | 21 | opacity: var(--ka-cursor-opacity, 1); |
| 17 | 22 | mix-blend-mode: var(--ka-cursor-mix-blend, normal); |
| 18 | 23 | transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94), |
| @@ -19,8 +24,15 @@ | ||
| 19 | 24 | opacity 0.2s ease; |
| 20 | 25 | will-change: transform; |
| 21 | 26 | } |
| 22 | 27 | |
| 28 | +.ka-custom-cursor, | |
| 29 | +.ka-custom-cursor *, | |
| 30 | +.ka-custom-cursor::before, | |
| 31 | +.ka-custom-cursor::after { | |
| 32 | + outline: none !important; | |
| 33 | +} | |
| 34 | + | |
| 23 | 35 | /* Hidden state */ |
| 24 | 36 | .ka-custom-cursor--hidden { |
| 25 | 37 | opacity: 0 !important; |
| 26 | 38 | pointer-events: none; |
| @@ -247,8 +259,37 @@ | ||
| 247 | 259 | opacity: 0; |
| 248 | 260 | } |
| 249 | 261 | } |
| 250 | 262 | |
| 263 | +/* Click ripple (spread, not clipped by cursor) */ | |
| 264 | +.ka-custom-cursor__click-ripple { | |
| 265 | + position: fixed; | |
| 266 | + z-index: 999998; | |
| 267 | + width: 60px; | |
| 268 | + height: 60px; | |
| 269 | + border-radius: 999px; | |
| 270 | + left: 0; | |
| 271 | + top: 0; | |
| 272 | + transform: scale(0); | |
| 273 | + background: var(--ka-cursor-fill, #111); | |
| 274 | + opacity: 0.4; | |
| 275 | + pointer-events: none; | |
| 276 | + animation: ka-custom-cursor-click-ripple 0.6s ease-out forwards; | |
| 277 | + will-change: transform, opacity; | |
| 278 | + mix-blend-mode: var(--ka-cursor-mix-blend, normal); | |
| 279 | +} | |
| 280 | + | |
| 281 | +@keyframes ka-custom-cursor-click-ripple { | |
| 282 | + 0% { | |
| 283 | + transform: scale(0); | |
| 284 | + opacity: 0.5; | |
| 285 | + } | |
| 286 | + 100% { | |
| 287 | + transform: scale(2.5); | |
| 288 | + opacity: 0; | |
| 289 | + } | |
| 290 | +} | |
| 291 | + | |
| 251 | 292 | /* Cursor label */ |
| 252 | 293 | .ka-custom-cursor__label { |
| 253 | 294 | position: absolute; |
| 254 | 295 | top: 50%; |
| @@ -294,27 +335,32 @@ | ||
| 294 | 335 | transition: opacity 0.2s ease; |
| 295 | 336 | will-change: transform, opacity; |
| 296 | 337 | } |
| 297 | 338 | |
| 298 | -/* Hide default cursor when custom cursor is enabled */ | |
| 299 | -body.ka-custom-cursor-enabled, | |
| 300 | -body.ka-custom-cursor-enabled * { | |
| 339 | +/* Hide default cursor when custom cursor is enabled and hide_original_cursor is true */ | |
| 340 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original, | |
| 341 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original * { | |
| 301 | 342 | cursor: none !important; |
| 302 | 343 | } |
| 303 | 344 | |
| 304 | -/* Restore default cursor for inputs and text areas */ | |
| 305 | -body.ka-custom-cursor-enabled input, | |
| 306 | -body.ka-custom-cursor-enabled textarea, | |
| 307 | -body.ka-custom-cursor-enabled select, | |
| 308 | -body.ka-custom-cursor-enabled [contenteditable="true"] { | |
| 345 | +/* Restore default cursor for inputs and text areas when hiding original */ | |
| 346 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original input, | |
| 347 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original textarea, | |
| 348 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original select, | |
| 349 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original [contenteditable="true"] { | |
| 309 | 350 | cursor: text !important; |
| 310 | 351 | } |
| 311 | 352 | |
| 312 | -body.ka-custom-cursor-enabled input[type="submit"], | |
| 313 | -body.ka-custom-cursor-enabled input[type="button"], | |
| 314 | -body.ka-custom-cursor-enabled input[type="reset"], | |
| 315 | -body.ka-custom-cursor-enabled button { | |
| 353 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original input[type="submit"], | |
| 354 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original input[type="button"], | |
| 355 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original input[type="reset"], | |
| 356 | +body.ka-custom-cursor-enabled.ka-cursor-hide-original button { | |
| 316 | 357 | cursor: none !important; |
| 358 | +} | |
| 359 | + | |
| 360 | +/* When not hiding original cursor, custom cursor just follows alongside */ | |
| 361 | +body.ka-custom-cursor-enabled:not(.ka-cursor-hide-original) { | |
| 362 | + /* Keep default cursor visible, custom cursor follows it */ | |
| 317 | 363 | } |
| 318 | 364 | |
| 319 | 365 | /* State-based cursor styling */ |
| 320 | 366 | .ka-custom-cursor[data-ka-state="hover"] .ka-custom-cursor__outer { |