XRLib/Assets/Resources/SHI/Modal/NW/NWChart.uss

/*
 * NWChart.uss - NW 네트워크 다이어그램 스타일시트
 *
 * [개요]
 * 네트워크 다이어그램(Network Diagram)의 스타일을 정의합니다.
 * 노드, 연결선, 타임라인 헤더 등의 스타일을 포함합니다.
 *
 * [스타일 구조]
 * 1. 레이아웃 기본 설정
 *    - :root, .nw-container, .header-container, .header, .header-timeline
 * 2. 네트워크 캔버스
 *    - .network-canvas, .grid-layer, .lines-layer, .nodes-layer
 * 3. 노드 스타일
 *    - .nw-node (기본), .nw-node-end (종료), .nw-node-critical (크리티컬)
 *    - .nw-node-completed (완료), .nw-node-dragging (드래그 중)
 * 4. 연결선 스타일
 *    - .connection-line, .connection-arrow
 * 5. 버튼 스타일
 *    - .expand-btn
 *
 * [색상 팔레트]
 * - 배경: rgb(245, 245, 245) - 밝은 회색
 * - 기본 노드: rgb(51, 153, 230) - 파란색
 * - 종료 노드: rgb(230, 204, 51) - 노란색
 * - 크리티컬 노드: rgb(230, 80, 80) - 빨간색
 * - 완료 노드: rgb(80, 180, 80) - 초록색
 * - 연결선: rgb(80, 80, 80) - 진한 회색
 *
 * [노드 상태]
 * - 기본: 파란색 배경, 호버 시 밝아짐
 * - 드래그 중: 1.1배 확대, 흰색 테두리, cursor: move
 * - 종료/크리티컬/완료: 각각 다른 색상
 *
 * [연관 파일]
 * - NWChart.uxml : UI 레이아웃
 * - NWChart.cs : C# 컨트롤러 (노드 생성, 연결선 렌더링)
 */

/* ===================================
   루트 요소 기본 설정
   Flexbox 레이아웃 초기화
   =================================== */
:root {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    overflow: hidden;
}

/* ===================================
   네트워크 다이어그램 메인 컨테이너
   세로 방향 Flexbox 레이아웃
   =================================== */
.nw-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-direction: column;
    background-color: rgb(245, 245, 245);  /* 밝은 회색 배경 */
    min-width: 0;
    overflow: hidden;
    height: 100%;
}

/* ===================================
   헤더 영역 스타일
   타임라인 헤더를 담는 컨테이너
   =================================== */
.header-container {
    flex-grow: 0;
    height: 56px;                          /* 2단 헤더 높이 (36 + 18 + 2px 테두리) */
    min-height: 56px;
    flex-shrink: 0;
    overflow: hidden;
}

.header {
    flex-grow: 0;
    height: 56px;
    flex-direction: row;
    min-height: 56px;
    flex-shrink: 0;
    position: relative;
}

.header-timeline {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: rgb(240, 240, 240);  /* 밝은 회색 배경 */
    height: 56px;
    border-bottom-width: 1px;
    border-bottom-color: rgb(141, 141, 141);
}

/* 타임라인 행 (월, 일) */
.timeline-row {
    flex-grow: 0;
    height: 18px;                          /* 기본 높이 (일 레이어) */
    flex-shrink: 0;
    flex-direction: row;
    border-bottom-width: 1px;
    border-bottom-color: rgb(255, 255, 255);
}

/* ===================================
   스크롤 영역 스타일
   =================================== */
.content-scroll {
    flex-grow: 1;
}

/* ===================================
   네트워크 캔버스 스타일
   노드와 연결선이 그려지는 영역
   =================================== */
.network-canvas {
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;                    /* 자식 요소의 절대 위치 기준 */
    background-image: resource('SHI/Images/bg_task_cell_18x18');  /* 그리드 배경 */
    background-repeat: repeat repeat;
    background-size: 18px 18px;            /* 일 단위 그리드 */
}

/* 그리드 레이어 (가장 아래) */
.grid-layer {
    position: absolute;
    top: 0;
    left: 0;
}

/* 연결선 레이어 (중간) */
.lines-layer {
    position: absolute;
    top: 0;
    left: 0;
}

/* 노드 레이어 (최상단) */
.nodes-layer {
    position: absolute;
    top: 0;
    left: 0;
}

/* ===================================
   확장 버튼 스타일
   전체 화면으로 확장하는 버튼
   =================================== */
.expand-btn {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-width: 0;
    background-color: rgba(255, 255, 255, 0);  /* 투명 배경 */
    background-image: resource('SHI/Images/btn_expand_36');
}

/* ===================================
   노드 스타일
   네트워크 다이어그램의 작업 노드
   =================================== */
.nw-node {
    background-color: rgb(51, 153, 230);   /* 파란색 (기본) */
    border-radius: 4px;                     /* 둥근 모서리 */
    border-width: 1px;
    border-color: rgba(51, 51, 51, 0.5);   /* 반투명 회색 테두리 */
    justify-content: center;
    align-items: center;
    cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;  /* 클릭 가능 커서 */
    transition-duration: 0.15s;             /* 호버 애니메이션 */
}

/* 노드 호버 상태 */
.nw-node:hover {
    background-color: rgb(71, 173, 250);   /* 밝은 파란색 */
}

/* 노드 드래그 중 상태 */
.nw-node-dragging {
    scale: 1.1;                             /* 10% 확대 */
    border-width: 2px;
    border-color: rgb(255, 255, 255);      /* 흰색 테두리 */
    cursor: move;                           /* 이동 커서 */
}

/* 노드 라벨 스타일 */
.nw-node-label {
    -unity-text-align: middle-center;
    font-size: 9px;
    color: rgb(255, 255, 255);             /* 흰색 텍스트 */
    -unity-font-style: bold;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    text-overflow: ellipsis;                /* 긴 텍스트 말줄임 */
    white-space: nowrap;
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Bold');
}

/* ===================================
   연결선 스타일
   노드 간 의존성을 표시하는 선
   =================================== */
.connection-line {
    background-color: rgb(80, 80, 80);     /* 진한 회색 */
}

.connection-arrow {
    background-color: transparent;          /* 화살표 머리 (투명) */
}

/* ===================================
   노드 상태별 색상
   =================================== */

/* 종료 노드 (노란색) */
.nw-node-end {
    background-color: rgb(230, 204, 51);
}

.nw-node-end:hover {
    background-color: rgb(250, 224, 71);
}

/* 크리티컬 노드 (빨간색) - 일정이 촉박한 작업 */
.nw-node-critical {
    background-color: rgb(230, 80, 80);
}

.nw-node-critical:hover {
    background-color: rgb(250, 100, 100);
}

/* 완료 노드 (초록색) */
.nw-node-completed {
    background-color: rgb(80, 180, 80);
}

.nw-node-completed:hover {
    background-color: rgb(100, 200, 100);
}