Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/hearthspace-ui-experiments. crutchcorn.github.io/hearthspace-ui-experiments
Something went wrong. Try again.
1.7 kB · 99 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100.layer { position: absolute; inset: 0; pointer-events: none;}
.drawing { position: absolute; overflow: visible; color: var(--accent-strong); outline: none; pointer-events: none; touch-action: none; transform-origin: top left; transition: transform 360ms cubic-bezier(0.2, 0.7, 0.1, 1), opacity 220ms ease;}
.drawing[data-preview-match='false'] { opacity: 0; pointer-events: none;}
.drawing[data-preview-match='false'] .hitTarget { pointer-events: none;}
.previewHitTarget { fill: transparent; stroke: transparent; stroke-width: 1px; cursor: pointer; pointer-events: all;}
.drawing[data-preview-selected='true'] .previewHitTarget { fill: var(--accent-soft); stroke: var(--accent-border);}
.stroke { fill: none; stroke: currentcolor; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;}
.stroke[data-dot] { fill: currentcolor; stroke: none;}
.hitTarget { fill: none; stroke: transparent; stroke-width: 20px; stroke-linecap: round; stroke-linejoin: round; cursor: grab; pointer-events: stroke;}
.hitTarget[data-dot] { fill: transparent; stroke: none; pointer-events: all;}
.selection { fill: none; stroke: var(--accent-border); stroke-width: 1px; stroke-dasharray: 4 4; pointer-events: none;}
.drawing:focus-visible .stroke { filter: drop-shadow(0 0 3px var(--accent));}
.drawing[data-consuming='true'] { opacity: 0; transition: opacity 240ms ease-out; pointer-events: none;}
.drawing[data-consuming='true'] .hitTarget { pointer-events: none;}
@media (prefers-reduced-motion: reduce) { .drawing, .drawing[data-consuming='true'] { transition: none; }}