3533 lines
92 KiB
CSS
3533 lines
92 KiB
CSS
/* ═══════════════════════════════════════════════════
|
|
Sonic Forge — AI Music Studio
|
|
Aesthetic: Industrial Recording Studio + Amber VU Meter
|
|
Fonts: Bebas Neue (display) · Syne (body) · Courier Prime (mono)
|
|
═══════════════════════════════════════════════════ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=Courier+Prime:ital@0;1&display=swap');
|
|
|
|
/* ── CSS tokens ──────────────────────────────────────── */
|
|
.ms {
|
|
--ms-bg: #0c0b09;
|
|
--ms-surface: #151310;
|
|
--ms-surface2: #1e1a14;
|
|
--ms-line: rgba(245, 166, 35, 0.12);
|
|
--ms-line-2: rgba(245, 166, 35, 0.06);
|
|
--ms-text: #ede8e0;
|
|
--ms-muted: rgba(237, 232, 224, 0.42);
|
|
--ms-dim: rgba(237, 232, 224, 0.22);
|
|
--ms-accent: #f5a623;
|
|
--ms-ff-disp: 'Bebas Neue', Impact, sans-serif;
|
|
--ms-ff-body: 'Syne', system-ui, sans-serif;
|
|
--ms-ff-mono: 'Courier Prime', 'Courier New', monospace;
|
|
|
|
display: grid;
|
|
gap: 40px;
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-body);
|
|
transition: --ms-accent 0.4s ease;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
HEADER
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
|
|
gap: 32px;
|
|
align-items: center;
|
|
padding-bottom: 32px;
|
|
border-bottom: 1px solid var(--ms-line);
|
|
}
|
|
|
|
.ms-header__kicker {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.32em;
|
|
color: var(--ms-accent);
|
|
margin: 0 0 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ms-header__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: clamp(56px, 8vw, 96px);
|
|
line-height: 0.88;
|
|
margin: 0 0 18px;
|
|
letter-spacing: 0.02em;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-header__title em {
|
|
font-style: normal;
|
|
color: var(--ms-accent);
|
|
display: block;
|
|
}
|
|
|
|
.ms-header__desc {
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
color: var(--ms-muted);
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ms-header__right {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 28px; /* status 라벨 공간 */
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
WAVEFORM CANVAS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-waveform-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
flex: 1;
|
|
min-height: 70px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SONIC RADAR (헤더 비주얼)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-radar {
|
|
position: relative;
|
|
width: 160px;
|
|
height: 160px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* SVG 오버레이 */
|
|
.ms-radar__svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* 가이드 링 */
|
|
.ms-radar__ring {
|
|
fill: none;
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.ms-radar__ring--outer {
|
|
stroke-opacity: 0.14;
|
|
stroke-dasharray: 5 4;
|
|
transform-origin: 80px 80px;
|
|
animation: radar-spin 14s linear infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__ring--outer {
|
|
stroke-opacity: 0.3;
|
|
animation-duration: 4s;
|
|
}
|
|
|
|
.ms-radar__ring--mid {
|
|
stroke-opacity: 0.07;
|
|
stroke-dasharray: 2 8;
|
|
transform-origin: 80px 80px;
|
|
animation: radar-spin-rev 22s linear infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__ring--mid {
|
|
stroke-opacity: 0.15;
|
|
}
|
|
|
|
.ms-radar__ring--inner {
|
|
stroke-opacity: 0.22;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__ring--inner {
|
|
stroke-opacity: 0.45;
|
|
}
|
|
|
|
@keyframes radar-spin { to { transform: rotate(360deg); } }
|
|
@keyframes radar-spin-rev { to { transform: rotate(-360deg); } }
|
|
|
|
/* 크로스헤어 틱 */
|
|
.ms-radar__tick {
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-opacity: 0.28;
|
|
stroke-width: 1;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.ms-radar__tick--dim {
|
|
stroke-opacity: 0.1;
|
|
}
|
|
|
|
/* 스윕 라인 */
|
|
.ms-radar__sweep {
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-width: 1.5;
|
|
stroke-opacity: 0;
|
|
stroke-linecap: round;
|
|
transform-origin: 80px 80px;
|
|
filter: drop-shadow(0 0 4px var(--radar-accent, var(--ms-accent)));
|
|
transition: stroke-opacity 0.4s ease;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__sweep {
|
|
stroke-opacity: 0.75;
|
|
animation: radar-spin 2.4s linear infinite;
|
|
}
|
|
|
|
/* 센터 글로우 링 */
|
|
.ms-radar__center-ring {
|
|
fill: none;
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-opacity: 0.1;
|
|
stroke-width: 1;
|
|
animation: radar-center-ring 3s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__center-ring {
|
|
animation-duration: 0.7s;
|
|
}
|
|
|
|
@keyframes radar-center-ring {
|
|
0%, 100% { stroke-opacity: 0.07; r: 14; }
|
|
50% { stroke-opacity: 0.28; r: 18; }
|
|
}
|
|
|
|
/* 방사형 바 — 피벗 (회전 기준) */
|
|
.ms-radar__pivot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
transform: rotate(var(--angle));
|
|
transform-origin: center center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 방사형 바 — 실제 막대 */
|
|
.ms-radar__bar {
|
|
position: absolute;
|
|
left: -1px;
|
|
bottom: 26px; /* innerR — 바 시작 위치 */
|
|
width: 2px;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(245, 166, 35, 0.08),
|
|
var(--radar-accent, #f5a623)
|
|
);
|
|
border-radius: 1px 1px 0 0;
|
|
transform-origin: bottom center;
|
|
animation: radar-bar-idle 2s ease-in-out var(--delay) infinite alternate;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__bar {
|
|
animation: radar-bar-active 0.38s ease-in-out var(--delay) infinite alternate;
|
|
box-shadow: 0 0 4px rgba(245, 166, 35, 0.5);
|
|
}
|
|
|
|
@keyframes radar-bar-idle {
|
|
from { height: 2px; opacity: 0.12; }
|
|
to { height: calc(18px * var(--rnd)); opacity: 0.52; }
|
|
}
|
|
|
|
@keyframes radar-bar-active {
|
|
from { height: calc(7px * var(--rnd)); opacity: 0.6; }
|
|
to { height: calc(26px * var(--rnd)); opacity: 1; }
|
|
}
|
|
|
|
/* 센터 도트 */
|
|
.ms-radar__center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--radar-accent, var(--ms-accent));
|
|
box-shadow: 0 0 10px var(--radar-accent, var(--ms-accent));
|
|
animation: radar-center-dot 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__center {
|
|
box-shadow: 0 0 22px var(--radar-accent, var(--ms-accent)),
|
|
0 0 44px rgba(245, 166, 35, 0.3);
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
@keyframes radar-center-dot {
|
|
0%, 100% { transform: translate(-50%, -50%) scale(1); }
|
|
50% { transform: translate(-50%, -50%) scale(0.6); }
|
|
}
|
|
|
|
/* 상태 레이블 */
|
|
.ms-radar__status {
|
|
position: absolute;
|
|
bottom: -22px;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.22em;
|
|
color: var(--ms-dim);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
transition: color 0.4s ease;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__status {
|
|
color: var(--radar-accent, var(--ms-accent));
|
|
}
|
|
|
|
.ms-radar__status-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
animation: radar-status-blink 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__status-dot {
|
|
animation-duration: 0.45s;
|
|
}
|
|
|
|
@keyframes radar-status-blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.2; }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LAYOUT
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
|
gap: 32px;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.ms-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.ms-header {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.ms-header__right {
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
CONTROLS (LEFT)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-controls {
|
|
display: grid;
|
|
gap: 28px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
/* ── Section ──────────────────────────────────────── */
|
|
.ms-section {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-section__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ms-section__step {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-accent);
|
|
letter-spacing: 0.1em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-section__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 22px;
|
|
letter-spacing: 0.06em;
|
|
margin: 0;
|
|
color: var(--ms-text);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-section__hint {
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-mono);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── 설명 토글 버튼 ──────────────────────────────── */
|
|
.ms-desc-toggle {
|
|
margin-left: auto;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-dim);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ms-desc-toggle:hover {
|
|
border-color: var(--ms-muted);
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-desc-toggle.is-open {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-desc-toggle--sm {
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 9px;
|
|
font-style: normal;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* ── 설명 접기/펼치기 래퍼 (grid-template-rows 트릭) ── */
|
|
.ms-desc-wrap {
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
overflow: hidden;
|
|
transition: grid-template-rows 0.28s ease;
|
|
}
|
|
|
|
.ms-desc-wrap.is-open {
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
.ms-desc-wrap > * {
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── 설명 텍스트 블록 ─────────────────────────────── */
|
|
.ms-section__desc {
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 12px;
|
|
line-height: 2;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
padding: 10px 14px;
|
|
border-left: 2px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.ms-section__desc strong {
|
|
color: var(--ms-muted);
|
|
font-weight: 600;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-section__desc em {
|
|
color: color-mix(in srgb, var(--ms-accent) 65%, var(--ms-muted));
|
|
font-style: normal;
|
|
display: block;
|
|
padding-left: 8px;
|
|
border-left: 1px solid var(--ms-line);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ── 파라미터 라벨 행 ─────────────────────────────── */
|
|
.ms-param-label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-param-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
line-height: 1.75;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
padding: 6px 10px;
|
|
letter-spacing: 0.03em;
|
|
border-left: 2px solid var(--ms-line);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
GENRE GRID
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-genre-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.ms-genre-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.ms-genre-card {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 12px 10px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-genre-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--g-color);
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
|
|
.ms-genre-card:hover::before { opacity: 0.06; }
|
|
.ms-genre-card.is-active::before { opacity: 0.14; }
|
|
|
|
.ms-genre-card.is-active {
|
|
border-color: var(--g-color);
|
|
box-shadow: 0 0 0 1px var(--g-color), 0 4px 20px rgba(0,0,0,0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ms-genre-card__icon {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.ms-genre-card__label {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 14px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ms-text);
|
|
position: relative;
|
|
}
|
|
|
|
.ms-genre-card__desc {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
position: relative;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
MOOD CHIPS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-mood-rack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-mood-chip {
|
|
padding: 7px 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-mood-chip::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--m-color);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.ms-mood-chip:hover::before { opacity: 0.08; }
|
|
.ms-mood-chip.is-active::before { opacity: 0.18; }
|
|
|
|
.ms-mood-chip.is-active {
|
|
border-color: var(--m-color);
|
|
color: var(--ms-text);
|
|
box-shadow: 0 0 10px color-mix(in srgb, var(--m-color) 30%, transparent);
|
|
}
|
|
|
|
.ms-mood-chip span {
|
|
position: relative;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
INSTRUMENTS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-instrument-rack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
|
|
.ms-instrument-chip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 8px 14px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
cursor: pointer;
|
|
transition: border-color 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.ms-instrument-chip.is-active {
|
|
border-color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-instrument-chip__label {
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-instrument-chip__freq {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-instrument-chip.is-active .ms-instrument-chip__freq {
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PARAMETERS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-param-group {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ms-param-label {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-param-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-param-value {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 20px;
|
|
color: var(--ms-accent);
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-param-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
/* Duration rail */
|
|
.ms-duration-rail {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-duration-btn {
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-duration-btn.is-active {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
/* BPM presets */
|
|
.ms-bpm-presets {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ms-bpm-preset {
|
|
flex: 1;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1px;
|
|
transition: all 0.18s ease;
|
|
}
|
|
|
|
.ms-bpm-preset span {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-bpm-preset.is-active {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-text);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-bpm-preset.is-active span {
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
/* BPM slider */
|
|
.ms-bpm-slider {
|
|
width: 100%;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
height: 3px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-bpm-slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--ms-accent);
|
|
border: 2px solid var(--ms-bg);
|
|
box-shadow: 0 0 8px var(--ms-accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-bpm-slider::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--ms-accent);
|
|
border: 2px solid var(--ms-bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Select */
|
|
.ms-select-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.ms-select-wrap::after {
|
|
content: '▾';
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--ms-muted);
|
|
font-size: 11px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-select {
|
|
width: 100%;
|
|
padding: 10px 32px 10px 12px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.ms-select:focus {
|
|
border-color: var(--ms-accent);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROMPT
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-prompt-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.ms-prompt {
|
|
width: 100%;
|
|
padding: 14px;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
resize: vertical;
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ms-prompt::placeholder {
|
|
color: var(--ms-dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.ms-prompt:focus {
|
|
border-color: var(--ms-accent);
|
|
box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-prompt__count {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 12px;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
STAGE (RIGHT)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-stage {
|
|
display: grid;
|
|
gap: 20px;
|
|
position: sticky;
|
|
top: 24px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.ms-stage__viz {
|
|
position: relative;
|
|
height: 180px;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-stage__viz .ms-waveform-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ms-stage__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-stage__idle {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
color: var(--ms-dim);
|
|
text-align: center;
|
|
line-height: 2;
|
|
margin: 0;
|
|
}
|
|
|
|
.ms-stage__ready {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ms-stage__ready-icon {
|
|
font-size: 32px;
|
|
filter: drop-shadow(0 0 12px var(--ms-accent));
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
.ms-stage__ready-label {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 18px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ms-accent);
|
|
margin: 0;
|
|
}
|
|
|
|
.ms-stage__ready-moods {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.1em;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Track title input ── */
|
|
.ms-title-input-wrap {
|
|
padding: 0 24px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ms-title-input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: #1f2937;
|
|
border: 1px solid #374151;
|
|
border-radius: 8px;
|
|
padding: 9px 14px;
|
|
color: #ccc;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ms-title-input::placeholder { color: #4b5563; }
|
|
.ms-title-input:focus { outline: none; border-color: var(--ms-accent, #22c55e); }
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
GENERATE BUTTON
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-generate-btn {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 22px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
cursor: not-allowed;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-generate-btn.is-ready {
|
|
cursor: pointer;
|
|
border-color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.06);
|
|
}
|
|
|
|
.ms-generate-btn.is-ready:hover {
|
|
background: rgba(245, 166, 35, 0.12);
|
|
box-shadow: 0 0 32px rgba(245, 166, 35, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.ms-generate-btn.is-generating {
|
|
cursor: default;
|
|
border-color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
/* Pulsing ring */
|
|
.ms-generate-btn__ring {
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--ms-accent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.ms-generate-btn.is-generating .ms-generate-btn__ring {
|
|
opacity: 1;
|
|
animation: ring-pulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ring-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
|
|
50% { box-shadow: 0 0 0 12px rgba(245, 166, 35, 0); }
|
|
}
|
|
|
|
.ms-generate-btn__core {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--ms-line);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--ms-muted);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ms-generate-btn.is-ready .ms-generate-btn__core {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
box-shadow: 0 0 16px rgba(245, 166, 35, 0.3);
|
|
}
|
|
|
|
.ms-generate-btn__spinner {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(245, 166, 35, 0.2);
|
|
border-top-color: var(--ms-accent);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.ms-generate-btn__label {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 20px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ms-muted);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.ms-generate-btn.is-ready .ms-generate-btn__label {
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROGRESS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-progress {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-progress__bar {
|
|
height: 3px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-progress__fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--ms-accent), #e85c3a);
|
|
border-radius: 999px;
|
|
transition: width 0.5s ease;
|
|
box-shadow: 0 0 10px var(--ms-accent);
|
|
}
|
|
|
|
.ms-progress__meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-progress__msg {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
animation: blink-text 1s ease infinite alternate;
|
|
}
|
|
|
|
@keyframes blink-text {
|
|
from { opacity: 0.6; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.ms-progress__pct {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 13px;
|
|
color: var(--ms-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SPEC CHIPS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-stage__spec {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-spec-chip {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-spec-chip__label {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-spec-chip__val {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
RESULT CARD
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-result {
|
|
border: 1px solid var(--result-accent, var(--ms-accent));
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
background: var(--ms-surface);
|
|
display: grid;
|
|
gap: 16px;
|
|
box-shadow: 0 0 40px rgba(245, 166, 35, 0.08);
|
|
animation: result-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes result-in {
|
|
from { opacity: 0; transform: translateY(16px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.ms-result__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-result__badge {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
color: #97c9aa;
|
|
border: 1px solid rgba(151, 201, 170, 0.3);
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ms-result__time {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-result__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-result__icon {
|
|
font-size: 28px;
|
|
filter: drop-shadow(0 0 10px var(--result-accent, var(--ms-accent)));
|
|
}
|
|
|
|
.ms-result__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 18px;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 4px;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-result__meta {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
margin: 0;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── Player ──────────────────────────────────────── */
|
|
.ms-player {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-player__play {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--result-accent, var(--ms-accent));
|
|
background: transparent;
|
|
color: var(--result-accent, var(--ms-accent));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.ms-player__play.is-playing {
|
|
background: rgba(245, 166, 35, 0.15);
|
|
box-shadow: 0 0 14px rgba(245, 166, 35, 0.3);
|
|
}
|
|
|
|
.ms-player__timeline {
|
|
flex: 1;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.ms-player__bar {
|
|
height: 4px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-player__fill {
|
|
height: 100%;
|
|
background: var(--result-accent, var(--ms-accent));
|
|
border-radius: 999px;
|
|
transition: width 1s linear;
|
|
}
|
|
|
|
.ms-player__thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--result-accent, var(--ms-accent));
|
|
box-shadow: 0 0 6px var(--result-accent, var(--ms-accent));
|
|
transition: left 1s linear;
|
|
}
|
|
|
|
.ms-player__times {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
/* Result tags */
|
|
.ms-result__tags {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-result__tag {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--ms-line);
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* Result actions */
|
|
.ms-result__actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-result__yt-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.04em;
|
|
border-top: 1px solid var(--ms-line);
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
BUTTONS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-btn {
|
|
padding: 9px 18px;
|
|
border-radius: 10px;
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.ms-btn--ghost {
|
|
border-color: var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-btn--ghost:hover {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-btn--outline {
|
|
border-color: var(--ms-accent);
|
|
background: transparent;
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-btn--outline:hover {
|
|
background: rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-btn--primary {
|
|
border-color: var(--ms-accent);
|
|
background: var(--ms-accent);
|
|
color: #0c0b09;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ms-btn--primary:hover {
|
|
background: #fbb740;
|
|
box-shadow: 0 4px 20px rgba(245, 166, 35, 0.35);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
STAGE FOOTER
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-stage__footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--ms-line-2);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-stage__footer-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--ms-accent);
|
|
flex-shrink: 0;
|
|
margin-top: 4px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ms-stage__footer-text {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
line-height: 1.7;
|
|
letter-spacing: 0.04em;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
TAB NAV (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--ms-line);
|
|
padding-bottom: 0;
|
|
margin-bottom: -40px; /* collapse gap above layout */
|
|
}
|
|
|
|
.ms-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 10px 20px;
|
|
border-radius: 12px 12px 0 0;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
bottom: -1px;
|
|
}
|
|
|
|
.ms-tab:hover {
|
|
color: var(--ms-text);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-tab.is-active {
|
|
border-color: var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-tab__icon {
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ms-tab__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
border-radius: 999px;
|
|
background: var(--ms-accent);
|
|
color: #0c0b09;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
font-family: var(--ms-ff-mono);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
AUDIO PLAYER (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-audio-player {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.ms-volume {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-volume__slider {
|
|
width: 64px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
height: 3px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-volume__slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
background: var(--player-accent, var(--ms-accent));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-volume__slider::-moz-range-thumb {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
background: var(--player-accent, var(--ms-accent));
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
ICON BUTTONS (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-btn--icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-btn--icon:hover,
|
|
.ms-btn--icon.is-active {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-btn--icon.ms-btn--danger:hover {
|
|
border-color: #e85c3a;
|
|
color: #e85c3a;
|
|
background: rgba(232, 92, 58, 0.08);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
ERROR (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-gen-error {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(232, 92, 58, 0.4);
|
|
background: rgba(232, 92, 58, 0.07);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
color: #e85c3a;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LIBRARY (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-library {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.ms-library--empty {
|
|
padding: 64px 24px;
|
|
text-align: center;
|
|
border: 1px dashed var(--ms-line);
|
|
border-radius: 20px;
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-library__empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.ms-library__empty-text {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 22px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ms-muted);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.ms-library__empty-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.ms-library__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ms-library__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 26px;
|
|
letter-spacing: 0.07em;
|
|
margin: 0;
|
|
color: var(--ms-text);
|
|
flex: 1;
|
|
}
|
|
|
|
.ms-library__count {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-library__refresh {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.ms-library__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
align-items: start;
|
|
gap: 14px;
|
|
}
|
|
|
|
/* ── Library Card ─────────────────────────────────── */
|
|
.ms-lib-card {
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
display: grid;
|
|
gap: 10px;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.ms-lib-card.is-playing {
|
|
border-color: var(--lib-accent, var(--ms-accent));
|
|
box-shadow: 0 0 20px rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-lib-card:hover {
|
|
border-color: color-mix(in srgb, var(--lib-accent, var(--ms-accent)) 60%, transparent);
|
|
}
|
|
|
|
.ms-lib-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ms-lib-card__icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 0 6px var(--lib-accent, var(--ms-accent)));
|
|
}
|
|
|
|
.ms-lib-card__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ms-text);
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ms-lib-card__controls {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-lib-card__sub {
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.ms-lib-card__filename {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0 0 2px;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ms-lib-card__meta {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-lib-card__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.ms-lib-card__date {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
MOBILE
|
|
═══════════════════════════════════════════════════ */
|
|
@media (max-width: 768px) {
|
|
.ms-tabs {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.ms-tabs > * {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.ms-header__title {
|
|
font-size: clamp(44px, 14vw, 70px);
|
|
}
|
|
|
|
.ms-stage {
|
|
position: static;
|
|
}
|
|
|
|
.ms-result__actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ms-btn {
|
|
text-align: center;
|
|
}
|
|
|
|
.ms-bpm-presets {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 크레딧 뱃지 */
|
|
.ms-credits {
|
|
position: static;
|
|
margin-bottom: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 모델 바 */
|
|
.ms-model-bar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ms-model-bar__options {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 프로바이더 바 */
|
|
.ms-provider-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ms-provider-btn__desc {
|
|
display: none;
|
|
}
|
|
|
|
/* 라이브러리 그리드 1열 */
|
|
.ms-library__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* 카드 액션 버튼 */
|
|
.ms-lib-card__actions {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROVIDER BAR
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-provider-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ms-provider-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-align: left;
|
|
}
|
|
|
|
.ms-provider-btn:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
border-color: rgba(255,255,255,0.15);
|
|
}
|
|
|
|
.ms-provider-btn.is-active {
|
|
background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
|
|
border-color: var(--ms-accent, #f5a623);
|
|
box-shadow: 0 0 12px rgba(var(--ms-accent-rgb, 245,166,35), 0.15);
|
|
}
|
|
|
|
.ms-provider-btn__icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-provider-btn__name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 15px;
|
|
letter-spacing: 0.04em;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.ms-provider-btn__desc {
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.4);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
VOCALS & LYRICS (SUNO)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-vocal-toggle {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ms-vocal-btn {
|
|
flex: 1;
|
|
padding: 10px 12px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 8px;
|
|
color: rgba(255,255,255,0.6);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ms-vocal-btn:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.ms-vocal-btn.is-active {
|
|
background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
|
|
border-color: var(--ms-accent, #f5a623);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.ms-lyrics-wrap {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ms-lyrics-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ms-lyrics {
|
|
width: 100%;
|
|
min-height: 160px;
|
|
padding: 12px;
|
|
background: rgba(0,0,0,0.3);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-family: 'Courier Prime', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
resize: vertical;
|
|
}
|
|
|
|
.ms-lyrics:focus {
|
|
outline: none;
|
|
border-color: var(--ms-accent, #f5a623);
|
|
}
|
|
|
|
.ms-lyrics-hint {
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.35);
|
|
}
|
|
|
|
.ms-btn--sm {
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROVIDER TAG
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-result__tag--provider {
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.ms-result__tag--provider.is-suno {
|
|
background: rgba(168, 85, 247, 0.15);
|
|
border-color: rgba(168, 85, 247, 0.3);
|
|
color: #c084fc;
|
|
}
|
|
|
|
.ms-result__tag--provider.is-local {
|
|
background: rgba(96, 165, 250, 0.15);
|
|
border-color: rgba(96, 165, 250, 0.3);
|
|
color: #60a5fa;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LYRICS IN RESULT
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-result__lyrics {
|
|
margin-top: 12px;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-result__lyrics summary {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: rgba(255,255,255,0.6);
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
|
|
.ms-result__lyrics summary:hover {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.ms-result__lyrics-text {
|
|
padding: 12px;
|
|
margin: 0;
|
|
font-family: 'Courier Prime', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
color: rgba(255,255,255,0.7);
|
|
white-space: pre-wrap;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
ERROR BANNER
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-error-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(232, 92, 58, 0.3);
|
|
background: rgba(232, 92, 58, 0.08);
|
|
color: #e85c3a;
|
|
font-size: 12px;
|
|
font-family: var(--ms-ff-mono);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SKELETON LOADING
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-lib-card--skeleton {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-skel {
|
|
display: block;
|
|
border-radius: 4px;
|
|
background: linear-gradient(90deg, var(--ms-surface2) 25%, rgba(255,255,255,0.06) 50%, var(--ms-surface2) 75%);
|
|
background-size: 200% 100%;
|
|
animation: ms-shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-skel--icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-skel--title {
|
|
flex: 1;
|
|
height: 16px;
|
|
}
|
|
|
|
.ms-skel--btn {
|
|
width: 48px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-skel--filename {
|
|
width: 70%;
|
|
height: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms-skel--meta {
|
|
width: 45%;
|
|
height: 10px;
|
|
}
|
|
|
|
.ms-skel--tag {
|
|
width: 52px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
@keyframes ms-shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
CREDITS BADGE (header)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-credits {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 6px;
|
|
background: var(--ms-surface);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ms-credits__label {
|
|
font-family: var(--ms-ff-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.ms-credits__value {
|
|
font-weight: 700;
|
|
color: var(--ms-accent);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
MODEL SELECTOR BAR
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-model-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--ms-surface);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ms-model-bar__label {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ms-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-model-bar__options {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-model-btn {
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-family: var(--ms-ff-mono);
|
|
background: transparent;
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 4px;
|
|
color: var(--ms-muted);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ms-model-btn:hover {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-model-btn.is-active {
|
|
background: var(--ms-accent);
|
|
border-color: var(--ms-accent);
|
|
color: #0c0b09;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LIBRARY CARD — ACTION BUTTONS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-lib-card__actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 6px 0 0;
|
|
border-top: 1px solid var(--ms-line-2);
|
|
margin-top: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-lib-card__actions .ms-btn--sm {
|
|
font-size: 10px;
|
|
padding: 3px 8px;
|
|
}
|
|
|
|
.ms-lib-card__actions .ms-btn--sm:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LYRICS TAB
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-lyrics-tab {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.ms-lyrics-tab__head {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms-lyrics-tab__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 28px;
|
|
letter-spacing: 0.06em;
|
|
margin: 0 0 8px;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-lyrics-tab__desc {
|
|
font-size: 12px;
|
|
color: var(--ms-muted);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Input area ── */
|
|
.ms-lyrics-tab__form {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-lyrics-tab__input-wrap {
|
|
display: grid;
|
|
gap: 8px;
|
|
background: var(--ms-surface);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.ms-lyrics-tab__input-wrap:focus-within {
|
|
border-color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-lyrics-tab__input {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.ms-lyrics-tab__input::placeholder {
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-lyrics-tab__input-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ms-lyrics-tab__count {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
/* ── Accent button ── */
|
|
.ms-btn--accent {
|
|
padding: 8px 20px;
|
|
font-size: 13px;
|
|
font-family: var(--ms-ff-body);
|
|
font-weight: 600;
|
|
background: var(--ms-accent);
|
|
color: #0c0b09;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s, transform 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ms-btn--accent:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ms-btn--accent:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ms-btn--accent.is-loading {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-btn__spinner {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid rgba(12,11,9,0.2);
|
|
border-top-color: #0c0b09;
|
|
border-radius: 50%;
|
|
animation: ms-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes ms-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ── Empty state ── */
|
|
.ms-lyrics-tab__empty {
|
|
text-align: center;
|
|
padding: 48px 20px;
|
|
border: 1px dashed var(--ms-line);
|
|
border-radius: 16px;
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-lyrics-tab__empty-icon {
|
|
font-size: 40px;
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.ms-lyrics-tab__empty p {
|
|
color: var(--ms-muted);
|
|
font-size: 13px;
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.ms-lyrics-tab__empty-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px !important;
|
|
color: var(--ms-dim) !important;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ── Loading state ── */
|
|
.ms-lyrics-tab__loading {
|
|
text-align: center;
|
|
padding: 32px 20px;
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 16px;
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-lyrics-tab__loading p {
|
|
color: var(--ms-muted);
|
|
font-size: 12px;
|
|
font-family: var(--ms-ff-mono);
|
|
margin: 12px 0 0;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-lyrics-tab__loading-bar {
|
|
height: 3px;
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--ms-accent), transparent);
|
|
background-size: 200% 100%;
|
|
animation: ms-shimmer 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Results list ── */
|
|
.ms-lyrics-tab__results {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* ── Lyrics Card ── */
|
|
.ms-lyrics-card {
|
|
background: var(--ms-surface);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.ms-lyrics-card:hover {
|
|
border-color: color-mix(in srgb, var(--ms-accent) 50%, transparent);
|
|
}
|
|
|
|
.ms-lyrics-card__header {
|
|
padding: 14px 16px 10px;
|
|
border-bottom: 1px solid var(--ms-line-2);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-lyrics-card__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 18px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ms-text);
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.ms-lyrics-card__prompt {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-lyrics-card__text {
|
|
padding: 14px 16px;
|
|
margin: 0;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
color: rgba(255,255,255,0.75);
|
|
white-space: pre-wrap;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ms-lyrics-card__date {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-dim);
|
|
letter-spacing: 0.04em;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-lyrics-card__actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 8px 16px 12px;
|
|
border-top: 1px solid var(--ms-line-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── 수정 모드 ── */
|
|
.ms-lyrics-card.is-editing {
|
|
border-color: var(--ms-accent);
|
|
box-shadow: 0 0 16px rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-lyrics-card__title-input {
|
|
width: 100%;
|
|
background: var(--ms-surface2);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 16px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ms-text);
|
|
outline: none;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms-lyrics-card__title-input:focus {
|
|
border-color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-lyrics-card__text-input {
|
|
width: 100%;
|
|
background: var(--ms-surface2);
|
|
border: none;
|
|
border-top: 1px solid var(--ms-line-2);
|
|
border-bottom: 1px solid var(--ms-line-2);
|
|
padding: 14px 16px;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
color: rgba(255,255,255,0.85);
|
|
resize: vertical;
|
|
min-height: 200px;
|
|
outline: none;
|
|
}
|
|
|
|
.ms-btn--danger-text {
|
|
color: #e85c3a !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ms-btn--danger-text:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ms-btn--accent.ms-btn--sm {
|
|
padding: 3px 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
REDUCED MOTION
|
|
═══════════════════════════════════════════════════ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ms-stage__ready-icon,
|
|
.ms-vu__bar,
|
|
.ms-generate-btn__ring,
|
|
.ms-progress__msg {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* ── Phase 1: Credits Badge ─────────────────────────────── */
|
|
.ms-credits-badge {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 14px; border-radius: 20px;
|
|
background: rgba(245, 166, 35, 0.1);
|
|
border: 1px solid rgba(245, 166, 35, 0.25);
|
|
font-family: 'Courier Prime', monospace;
|
|
font-size: 0.85rem; color: var(--ms-accent);
|
|
}
|
|
.ms-credits-badge__icon { font-size: 1rem; }
|
|
.ms-credits-badge__value { font-weight: 700; font-size: 1.1rem; }
|
|
.ms-credits-badge__label { color: var(--ms-muted); font-size: 0.75rem; text-transform: uppercase; }
|
|
.ms-credits-badge.is-low {
|
|
background: rgba(231, 76, 60, 0.15);
|
|
border-color: rgba(231, 76, 60, 0.4);
|
|
color: #e74c3c;
|
|
animation: pulse-badge 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-badge {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
/* ── Phase 1: Vocal Gender Toggle ───────────────────────── */
|
|
.ms-gender-toggle { display: flex; gap: 6px; }
|
|
.ms-gender-btn {
|
|
flex: 1; padding: 8px 12px; border-radius: 8px;
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
color: var(--ms-muted); font-family: 'Syne', sans-serif;
|
|
font-size: 0.82rem; cursor: pointer; transition: all 0.2s;
|
|
display: flex; align-items: center; gap: 6px; justify-content: center;
|
|
}
|
|
.ms-gender-btn:hover { border-color: var(--ms-accent); color: var(--ms-text); }
|
|
.ms-gender-btn.is-active { background: rgba(245, 166, 35, 0.12); border-color: var(--ms-accent); color: var(--ms-text); }
|
|
.ms-gender-btn.is-active.is-male { background: rgba(74, 158, 255, 0.12); border-color: #4a9eff; color: #4a9eff; }
|
|
.ms-gender-btn.is-active.is-female { background: rgba(255, 107, 157, 0.12); border-color: #ff6b9d; color: #ff6b9d; }
|
|
.ms-gender-btn__icon { font-size: 1.1rem; }
|
|
|
|
/* ── Phase 1: Negative Tags ─────────────────────────────── */
|
|
.ms-negative-tags { display: flex; flex-direction: column; gap: 8px; }
|
|
.ms-negative-tags__presets { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.ms-neg-chip {
|
|
padding: 4px 12px; border-radius: 14px;
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
color: var(--ms-muted); font-size: 0.78rem; cursor: pointer;
|
|
font-family: 'Syne', sans-serif; transition: all 0.2s;
|
|
}
|
|
.ms-neg-chip:hover { border-color: #e74c3c; color: var(--ms-text); }
|
|
.ms-neg-chip.is-active {
|
|
background: rgba(231, 76, 60, 0.12); border-color: #e74c3c; color: #e74c3c;
|
|
text-decoration: line-through;
|
|
}
|
|
.ms-negative-tags__input {
|
|
padding: 8px 12px; border-radius: 8px;
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
color: var(--ms-text); font-family: 'Syne', sans-serif; font-size: 0.82rem;
|
|
}
|
|
.ms-negative-tags__input::placeholder { color: var(--ms-dim); }
|
|
.ms-param-hint--inline {
|
|
font-size: 0.72rem; color: var(--ms-dim); margin: 0 0 4px;
|
|
font-family: 'Courier Prime', monospace;
|
|
}
|
|
|
|
/* ── More Menu ──────────────────────────────────────────── */
|
|
.ms-more-menu { position: relative; }
|
|
.ms-more-menu__dropdown {
|
|
position: absolute; bottom: 100%; right: 0;
|
|
background: var(--ms-surface2); border: 1px solid var(--ms-line);
|
|
border-radius: 8px; padding: 4px; min-width: 160px; z-index: 20;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
|
|
}
|
|
.ms-more-menu__dropdown button {
|
|
display: block; width: 100%; padding: 8px 12px; border: none;
|
|
background: none; color: var(--ms-text); font-size: 0.82rem;
|
|
font-family: 'Syne', sans-serif; cursor: pointer; text-align: left;
|
|
border-radius: 6px;
|
|
}
|
|
.ms-more-menu__dropdown button:hover { background: rgba(245,166,35,0.1); }
|
|
.ms-more-menu__dropdown button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
/* ── Modal ──────────────────────────────────────────────── */
|
|
.ms-modal-overlay {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
|
|
display: flex; align-items: center; justify-content: center; z-index: 100;
|
|
}
|
|
.ms-modal {
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
border-radius: 16px; padding: 24px; max-width: 520px; width: 90%;
|
|
max-height: 90vh; overflow-y: auto;
|
|
}
|
|
.ms-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
|
.ms-modal__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--ms-text); }
|
|
.ms-modal__close { background: none; border: none; color: var(--ms-muted); font-size: 1.2rem; cursor: pointer; }
|
|
.ms-modal__actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
|
|
|
|
/* ── Cover Art Grid ─────────────────────────────────────── */
|
|
.ms-cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.ms-cover-option {
|
|
border: 2px solid var(--ms-line); border-radius: 12px; overflow: hidden;
|
|
cursor: pointer; background: none; padding: 0; transition: border-color 0.2s;
|
|
}
|
|
.ms-cover-option:hover { border-color: var(--ms-accent); }
|
|
.ms-cover-option.is-selected { border-color: var(--ms-accent); box-shadow: 0 0 12px rgba(245,166,35,0.3); }
|
|
.ms-cover-option__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
|
|
.ms-cover-option__label {
|
|
display: block; padding: 8px; text-align: center;
|
|
font-family: 'Courier Prime', monospace; font-size: 0.78rem; color: var(--ms-muted);
|
|
}
|
|
|
|
/* ── Stem Modal ─────────────────────────────────────────── */
|
|
.ms-modal--wide { max-width: 680px; }
|
|
.ms-modal__subtitle { font-size: 0.78rem; color: var(--ms-muted); font-family: 'Courier Prime', monospace; }
|
|
.ms-stem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
.ms-stem-card {
|
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
padding: 12px 8px; border-radius: 10px;
|
|
background: var(--ms-surface2); border: 1px solid var(--ms-line);
|
|
transition: border-color 0.2s;
|
|
}
|
|
.ms-stem-card.is-playing { border-color: var(--ms-accent); background: rgba(245,166,35,0.08); }
|
|
.ms-stem-card__icon { font-size: 1.4rem; }
|
|
.ms-stem-card__name {
|
|
font-family: 'Courier Prime', monospace; font-size: 0.72rem;
|
|
color: var(--ms-muted); text-transform: capitalize;
|
|
}
|
|
.ms-stem-card__actions { display: flex; gap: 6px; }
|
|
|
|
/* ── Synced Lyrics Player ───────────────────────────────── */
|
|
.ms-synced-player {
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
border-radius: 12px; padding: 16px; margin-top: 12px;
|
|
}
|
|
.ms-synced-player__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.ms-synced-player__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--ms-text); }
|
|
.ms-synced-player__audio { width: 100%; margin-bottom: 12px; }
|
|
.ms-synced-player__lyrics { line-height: 1.8; font-family: 'Syne', sans-serif; font-size: 0.95rem; }
|
|
.ms-synced-word { color: var(--ms-dim); transition: color 0.15s; }
|
|
.ms-synced-word.is-active { color: var(--synced-accent, var(--ms-accent)); font-weight: 600; }
|
|
.ms-synced-word.is-past { color: var(--ms-muted); }
|
|
|
|
/* ── Style Boost Button ─────────────────────────────────── */
|
|
.ms-style-boost-btn { margin-left: auto; }
|
|
.ms-style-boost-btn.is-loading { opacity: 0.6; }
|
|
|
|
/* ── Remix Tab ──────────────────────────────────────────── */
|
|
.ms-remix-tab { display: flex; flex-direction: column; gap: 20px; }
|
|
.ms-remix-tab__header { }
|
|
.ms-remix-tab__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--ms-text); }
|
|
.ms-remix-tab__desc { font-size: 0.85rem; color: var(--ms-muted); }
|
|
|
|
.ms-remix-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.ms-remix-card {
|
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
padding: 20px 12px; border-radius: 12px; cursor: pointer;
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
transition: all 0.2s; text-align: center;
|
|
}
|
|
.ms-remix-card:hover { border-color: var(--ms-accent); background: var(--ms-surface2); }
|
|
.ms-remix-card.is-active { border-color: var(--ms-accent); background: rgba(245,166,35,0.08); }
|
|
.ms-remix-card__icon { font-size: 2rem; }
|
|
.ms-remix-card__label { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--ms-text); }
|
|
.ms-remix-card__desc { font-size: 0.72rem; color: var(--ms-muted); font-family: 'Courier Prime', monospace; }
|
|
|
|
.ms-remix-params {
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
padding: 16px; border-radius: 12px;
|
|
background: var(--ms-surface); border: 1px solid var(--ms-line);
|
|
}
|
|
.ms-remix-submit { align-self: flex-start; margin-top: 8px; }
|
|
|
|
/* ══════════════════════════════════════════
|
|
YouTube Tab — yt-* classes
|
|
══════════════════════════════════════════ */
|
|
|
|
.ms-tab--youtube.is-active {
|
|
color: #f59e0b;
|
|
border-bottom-color: #f59e0b;
|
|
}
|
|
|
|
.yt-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.yt-subtabs {
|
|
display: flex;
|
|
border-bottom: 1px solid #1f2937;
|
|
background: #0d1117;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.yt-subtab {
|
|
padding: 10px 18px;
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.yt-subtab:hover { color: #9ca3af; }
|
|
|
|
.yt-subtab.is-active {
|
|
color: #22c55e;
|
|
border-bottom-color: #22c55e;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.yt-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.yt-card {
|
|
background: #0d1117;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 10px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.yt-card--create { border-color: #22c55e33; }
|
|
.yt-card--export { border-color: #3b82f633; border-style: dashed; }
|
|
|
|
.yt-card__title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #ccc;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.yt-card--create .yt-card__title { color: #86efac; }
|
|
.yt-card--export .yt-card__title { color: #93c5fd; }
|
|
|
|
.yt-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.yt-row--bottom { margin-bottom: 0; margin-top: 8px; }
|
|
|
|
.yt-form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.yt-field { display: flex; flex-direction: column; gap: 4px; }
|
|
.yt-field__label { font-size: 10px; color: #6b7280; }
|
|
|
|
.yt-input {
|
|
background: #1f2937;
|
|
border: 1px solid #374151;
|
|
border-radius: 6px;
|
|
padding: 7px 10px;
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.yt-input:focus { outline: none; border-color: #22c55e; }
|
|
.yt-input--sm { padding: 4px 8px; font-size: 11px; }
|
|
|
|
.yt-select {
|
|
flex: 1;
|
|
background: #1f2937;
|
|
border: 1px solid #374151;
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
color: #9ca3af;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.yt-format-toggle { display: flex; gap: 4px; }
|
|
|
|
.yt-format-btn {
|
|
background: #1f2937;
|
|
border: 1px solid #374151;
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
color: #9ca3af;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.yt-format-btn.is-active {
|
|
background: #1a2e1a;
|
|
border-color: #22c55e;
|
|
color: #86efac;
|
|
}
|
|
|
|
.yt-country-label { font-size: 11px; color: #6b7280; margin-bottom: 6px; }
|
|
|
|
.yt-country-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
|
|
.yt-chip {
|
|
background: #1f2937;
|
|
border: 1px solid #374151;
|
|
border-radius: 4px;
|
|
padding: 3px 10px;
|
|
color: #6b7280;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.yt-chip.is-active {
|
|
background: #1e3a2a;
|
|
border-color: #22c55e;
|
|
color: #86efac;
|
|
}
|
|
|
|
.yt-create-btn { width: 100%; margin-top: 2px; }
|
|
|
|
.yt-project-list { display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
.yt-project-card {
|
|
background: #1f2937;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.yt-project-card__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #111827;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-project-card__info { flex: 1; min-width: 0; }
|
|
|
|
.yt-project-card__title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #ccc;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.yt-project-card__meta { font-size: 10px; color: #6b7280; margin-top: 2px; }
|
|
|
|
.yt-status {
|
|
font-size: 10px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-status--pending { background: #1f2937; color: #9ca3af; }
|
|
.yt-status--rendering { background: #1a1500; color: #f59e0b; }
|
|
.yt-status--done { background: #0a3d1a; color: #22c55e; }
|
|
.yt-status--failed { background: #2d0a0a; color: #f87171; }
|
|
|
|
.yt-progress-bar {
|
|
height: 3px;
|
|
background: #374151;
|
|
border-radius: 2px;
|
|
margin-top: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.yt-progress-bar__fill {
|
|
height: 100%;
|
|
width: 65%;
|
|
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
|
border-radius: 2px;
|
|
animation: yt-progress-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes yt-progress-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
.yt-export-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
|
|
.yt-meta-preview { background: #111827; border-radius: 6px; padding: 8px; }
|
|
.yt-meta-preview__label { font-size: 10px; color: #6b7280; margin-bottom: 4px; }
|
|
.yt-meta-preview__content {
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
font-family: monospace;
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.yt-empty {
|
|
text-align: center;
|
|
color: #6b7280;
|
|
font-size: 11px;
|
|
padding: 8px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.yt-dash-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.yt-dash-card {
|
|
background: #0d1117;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.yt-dash-card__label { font-size: 10px; color: #6b7280; margin-bottom: 4px; }
|
|
.yt-dash-card__sub { font-size: 9px; color: #6b7280; margin-top: 2px; }
|
|
|
|
.yt-dash-card__value { font-size: 18px; font-weight: 700; }
|
|
.yt-dash-card__value--green { color: #22c55e; }
|
|
.yt-dash-card__value--blue { color: #60a5fa; }
|
|
.yt-dash-card__value--amber { color: #f59e0b; }
|
|
|
|
.yt-bar-chart { display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
.yt-bar-row { display: flex; align-items: center; gap: 8px; }
|
|
|
|
.yt-bar-row__label {
|
|
width: 80px;
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.yt-bar-row__rank {
|
|
width: 24px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #f59e0b;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-bar-row__info { flex: 1; }
|
|
|
|
.yt-bar-row__genre-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.yt-bar-row__genre-name { font-size: 12px; color: #ccc; }
|
|
.yt-bar-row__flags { font-size: 10px; color: #9ca3af; }
|
|
|
|
.yt-bar-row__track {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: #1f2937;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.yt-bar-row__fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #22c55e, #4ade80);
|
|
border-radius: 3px;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.yt-bar-row__fill--genre { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
|
|
|
|
.yt-bar-row__value {
|
|
width: 44px;
|
|
font-size: 11px;
|
|
color: #22c55e;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-table { display: flex; flex-direction: column; gap: 2px; }
|
|
|
|
.yt-table__header {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 28px;
|
|
gap: 4px;
|
|
padding: 0 4px 6px;
|
|
border-bottom: 1px solid #1f2937;
|
|
font-size: 10px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.yt-table__row {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 28px;
|
|
gap: 4px;
|
|
padding: 7px 4px;
|
|
border-bottom: 1px solid #111827;
|
|
align-items: center;
|
|
}
|
|
|
|
.yt-table__row--editing {
|
|
background: #111827;
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.yt-table__row:last-child { border-bottom: none; }
|
|
|
|
.yt-table__cell { font-size: 11px; color: #9ca3af; }
|
|
.yt-table__cell--mono { font-family: monospace; }
|
|
.yt-table__cell--green { color: #22c55e; }
|
|
.yt-table__cell--amber { color: #f59e0b; }
|
|
|
|
.yt-table__actions { display: flex; gap: 4px; grid-column: span 2; }
|
|
|
|
.yt-status-bar {
|
|
background: #0d1117;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.yt-status-bar__left { display: flex; align-items: center; gap: 8px; }
|
|
|
|
.yt-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #22c55e;
|
|
box-shadow: 0 0 6px #22c55e;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-status-bar__text { font-size: 11px; color: #9ca3af; }
|
|
|
|
.yt-prompt-list { display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
.yt-prompt-card {
|
|
background: #1a0d2e;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.yt-prompt-card__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.yt-prompt-card__genre { font-size: 11px; font-weight: 700; color: #c084fc; }
|
|
.yt-prompt-card__countries { font-size: 10px; color: #6b7280; }
|
|
|
|
.yt-prompt-card__text {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: #110820;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 6px 8px;
|
|
font-size: 11px;
|
|
font-family: monospace;
|
|
color: #e9d5ff;
|
|
line-height: 1.6;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.yt-prompt-card__text:hover { background: #1a0d30; }
|
|
|
|
.yt-prompt-card__copied { font-size: 10px; color: #22c55e; margin-top: 4px; display: block; }
|
|
.yt-prompt-card__reason { font-size: 10px; color: #6b7280; margin-top: 5px; }
|
|
|
|
.yt-report-list { display: flex; flex-direction: column; gap: 4px; }
|
|
|
|
.yt-report-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.yt-report-row:hover { background: #1f2937; }
|
|
.yt-report-row.is-selected { background: #1f2937; }
|
|
|
|
.yt-report-row__date { font-size: 11px; color: #ccc; }
|
|
.yt-report-row__today { font-size: 10px; color: #22c55e; margin-left: 4px; }
|
|
.yt-report-row__meta { font-size: 10px; color: #9ca3af; }
|
|
.yt-report-row__action { font-size: 11px; color: #60a5fa; }
|
|
|
|
@media (max-width: 600px) {
|
|
.yt-dash-cards { grid-template-columns: 1fr 1fr; }
|
|
.yt-form-grid { grid-template-columns: 1fr; }
|
|
.yt-table__header,
|
|
.yt-table__row { grid-template-columns: 2fr 1fr 1fr 28px; }
|
|
.yt-table__header span:nth-child(4),
|
|
.yt-table__header span:nth-child(5),
|
|
.yt-table__row span:nth-child(4),
|
|
.yt-table__row span:nth-child(5) { display: none; }
|
|
}
|
|
|
|
/* ── Compile subtab ── */
|
|
.yt-compile-tracklist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.yt-compile-track {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 10px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.yt-compile-track:hover { background: #1f2937; }
|
|
.yt-compile-track.is-selected { background: #0a2e18; }
|
|
|
|
.yt-compile-track__check {
|
|
width: 16px;
|
|
font-size: 11px;
|
|
color: #22c55e;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-compile-track__title {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: #ccc;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.yt-compile-track__dur {
|
|
font-size: 10px;
|
|
color: #6b7280;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-compile-order {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.yt-compile-order__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
background: #1f2937;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.yt-compile-order__num {
|
|
width: 20px;
|
|
font-size: 11px;
|
|
color: #6b7280;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-compile-order__title {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: #ccc;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.yt-compile-order__btns {
|
|
display: flex;
|
|
gap: 3px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.yt-compile-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.yt-compile-slider {
|
|
width: 100%;
|
|
accent-color: #22c55e;
|
|
}
|
|
|
|
/* === SetupTab === */
|
|
.setup-container { display:flex; flex-direction:column; gap:16px; padding:16px; }
|
|
.setup-card {
|
|
background: rgba(0,0,0,.3);
|
|
border: 1px solid var(--ms-line, #2a2a3a);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
}
|
|
.setup-card h3 {
|
|
margin: 0 0 12px;
|
|
font-size: 15px;
|
|
color: var(--ms-text, #f0f0f5);
|
|
font-family: var(--ms-ff-disp, inherit);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.setup-card label {
|
|
display: block;
|
|
margin: 8px 0;
|
|
font-size: 12px;
|
|
color: var(--ms-muted, #a0a0b0);
|
|
}
|
|
.setup-card input,
|
|
.setup-card textarea,
|
|
.setup-card select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-top: 4px;
|
|
background: rgba(255,255,255,.04);
|
|
border: 1px solid var(--ms-line, #2a2a3a);
|
|
border-radius: 8px;
|
|
color: var(--ms-text, #f0f0f5);
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
.setup-card input[type="range"] {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
accent-color: var(--ms-accent, #f5a623);
|
|
}
|
|
.setup-card button {
|
|
padding: 6px 14px;
|
|
margin-top: 8px;
|
|
background: rgba(245, 166, 35, 0.15);
|
|
color: var(--ms-accent, #bae6fd);
|
|
border: 1px solid rgba(245, 166, 35, 0.4);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
}
|
|
.setup-card button:hover {
|
|
background: rgba(245, 166, 35, 0.25);
|
|
}
|
|
.setup-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.setup-checkbox input[type="checkbox"] {
|
|
width: auto;
|
|
}
|
|
.setup-channel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.setup-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
}
|
|
.setup-prompt-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 6px 0;
|
|
align-items: center;
|
|
}
|
|
.setup-prompt-genre {
|
|
width: 80px;
|
|
font-size: 12px;
|
|
color: var(--ms-muted, #a0a0b0);
|
|
flex-shrink: 0;
|
|
}
|
|
.setup-saving {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
background: #222;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255,255,255,.1);
|
|
font-size: 12px;
|
|
color: var(--ms-text, #f0f0f5);
|
|
z-index: 100;
|
|
}
|
|
.ms-loading,
|
|
.ms-error {
|
|
padding: 24px;
|
|
text-align: center;
|
|
color: var(--ms-muted, #a0a0b0);
|
|
}
|
|
.ms-error {
|
|
color: #f87171;
|
|
}
|
|
|
|
/* === PipelineTab === */
|
|
.pipeline-container { padding:16px; }
|
|
.pipeline-toolbar { display:flex; gap:12px; margin-bottom:16px; align-items:center; }
|
|
.pipeline-toolbar select { padding:6px 10px; background:rgba(255,255,255,.04);
|
|
border:1px solid var(--ms-line, #2a2a3a); border-radius:8px; color:var(--ms-text, #f0f0f5); font-size:13px; }
|
|
.pipeline-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
|
|
.pipeline-card { background:rgba(0,0,0,.3); border:1px solid var(--ms-line, #2a2a3a);
|
|
border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:8px; }
|
|
.pipeline-card__head { display:flex; justify-content:space-between; align-items:center; }
|
|
.pipeline-card__head h4 { margin:0; font-size:14px; color:var(--ms-text, #f0f0f5); }
|
|
.pipeline-card__head button { padding:4px 10px; background:rgba(248,113,113,.15); color:#fca5a5;
|
|
border:1px solid rgba(248,113,113,.3); border-radius:6px; cursor:pointer; font-size:11px; }
|
|
.pipeline-progress { display:flex; gap:6px; margin:8px 0; }
|
|
.pipeline-dot { flex:1; text-align:center; padding:6px 0; border-radius:8px;
|
|
background:rgba(255,255,255,.05); font-size:11px; color:var(--ms-muted, #a0a0b0); }
|
|
.pipeline-dot.is-done { background:rgba(56,189,248,.2); color:#bae6fd; }
|
|
.pipeline-dot.is-current { box-shadow:0 0 8px rgba(56,189,248,.6); }
|
|
.pipeline-state { font-size:13px; color:var(--ms-text, #f0f0f5); }
|
|
.pipeline-review { font-size:12px; color:var(--ms-muted, #a0a0b0); }
|
|
.pipeline-review strong { color:#bae6fd; }
|
|
.pipeline-feedback { margin-top:8px; font-size:12px; color:var(--ms-muted, #a0a0b0); }
|
|
.pipeline-feedback summary { cursor:pointer; }
|
|
.pipeline-card a { color:#bae6fd; font-size:12px; }
|
|
.ms-empty { padding:32px; text-align:center; color:var(--ms-muted, #a0a0b0); grid-column:1/-1; }
|
|
|
|
/* Modal — shared */
|
|
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6);
|
|
display:flex; align-items:center; justify-content:center; z-index:1000; }
|
|
.modal-body { background:#1a1a2e; padding:24px; border-radius:14px; min-width:320px;
|
|
border:1px solid var(--ms-line, #2a2a3a); }
|
|
.modal-body h3 { margin:0 0 12px; font-size:15px; color:var(--ms-text, #f0f0f5); }
|
|
.modal-body select { width:100%; padding:8px; background:rgba(255,255,255,.04);
|
|
border:1px solid var(--ms-line, #2a2a3a); border-radius:8px; color:var(--ms-text, #f0f0f5); font-size:13px; }
|
|
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
|
|
.modal-actions button { padding:6px 14px; background:rgba(255,255,255,.05); color:var(--ms-text, #f0f0f5);
|
|
border:1px solid var(--ms-line, #2a2a3a); border-radius:8px; cursor:pointer; font-size:13px; }
|
|
.modal-actions .button.primary { background:rgba(56,189,248,.2); color:#bae6fd; border-color:rgba(56,189,248,.4); }
|
|
|
|
/* ── CompileTab → Pipeline 영상 만들기 버튼 ─────────────────────── */
|
|
.cmp-btn-video {
|
|
padding: 6px 12px;
|
|
background: rgba(56, 189, 248, 0.15);
|
|
color: #bae6fd;
|
|
border: 1px solid rgba(56, 189, 248, 0.4);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
margin-left: 6px;
|
|
}
|
|
.cmp-btn-video:hover { background: rgba(56, 189, 248, 0.25); }
|
|
|
|
.psm-input-radio { border: 1px solid var(--ms-line, #2a2a3a); padding: 8px 12px;
|
|
border-radius: 8px; margin-bottom: 12px; }
|
|
.psm-input-radio legend { padding: 0 6px; font-size: 11px; color: var(--ms-muted, #a0a0b0); }
|
|
.psm-input-radio label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
|
|
.psm-advanced { margin-top: 12px; padding: 8px 0; }
|
|
.psm-advanced summary { cursor: pointer; font-size: 12px; color: var(--ms-muted, #a0a0b0); user-select: none; }
|
|
.psm-advanced label { display: block; margin: 8px 0; font-size: 12px; }
|
|
.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); }
|
|
|
|
.psm-keyword-main { display: block; margin: 12px 0; font-size: 13px; }
|
|
.psm-keyword-main input {
|
|
display: block; width: 100%; margin-top: 4px; padding: 8px;
|
|
background: rgba(255,255,255,.04);
|
|
border: 1px solid var(--ms-line, #2a2a3a);
|
|
border-radius: 8px; color: var(--ms-text, #f0f0f5); font-size: 13px;
|
|
}
|
|
.psm-keyword-main small {
|
|
display: block; color: var(--ms-muted, #a0a0b0); font-size: 11px; margin-top: 4px;
|
|
}
|
|
|
|
/* === Batch Generation Section === */
|
|
.ms-batch-section {
|
|
margin: 16px 0;
|
|
padding: 12px 16px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border: 1px solid var(--ms-line, #2a2a3a);
|
|
border-radius: 12px;
|
|
}
|
|
.ms-batch-section summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: var(--ms-text, #f0f0f5);
|
|
user-select: none;
|
|
padding: 4px 0;
|
|
}
|
|
.ms-batch-section[open] summary {
|
|
margin-bottom: 8px;
|
|
}
|
|
.ms-batch-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 12px 0;
|
|
}
|
|
.ms-batch-form label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font-size: 13px;
|
|
color: var(--ms-text, #f0f0f5);
|
|
}
|
|
.ms-batch-form select,
|
|
.ms-batch-form input[type="range"] {
|
|
padding: 6px 8px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid var(--ms-line, #2a2a3a);
|
|
border-radius: 6px;
|
|
color: var(--ms-text, #f0f0f5);
|
|
}
|
|
.ms-batch-form input[type="range"] {
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
.ms-batch-checkbox {
|
|
flex-direction: row !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.ms-batch-checkbox input {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
.ms-batch-estimate {
|
|
font-size: 12px;
|
|
color: var(--ms-muted, #a0a0b0);
|
|
margin: 4px 0;
|
|
}
|
|
.ms-batch-form button {
|
|
padding: 8px 16px;
|
|
background: rgba(56, 189, 248, 0.2);
|
|
color: #bae6fd;
|
|
border: 1px solid rgba(56, 189, 248, 0.4);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
align-self: flex-start;
|
|
}
|
|
.ms-batch-form button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ms-batch-progress {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line, #2a2a3a);
|
|
}
|
|
.ms-batch-header {
|
|
font-size: 13px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.ms-batch-status--generating { color: var(--ms-accent, #38bdf8); }
|
|
.ms-batch-status--compiling { color: #fb923c; }
|
|
.ms-batch-status--piped { color: #86efac; }
|
|
.ms-batch-status--failed { color: #fca5a5; }
|
|
.ms-batch-status--cancelled { color: var(--ms-muted, #a0a0b0); }
|
|
.ms-batch-tracks {
|
|
padding-left: 24px;
|
|
font-size: 12px;
|
|
margin: 8px 0;
|
|
}
|
|
.ms-batch-tracks li {
|
|
margin: 2px 0;
|
|
}
|
|
.ms-batch-tracks li.done {
|
|
color: #86efac;
|
|
}
|
|
.ms-batch-tracks li.current {
|
|
color: var(--ms-accent, #38bdf8);
|
|
font-weight: bold;
|
|
}
|
|
.ms-batch-tracks li.pending {
|
|
color: var(--ms-muted, #a0a0b0);
|
|
}
|
|
.ms-batch-link {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: var(--ms-muted, #a0a0b0);
|
|
}
|