gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web-ui): PipelineDetailModal + 카드 mini 미리보기

Browse Source
This commit is contained in:
gahusb
2026-05-09 13:34:54 +09:00
parent 08fce2d4f6
commit 120c39a3ef
3 changed files with 241 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/music/MusicStudio.css
View File

@@ -3341,3 +3341,59 @@
.psm-advanced input, .psm-advanced select { width: 100%; padding: 6px 8px;
background: rgba(255,255,255,.04); border: 1px solid var(--ms-line, #2a2a3a);
border-radius: 6px; color: var(--ms-text, #f0f0f5); font-size: 12px; }
/* === Pipeline Detail Modal === */
.modal-body--lg { max-width: 720px; max-height: 90vh; overflow-y: auto; }
.pdm-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pdm-header h3 { flex:1; margin:0; }
.pdm-badge { padding:2px 8px; background:rgba(56,189,248,.2); color:#bae6fd;
border-radius:6px; font-size:11px; }
.pdm-close { background:none; border:none; font-size:24px; cursor:pointer;
color:var(--ms-muted, #a0a0b0); padding:0 6px; }
.pdm-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.pdm-figure { margin:0; }
.pdm-figure img { width:100%; border-radius:8px; display:block; }
.pdm-figure figcaption { font-size:11px; color:var(--ms-muted, #a0a0b0); text-align:center; margin-top:4px; }
.pdm-video { margin-bottom:16px; }
.pdm-video video { border-radius:8px; }
.pdm-section { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--ms-line, #2a2a3a); }
.pdm-section:last-of-type { border-bottom:none; }
.pdm-section h4 { margin:0 0 8px; font-size:14px; }
.pdm-pre { background:rgba(0,0,0,.3); padding:8px; border-radius:6px; font-size:12px;
white-space:pre-wrap; overflow-x:auto; max-height:400px; }
.pdm-verdict { padding:2px 8px; margin-left:8px; border-radius:6px; font-size:12px; font-weight:bold; }
.pdm-verdict--pass { background:rgba(34,197,94,.2); color:#86efac; }
.pdm-verdict--fail { background:rgba(248,113,113,.2); color:#fca5a5; }
.pdm-score { color:var(--ms-muted, #a0a0b0); font-size:12px; margin-left:8px; font-weight:normal; }
.pdm-review-table { width:100%; border-collapse:collapse; font-size:13px; }
.pdm-review-table td { padding:4px 8px; border-bottom:1px solid var(--ms-line, #2a2a3a); }
.pdm-review-table td:nth-child(2) { text-align:right; font-weight:bold; }
.pdm-summary { font-size:12px; color:var(--ms-muted, #a0a0b0); margin-top:8px; }
.pdm-tracks { padding-left:24px; }
.pdm-tracks li { margin-bottom:4px; font-size:13px; }
.pdm-track-time { color:var(--ms-accent, #38bdf8); font-family:monospace; }
.pdm-track-dur { color:var(--ms-muted, #a0a0b0); font-size:11px; }
.pdm-feedback { padding-left:0; list-style:none; }
.pdm-feedback li { padding:6px 8px; background:rgba(0,0,0,.2); border-radius:6px;
margin-bottom:4px; font-size:12px; }
.pdm-feedback code { color:#fb923c; font-size:11px; }
.pdm-feedback small { display:block; color:var(--ms-muted, #a0a0b0); margin-top:2px; }
.pdm-youtube { display:inline-block; padding:8px 16px; background:#ff0000; color:white;
border-radius:8px; text-decoration:none; font-weight:bold; }
/* PipelineCard mini previews + style badge */
.pipeline-previews { display:flex; gap:8px; margin:8px 0; align-items:center; }
.pipeline-preview-mini { width:64px; height:64px; object-fit:cover; border-radius:6px;
border:1px solid var(--ms-line, #2a2a3a); }
.pipeline-video-icon { font-size:24px; color:var(--ms-accent, #38bdf8); margin-left:4px; }
.pipeline-style-badge { padding:1px 6px; background:rgba(56,189,248,.15); color:#bae6fd;
border-radius:4px; font-size:10px; }
.pipeline-card { cursor:pointer; }
.pipeline-card:hover { background:rgba(255,255,255,.02); }