3dtours/SonicForgeStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mixer): Master + Track Strip Console per specs 47/48

Browse Source
This commit is contained in:
3dtours
2026-07-30 12:55:35 +07:00
parent 74597cfe8b
commit b67c0264fb
4 changed files with 403 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+67 -16
View File
@@ -269,24 +269,25 @@
.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) */
/* Master & Track Strip Console Styles (from md/47, md/48) */
.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);
}
.strip-bg-track {
background: linear-gradient(180deg, #2c2c2c 0%, #1e1e1e 100%);
border: 1px solid #111111;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.85);
}
.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);
.fader-track-bg {
background: #101010;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9), 1px 1px 0 rgba(255,255,255,0.05);
}
/* DAW Metallic Button */
@@ -294,10 +295,15 @@
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);
transition: all 0.1s ease;
}
.btn-daw:hover {
background: linear-gradient(180deg, #555 0%, #333 100%);
}
.btn-daw:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
transform: translateY(0.5px);
}
/* Teal Active State (FX & Power Button) */
.btn-teal-active {
@@ -307,22 +313,67 @@
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
}
/* Range Input Custom Vertical Fader */
/* Mute Active State */
.btn-mute-active {
background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
border-color: #f87171 !important;
color: #ffffff !important;
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
}
/* Solo Active State */
.btn-solo-active {
background: linear-gradient(180deg, #eab308 0%, #854d0e 100%) !important;
border-color: #fde047 !important;
color: #000000 !important;
box-shadow: 0 0 8px rgba(234, 179, 8, 0.6) !important;
}
/* Mono Active State */
.btn-mono-active {
background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
border-color: #60a5fa !important;
color: #ffffff !important;
}
/* Record Arm Active State */
.btn-arm-active {
background: radial-gradient(circle, #ef4444 0%, #7f1d1d 100%) !important;
border-color: #fca5a5 !important;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.9), inset 0 1px 2px rgba(255,255,255,0.8) !important;
animation: pulse-red 1.2s infinite alternate;
}
@keyframes pulse-red {
0% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
100% { box-shadow: 0 0 16px rgba(239, 68, 68, 1); }
}
/* Custom Vertical Range Fader Slider */
input[type=range].fader-slider {
appearance: none;
-webkit-appearance: none;
writing-mode: bt-linear;
appearance: slider-vertical;
background: transparent;
cursor: pointer;
margin: 0;
padding: 0;
}
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);
width: 22px;
background: linear-gradient(180deg, #e2e8f0 0%, #64748b 45%, #1e293b 50%, #94a3b8 100%);
border: 1px solid #000000;
border-radius: 2px;
box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.9);
}
input[type=range].fader-slider::-moz-range-thumb {
height: 24px;
width: 22px;
background: linear-gradient(180deg, #e2e8f0 0%, #64748b 45%, #1e293b 50%, #94a3b8 100%);
border: 1px solid #000000;
border-radius: 2px;
box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.9);
}
</style>
</head>