Ole-Morten Duesund
5ba61db478
New subscriptions: Like ($0.25, does nothing), HD Audio (removes low-pass filter from synth), Recently Played (shows current song), Cancellation Processing ($4.99 to unsubscribe). Polish: welcome banner fades out smoothly, exit ad plays an annoying jingle via Tone.js, 64kbps Suffering Quality badge shown when HD Audio not purchased, favicon added. Moved og-card.svg source to tools/ (not needed in public/). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
1.6 KiB
CSS
30 lines
1.6 KiB
CSS
/* Pay2Play! — Base */
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { background: #0d0d1a; font-family: 'IBM Plex Mono', monospace; }
|
|
|
|
/* Animations */
|
|
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }
|
|
@keyframes spin { from { transform:rotate(0) } to { transform:rotate(360deg) } }
|
|
@keyframes marquee { 0% { transform:translateX(100%) } 100% { transform:translateX(-100%) } }
|
|
@keyframes modalIn { from { opacity:0; transform:scale(0.9) } to { opacity:1; transform:scale(1) } }
|
|
@keyframes balFlash { 0% { color:#00ee44 } 20% { color:#e74c3c } 50% { color:#ff6b6b } 100% { color:#00ee44 } }
|
|
@keyframes countPulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.1) } }
|
|
@keyframes successPop { 0% { transform:scale(0.5);opacity:0 } 50% { transform:scale(1.2) } 100% { transform:scale(1);opacity:1 } }
|
|
@keyframes fadeOut { from { opacity:1 } to { opacity:0 } }
|
|
|
|
/* Range input — larger thumb for touch targets */
|
|
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; outline:none; }
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance:none; width:28px; height:28px; border-radius:50%;
|
|
background:#00ee44; cursor:pointer; box-shadow:0 0 8px rgba(0,238,68,0.3);
|
|
}
|
|
|
|
/* Interactive states for all buttons */
|
|
button { transition: opacity 0.15s ease, transform 0.1s ease; }
|
|
button:hover { opacity: 0.85 !important; }
|
|
button:active { transform: scale(0.96) !important; }
|
|
:focus-visible { outline: 2px solid #00ee44; outline-offset: 2px; }
|
|
|
|
/* Queue item hover */
|
|
.q-item { transition: background 0.15s ease; }
|
|
.q-item:hover { background: rgba(255,255,255,0.04) !important; }
|