Givou/CDJ900ModsWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

site 1.4.1: PLAY/PAUSE key in Open the builder, blinking green like the player's

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Thiemo TizianiandClaude Opus 5.5 committed 2026-10-20 10:30:37 +02:00
1 parent be45158e3f
commit 5ee521429b
7 files changed
+52 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

style.css
+20
View File
@@ -492,6 +492,26 @@ h2.section-title { text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 560px) {
.tabs a { padding: 10px 7px 8px; letter-spacing: .06em; font-size: .72rem; }
}
/* PLAY/PAUSE key inside the builder button: a round key with a green ring
that blinks like the player's when it waits; steady green on hover */
.btn.play { padding: 7px 20px 7px 7px; gap: 12px; }
.play-key {
width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, #2a2d33, #121418 70%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5);
position: relative;
}
.play-key::before {
content: ""; position: absolute; inset: 2px; border-radius: 50%;
border: 2px solid var(--lcd-green); box-shadow: 0 0 8px var(--lcd-green), inset 0 0 6px color-mix(in srgb, var(--lcd-green) 50%, transparent);
animation: play-blink 1s steps(1, end) infinite;
}
.play-key svg { width: 17px; height: 10px; fill: #e8eaee; }
.btn.play:hover .play-key::before { animation: none; opacity: 1; }
@keyframes play-blink { 0% { opacity: 1; } 50% { opacity: .12; } }
:root[data-theme="light"] .play-key::before { border-color: #8dffb4; box-shadow: 0 0 8px #8dffb4; }
@media (prefers-reduced-motion: reduce) {
.brand .disc { animation: none; }
.play-key::before { animation: none; }
}