Add artificial glow for iOS users
This commit is contained in:
1 parent
f866811faf
commit
5d16ba6e1b
1 file changed
+16
-1
+16
-1
@@ -307,10 +307,25 @@ audio[controls] { width: 100%; outline: 0; }
|
||||
.history { width: min(96vw, 420px); }
|
||||
|
||||
/* -webkit-touch-callout is a no-op everywhere except iOS WebKit, so this
|
||||
@supports check hides the picker on iOS phones without any JS/UA sniffing. */
|
||||
@supports check targets iOS phones without any JS/UA sniffing. Picker is
|
||||
hidden there, so give the art a fake ambient glow (no audio analysis)
|
||||
in its place. */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.waveform-picker { display: none; }
|
||||
.album-art { animation: art-glow-pulse 3.2s ease-in-out infinite; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes art-glow-pulse {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 2px var(--accent));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 42px var(--accent)) drop-shadow(0 0 15px var(--accent));
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.album-art { animation: none; }
|
||||
}
|
||||
|
||||
@media print { html, body { display: none; } }
|
||||
Reference in new issue
Block a user