feat: illustrate empty states
This commit is contained in:
@@ -7,6 +7,7 @@ import "../styles/data-legend.css";
|
||||
import "../styles/coordinate-radar.css";
|
||||
import "../styles/activity-timeline.css";
|
||||
import "../styles/fish-silhouette.css";
|
||||
import "../styles/empty-states.css";
|
||||
import FishingIcon from "../components/FishingIcon.astro";
|
||||
const {
|
||||
title = "RF4 Spotter — свежие точки клёва Russian Fishing 4",
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
.state{position:relative;overflow:hidden;padding:34px}.state:before{content:"";width:22px;height:52px;margin-bottom:18px;border:1px solid #56726d;border-radius:50% 50% 42% 42%;background:linear-gradient(180deg,#ff785a 0 30%,#fff 31% 55%,var(--lime) 56%);box-shadow:inset -5px 0 #173c3f18;transform:rotate(3deg)}.state:after{content:"";position:absolute;width:88px;height:18px;left:50%;top:89px;translate:-50% 0;border:1px solid #648784;border-width:1px 0 0;border-radius:50%;box-shadow:0 -7px 0 -6px #648784,0 7px 0 -6px #648784;opacity:.55}.state.compact-state:before{width:17px;height:40px;margin-bottom:11px}.state.compact-state:after{top:60px;width:68px}.state.error-state:before{filter:grayscale(.35);opacity:.7}
|
||||
@media(prefers-reduced-motion:no-preference){.state:before{animation:empty-bob 3s ease-in-out infinite}.state:after{animation:empty-ripple 3s ease-out infinite}}@keyframes empty-bob{50%{translate:0 -4px;rotate:-4deg}}@keyframes empty-ripple{50%{scale:1.12 .9;opacity:.25}}
|
||||
Reference in New Issue
Block a user