DINO-TRACKER 9000 FX
DINO-TRACKER 9000
(Fixes Audio Browser Policy)
DINO-TRACKER 9000 FX
>>> DRAG GREEN ZONE TO LOOP <<<
ECHO CANYON (DELAY)
MAX FEEDBACK
MIN FEEDBACK
FAST
SLOW
DINO-TRACKER 9000
SYSTEM STANDBY
DINO-TRACKER 9000 FX
DRAG GREEN ZONE TO LOOP
background: var(--neon-green); color: #000;
border: 4px solid #000; box-shadow: 5px 5px 0px var(--neon-pink);
cursor: pointer; margin-top: 15px;
text-transform: uppercase;
}
/* Waveform */
#dino-app-root .waveform-border {
border: 4px solid var(--border-color);
box-shadow: inset 0 0 0 2px var(--neon-green);
padding: 5px;
background: #000;
margin-bottom: 10px;
}
#dino-app-root .waveform-area { width: 100%; height: 128px; }
/* Signal Status */
#dino-app-root .signal-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
color: var(--neon-blue); font-family: var(--font-retro); font-size: 10px;
}
#dino-app-root .signal-light {
width: 15px; height: 15px; background: #333; border: 2px solid #000;
display: inline-block; margin-left: 5px; vertical-align: middle;
}
#dino-app-root .signal-light.on { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
/* Controls Grid */
#dino-app-root .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
@media(max-width:700px){ #dino-app-root .grid { grid-template-columns: 1fr; } }
/* Buttons */
#dino-app-root button.ctrl-btn {
width: 100%; padding: 15px; margin-bottom: 10px;
background: var(--neon-blue); color: #000;
border: 3px solid #000;
font-family: var(--font-retro); font-size: 12px;
cursor: pointer;
box-shadow: 4px 4px 0px rgba(0,0,0,0.8);
text-transform: uppercase;
transition: transform 0.1s;
}
#dino-app-root button.ctrl-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0px rgba(0,0,0,0.8); }
#dino-app-root button.rec { background: var(--neon-pink); color: #fff;}
#dino-app-root button.rec.active { background: #ff0000; color: #fff; }
#dino-app-root button.play.active { background: var(--neon-green); }
/* Sliders */
#dino-app-root .slider-box {
background: #221533;
padding: 15px;
border: 3px solid #000;
box-shadow: inset 0 0 0 2px var(--neon-pink);
margin-bottom: 15px;
}
#dino-app-root .box-title {
font-family: var(--font-retro); font-size: 10px; color: var(--neon-yellow);
border-bottom: 2px dashed var(--neon-blue); margin-bottom: 12px; padding-bottom: 5px;
}
#dino-app-root .row { display: flex; align-items: center; margin-bottom: 12px; font-family: var(--font-retro); font-size: 10px;}
#dino-app-root .row label { flex: 1; color: var(--neon-blue); }
#dino-app-root .row span { width: 50px; text-align: right; color: var(--neon-green); }
/* Inputs */
#dino-app-root input[type=range] {
-webkit-appearance: none; width: 100%; background: transparent; flex: 2; margin: 0;
}
#dino-app-root input[type=range]::-webkit-slider-runnable-track {
width: 100%; height: 12px; background: #000; border: 2px solid var(--neon-blue);
}
#dino-app-root input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; height: 20px; width: 20px; background: var(--neon-pink);
border: 2px solid #000; margin-top: -6px; cursor: pointer; border-radius: 0;
}
/* XY Pad */
#dino-app-root .xy-border {
border: 4px solid #000;
box-shadow: inset 0 0 0 3px var(--neon-yellow);
padding: 5px; background: #000; height: 100%;
}
#dino-app-root .xy-container {
width: 100%; height: 200px;
background: #110022;
background-image:
linear-gradient(var(--neon-blue) 1px, transparent 1px),
linear-gradient(90deg, var(--neon-blue) 1px, transparent 1px);
background-size: 20px 20px;
position: relative; cursor: crosshair; touch-action: none;
border: 2px solid var(--neon-blue);
}
#dino-app-root .xy-dot {
width: 20px; height: 20px; background: var(--neon-green);
border: 3px solid #000; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); pointer-events: none;
box-shadow: 0 0 10px var(--neon-green);
}
#dino-app-root .axis-label {
position: absolute; font-size: 9px; color: var(--neon-pink);
pointer-events: none; font-family: var(--font-retro);
}
No comments:
Post a Comment