133 lines
3.9 KiB
Plaintext
133 lines
3.9 KiB
Plaintext
/*
|
|
* 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); /* 진한 회색 텍스트 */
|
|
}
|
|
|
|
/* 첫 번째 행: 상단 테두리 추가 */
|
|
.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); /* 흰색 구분선 */
|
|
}
|
|
|
|
/* 첫 번째 레벨 셀: 왼쪽 테두리 없음 */
|
|
.task-txt:first-child {
|
|
border-left-width: 0;
|
|
}
|