WIP(style): UI 컴포넌트 하드코딩 제거 및 CSS 통합 (진행 중)
- 작업 상태: 진행 중 (Work In Progress) - 주요 변경 사항: 1. CSS 파일 통합: HWModal, SWModal, ListFactory 등에서 인라인 스타일(style 속성) 전면 제거 및 클래스 기반으로 재작성 2. 폰트/타이포그래피 스케일업: 최소 폰트 14px 기준으로 전체 텍스트 크기 상향 및 굵기(font-weight) 상향 조정 3. GNB(상단바) 레이아웃 개편: 2단 구조(로고 라인 / 메뉴 라인)로 변경 및 카테고리 텍스트 라벨 생략을 통한 간결화 4. 로고 이미지 교체: image 92.png로 업데이트 및 경로 정리 5. 디자인 가이드 분리: README에서 design_rule.md로 디자인 정책 문서 독립 * 참고: 현재 디자인 검토를 위한 중간 반영 상태이며, 피드백에 따라 추가 수정 예정임.
This commit is contained in:
@@ -45,7 +45,7 @@
|
||||
--white: #FFFFFF;
|
||||
--danger: var(--color-red);
|
||||
--success: var(--color-green);
|
||||
--header-height: 52px;
|
||||
--header-height: auto;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -60,7 +60,7 @@ body {
|
||||
color: var(--text-main);
|
||||
background-color: var(--bg-color);
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
font-size: 19px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -76,45 +76,50 @@ body {
|
||||
background-color: var(--white);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
z-index: 100;
|
||||
height: var(--header-height);
|
||||
height: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-top-row {
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
gap: 1.5rem;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.header-bottom-row {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
background-color: var(--bg-light);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.brand { display: flex; align-items: center; gap: 0.75rem; }
|
||||
.main-logo { height: 34px; width: auto; }
|
||||
.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
|
||||
.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
|
||||
.brand h1 { font-size: 1.47rem; font-weight: 900; color: var(--text-main); white-space: nowrap; }
|
||||
.brand h1 .sub-title { font-size: 1.13rem; color: var(--primary-color); font-weight: 700; margin-left: 0.25rem; }
|
||||
|
||||
.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
|
||||
.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 2.5rem; overflow: hidden; }
|
||||
.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
|
||||
.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
|
||||
.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
|
||||
.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
|
||||
|
||||
/* 기본적으로 활성 탭의 서브메뉴 표시 */
|
||||
.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
|
||||
|
||||
/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
|
||||
.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
|
||||
|
||||
/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
|
||||
.nav-group:hover .lnb-shelf { display: flex !important; }
|
||||
|
||||
.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
|
||||
.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
|
||||
.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
|
||||
.nav-group-items { display: flex; align-items: center; gap: 0.25rem; height: 100%; }
|
||||
.gnb-trigger { font-size: 17px; font-weight: 800; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; border-bottom: 3px solid transparent; }
|
||||
.gnb-trigger:hover { color: var(--text-main); }
|
||||
.gnb-trigger.active { color: var(--primary-color); font-weight: 900; border-bottom-color: var(--primary-color); background-color: var(--primary-lv-0); }
|
||||
|
||||
.header-actions { display: flex; align-items: center; gap: 1rem; }
|
||||
.role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
|
||||
.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
|
||||
.role-label { font-size: 15px; font-weight: 800; color: var(--text-muted); }
|
||||
.role-label.active { color: var(--primary-color); }
|
||||
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
|
||||
.switch input { opacity: 0; width: 0; height: 0; }
|
||||
@@ -149,12 +154,12 @@ input:checked + .slider:before { transform: translateX(16px); }
|
||||
/* --- View Toggle --- */
|
||||
.view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
|
||||
.view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
|
||||
.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
|
||||
.toggle-btn { padding: 6px 16px; font-size: 17px; font-weight: 700; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
|
||||
.toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
||||
|
||||
/* --- System Status List (Docker Style) --- */
|
||||
.system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
|
||||
.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 15px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
|
||||
.system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
|
||||
.system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
|
||||
.col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
|
||||
@@ -165,12 +170,12 @@ input:checked + .slider:before { transform: translateX(16px); }
|
||||
.col-actions { width: 120px; display: flex; justify-content: flex-end; }
|
||||
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
|
||||
.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
|
||||
.asset-primary { font-weight: 700; font-size: 14px; }
|
||||
.asset-secondary { font-size: 12px; color: var(--text-muted); }
|
||||
.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
|
||||
.status-text { font-size: 15px; font-weight: 700; color: var(--success); }
|
||||
.asset-primary { font-weight: 800; font-size: 19px; }
|
||||
.asset-secondary { font-size: 16px; color: var(--text-muted); }
|
||||
.ip-address { font-weight: 700; font-family: monospace; color: var(--primary-color); }
|
||||
.traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
|
||||
.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
|
||||
.traffic-info { display: flex; justify-content: space-between; font-size: 15px; }
|
||||
.progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: var(--primary-color); }
|
||||
.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
|
||||
@@ -190,8 +195,8 @@ input:checked + .slider:before { transform: translateX(16px); }
|
||||
|
||||
.main-footer p {
|
||||
font-family: 'Pretendard Variable', Pretendard, sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
letter-spacing: -0.0175rem;
|
||||
color: #777777;
|
||||
@@ -212,15 +217,15 @@ input:checked + .slider:before { transform: translateX(16px); }
|
||||
}
|
||||
|
||||
/* --- Utility Styles --- */
|
||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
|
||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 16px; font-weight: 700; border-radius: 4px; cursor: pointer; height: 28px; }
|
||||
.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
|
||||
.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
|
||||
|
||||
.badge {
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -245,34 +250,34 @@ input:checked + .slider:before { transform: translateX(16px); }
|
||||
background-color: #EDE9FE;
|
||||
color: #7C3AED;
|
||||
border: 1px solid #DDD6FE;
|
||||
font-size: 11px;
|
||||
font-size: 15px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.badge.b-primary {
|
||||
background-color: #DBEAFE;
|
||||
color: #1D4ED8;
|
||||
border: 1px solid #BFDBFE;
|
||||
font-size: 11px;
|
||||
font-size: 15px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.badge.b-green {
|
||||
background-color: #D1FAE5;
|
||||
color: #047857;
|
||||
border: 1px solid #A7F3D0;
|
||||
font-size: 11px;
|
||||
font-size: 15px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.badge.b-yellow {
|
||||
background-color: #FEF3C7;
|
||||
color: #D97706;
|
||||
border: 1px solid #FDE68A;
|
||||
font-size: 11px;
|
||||
font-size: 15px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.text-tag {
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
font-size: 21px;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
@@ -280,14 +285,14 @@ input:checked + .slider:before { transform: translateX(16px); }
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* --- Responsive Design (Tablet & Mobile) --- */
|
||||
@media (max-width: 1200px) {
|
||||
.header-container { gap: 0.75rem; padding: 0 1rem; }
|
||||
.brand h1 { font-size: 1rem; }
|
||||
.brand h1 .sub-title { font-size: 0.75rem; }
|
||||
.brand h1 { font-size: 1.33rem; }
|
||||
.brand h1 .sub-title { font-size: 1rem; }
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* --- Premium Executive Dashboard View Specific Styles --- */
|
||||
.dashboard-section-title {
|
||||
padding: 0 0 0 8px;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 800;
|
||||
font-size: 2.06rem;
|
||||
font-weight: 900;
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.02em;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
@@ -63,8 +63,8 @@
|
||||
|
||||
/* Premium KPI Value Styling */
|
||||
.stat-value {
|
||||
font-size: 2.41rem;
|
||||
font-weight: 800;
|
||||
font-size: 3.21rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -81,9 +81,9 @@
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 1.36rem;
|
||||
font-size: 1.81rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@@ -118,10 +118,10 @@
|
||||
.table-premium th {
|
||||
background: #F8FAFC;
|
||||
color: #475569;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
padding: 1rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.96rem;
|
||||
font-size: 1.28rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
color: #1E293B;
|
||||
font-size: 16px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.table-premium tr:hover td {
|
||||
@@ -177,9 +177,9 @@
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.96rem;
|
||||
font-size: 1.28rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-btns button {
|
||||
@@ -187,7 +187,7 @@
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--white);
|
||||
border-radius: 4px;
|
||||
font-size: 0.96rem;
|
||||
font-size: 1.28rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -197,9 +197,9 @@
|
||||
}
|
||||
|
||||
.slider-indicator {
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
font-size: 1.41rem;
|
||||
font-size: 1.88rem;
|
||||
}
|
||||
|
||||
.dashboard-slider-viewport {
|
||||
@@ -239,8 +239,8 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
@@ -278,8 +278,8 @@
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
border: 1px solid #d1fae5;
|
||||
@@ -318,8 +318,8 @@
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -358,8 +358,8 @@
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
@@ -367,7 +367,7 @@
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 1.08rem;
|
||||
color: var(--text-main);
|
||||
background: var(--white);
|
||||
min-width: 140px;
|
||||
@@ -403,8 +403,8 @@
|
||||
}
|
||||
|
||||
.box-label-text {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
font-size: 0.87rem;
|
||||
font-weight: 900;
|
||||
color: var(--primary-color);
|
||||
pointer-events: none;
|
||||
text-shadow: 0 0 2px white;
|
||||
@@ -427,7 +427,7 @@
|
||||
|
||||
.asset-list-section h4 {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
@@ -447,15 +447,15 @@
|
||||
background: var(--white);
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.compact-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 1.08rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -482,8 +482,8 @@
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 6px;
|
||||
@@ -497,17 +497,17 @@
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
font-size: 19px;
|
||||
color: var(--text-main);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -522,6 +522,134 @@
|
||||
|
||||
.detail-header-title {
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.27rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* --- System Dashboard Stats Row (ListFactory) --- */
|
||||
.dashboard-stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr;
|
||||
gap: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-group-item {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-group-item.bordered {
|
||||
border-left: 1px solid var(--border-color);
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-group-item .stat-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.25rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.stat-group-item .stat-value {
|
||||
font-size: 37px;
|
||||
font-weight: 900;
|
||||
color: var(--text-main);
|
||||
line-height: 1.1;
|
||||
background: none;
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
|
||||
.stat-group-item .stat-value span {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-left: 4px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-group-item .stat-sub {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 19px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-group-item .stat-sub strong {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.detail-stat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
color: var(--text-main);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stat-badges {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.detail-stat-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
font-size: 17px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.loc-summary {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.loc-summary span strong {
|
||||
color: var(--text-main);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.type-summary {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
opacity: 0.9;
|
||||
border-top: 1px dashed var(--border-color);
|
||||
padding-top: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.type-summary span {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.type-summary span strong {
|
||||
color: var(--text-main);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger) !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
|
||||
.guide-tab {
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
@@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.guide-section h3 {
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.73rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
@@ -83,7 +83,7 @@
|
||||
}
|
||||
|
||||
.guide-text {
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
color: var(--text-main);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
@@ -127,8 +127,8 @@
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
font-size: 23px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -136,14 +136,14 @@
|
||||
}
|
||||
|
||||
.flow-step .step-label {
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flow-step .step-desc {
|
||||
font-size: 17px;
|
||||
font-size: 23px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
@@ -159,13 +159,13 @@
|
||||
.guide-info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.guide-info-table th {
|
||||
background: #f8faf9;
|
||||
color: var(--primary-color);
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
@@ -182,7 +182,7 @@
|
||||
background: var(--primary-light);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding: 1rem;
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
color: var(--primary-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -36,14 +36,14 @@
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
font-size: 2.33rem;
|
||||
font-weight: 900;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
font-size: 0.9375rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -94,14 +94,14 @@
|
||||
}
|
||||
|
||||
.role-card h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.role-card p {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 1.08rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -109,7 +109,7 @@
|
||||
.login-footer {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
||||
@@ -41,8 +41,8 @@
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.86rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--white);
|
||||
line-height: 1.2;
|
||||
@@ -53,7 +53,7 @@
|
||||
cursor: pointer;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
font-size: 1.75rem;
|
||||
font-size: 2.33rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -98,8 +98,8 @@
|
||||
/* Section Title for Grouping */
|
||||
.form-section-title {
|
||||
grid-column: span 2;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.53rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
padding: 1.5rem 0 0.5rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
@@ -113,8 +113,8 @@
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.47rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 1.15rem;
|
||||
font-size: 1.53rem;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
background-color: var(--white);
|
||||
@@ -159,7 +159,7 @@
|
||||
.modal-footer .btn {
|
||||
height: 42px;
|
||||
padding: 0 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-size: 1.17rem;
|
||||
}
|
||||
|
||||
.edit-only-btn {
|
||||
@@ -174,7 +174,7 @@
|
||||
}
|
||||
|
||||
#hw-file-name-display {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 1.08rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -209,8 +209,8 @@
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -229,7 +229,7 @@
|
||||
color: var(--primary-color);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--border-color);
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.preview-table-container {
|
||||
@@ -266,15 +266,15 @@
|
||||
.preview-table th {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
font-size: 23px;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.preview-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: var(--text-main);
|
||||
}
|
||||
@@ -309,8 +309,8 @@
|
||||
}
|
||||
|
||||
.history-header h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.67rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@@ -323,7 +323,7 @@
|
||||
background-color: transparent !important;
|
||||
pointer-events: none !important;
|
||||
color: var(--text-main) !important;
|
||||
font-weight: 600 !important;
|
||||
font-weight: 700 !important;
|
||||
cursor: default;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
@@ -392,14 +392,14 @@
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 11px;
|
||||
font-size: 15px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.history-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
text-transform: uppercase;
|
||||
@@ -412,15 +412,15 @@
|
||||
.tag-default { background: #f3f4f6; color: #6b7280; }
|
||||
|
||||
.history-user {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.history-details {
|
||||
font-size: 12.5px;
|
||||
font-size: 17px;
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
background: #f8fafc;
|
||||
@@ -434,14 +434,14 @@
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-history {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.47rem;
|
||||
}
|
||||
|
||||
/* Dashboard Detail Modal Table Fixed Header */
|
||||
@@ -474,8 +474,8 @@
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.47rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
@@ -484,7 +484,7 @@
|
||||
#dashboard-detail-modal tbody td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.47rem;
|
||||
color: var(--text-main);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -502,8 +502,8 @@
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -620,8 +620,8 @@
|
||||
.image-picker-header h3 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.67rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.image-picker-content {
|
||||
@@ -673,8 +673,8 @@
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 0 6px;
|
||||
font-size: 10px !important;
|
||||
font-weight: 600;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
height: 24px;
|
||||
min-width: 52px;
|
||||
@@ -725,7 +725,7 @@
|
||||
.ri-line input {
|
||||
height: 38px;
|
||||
box-sizing: border-box;
|
||||
font-size: 13px;
|
||||
font-size: 17px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.page-description {
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
@@ -64,8 +64,8 @@
|
||||
}
|
||||
|
||||
.search-item label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
padding: 0 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-size: 19px;
|
||||
outline: none;
|
||||
background-color: var(--white);
|
||||
}
|
||||
@@ -133,8 +133,8 @@ thead {
|
||||
|
||||
th {
|
||||
background-color: var(--bg-light) !important;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -144,9 +144,9 @@ th {
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 13px;
|
||||
font-size: 17px;
|
||||
color: var(--text-main);
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
@@ -206,7 +206,7 @@ th.sortable::after {
|
||||
right: 0.6rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 11px;
|
||||
font-size: 15px;
|
||||
opacity: 0.3;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -239,8 +239,8 @@ th.sortable.desc::after {
|
||||
|
||||
.mini-table th {
|
||||
padding: 10px 0;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
background: var(--white);
|
||||
@@ -254,7 +254,7 @@ th.sortable.desc::after {
|
||||
.mini-row {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
@@ -276,7 +276,7 @@ th.sortable.desc::after {
|
||||
|
||||
.mini-row td:nth-child(2) {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mini-row.warning {
|
||||
@@ -291,8 +291,8 @@ th.sortable.desc::after {
|
||||
.warning-badge {
|
||||
background: #FFF1F2;
|
||||
color: #E11D48;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #FDA4AF;
|
||||
@@ -302,8 +302,8 @@ th.sortable.desc::after {
|
||||
.warning-badge-orange {
|
||||
background: #FFF7ED;
|
||||
color: #C2410C;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #FFEDD5;
|
||||
|
||||
Reference in New Issue
Block a user