htlee
7fa4e2bfb1
- SensorChart: 히스토리 1H/2H/3H/6H, 기압 SLP 보정, 데이터 범위 확장(y축 시작) - SensorChart Tooltip: KST 시간 포맷, 위치 상단 고정, 스타일 통일 - 지진 포인트 클릭 → 지도 flyTo + SeismicMarker 진도별 펄스 원형 표시 - SatelliteMap flyTo 지원 추가 - OilFacilityLayer: planned ring SVG 내부로 이동 (아이콘 중심 정렬 수정) - 밝은 테마 text-shadow CSS 변수 분리 (dark/light) - deploy.yml: SSH SCP+실행 각 3회 재시도 (kex_exchange 거부 대응) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
190 lines
5.7 KiB
CSS
190 lines
5.7 KiB
CSS
/* ═══ KCG Monitoring Design Tokens ═══
|
|
* 모든 색상을 --kcg-* CSS 변수로 관리.
|
|
* data-theme 속성으로 dark/light 전환.
|
|
* @theme 블록으로 Tailwind 유틸리티 클래스에 매핑.
|
|
*/
|
|
|
|
/* ── Dark Theme (기본 — 현재 UI와 동일) ── */
|
|
:root,
|
|
[data-theme='dark'] {
|
|
/* 배경 */
|
|
--kcg-bg: #0a0a1a;
|
|
--kcg-surface: #111127;
|
|
--kcg-card: #1a1a2e;
|
|
--kcg-overlay: rgba(10, 10, 26, 0.96);
|
|
--kcg-subtle: rgba(255, 255, 255, 0.03);
|
|
|
|
/* 텍스트 */
|
|
--kcg-text: #e0e0e0;
|
|
--kcg-text-secondary: #ccc;
|
|
--kcg-muted: #888;
|
|
--kcg-dim: #666;
|
|
|
|
/* 보더 */
|
|
--kcg-border: #333;
|
|
--kcg-border-light: #444;
|
|
--kcg-border-heavy: #555;
|
|
|
|
/* 시맨틱 */
|
|
--kcg-accent: #3b82f6;
|
|
--kcg-accent-hover: #2563eb;
|
|
--kcg-danger: #ef4444;
|
|
--kcg-warning: #eab308;
|
|
--kcg-success: #22c55e;
|
|
--kcg-info: #06b6d4;
|
|
|
|
/* 이벤트 타입 */
|
|
--kcg-event-airstrike: #ef4444;
|
|
--kcg-event-explosion: #f97316;
|
|
--kcg-event-missile: #eab308;
|
|
--kcg-event-intercept: #3b82f6;
|
|
--kcg-event-impact: #ff0000;
|
|
--kcg-event-alert: #f97316;
|
|
--kcg-event-osint: #06b6d4;
|
|
|
|
/* 선박 MT 분류 */
|
|
--kcg-ship-cargo: #f0a830;
|
|
--kcg-ship-tanker: #e74c3c;
|
|
--kcg-ship-passenger: #4caf50;
|
|
--kcg-ship-fishing: #42a5f5;
|
|
--kcg-ship-military: #d32f2f;
|
|
--kcg-ship-tug: #2e7d32;
|
|
--kcg-ship-pleasure: #e91e8c;
|
|
--kcg-ship-highspeed: #ff9800;
|
|
--kcg-ship-other: #5c6bc0;
|
|
--kcg-ship-unknown: #9e9e9e;
|
|
|
|
/* 항공기 카테고리 */
|
|
--kcg-ac-fighter: #ff4444;
|
|
--kcg-ac-military: #ff6600;
|
|
--kcg-ac-surveillance: #ffcc00;
|
|
--kcg-ac-tanker: #00ccff;
|
|
--kcg-ac-cargo: #a78bfa;
|
|
--kcg-ac-civilian: #FFD700;
|
|
--kcg-ac-unknown: #7CFC00;
|
|
|
|
/* 국기/해군 */
|
|
--kcg-navy-us: #4a90d9;
|
|
--kcg-navy-kr: #00c73c;
|
|
--kcg-navy-jp: #ff6b6b;
|
|
--kcg-navy-cn: #ff4444;
|
|
--kcg-navy-ir: #ff8c00;
|
|
|
|
/* 글래스/투명 */
|
|
--kcg-glass: rgba(10, 10, 26, 0.92);
|
|
--kcg-glass-dense: rgba(10, 10, 26, 0.96);
|
|
--kcg-hover: rgba(255, 255, 255, 0.05);
|
|
--kcg-hover-strong: rgba(255, 255, 255, 0.08);
|
|
--kcg-accent-bg: rgba(59, 130, 246, 0.12);
|
|
--kcg-danger-bg: rgba(239, 68, 68, 0.15);
|
|
|
|
/* 패널 그림자 */
|
|
--kcg-panel-shadow: none;
|
|
|
|
/* 지도 라벨 그림자 — dark에서 검정 기반 */
|
|
--kcg-map-label-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
|
|
--kcg-map-impact-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
|
|
}
|
|
|
|
/* ── Light Theme ── */
|
|
[data-theme='light'] {
|
|
/* 배경 */
|
|
--kcg-bg: #f0f2f5;
|
|
--kcg-surface: #ffffff;
|
|
--kcg-card: #f8fafc;
|
|
--kcg-overlay: rgba(255, 255, 255, 0.96);
|
|
--kcg-subtle: rgba(0, 0, 0, 0.02);
|
|
|
|
/* 텍스트 */
|
|
--kcg-text: #1a1a2e;
|
|
--kcg-text-secondary: #374151;
|
|
--kcg-muted: #6b7280;
|
|
--kcg-dim: #9ca3af;
|
|
|
|
/* 보더 */
|
|
--kcg-border: #d1d5db;
|
|
--kcg-border-light: #e5e7eb;
|
|
--kcg-border-heavy: #9ca3af;
|
|
|
|
/* 시맨틱 (데이터 시각화 색상은 테마 불변) */
|
|
--kcg-accent: #2563eb;
|
|
--kcg-accent-hover: #1d4ed8;
|
|
|
|
/* 글래스/투명 */
|
|
--kcg-glass: rgba(255, 255, 255, 0.95);
|
|
--kcg-glass-dense: rgba(255, 255, 255, 0.98);
|
|
--kcg-hover: rgba(0, 0, 0, 0.04);
|
|
--kcg-hover-strong: rgba(0, 0, 0, 0.08);
|
|
--kcg-accent-bg: rgba(37, 99, 235, 0.08);
|
|
--kcg-danger-bg: rgba(239, 68, 68, 0.08);
|
|
|
|
/* 패널 그림자 — light에서 영역 구분 강화 (outline 제거 — 폰트 가독성) */
|
|
--kcg-panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
/* 지도 라벨 그림자 — light에서 흰 배경 기반 */
|
|
--kcg-map-label-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.6);
|
|
--kcg-map-impact-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7);
|
|
}
|
|
|
|
/* ── Tailwind @theme mapping ── */
|
|
@theme {
|
|
/* 배경 */
|
|
--color-kcg-bg: var(--kcg-bg);
|
|
--color-kcg-surface: var(--kcg-surface);
|
|
--color-kcg-card: var(--kcg-card);
|
|
--color-kcg-overlay: var(--kcg-overlay);
|
|
--color-kcg-subtle: var(--kcg-subtle);
|
|
|
|
/* 텍스트 */
|
|
--color-kcg-text: var(--kcg-text);
|
|
--color-kcg-text-secondary: var(--kcg-text-secondary);
|
|
--color-kcg-muted: var(--kcg-muted);
|
|
--color-kcg-dim: var(--kcg-dim);
|
|
|
|
/* 보더 */
|
|
--color-kcg-border: var(--kcg-border);
|
|
--color-kcg-border-light: var(--kcg-border-light);
|
|
|
|
/* 시맨틱 */
|
|
--color-kcg-accent: var(--kcg-accent);
|
|
--color-kcg-danger: var(--kcg-danger);
|
|
--color-kcg-warning: var(--kcg-warning);
|
|
--color-kcg-success: var(--kcg-success);
|
|
--color-kcg-info: var(--kcg-info);
|
|
|
|
/* 이벤트 */
|
|
--color-kcg-event-airstrike: var(--kcg-event-airstrike);
|
|
--color-kcg-event-explosion: var(--kcg-event-explosion);
|
|
--color-kcg-event-missile: var(--kcg-event-missile);
|
|
--color-kcg-event-intercept: var(--kcg-event-intercept);
|
|
--color-kcg-event-impact: var(--kcg-event-impact);
|
|
--color-kcg-event-osint: var(--kcg-event-osint);
|
|
|
|
/* 선박 */
|
|
--color-kcg-ship-cargo: var(--kcg-ship-cargo);
|
|
--color-kcg-ship-tanker: var(--kcg-ship-tanker);
|
|
--color-kcg-ship-passenger: var(--kcg-ship-passenger);
|
|
--color-kcg-ship-fishing: var(--kcg-ship-fishing);
|
|
--color-kcg-ship-military: var(--kcg-ship-military);
|
|
--color-kcg-ship-tug: var(--kcg-ship-tug);
|
|
--color-kcg-ship-unknown: var(--kcg-ship-unknown);
|
|
|
|
/* 항공기 */
|
|
--color-kcg-ac-fighter: var(--kcg-ac-fighter);
|
|
--color-kcg-ac-military: var(--kcg-ac-military);
|
|
--color-kcg-ac-surveillance: var(--kcg-ac-surveillance);
|
|
--color-kcg-ac-tanker: var(--kcg-ac-tanker);
|
|
--color-kcg-ac-cargo: var(--kcg-ac-cargo);
|
|
--color-kcg-ac-civilian: var(--kcg-ac-civilian);
|
|
|
|
/* 글래스 */
|
|
--color-kcg-glass: var(--kcg-glass);
|
|
--color-kcg-hover: var(--kcg-hover);
|
|
--color-kcg-accent-bg: var(--kcg-accent-bg);
|
|
--color-kcg-danger-bg: var(--kcg-danger-bg);
|
|
|
|
/* 폰트 */
|
|
--font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|