dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Phase 6 WIP refactor: migrate track analysis UI from overlay to sidebar header

Browse Source
This commit is contained in:
Dejvino
2026-08-05 12:39:44 +02:00
parent d0f93e5c55
commit 40188493ac
3 changed files with 128 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flow-state/src/ui/style.css
+79 -12
View File
@@ -9,6 +9,7 @@
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
margin: 0;
@@ -38,32 +39,40 @@ body {
overflow: hidden;
}
#canvas { display: block; max-width: 100%; max-height: 100%; }
#overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
#dropzone {
width: 100%; height: 100%;
padding: 32px 48px;
border-radius: 12px;
background: rgba(14, 16, 22, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border: 1px dashed var(--line);
pointer-events: auto;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#dropzone:hover {
background: rgba(20, 24, 34, 0.95);
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7);
}
#dropzone:hover { background: rgba(255,255,255,0.02); }
.dz-inner { text-align: center; }
.dz-title { font-size: 26px; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 12px; }
.dz-sub { color: var(--dim); }
.dz-hint { color: #4b5563; font-size: 11px; margin-top: 6px; }
.dz-title { font-size: 22px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 8px; color: #fff; }
.dz-sub { color: var(--dim); font-size: 13px; }
.dz-hint { color: #5a6478; font-size: 11px; margin-top: 8px; }
#analysing { text-align: center; min-width: 260px; }
.an-title { letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.an-step { margin: 8px 0; color: var(--text); }
.an-bar { height: 3px; background: var(--line); overflow: hidden; margin-top: 8px; }
.an-bar { height: 3px; background: var(--line); overflow: hidden; margin-top: 4px; border-radius: 2px; }
.an-fill { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
#hud {
@@ -109,6 +118,64 @@ button.wide { width: 100%; margin-top: 12px; }
display: flex; flex-direction: column;
overflow: hidden;
}
#track-header {
padding: 12px 14px;
background: #090b10;
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 6px;
}
.th-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.th-info {
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1;
}
.th-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--dim);
font-weight: 500;
}
.th-name {
font-weight: 600;
font-size: 12px;
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.th-btn {
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.3);
color: var(--accent);
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.th-btn:hover {
background: rgba(74, 222, 128, 0.25);
border-color: var(--accent);
}
.th-progress {
margin-top: 4px;
}
.th-step {
font-size: 11px;
color: var(--dim);
}
#panel-tabs { display: flex; border-bottom: 1px solid var(--line); }
#panel-tabs button { flex: 1; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--dim); }
#panel-tabs button.active { color: var(--text); background: #141821; }