cfe2901a55
- itsm/ -> workspace/guardia-itsm/ - manager/ -> workspace/guardia-manager/ - app/ -> workspace/guardia-messenger/ - manual/ -> workspace/guardia-docs/ workspace/zioinfo-web/ unchanged. git mv preserves full commit history. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
2.1 KiB
CSS
67 lines
2.1 KiB
CSS
/* ── GUARDiA Manager Design System ── */
|
|
/* 네이버 클라우드 콘솔 디자인 패턴 참조 */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
/* GUARDiA 브랜드 */
|
|
--brand-primary: #1a3a6b;
|
|
--brand-accent: #4f6ef7;
|
|
--brand-light: #e8ecff;
|
|
--brand-hover: #3a5be0;
|
|
|
|
/* NCloud 콘솔 참조 레이아웃 */
|
|
--gnb-h: 56px;
|
|
--sidebar-w: 220px;
|
|
--gnb-bg: #1a1d2e;
|
|
--sidebar-bg: #f5f7fa;
|
|
--sidebar-hover: #eaeef5;
|
|
--sidebar-active:#dde4f5;
|
|
--content-bg: #f0f2f5;
|
|
--card-bg: #ffffff;
|
|
--border: #e2e8f0;
|
|
|
|
/* 상태 색상 */
|
|
--s-running: #00c853;
|
|
--s-stopped: #9e9e9e;
|
|
--s-error: #f44336;
|
|
--s-pending: #ff9800;
|
|
--s-creating:#2196f3;
|
|
|
|
/* 텍스트 */
|
|
--tx-primary: #1e293b;
|
|
--tx-secondary:#475569;
|
|
--tx-muted: #94a3b8;
|
|
|
|
/* 그림자 */
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
|
|
--shadow-md: 0 4px 12px rgba(0,0,0,.1);
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,.15);
|
|
|
|
font-family: 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
|
|
font-size: 14px;
|
|
color: var(--tx-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
body { background: var(--content-bg); min-height: 100vh; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button { font-family: inherit; cursor: pointer; }
|
|
input, select, textarea { font-family: inherit; }
|
|
|
|
/* ── 스크롤바 ── */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
|
|
|
|
/* ── 유틸리티 ── */
|
|
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.flex-center { display: flex; align-items: center; justify-content: center; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
|
|
|
|
/* ── 애니메이션 ── */
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
|
|
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.animate-in { animation: fadeIn .2s ease; }
|