/* ==========================================================
RETRO CURSOR STYLES FOR BENK CLASSIC PLAYSTATION THEME
Using all assets from retro-4 folder with SVG fallbacks
========================================================== */
/* Default cursor - Normal Cursor with fallback */
* {
cursor: url('retro-4/Normal Cursor.cur'), url('data:image/svg+xml;utf8,') 0 0, auto;
}
/* Text cursor - Text Selection with fallback */
input,
textarea,
[contenteditable="true"],
::selection {
cursor: url('retro-4/Text Selection.cur'), url('data:image/svg+xml;utf8,') 4 8, text;
}
/* Pointer cursor - Hand with fallback */
a,
button,
[role="button"],
.btn-buy,
.btn-secondary,
.clickable,
[onclick] {
cursor: url('retro-4/Hand.cur'), url('data:image/svg+xml;utf8,') 0 0, pointer;
}
/* Alternative Selection - for checkboxes, radio buttons */
input[type="checkbox"],
input[type="radio"],
select,
option {
cursor: url('retro-4/Alternative Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, default;
}
/* Precise Selection - for fine selection */
.precise-select,
.draggable {
cursor: url('retro-4/Precise Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, crosshair;
}
/* Move cursor - for draggable elements */
[draggable="true"],
.movable,
.drag-handle {
cursor: url('retro-4/Move.cur'), url('data:image/svg+xml;utf8,') 8 8, move;
}
/* Busy cursor - for loading states */
.loading,
.animate-pulse,
.processing,
.wait {
cursor: url('retro-4/Busy.ani'), url('data:image/svg+xml;utf8,') 8 8, wait;
}
/* Busy while Working - for active processing */
.working,
.processing-active {
cursor: url('retro-4/Busy while Working.ani'), url('data:image/svg+xml;utf8,') 8 8, progress;
}
/* Block cursor - for not-allowed states */
.disabled,
[disabled],
.not-allowed {
cursor: url('retro-4/Block.cur'), url('data:image/svg+xml;utf8,') 8 8, not-allowed;
}
/* Resize cursors */
/* Horizontal resize */
.resizable-h,
.resize-h,
.resize-x {
cursor: url('retro-4/Horizontal.cur'), url('data:image/svg+xml;utf8,') 8 8, ew-resize;
}
/* Vertical resize */
.resizable-v,
.resize-v,
.resize-y {
cursor: url('retro-4/Vertical.cur'), url('data:image/svg+xml;utf8,') 8 8, ns-resize;
}
/* Diagonal resize - top-left to bottom-right */
.resizable-nwse,
.resize-nwse,
.resize-tlbr {
cursor: url('retro-4/Diagonal1.cur'), url('data:image/svg+xml;utf8,') 8 8, nw-resize;
}
/* Diagonal resize - top-right to bottom-left */
.resizable-nesw,
.resize-nesw,
.resize-trbl {
cursor: url('retro-4/Diagonal2.cur'), url('data:image/svg+xml;utf8,') 8 8, ne-resize;
}
/* Special states for different elements */
/* Links with hover effect */
a:hover {
cursor: url('retro-4/Hand.cur'), url('data:image/svg+xml;utf8,') 0 0, pointer;
}
/* Buttons with different states */
button:hover {
cursor: url('retro-4/Hand.cur'), url('data:image/svg+xml;utf8,') 0 0, pointer;
}
button:active {
cursor: url('retro-4/Precise Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, crosshair;
}
/* Form elements */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
cursor: url('retro-4/Text Selection.cur'), url('data:image/svg+xml;utf8,') 4 8, text;
}
/* Loading states for specific elements */
.loading-button,
.loading-link {
cursor: url('retro-4/Busy.ani'), url('data:image/svg+xml;utf8,') 8 8, wait;
}
/* Drag and drop areas */
.drop-zone {
cursor: url('retro-4/Move.cur'), url('data:image/svg+xml;utf8,') 8 8, move;
}
.drop-zone.drag-over {
cursor: url('retro-4/Precise Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, crosshair;
}
/* Scrollable areas */
.scrollable,
.overflow-auto,
.overflow-scroll {
cursor: url('retro-4/Normal Cursor.cur'), url('data:image/svg+xml;utf8,') 0 0, auto;
}
/* Selection areas */
.selectable,
.user-select-all {
cursor: url('retro-4/Text Selection.cur'), url('data:image/svg+xml;utf8,') 4 8, text;
}
/* Help cursor for tooltips */
[title],
[data-tooltip] {
cursor: url('retro-4/Hand.cur'), url('data:image/svg+xml;utf8,') 0 0, help;
}
/* Zoom cursor for zoomable elements */
.zoomable,
.zoom-in,
.zoom-out {
cursor: url('retro-4/Precise Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, zoom-in;
}
/* Copy cursor for copyable elements */
.copyable,
[data-copy] {
cursor: url('retro-4/Hand.cur'), url('data:image/svg+xml;utf8,') 0 0, copy;
}
/* Context menu cursor */
.context-menu,
.right-click {
cursor: url('retro-4/Alternative Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, context-menu;
}
/* Progress cursor for progress bars */
.progress,
.progress-bar {
cursor: url('retro-4/Busy while Working.ani'), url('data:image/svg+xml;utf8,') 8 8, progress;
}
/* Custom cursor classes for specific use cases */
.cursor-normal {
cursor: url('retro-4/Normal Cursor.cur'), url('data:image/svg+xml;utf8,') 0 0, auto;
}
.cursor-text {
cursor: url('retro-4/Text Selection.cur'), url('data:image/svg+xml;utf8,') 4 8, text;
}
.cursor-pointer {
cursor: url('retro-4/Hand.cur'), url('data:image/svg+xml;utf8,') 0 0, pointer;
}
.cursor-move {
cursor: url('retro-4/Move.cur'), url('data:image/svg+xml;utf8,') 8 8, move;
}
.cursor-wait {
cursor: url('retro-4/Busy.ani'), url('data:image/svg+xml;utf8,') 8 8, wait;
}
.cursor-progress {
cursor: url('retro-4/Busy while Working.ani'), url('data:image/svg+xml;utf8,') 8 8, progress;
}
.cursor-not-allowed {
cursor: url('retro-4/Block.cur'), url('data:image/svg+xml;utf8,') 8 8, not-allowed;
}
.cursor-resize-h {
cursor: url('retro-4/Horizontal.cur'), url('data:image/svg+xml;utf8,') 8 8, ew-resize;
}
.cursor-resize-v {
cursor: url('retro-4/Vertical.cur'), url('data:image/svg+xml;utf8,') 8 8, ns-resize;
}
.cursor-resize-nwse {
cursor: url('retro-4/Diagonal1.cur'), url('data:image/svg+xml;utf8,') 8 8, nw-resize;
}
.cursor-resize-nesw {
cursor: url('retro-4/Diagonal2.cur'), url('data:image/svg+xml;utf8,') 8 8, ne-resize;
}
.cursor-precise {
cursor: url('retro-4/Precise Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, crosshair;
}
.cursor-alternative {
cursor: url('retro-4/Alternative Selection.cur'), url('data:image/svg+xml;utf8,') 8 8, default;
}
/* Fallback for unsupported cursor types */
@media (max-width: 768px) {
/* On mobile devices, use simpler cursors */
* {
cursor: auto;
}
a,
button,
[role="button"] {
cursor: pointer;
}
input,
textarea {
cursor: text;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
/* Ensure cursors are visible in high contrast mode */
* {
cursor: url('retro-4/Normal Cursor.cur'), url('data:image/svg+xml;utf8,') 0 0, auto;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
/* Use static cursors instead of animated ones */
.loading,
.animate-pulse,
.processing,
.wait {
cursor: url('https://benkinu.fun/retro-4/Busy.cur'), url('data:image/svg+xml;utf8,') 8 8, wait;
}
.working,
.processing-active {
cursor: url('https://benkinu.fun/retro-4/Busy.cur'), url('data:image/svg+xml;utf8,') 8 8, progress;
}
.progress,
.progress-bar {
cursor: url('https://benkinu.fun/retro-4/Busy.cur'), url('data:image/svg+xml;utf8,') 8 8, progress;
}
}