/* * ISOPChart.uss - ISOP 간트 차트 스타일시트 * * [개요] * 간트 차트(Gantt Chart)의 스타일을 정의합니다. * 작업 행, 타임라인 셀, 호버 효과 등의 스타일을 포함합니다. * * [스타일 구조] * 1. :root - 루트 요소 기본 설정 * 2. #gantt-container - 간트 차트 전체 컨테이너 * 3. .task-row - 작업 행 스타일 (호버 효과 포함) * 4. .task-txt - 작업 레벨(L1~L8) 셀 스타일 * * [색상 팔레트] * - 배경: rgb(250, 250, 250) - 밝은 회색 * - 작업 행: rgb(136, 190, 230) - 하늘색 (테두리) * - 레벨 셀: rgb(228, 236, 255) - 연한 파랑 (배경) * - 호버: rgb(228, 236, 255) - 연한 파랑 * - 텍스트: rgb(34, 34, 34) - 진한 회색 * * [레이아웃] * - 작업 행 높이: 49px (40px 컨텐츠 + 테두리) * - 레벨 셀 너비: 40px (L1~L8 각각) * - 일 셀 너비: 18px (pixelsPerDay와 일치) * * [연관 파일] * - ISOPChart.uxml : 메인 레이아웃 * - ISOPChartRow.uxml : 작업 행 템플릿 * - ISOPChart.cs : C# 컨트롤러 */ /* =================================== 루트 요소 기본 설정 Flexbox 레이아웃 초기화 =================================== */ :root { flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-width: 0; overflow: hidden; } /* =================================== 간트 차트 메인 컨테이너 세로 방향 Flexbox 레이아웃 =================================== */ #gantt-container { flex-grow: 1; flex-shrink: 1; flex-direction: column; background-color: rgb(250, 250, 250); /* 밝은 회색 배경 */ min-width: 0; overflow: hidden; } /* =================================== 작업 행 스타일 각 작업(Task)을 표시하는 행 =================================== */ .task-row { flex-direction: row; height: 49px; width: 390px; background-color: rgb(136, 190, 230); /* 하늘색 (테두리용) */ border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-bottom-color: rgb(136, 190, 230); border-left-color: rgb(136, 190, 230); border-right-color: rgb(136, 190, 230); box-sizing: border-box; -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular'); font-size: 10px; color: rgb(34, 34, 34); /* 진한 회색 텍스트 */ } /* 첫 번째 행: 상단 테두리 추가 */ /* Unity USS does not support :first-child pseudo-class */ /* .task-row:first-child { border-top-width: 1px; border-top-color: rgb(136, 190, 230); } */ /* 호버 상태: 연한 파란색 배경 */ .task-row:hover { background-color: rgb(228, 236, 255); } /* =================================== 작업 레벨 셀 스타일 L1~L8 각 레벨의 텍스트 셀 =================================== */ .task-txt { width: 40px; /* 고정 너비 40px */ height: 40px; flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; -unity-text-align: middle-center; /* 텍스트 중앙 정렬 */ font-size: 10px; color: rgb(34, 34, 34); border-left-width: 0; border-left-color: rgb(136, 190, 230); border-left-style: solid; box-sizing: border-box; -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular'); border-top-width: 0; border-right-width: 1px; /* 오른쪽 구분선 */ border-bottom-width: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; flex-direction: row; border-right-color: rgb(255, 255, 255); /* 흰색 구분선 */ } /* 첫 번째 레벨 셀: 왼쪽 테두리 없음 */ /* Unity USS does not support :first-child pseudo-class */ /* .task-txt:first-child { border-left-width: 0; } */