255 lines
7.6 KiB
Plaintext
255 lines
7.6 KiB
Plaintext
/*
|
|
* UIToolkitTreeList.uss - UIToolkitTreeList 컴포넌트 스타일시트
|
|
*
|
|
* [개요]
|
|
* UIToolkitTreeList.uxml과 UIToolkitTreeListItem.uxml에서 사용하는 스타일을 정의합니다.
|
|
* 어두운 테마(Dark Theme)에 맞춰 디자인되었습니다.
|
|
*
|
|
* [스타일 구조]
|
|
* 1. .tree-menu-container : 메인 컨테이너 (어두운 배경, 240px 너비)
|
|
* 2. .search-field : 검색 입력 필드 (흰색 배경, 둥근 모서리)
|
|
* 3. #main-tree-view : TreeView 기본 설정 (들여쓰기 10px)
|
|
* 4. .unity-tree-view__item-toggle : 펼침/접기 토글 버튼
|
|
* 5. .unity-collection-view__item : 항목 배경색 (기본/호버/선택)
|
|
* 6. .visibility-toggle : 가시성 토글 버튼 (눈 아이콘)
|
|
*
|
|
* [색상 팔레트]
|
|
* - 배경: rgb(40, 44, 52) - 어두운 회색
|
|
* - 호버: rgba(0, 10, 37, 0.25) - 반투명 파랑
|
|
* - 선택: rgba(0, 10, 37, 0.5) - 더 진한 반투명 파랑
|
|
* - 텍스트: rgb(255, 255, 255) - 흰색
|
|
*
|
|
* [연관 파일]
|
|
* - UIToolkitTreeList.uxml : 메인 레이아웃
|
|
* - UIToolkitTreeListItem.uxml : 개별 항목 템플릿
|
|
* - UIToolkitTreeList.cs : C# 컨트롤러
|
|
*/
|
|
|
|
/* ===================================
|
|
메인 컨테이너 스타일
|
|
사이드 패널 전체를 감싸는 컨테이너
|
|
=================================== */
|
|
.tree-menu-container {
|
|
background-color: rgb(40, 44, 52); /* 어두운 회색 배경 */
|
|
flex-grow: 1; /* 부모 영역 채우기 */
|
|
padding: 5px;
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
width: 240px; /* 고정 너비 */
|
|
}
|
|
|
|
/* ===================================
|
|
검색 입력 필드 스타일
|
|
흰색 배경의 둥근 입력창
|
|
=================================== */
|
|
.search-field {
|
|
margin-bottom: 20px;
|
|
background-color: rgb(255, 255, 255); /* 흰색 배경 */
|
|
border-radius: 4px; /* 둥근 모서리 */
|
|
height: 30px;
|
|
width: auto;
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
|
|
}
|
|
|
|
/* 검색 필드 내부 텍스트 입력 영역 */
|
|
#search-field > #unity-text-input {
|
|
padding-top: 4px;
|
|
padding-right: 24px; /* 오른쪽 아이콘 공간 확보 */
|
|
padding-bottom: 4px;
|
|
padding-left: 4px;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
border-top-width: 0; /* 테두리 제거 */
|
|
border-right-width: 0;
|
|
border-bottom-width: 0;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
/* ===================================
|
|
체크박스 스타일
|
|
=================================== */
|
|
#unity-checkmark {
|
|
-unity-background-image-tint-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
/* ===================================
|
|
TreeView 기본 설정
|
|
=================================== */
|
|
#main-tree-view {
|
|
--unity-item-indent-width: 10; /* 계층별 들여쓰기 너비 */
|
|
}
|
|
|
|
/* 펼침/접기 토글 아이콘 컨테이너 */
|
|
#unity-tree-view__item-toggle > VisualElement > VisualElement {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 22px; /* 토글 아이콘 너비 */
|
|
}
|
|
|
|
/* 펼침/접기 토글 버튼 */
|
|
.unity-tree-view__item-toggle {
|
|
margin-right: 5px; /* 라벨과의 간격 */
|
|
}
|
|
|
|
/* ===================================
|
|
항목 배경색 스타일
|
|
기본, 호버, 선택 상태별 배경색
|
|
=================================== */
|
|
|
|
/* 기본 상태: 투명 배경 */
|
|
.unity-collection-view__item {
|
|
background-color: rgba(50, 50, 50, 0);
|
|
}
|
|
|
|
/* 호버 상태: 반투명 파란색 배경 */
|
|
.unity-collection-view__item:hover {
|
|
background-color: rgba(0, 10, 37, 0.25);
|
|
}
|
|
|
|
/* 선택 상태: 더 진한 반투명 파란색 배경 */
|
|
.unity-collection-view__item--selected {
|
|
background-color: rgba(0, 10, 37, 0.5);
|
|
}
|
|
|
|
/* ===================================
|
|
가시성 토글 버튼 스타일
|
|
눈 아이콘으로 3D 모델 가시성 제어
|
|
=================================== */
|
|
.visibility-toggle {
|
|
background-color: rgba(0, 0, 0, 0); /* 투명 배경 */
|
|
border-width: 0; /* 테두리 없음 */
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-right: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
flex-shrink: 0; /* 크기 축소 방지 */
|
|
background-image: resource('SHI/Images/icon_visibility_on_64'); /* 기본: 보이는 상태 */
|
|
}
|
|
|
|
/* 가시성 켜짐 상태 (눈 열린 아이콘) */
|
|
.visibility-on {
|
|
background-image: resource('SHI/Images/icon_visibility_on_64');
|
|
}
|
|
|
|
/* 가시성 꺼짐 상태 (눈 닫힌 아이콘) */
|
|
.visibility-off {
|
|
background-image: resource('SHI/Images/icon_visibility_off_64');
|
|
}
|
|
|
|
/* ===================================
|
|
세로 스크롤바 스타일
|
|
슬림한 6px 너비의 커스텀 스크롤바
|
|
=================================== */
|
|
.unity-scroller--vertical {
|
|
width: 6px; /* 슬림한 너비 */
|
|
margin-right: 4px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* 세로 스크롤바 트랙 (배경) */
|
|
.unity-scroller--vertical .unity-base-slider__tracker {
|
|
background-color: rgba(255, 255, 255, 0); /* 흰색 배경 */
|
|
border-width: 0;
|
|
}
|
|
|
|
/* 세로 스크롤바 드래거 컨테이너 위치 조정 */
|
|
.unity-scroller--vertical .unity-base-slider__drag-container {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* 세로 스크롤바 드래거 (핸들) */
|
|
.unity-scroller--vertical .unity-base-slider__dragger {
|
|
background-color: rgb(216, 216, 216); /* 밝은 회색 */
|
|
border-width: 0;
|
|
border-radius: 3px; /* 둥근 모서리 */
|
|
width: 6px;
|
|
left: 0;
|
|
}
|
|
|
|
/* 세로 스크롤바 화살표 버튼 숨김 */
|
|
.unity-scroller--vertical .unity-repeat-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 세로 스크롤바 슬라이더 마진 제거 */
|
|
.unity-scroller--vertical .unity-slider {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 세로 스크롤바 입력 필드 크기 조정 */
|
|
.unity-scroller--vertical .unity-base-field__input {
|
|
width: 6px;
|
|
min-width: 6px;
|
|
}
|
|
|
|
/* ===================================
|
|
가로 스크롤바 스타일
|
|
슬림한 6px 높이의 커스텀 스크롤바
|
|
=================================== */
|
|
.unity-scroller--horizontal {
|
|
height: 6px; /* 슬림한 높이 */
|
|
margin-bottom: 4px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
/* 가로 스크롤바 트랙 (배경) */
|
|
.unity-scroller--horizontal .unity-base-slider__tracker {
|
|
background-color: rgba(255, 255, 255, 0); /* 흰색 배경 */
|
|
border-width: 0;
|
|
}
|
|
|
|
/* 가로 스크롤바 드래거 컨테이너 위치 조정 */
|
|
.unity-scroller--horizontal .unity-base-slider__drag-container {
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* 가로 스크롤바 드래거 (핸들) */
|
|
.unity-scroller--horizontal .unity-base-slider__dragger {
|
|
background-color: rgb(216, 216, 216); /* 밝은 회색 */
|
|
border-width: 0;
|
|
border-radius: 3px; /* 둥근 모서리 */
|
|
height: 6px;
|
|
top: 0;
|
|
}
|
|
|
|
/* 가로 스크롤바 화살표 버튼 숨김 */
|
|
.unity-scroller--horizontal .unity-repeat-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 가로 스크롤바 슬라이더 마진 제거 */
|
|
.unity-scroller--horizontal .unity-slider {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 가로 스크롤바 입력 필드 크기 조정 */
|
|
.unity-scroller--horizontal .unity-base-field__input {
|
|
height: 6px;
|
|
min-height: 6px;
|
|
}
|