feat(mixer): install Master Strip Console per spec 47

This commit is contained in:
2026-07-30 12:47:10 +07:00
parent 0c1a27ef2c
commit 74597cfe8b
4 changed files with 372 additions and 65 deletions
+56
View File
@@ -268,6 +268,62 @@
.oz-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }
.oz-scrollbar::-webkit-scrollbar-thumb:hover { background: #334155; }
.oz-font-mono { font-family: 'JetBrains Mono', monospace; }
/* Master Strip Console Styles (from md/47_MASTER_STRIP_CONSOLE.md) */
.strip-bg {
background: linear-gradient(180deg, #2f2f2f 0%, #222222 100%);
border: 1px solid #141414;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.8);
}
.fader-track {
background: #121212;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9), 1px 1px 0 rgba(255,255,255,0.05);
}
/* Metal Fader Cap */
.fader-cap {
background: linear-gradient(180deg, #d8d8d8 0%, #888888 45%, #444444 50%, #aaaaaa 100%);
border: 1px solid #111;
border-radius: 2px;
box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.8);
}
/* DAW Metallic Button */
.btn-daw {
background: linear-gradient(180deg, #444 0%, #2a2a2a 100%);
border: 1px solid #1a1a1a;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.5);
}
.btn-daw:hover {
background: linear-gradient(180deg, #555 0%, #333 100%);
}
/* Teal Active State (FX & Power Button) */
.btn-teal-active {
background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
border-color: #34d399 !important;
color: #ffffff !important;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
}
/* Range Input Custom Vertical Fader */
input[type=range].fader-slider {
-webkit-appearance: none;
writing-mode: bt-linear;
appearance: slider-vertical;
background: transparent;
cursor: pointer;
}
input[type=range].fader-slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: linear-gradient(180deg, #e2e8f0 0%, #64748b 50%, #334155 100%);
border: 1px solid #0f172a;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
</style>
</head>