diff options
Diffstat (limited to 'aero.css')
| -rw-r--r-- | aero.css | 46 |
1 files changed, 46 insertions, 0 deletions
@@ -66,6 +66,46 @@ html, body { 100% { transform: translate(var(--drift, 30px), -110vh) scale(1.05); opacity: 0; } } +/* SHARDS (chrome theme counterpart to bubbles) */ +.shard-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; display: none; } +.chrome-shard { + position: absolute; bottom: -170px; + background: linear-gradient(135deg, + oklch(96% 0.02 240) 0%, + oklch(78% 0.04 280) 30%, + oklch(45% 0.06 290) 52%, + oklch(72% 0.04 240) 75%, + oklch(92% 0.02 240) 100%); + filter: + drop-shadow(0 0 8px oklch(60% 0.20 290 / 0.55)) + drop-shadow(0 4px 12px oklch(5% 0.03 270 / 0.7)); + animation: shard-rise linear infinite; +} +.chrome-shard.shard { clip-path: polygon(50% 0%, 70% 38%, 56% 100%, 30% 64%); } +.chrome-shard.blade { clip-path: polygon(50% 0%, 57% 50%, 50% 100%, 43% 50%); } +.chrome-shard::before { + content: ""; + position: absolute; inset: 0; + background: linear-gradient(115deg, + transparent 20%, + oklch(99% 0.02 200 / 0.65) 42%, + oklch(92% 0.08 320 / 0.35) 50%, + transparent 68%); + background-size: 200% 200%; + animation: shard-streak 3s ease-in-out infinite alternate; +} +@keyframes shard-rise { + 0% { transform: translate(0, 0) rotate(var(--rot0, 0deg)); opacity: 0; } + 8% { opacity: 0.95; } + 90% { opacity: 0.75; } + 100% { transform: translate(var(--drift, 0px), -130vh) rotate(var(--rot1, 120deg)); opacity: 0; } +} +@keyframes shard-streak { + 0% { background-position: 200% 0%; } + 100% { background-position: -20% 0%; } +} +body[data-theme="chrome"] .shard-field { display: block; } + /* GLOSSY AQUA BUTTON */ .aqua { position: relative; display: inline-flex; align-items: center; gap: 6px; @@ -1834,3 +1874,9 @@ body[data-theme="aero"] .mark::after { pointer-events: none; opacity: 0.8; } + +/* Disable ambient motion for users who prefer reduced motion */ +@media (prefers-reduced-motion: reduce) { + .bubble-field, .shard-field { display: none !important; } + .sparkle { display: none !important; } +} |