feat(ui): Midnight Glass v2 마감 — lucide 아이콘 통일 + 몰입 패널 웨이브 + 팝업 정합
- @mui/icons-material → lucide-react 전환 (23파일, 잔여 0) - VoiceRecordingPanel: 9바 DOM 웨이브 → GradientWave (canvas) - Vanilla 팝업 5종 style.css v2 정합 (글래스 네이비/헤어라인/블루, CSS 변수 주입 구조 유지 — 테마 반응형 보존)
This commit is contained in:
Yun Chan
parent
a8a1d6e546
commit
082ed2ef02
30 changed files with 212 additions and 289 deletions
|
|
@ -3,14 +3,14 @@
|
|||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
/* ── Midnight(다크) fallback 기본값 (:root) ────────────────────── */
|
||||
:root {
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-accent-glow: rgba(242, 91, 41, 0.6);
|
||||
--d3-accent-glow-dim: rgba(242, 91, 41, 0.3);
|
||||
--d3-accent-light: #ff8a65;
|
||||
--d3-accent-light-glow: rgba(255, 138, 101, 0.7);
|
||||
--d3-accent-light-glow-dim: rgba(255, 138, 101, 0.4);
|
||||
--d3-accent-main: #3b82f6;
|
||||
--d3-accent-glow: rgba(59, 130, 246, 0.6);
|
||||
--d3-accent-glow-dim: rgba(59, 130, 246, 0.3);
|
||||
--d3-accent-light: #60a5fa;
|
||||
--d3-accent-light-glow: rgba(96, 165, 250, 0.7);
|
||||
--d3-accent-light-glow-dim: rgba(96, 165, 250, 0.4);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -59,8 +59,10 @@ html, body {
|
|||
0 0 8px var(--d3-accent-glow),
|
||||
0 0 16px var(--d3-accent-glow-dim),
|
||||
0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
border-radius: 6px;
|
||||
background: rgba(13, 20, 38, 0.92);
|
||||
/* 헤어라인은 box-shadow inset — border는 라인 높이에 영향을 주므로 금지 */
|
||||
box-shadow: inset 0 0 0 1px rgba(148, 180, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 4px 12px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-out;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
/* ── Midnight(다크) fallback 기본값 (:root) ────────────────────── */
|
||||
:root {
|
||||
--d3-bg-card: #242427;
|
||||
--d3-border-default: rgba(255, 255, 255, 0.08);
|
||||
--d3-border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--d3-text-primary: rgba(255, 255, 255, 0.87);
|
||||
--d3-text-inactive: rgba(255, 255, 255, 0.3);
|
||||
--d3-text-muted: rgba(255, 255, 255, 0.25);
|
||||
--d3-text-dimLabel: #5c2615;
|
||||
--d3-text-secondary: rgba(255, 255, 255, 0.35);
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-accent-dim: rgba(242, 91, 41, 0.08);
|
||||
--d3-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--d3-bg-card: rgba(17, 26, 48, 0.85);
|
||||
--d3-border-default: rgba(148, 180, 255, 0.12);
|
||||
--d3-border-subtle: rgba(148, 180, 255, 0.07);
|
||||
--d3-text-primary: #eef2fb;
|
||||
--d3-text-inactive: #7385ab;
|
||||
--d3-text-muted: rgba(147, 164, 200, 0.45);
|
||||
--d3-text-dimLabel: #4e5f85;
|
||||
--d3-text-secondary: #93a4c8;
|
||||
--d3-accent-main: #3b82f6;
|
||||
--d3-accent-dim: rgba(59, 130, 246, 0.14);
|
||||
--d3-shadow-popup: 0 12px 40px rgba(3, 7, 18, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -39,8 +39,9 @@ body {
|
|||
.command-popup {
|
||||
background: var(--d3-bg-card);
|
||||
border: 1px solid var(--d3-border-default);
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
padding: 6px;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
opacity: 0;
|
||||
transform: translateY(4px) scale(0.98);
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
/* ── Midnight(다크) fallback 기본값 (:root) ────────────────────── */
|
||||
:root {
|
||||
--d3-bg-card: #242427;
|
||||
--d3-border-default: rgba(255, 255, 255, 0.08);
|
||||
--d3-border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--d3-text-primary: rgba(255, 255, 255, 0.87);
|
||||
--d3-text-inactive: rgba(255, 255, 255, 0.3);
|
||||
--d3-text-muted: rgba(255, 255, 255, 0.25);
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--d3-bg-card: rgba(17, 26, 48, 0.85);
|
||||
--d3-border-default: rgba(148, 180, 255, 0.12);
|
||||
--d3-border-subtle: rgba(148, 180, 255, 0.07);
|
||||
--d3-text-primary: #eef2fb;
|
||||
--d3-text-inactive: #7385ab;
|
||||
--d3-text-muted: rgba(147, 164, 200, 0.45);
|
||||
--d3-accent-main: #3b82f6;
|
||||
--d3-shadow-popup: 0 12px 40px rgba(3, 7, 18, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -36,8 +36,9 @@ body {
|
|||
.history-popup {
|
||||
background: var(--d3-bg-card);
|
||||
border: 1px solid var(--d3-border-default);
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
padding: 6px;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
opacity: 0;
|
||||
transform: translateY(4px) scale(0.98);
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@
|
|||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
/* ── Midnight(다크) fallback 기본값 (:root) ────────────────────── */
|
||||
:root {
|
||||
--d3-bg-tip: rgba(0, 0, 0, 0.85);
|
||||
--d3-text-primary: rgba(255, 255, 255, 0.87);
|
||||
--d3-text-secondary: rgba(255, 255, 255, 0.6);
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-border-strong: rgba(255, 255, 255, 0.15);
|
||||
--d3-bg-tip: rgba(17, 26, 48, 0.85);
|
||||
--d3-text-primary: #eef2fb;
|
||||
--d3-text-secondary: #93a4c8;
|
||||
--d3-accent-main: #3b82f6;
|
||||
--d3-border-default: rgba(148, 180, 255, 0.12);
|
||||
--d3-border-strong: rgba(148, 180, 255, 0.2);
|
||||
--d3-shadow-popup: 0 12px 40px rgba(3, 7, 18, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -35,12 +37,14 @@ body {
|
|||
|
||||
.recording-tip {
|
||||
background: var(--d3-bg-tip);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--d3-border-default);
|
||||
border-radius: 14px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
transition: opacity 150ms ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -60,6 +64,17 @@ body {
|
|||
min-height: 2px;
|
||||
}
|
||||
|
||||
/* 9바 시안→블루→퍼플 스펙트럼 (v2 Midnight — RAW.dark gradient.wave1~3 보간) */
|
||||
.wave-bar:nth-child(1) { background: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, 0.35); }
|
||||
.wave-bar:nth-child(2) { background: #28bef0; box-shadow: 0 0 6px rgba(40, 190, 240, 0.35); }
|
||||
.wave-bar:nth-child(3) { background: #2fa9f2; box-shadow: 0 0 6px rgba(47, 169, 242, 0.35); }
|
||||
.wave-bar:nth-child(4) { background: #3596f4; box-shadow: 0 0 6px rgba(53, 150, 244, 0.35); }
|
||||
.wave-bar:nth-child(5) { background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.35); }
|
||||
.wave-bar:nth-child(6) { background: #4f78f6; box-shadow: 0 0 6px rgba(79, 120, 246, 0.35); }
|
||||
.wave-bar:nth-child(7) { background: #636ff6; box-shadow: 0 0 6px rgba(99, 111, 246, 0.35); }
|
||||
.wave-bar:nth-child(8) { background: #7765f6; box-shadow: 0 0 6px rgba(119, 101, 246, 0.35); }
|
||||
.wave-bar:nth-child(9) { background: #8b5cf6; box-shadow: 0 0 6px rgba(139, 92, 246, 0.35); }
|
||||
|
||||
.duration {
|
||||
color: var(--d3-text-primary);
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@
|
|||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
/* ── Midnight(다크) fallback 기본값 (:root) ────────────────────── */
|
||||
:root {
|
||||
--d3-bg-result: #1e1e1e;
|
||||
--d3-border-result: rgba(255, 255, 255, 0.08);
|
||||
--d3-text-result: rgba(255, 255, 255, 0.87);
|
||||
--d3-action-btn: rgba(255, 255, 255, 0.4);
|
||||
--d3-action-btn-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
--d3-action-btn-hover: rgba(255, 255, 255, 0.7);
|
||||
--d3-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--d3-bg-result: rgba(17, 26, 48, 0.85);
|
||||
--d3-border-result: rgba(148, 180, 255, 0.12);
|
||||
--d3-text-result: #eef2fb;
|
||||
--d3-action-btn: rgba(147, 164, 200, 0.7);
|
||||
--d3-action-btn-hover-bg: rgba(148, 180, 255, 0.08);
|
||||
--d3-action-btn-hover: #c9d5f2;
|
||||
--d3-shadow-popup: 0 12px 40px rgba(3, 7, 18, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -37,8 +37,9 @@ body {
|
|||
.result-popup {
|
||||
background: var(--d3-bg-result);
|
||||
border: 1px solid var(--d3-border-result);
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
padding: 12px 16px;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
|
|
@ -89,7 +90,7 @@ body {
|
|||
}
|
||||
|
||||
.action-btn.copied {
|
||||
color: #4caf50;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue