474 lines
14 KiB
Plaintext
474 lines
14 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKDefaultStyle.uss
|
|
* Unity 기본 UI 요소 스타일 오버라이드
|
|
* ===================================
|
|
*
|
|
* 이 파일은 Unity의 기본 UI 요소들을 커스터마이징합니다.
|
|
* 변수 정의는 하지 않으며, 테마 파일의 변수를 참조합니다.
|
|
*
|
|
* [변수 정의 위치]
|
|
* - UTKVariables.uss : 레이아웃 변수 (spacing, radius, font-size 등)
|
|
* - UTKThemeDark.uss / UTKThemeLight.uss : 색상 변수
|
|
*
|
|
* [주요 스타일]
|
|
* 1. 드롭다운 팝업 스타일
|
|
* 2. TreeView 항목 스타일
|
|
* 3. 컬렉션 뷰 항목 스타일 (선택, 호버)
|
|
* 4. 수직/수평 스크롤바 스타일
|
|
*/
|
|
|
|
/* ===================================
|
|
드롭다운 팝업 아이템 스타일
|
|
- DropdownField의 팝업 메뉴 항목 스타일
|
|
- UTKComponents.uss에서 전역 스타일 정의됨
|
|
=================================== */
|
|
|
|
/* 여기서 변수 선언 하는 이유는 Dropdown의 팝업에 테마가 적용되지 않기에
|
|
별도로 지정하기 위함입니다. */
|
|
.unity-base-dropdown * {
|
|
--color-base-01: #FFFFFF;
|
|
--color-base-02: #F8F8F8;
|
|
--color-border: #D0D0D0;
|
|
--color-collection-item-hover: #004578;
|
|
--color-item-selected-bg: #004578;
|
|
--color-item-selected-bg-hover: ##003F6E;
|
|
--color-text-primary: #222222;
|
|
--color-text-primary-hover: #1C1C1C;
|
|
}
|
|
|
|
/* 드롭다운 최외곽 컨테이너 - border-radius 및 border 적용
|
|
UTKComponents.uss에도 정의되어 있지만, Unity 기본 스타일시트가 나중에 로드되어
|
|
덮어쓰기 때문에를 사용하여 강제로 오버라이드합니다.
|
|
border와 border-radius를 같은 요소에 적용하여 코너 렌더링 문제 방지. */
|
|
.unity-base-dropdown__container-outer {
|
|
border-radius: var(--radius-s) ;
|
|
border-width: 1px ;
|
|
border-color: var(--color-border) ;
|
|
overflow: hidden ;
|
|
}
|
|
|
|
/* 드롭다운 내부 컨테이너 - 패딩 제거 */
|
|
.unity-base-dropdown__container-inner {
|
|
padding: 0px;
|
|
background-color: var(--color-base-01) ;
|
|
}
|
|
|
|
/* 드롭다운 항목 hover 스타일 - Unity 기본 스타일 오버라이드
|
|
다크 테마에 적합한 어두운 회색(#333333)으로 설정.
|
|
Unity의 기본 cyan 계열 hover 색상을 덮어쓰기 위해 사용.
|
|
:enabled 의사 클래스는 Unity 기본 스타일과 동일한 specificity 확보용. */
|
|
.unity-base-dropdown__item:hover:enabled {
|
|
background-color: var(--color-collection-item-hover) ;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* 드롭다운 항목 콘텐츠 */
|
|
.unity-base-dropdown__item-content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.unity-base-dropdown__item:hover:enabled .unity-base-dropdown__item-content {
|
|
background-color: var(--color-collection-item-hover) ;
|
|
}
|
|
|
|
.unity-base-dropdown__item:checked {
|
|
background-color: var(--color-item-selected-bg);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.unity-base-dropdown__item:checked:hover {
|
|
background-color: var(--color-item-selected-bg-hover);
|
|
}
|
|
|
|
.unity-base-dropdown__item:checked .unity-base-dropdown__item-content {
|
|
background-color: var(--color-item-selected-bg);
|
|
}
|
|
|
|
.unity-base-dropdown__item:checked:hover .unity-base-dropdown__item-content {
|
|
background-color: var(--color-item-selected-bg-hover);
|
|
}
|
|
|
|
.unity-base-dropdown__item:checked .unity-base-dropdown__label {
|
|
color: var(--color-base-01);
|
|
}
|
|
|
|
/* 드롭다운 호버 시 텍스트 색상 */
|
|
.unity-base-dropdown__item:hover .unity-base-dropdown__label {
|
|
color: var(--color-text-primary-hover);
|
|
}
|
|
|
|
.unity-base-dropdown__item:checked:hover .unity-base-dropdown__label {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* 드롭다운 체크마크 크기 오버라이드
|
|
Unity 런타임 테마의 체크마크 스타일(.unity-base-dropdown__item > .unity-base-dropdown__item-content > .unity-base-dropdown__checkmark)을
|
|
덮어쓰기 위해 동일한 specificity + 순서 우선 또는 더 높은 specificity 사용 */
|
|
.unity-base-dropdown__item > .unity-base-dropdown__item-content > .unity-base-dropdown__checkmark {
|
|
width: 16px;
|
|
height: 16px;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
-unity-background-image-tint-color: var(--color-base-01);
|
|
}
|
|
|
|
.unity-base-dropdown__item {
|
|
height: 28px;
|
|
padding-left: var(--space-m);
|
|
padding-right: var(--space-m);
|
|
padding-top: var(--space-xs);
|
|
padding-bottom: var(--space-xs);
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
|
|
}
|
|
|
|
/* 드롭다운 라벨 스타일 오버라이드 */
|
|
.unity-base-dropdown__item .unity-base-dropdown__label {
|
|
font-size: 12px;
|
|
color: var(--color-text-primary);
|
|
-unity-text-align: middle-left;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
ListView/TreeView 항목 텍스트 스타일
|
|
- Unity 기본 스타일 오버라이드
|
|
=================================== */
|
|
|
|
/* ListView 항목 컨테이너 자체에 색상 지정 */
|
|
.unity-collection-view__item,
|
|
.unity-list-view__item {
|
|
color: var(--color-text-primary) ;
|
|
}
|
|
|
|
/* ListView 항목 텍스트 색상 및 크기 - 다크 테마용 */
|
|
.unity-collection-view__item .unity-label,
|
|
.unity-collection-view__item .unity-text-element,
|
|
.unity-list-view__item .unity-label,
|
|
.unity-list-view__item .unity-text-element {
|
|
color: var(--color-text-primary) ;
|
|
font-size: var(--font-size-body2) ;
|
|
margin: 0;
|
|
}
|
|
|
|
.unity-collection-view__item--selected,
|
|
.unity-list-view__item--selected {
|
|
color: var(--color-base-01) ;
|
|
}
|
|
|
|
.unity-collection-view__item--selected .unity-label,
|
|
.unity-collection-view__item--selected .unity-text-element,
|
|
.unity-list-view__item--selected .unity-label,
|
|
.unity-list-view__item--selected .unity-text-element {
|
|
color: var(--color-base-01) ;
|
|
}
|
|
|
|
.unity-tree-view__item-content {
|
|
align-self: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* TreeView 항목 텍스트 색상 */
|
|
.unity-tree-view__item .unity-label,
|
|
.unity-tree-view__item .unity-text-element {
|
|
color: var(--color-text-primary) ;
|
|
-unity-text-align: middle-left;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.unity-tree-view__item--selected .unity-label,
|
|
.unity-tree-view__item--selected .unity-text-element {
|
|
color: var(--color-base-01) ;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
TreeView 항목 스타일
|
|
- TreeView의 펼치기/접기 토글 버튼 스타일
|
|
=================================== */
|
|
|
|
/* TreeView 펼치기/접기 화살표 토글 - 크기 및 정렬 조정 */
|
|
.unity-tree-view__item-toggle {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
padding: 0;
|
|
align-self: center;
|
|
-unity-background-image-tint-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.unity-tree-view__item-toggle:hover {
|
|
-unity-background-image-tint-color: var(--color-text-primary);
|
|
}
|
|
|
|
/* TreeView 토글 입력 영역 - 회전 중심 맞추기 */
|
|
.unity-tree-view__item-toggle > .unity-toggle__input {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* TreeView 토글 체크마크(화살표 아이콘) */
|
|
.unity-tree-view__item-toggle > .unity-toggle__input > #unity-checkmark {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
/* TreeView 토글 체크됨(펼쳐진 상태) - 회전 없음 */
|
|
.unity-tree-view__item-toggle:checked > .unity-toggle__input > #unity-checkmark {
|
|
rotate: 0deg;
|
|
}
|
|
|
|
#unity-checkmark {
|
|
-unity-background-image-tint-color: var(--color-tree-checkmark);
|
|
}
|
|
|
|
#unity-tree-view__item-toggle > VisualElement > VisualElement {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 22px;
|
|
}
|
|
|
|
/* ===================================
|
|
Textfield 항목 스타일
|
|
=================================== */
|
|
|
|
.unity-base-text-field {
|
|
border-radius: 4px;
|
|
/* height: 24px; */
|
|
height: auto;
|
|
width: auto;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
|
|
/* --unity-selection-color: rgba(54, 98, 160, 0.651); 선택 색상 */
|
|
--unity-cursor-color: var(--color-base-01); /* 캐럿(커서) 색상 흰색 */
|
|
font-size: 13px;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.unity-base-text-field__input {
|
|
padding-top: 4px;
|
|
padding-right: 24px;
|
|
padding-bottom: 4px;
|
|
padding-left: 4px;
|
|
border-radius: var(--radius-s);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
background-color: var(--color-bg-input);
|
|
}
|
|
|
|
.unity-base-text-field__input--placeholder {
|
|
-unity-font-style: italic;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
컬렉션 뷰 항목 스타일
|
|
- ListView, TreeView 등 컬렉션 뷰의 항목 상태별 스타일
|
|
- Unity 기본 테마 (.unity-collection-view:focus:enabled .unity-collection-view__item--selected)를
|
|
덮어쓰기 위해 동일하거나 더 높은 specificity 사용
|
|
=================================== */
|
|
|
|
/* 일반 항목의 기본 배경색 */
|
|
.unity-collection-view__item {
|
|
background-color: var(--color-collection-item);
|
|
}
|
|
|
|
/* 마우스 오버 시 배경색 변경 - :hover:enabled를 더 높은 specificity로 덮어씀 */
|
|
.unity-collection-view__item:hover:enabled {
|
|
background-color: var(--color-collection-item-hover);
|
|
}
|
|
|
|
/* 선택된 항목의 배경색 - Unity 기본 테마의 :focus:enabled 셀렉터를 덮어씀 */
|
|
.unity-collection-view:focus:enabled .unity-collection-view__item--selected {
|
|
background-color: var(--color-collection-item-selected);
|
|
}
|
|
|
|
/* 선택된 항목에 마우스 오버 시 배경색 - :hover:enabled를 더 높은 specificity로 덮어씀 */
|
|
.unity-collection-view:focus:enabled .unity-collection-view__item--selected:hover:enabled {
|
|
background-color: var(--color-collection-item-selected-hover);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
수직 스크롤바 스타일
|
|
- 기본 Unity 스크롤바를 슬림하고 미니멀하게 커스터마이징
|
|
|
|
[주의] 스크롤바 드래거/트래커의 hover/active 색상은 USS :hover/:active
|
|
pseudo-class가 제대로 동작하지 않습니다.
|
|
드래거는 마우스 이벤트를 직접 받지 않고 트래커가 받기 때문입니다.
|
|
hover/active 색상 변경이 필요하면 UTKTreeListWindow.cs의
|
|
SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent 등을
|
|
등록하여 구현해야 합니다.
|
|
=================================== */
|
|
|
|
/* 수직 스크롤바 컨테이너 - 폭 6px의 슬림한 스크롤바 */
|
|
.unity-scroller--vertical {
|
|
width: 6px;
|
|
margin-right: 0px;
|
|
margin-bottom: 0;
|
|
background-color: rgba(30, 30, 30, 0); /* 스크롤바 영역 배경색 */
|
|
}
|
|
|
|
/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
|
|
.unity-scroller--vertical .unity-base-slider__tracker {
|
|
background-color: var(--color-scroller-tracker-normal);
|
|
border-width: 0;
|
|
}
|
|
|
|
/* 드래그 컨테이너 - 좌우 정렬 */
|
|
.unity-scroller--vertical .unity-base-slider__drag-container {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* 드래거 (스크롤 핸들) - 기본 상태 */
|
|
.unity-scroller--vertical .unity-base-slider__dragger {
|
|
background-color: var(--color-scroller-dragger-normal);
|
|
border-width: 0;
|
|
border-radius: 3px; /* 둥근 모서리 */
|
|
width: 6px;
|
|
left: 0;
|
|
transition-duration: 0.15s; /* 부드러운 전환 효과 */
|
|
transition-property: background-color;
|
|
}
|
|
|
|
.unity-scroller--vertical .unity-base-slider__dragger:hover {
|
|
background-color: var(--color-scroller-dragger-hover);
|
|
}
|
|
|
|
/* 상하 화살표 버튼 - 완전히 숨김 처리 */
|
|
.unity-scroller--vertical .unity-repeat-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.unity-scroller--vertical > .unity-scroller__low-button,
|
|
.unity-scroller--vertical > .unity-scroller__high-button {
|
|
display: none;
|
|
}
|
|
|
|
/* 슬라이더 - 여백 제거 */
|
|
.unity-scroller--vertical .unity-slider {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 입력 영역 - 폭 6px로 고정 */
|
|
.unity-scroller--vertical .unity-base-field__input {
|
|
width: 6px;
|
|
min-width: 6px;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
수평 스크롤바 스타일
|
|
- 수직 스크롤바와 동일한 디자인을 수평으로 적용
|
|
=================================== */
|
|
|
|
/* 수평 스크롤바 컨테이너 - 높이 6px의 슬림한 스크롤바 */
|
|
.unity-scroller--horizontal {
|
|
height: 6px;
|
|
margin-bottom: 4px;
|
|
margin-right: 0;
|
|
background-color: rgba(30, 30, 30, 0); /* 스크롤바 영역 배경색 */
|
|
}
|
|
|
|
/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
|
|
.unity-scroller--horizontal .unity-base-slider__tracker {
|
|
background-color: var(--color-scroller-tracker-normal);
|
|
border-width: 0;
|
|
}
|
|
|
|
/* 드래그 컨테이너 - 상하 정렬 */
|
|
.unity-scroller--horizontal .unity-base-slider__drag-container {
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* 드래거 (스크롤 핸들) - 기본 상태 */
|
|
.unity-scroller--horizontal .unity-base-slider__dragger {
|
|
background-color: var(--color-scroller-dragger-normal);
|
|
border-width: 0;
|
|
border-radius: 3px; /* 둥근 모서리 */
|
|
height: 6px;
|
|
top: 0;
|
|
transition-duration: 0.15s; /* 부드러운 전환 효과 */
|
|
transition-property: background-color;
|
|
}
|
|
|
|
.unity-scroller--horizontal .unity-base-slider__dragger:hover {
|
|
background-color: var(--color-scroller-dragger-hover);
|
|
}
|
|
|
|
/* 좌우 화살표 버튼 - 완전히 숨김 처리 */
|
|
.unity-scroller--horizontal .unity-repeat-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.unity-scroller--horizontal > .unity-scroller__low-button,
|
|
.unity-scroller--horizontal > .unity-scroller__high-button {
|
|
display: none;
|
|
}
|
|
|
|
/* 슬라이더 - 여백 제거 */
|
|
.unity-scroller--horizontal .unity-slider {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 입력 영역 - 높이 6px로 고정 */
|
|
.unity-scroller--horizontal .unity-base-field__input {
|
|
height: 6px;
|
|
min-height: 6px;
|
|
}
|
|
|
|
|
|
/* USS 파일 */
|
|
.material-icon {
|
|
-unity-font-definition: resource('Fonts/Icons/MaterialSymbolsOutlined');
|
|
font-size: 24px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
/* ===================================
|
|
UTKPanel Content 내부 Label 스타일
|
|
- UTKPanel.uss가 자식에 적용되지 않는 문제 해결
|
|
=================================== */
|
|
.utk-panel__content > .unity-label {
|
|
font-size: var(--font-size-body2) ;
|
|
color: var(--color-text-secondary) ;
|
|
margin-bottom: var(--space-s);
|
|
} |