aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

시스템 상태 카드 — 눈금 레이블+블록바+신호등 동일 높이 정렬

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Macbook
2026-06-11 16:48:32 +09:00
parent 50aed38f62
commit 7b4a7e1950
2 changed files with 85 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/dashboardCommand.css
+50 -18
View File
@@ -340,62 +340,94 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 8px;
gap: 8px;
padding: 12px 10px 10px;
border-radius: 10px;
border: 1px solid var(--se-border);
background: color-mix(in srgb, var(--se-bg) 60%, transparent);
background: color-mix(in srgb, var(--se-bg) 55%, transparent);
min-width: 0;
}
.gc-sys-card-title {
font-size: 0.65rem;
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--se-text-muted);
}
/* 바 영역 + 신호등 — 세로 높이 동일 */
.gc-sys-card-body {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
align-items: stretch; /* 같은 높이 */
gap: 6px;
}
/* 눈금 레이블 열 */
.gc-sys-ticks {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
padding: 2px 0;
}
.gc-sys-tick {
font-size: 0.55rem;
color: var(--se-text-dim, #666);
line-height: 1;
white-space: nowrap;
}
/* 세로 블록 바 */
.gc-sys-bar-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 3px;
padding: 2px 0;
}
.gc-sys-block {
width: 18px;
height: 8px;
border-radius: 2px;
background: color-mix(in srgb, var(--se-text-dim, #666) 18%, #111);
opacity: 0.28;
width: 28px;
flex: 1;
border-radius: 3px;
background: color-mix(in srgb, var(--se-text-dim, #555) 15%, #0d0d0d);
opacity: 0.3;
}
.gc-sys-block--on { opacity: 1; }
/* 하위 블록 (낮은 사용률 = 초록) */
/* 낮은 사용률 (하단 = 0~50%) → 초록 */
.gc-sys-block--lo.gc-sys-block--on {
background: #34d399;
box-shadow: 0 0 4px rgba(52,211,153,0.6);
box-shadow: 0 0 5px rgba(52, 211, 153, 0.65);
}
/* 중간 블록 (중간 사용률 = 노랑) */
/* 중간 사용률 (50~80%) → 노랑 */
.gc-sys-block--mid.gc-sys-block--on {
background: #fbbf24;
box-shadow: 0 0 4px rgba(251,191,36,0.6);
box-shadow: 0 0 5px rgba(251, 191, 36, 0.65);
}
/* 상위 블록 (높은 사용률 = 빨강) */
/* 높은 사용률 (80~100%) → 빨강 */
.gc-sys-block--hi.gc-sys-block--on {
background: #f87171;
box-shadow: 0 0 4px rgba(248,113,113,0.6);
box-shadow: 0 0 5px rgba(248, 113, 113, 0.65);
}
/* 신호등 — 바와 같은 높이에 맞춤 */
.gc-traffic-light--sized {
width: 44px;
margin: 0;
height: 100%;
justify-content: space-evenly;
}
.gc-traffic-light--sized .gc-traffic-bulb {
width: 26px;
height: 26px;
}
.gc-sys-card-foot {
@@ -406,7 +438,7 @@
}
.gc-sys-card-pct {
font-size: 0.95rem;
font-size: 1rem;
font-weight: 800;
color: var(--se-text);
line-height: 1;