141 lines
4.2 KiB
Markdown
141 lines
4.2 KiB
Markdown
---
|
|
name: itsm-design-overhaul
|
|
description: "GUARDiA ITSM UI(itsm/static/) Variant 스타일 개편 스킬. C:/GUARDiA/screenshot 기준 색상·카드·사이드바·버튼·테이블을 현대화. 다크 테마 유지. 다음 상황에서 반드시 사용: (1) 'ITSM 디자인 바꿔줘', 'ITSM UI 개편'; (2) style.css 색상 토큰 변경; (3) 사이드바·카드·버튼 스타일 개선; (4) 다시 실행, 업데이트, 보완."
|
|
---
|
|
|
|
# GUARDiA ITSM UI 개편 스킬
|
|
|
|
## 레퍼런스
|
|
- `C:\GUARDiA\screenshot\` — Variant 디자인 스크린샷 13장
|
|
- 핵심: screenshot9(서비스카드), screenshot10(히어로), screenshot11(섹션)
|
|
- 적용 파일: `itsm/static/style.css`, `login.css`
|
|
|
|
## 색상 토큰 변환 (style.css :root)
|
|
|
|
```css
|
|
:root {
|
|
/* ── Variant 색상 적용 ── */
|
|
--primary: #00A0C8; /* 시안 — 버튼·링크·강조 */
|
|
--primary-dark: #005A8C; /* 미드블루 — hover */
|
|
--accent: #29B8D8; /* 밝은 시안 — 포인트 */
|
|
--brand-navy: #003366; /* 딥네이비 — 중요 UI */
|
|
--brand-blue: #005A8C; /* 미드블루 */
|
|
|
|
/* 배경 (다크 테마 유지) */
|
|
--main-bg: #001020; /* 더 깊은 네이비 배경 */
|
|
--card-bg: #001e3c; /* 카드 배경 */
|
|
--sidebar-bg: #001530; /* 사이드바 */
|
|
--header-bg: #001020; /* 헤더 */
|
|
|
|
/* 텍스트 */
|
|
--text-main: #e8f0f8; /* 메인 텍스트 */
|
|
--text-muted: #7ba7c4; /* 보조 텍스트 */
|
|
|
|
/* 테두리 */
|
|
--border: rgba(0,160,200,.15); /* 시안 계열 */
|
|
--border-strong: rgba(0,160,200,.30);
|
|
|
|
/* 그림자 */
|
|
--shadow-card: 0 4px 20px rgba(0,30,60,.4), 0 1px 4px rgba(0,160,200,.1);
|
|
|
|
/* 반경 */
|
|
--radius-card: 12px;
|
|
--radius-btn: 8px;
|
|
--radius-sm: 6px;
|
|
}
|
|
```
|
|
|
|
## 사이드바 개편
|
|
|
|
```css
|
|
#sidebar {
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border);
|
|
box-shadow: 4px 0 20px rgba(0,0,0,.3);
|
|
}
|
|
#sidebar-logo { border-bottom: 1px solid var(--border); padding: 18px 20px; }
|
|
.nav-item { border-radius: var(--radius-sm); margin: 2px 8px; }
|
|
.nav-item:hover { background: rgba(0,160,200,.1); color: var(--primary); }
|
|
.nav-item.active {
|
|
background: rgba(0,160,200,.15);
|
|
border-left: 3px solid var(--primary);
|
|
color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
```
|
|
|
|
## 카드 개편
|
|
|
|
```css
|
|
.card, .stat-card, .dashboard-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-card);
|
|
transition: box-shadow .25s, border-color .25s;
|
|
}
|
|
.card:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(0,30,60,.5); }
|
|
|
|
/* 통계 카드 상단 컬러 바 */
|
|
.stat-card { border-top: 3px solid var(--primary); }
|
|
```
|
|
|
|
## 버튼 개편
|
|
|
|
```css
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
border-radius: var(--radius-btn);
|
|
font-weight: 600;
|
|
transition: all .2s;
|
|
}
|
|
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,160,200,.3); }
|
|
.btn-secondary {
|
|
background: transparent;
|
|
border: 1.5px solid var(--primary);
|
|
color: var(--primary);
|
|
border-radius: var(--radius-btn);
|
|
}
|
|
```
|
|
|
|
## 테이블 개편
|
|
|
|
```css
|
|
.table thead th {
|
|
background: rgba(0,30,60,.6);
|
|
color: var(--text-muted);
|
|
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.table tbody tr:hover { background: rgba(0,160,200,.05); }
|
|
.table td { border-bottom: 1px solid rgba(0,160,200,.08); }
|
|
```
|
|
|
|
## 로그인 페이지 개편
|
|
|
|
```css
|
|
/* login.css */
|
|
.login-page {
|
|
background: linear-gradient(135deg, #001020 0%, #002040 60%, #003060 100%);
|
|
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.login-card {
|
|
background: rgba(0,30,60,.8);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(0,160,200,.2);
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,.5);
|
|
padding: 48px 40px; width: 400px;
|
|
}
|
|
.login-title { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 8px; }
|
|
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
|
|
```
|
|
|
|
## 배포 방법
|
|
|
|
```bash
|
|
# ITSM 서버 적용
|
|
python C:\GUARDiA\deploy_itsm_design.py
|
|
systemctl restart guardia
|
|
```
|