khi/XRLib
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

UIToolkitTreeList 개발 중

Browse Source
This commit is contained in:
logonkhi
2025-12-24 19:05:54 +09:00
parent a75d48265a
commit b5b815170f
22 changed files with 1537 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
Assets/Resources/UIToolkit/List/UIToolkitTreeList.uss Normal file
View File

@@ -0,0 +1,254 @@
/*
* 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;
}