82 lines
1.8 KiB
CSS
82 lines
1.8 KiB
CSS
/* Immediate aiming dot, soft ring follow, and an arrow on actionable targets. */
|
|
.site-cursor {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 120ms;
|
|
}
|
|
.site-cursor[data-visible="true"] {
|
|
opacity: 1;
|
|
}
|
|
.site-cursor-ring,
|
|
.site-cursor-dot {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
will-change: transform;
|
|
}
|
|
.site-cursor-orbit {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin: -18px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid #dbead0a6;
|
|
border-radius: 50%;
|
|
color: #162310;
|
|
transition:
|
|
transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
background-color 220ms,
|
|
border-color 220ms;
|
|
}
|
|
.site-cursor-orbit svg {
|
|
opacity: 0;
|
|
transform: translate(-3px, 3px) scale(0.75);
|
|
transition:
|
|
opacity 160ms,
|
|
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
.site-cursor-dot span {
|
|
display: block;
|
|
width: 4px;
|
|
height: 4px;
|
|
margin: -2px;
|
|
border-radius: 50%;
|
|
background: #f0f6eb;
|
|
box-shadow: 0 0 1px #081006;
|
|
transition:
|
|
opacity 140ms,
|
|
transform 160ms;
|
|
}
|
|
.site-cursor[data-mode="link"] .site-cursor-orbit {
|
|
transform: scale(1.45);
|
|
border-color: #b4e78a;
|
|
background: #b4e78af2;
|
|
}
|
|
.site-cursor[data-mode="link"] .site-cursor-orbit svg {
|
|
opacity: 1;
|
|
transform: translate(0, 0) scale(0.8);
|
|
}
|
|
.site-cursor[data-mode="link"] .site-cursor-dot span {
|
|
opacity: 0;
|
|
}
|
|
.site-cursor[data-pressed="true"] .site-cursor-orbit {
|
|
transform: scale(0.85);
|
|
}
|
|
.site-cursor[data-mode="link"][data-pressed="true"] .site-cursor-orbit {
|
|
transform: scale(1.2);
|
|
}
|
|
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
|
|
html.has-site-cursor,
|
|
html.has-site-cursor * {
|
|
cursor: none !important;
|
|
}
|
|
}
|
|
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
|
|
.site-cursor {
|
|
display: none;
|
|
}
|
|
}
|