512 lines
16 KiB
Plaintext
512 lines
16 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKDefaultStyle.uss
|
|
* UI Toolkit 공통 기본 스타일시트
|
|
* ===================================
|
|
*
|
|
* 이 파일은 UI Toolkit 컴포넌트들의 기본 스타일을 정의합니다.
|
|
* Unity의 기본 UI 요소들을 커스터마이징하여 일관된 디자인을 적용합니다.
|
|
*
|
|
* [테마 시스템]
|
|
* 테마 전환이 필요한 경우 UTKThemeManager를 사용하세요:
|
|
* - UTKVariables.uss : 공통 레이아웃 변수
|
|
* - UTKThemeDark.uss / UTKThemeLight.uss : 테마별 색상 변수
|
|
* - UTKComponents.uss : 재사용 컴포넌트 클래스
|
|
*
|
|
* 사용법: UTKThemeManager.Instance.RegisterRoot(rootVisualElement);
|
|
*
|
|
* [호환성]
|
|
* 이 파일은 기존 코드 호환성을 위해 모든 변수를 포함합니다.
|
|
* 새로운 컴포넌트는 UTKThemeManager를 통해 테마 스타일시트를 사용하세요.
|
|
*
|
|
* 주요 스타일 섹션:
|
|
* 1. 드롭다운 팝업 스타일
|
|
* 2. TreeView 항목 스타일
|
|
* 3. 컬렉션 뷰 항목 스타일 (선택, 호버)
|
|
* 4. 수직 스크롤바 스타일
|
|
* 5. 수평 스크롤바 스타일
|
|
*/
|
|
|
|
:root {
|
|
/* 전체 텍스트 요소에 적용 */
|
|
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
|
|
|
|
/* ===================================
|
|
Base Colors (color-base-*)
|
|
=================================== */
|
|
--color-base-01: #FFFFFF;
|
|
--color-base-02: #F0F0F0;
|
|
--color-base-03: #E7E7E7;
|
|
--color-base-04: #E5E5E5;
|
|
--color-base-05: #D4D4D4;
|
|
--color-base-06: #CCCCCC;
|
|
--color-base-07: #C6C6C6;
|
|
--color-base-08: #BBBBBB;
|
|
--color-base-09: #A0A0A0;
|
|
--color-base-10: #888080;
|
|
--color-base-11: #7F7F7F;
|
|
--color-base-12: #606060;
|
|
--color-base-13: #454545;
|
|
--color-base-14: #3C3C3C;
|
|
--color-base-15: #3A3D41;
|
|
--color-base-16: #333333;
|
|
--color-base-17: #303031;
|
|
--color-base-18: #292929;
|
|
--color-base-19: #252526;
|
|
--color-base-20: #1E1E1E;
|
|
--color-base-21: #000000;
|
|
|
|
/* ===================================
|
|
Accent Colors - Blue (color-blue-*)
|
|
=================================== */
|
|
--color-blue-01: #75BEFF;
|
|
--color-blue-02: #4AA6FF;
|
|
--color-blue-03: #3399CC;
|
|
--color-blue-04: #3794FF;
|
|
--color-blue-05: #0897FB;
|
|
--color-blue-06: #087ACC;
|
|
--color-blue-07: #0E639C;
|
|
--color-blue-08: #264F78;
|
|
--color-blue-09: #094771;
|
|
--color-blue-10: #062F4A;
|
|
--color-blue-11: #001F33;
|
|
|
|
/* ===================================
|
|
Accent Colors - Red (color-red-*)
|
|
=================================== */
|
|
--color-red-01: #F14C4C;
|
|
--color-red-02: #C74E39;
|
|
--color-red-03: #FF0000;
|
|
--color-red-04: #264F78;
|
|
|
|
/* ===================================
|
|
Accent Colors - Green (color-green-*)
|
|
=================================== */
|
|
--color-green-01: #73C991;
|
|
--color-green-02: #40C8AE;
|
|
--color-green-03: #16825D;
|
|
--color-green-04: #327E36;
|
|
--color-green-05: #28632B;
|
|
|
|
/* ===================================
|
|
Accent Colors - Purple (color-purple-*)
|
|
=================================== */
|
|
--color-purple-01: #6C6CC4;
|
|
--color-purple-02: #B180D7;
|
|
--color-purple-03: #BC3FBC;
|
|
--color-purple-04: #68217A;
|
|
|
|
/* ===================================
|
|
Accent Colors - Yellow (color-yellow-*)
|
|
=================================== */
|
|
--color-yellow-01: #D7BA7D;
|
|
--color-yellow-02: #CCA700;
|
|
--color-yellow-03: #B89500;
|
|
--color-yellow-04: #BF8803;
|
|
--color-yellow-05: #FFFF00;
|
|
|
|
/* ===================================
|
|
Accent Colors - Orange (color-orange-*)
|
|
=================================== */
|
|
--color-orange-01: #CC6633;
|
|
--color-orange-02: #EE9D28;
|
|
--color-orange-03: #EA5C00;
|
|
|
|
/* ===================================
|
|
Gray Colors (color-gray-*)
|
|
=================================== */
|
|
--color-gray-01: #E4E6F1;
|
|
--color-gray-02: #5F6A79;
|
|
--color-gray-03: #424750;
|
|
|
|
/* ===================================
|
|
Seti Colors (color-seti-*)
|
|
=================================== */
|
|
--color-seti-blue: #519ABA;
|
|
--color-seti-green: #8DC149;
|
|
--color-seti-orange: #E37933;
|
|
--color-seti-pink: #F55385;
|
|
--color-seti-red: #CC3E44;
|
|
--color-seti-steel: #7494A3;
|
|
--color-seti-yellow: #CBCB41;
|
|
--color-seti-purple: #A074C4;
|
|
--color-seti-ignore: #41535B;
|
|
--color-seti-white: #D4D7D6;
|
|
--color-seti-gray: #6D8086;
|
|
|
|
/* ===================================
|
|
Semantic Colors - Text (color-text-*)
|
|
=================================== */
|
|
--color-text-primary: var(--color-base-03);
|
|
--color-text-secondary: var(--color-base-08);
|
|
--color-text-disabled: var(--color-gray-02);
|
|
--color-text-placeholder: var(--color-base-12);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Background (color-bg-*)
|
|
=================================== */
|
|
--color-bg-modal: var(--color-base-18);
|
|
--color-bg-panel: var(--color-base-20);
|
|
--color-bg-input: var(--color-base-19);
|
|
--color-bg-tooltip: rgba(38, 38, 38, 0.95);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Border (color-border-*)
|
|
=================================== */
|
|
--color-border: var(--color-base-16);
|
|
--color-border-focus: var(--color-blue-05);
|
|
--color-border-error: var(--color-red-01);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Button (color-btn-*)
|
|
=================================== */
|
|
--color-btn-normal: var(--color-base-17);
|
|
--color-btn-hover: #3C3C3D;
|
|
--color-btn-pressed: var(--color-base-19);
|
|
--color-btn-primary: var(--color-blue-05);
|
|
--color-btn-primary-hover: var(--color-blue-06);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Calendar (color-calendar-*)
|
|
=================================== */
|
|
--color-calendar-sunday: var(--color-red-01);
|
|
--color-calendar-saturday: var(--color-blue-02);
|
|
--color-calendar-today: var(--color-seti-orange);
|
|
--color-calendar-selected: var(--color-blue-06);
|
|
|
|
/* ===================================
|
|
Semantic Colors - State (color-state-*)
|
|
=================================== */
|
|
--color-state-success: var(--color-green-01);
|
|
--color-state-warning: var(--color-orange-02);
|
|
--color-state-error: var(--color-red-01);
|
|
--color-state-info: var(--color-blue-05);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Vector (color-vector-*)
|
|
=================================== */
|
|
--color-vector-x: rgba(230, 102, 102, 1);
|
|
--color-vector-y: rgba(102, 230, 102, 1);
|
|
--color-vector-z: rgba(102, 102, 230, 1);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Scrollbar (color-scroller-*)
|
|
=================================== */
|
|
--color-scroller-dragger-normal: var(--color-base-16);
|
|
--color-scroller-dragger-hover: #525252;
|
|
--color-scroller-dragger-active: var(--color-base-16);
|
|
--color-scroller-tracker-normal: rgba(0, 0, 0, 0);
|
|
--color-scroller-tracker-hover: rgba(26, 26, 26, 0);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Drag Ghost (color-drag-*)
|
|
=================================== */
|
|
--color-drag-ghost-bg: rgba(41, 41, 41, 1);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Collection (color-collection-*)
|
|
=================================== */
|
|
--color-collection-item: rgba(37, 37, 38, 0);
|
|
--color-collection-item-hover: var(--color-base-16);
|
|
--color-collection-item-selected: var(--color-blue-07);
|
|
--color-collection-item-selected-hover: #1176b9;
|
|
|
|
/* ===================================
|
|
Spacing (space-*)
|
|
=================================== */
|
|
--space-xs: 2px;
|
|
--space-s: 4px;
|
|
--space-m: 8px;
|
|
--space-l: 12px;
|
|
--space-xl: 16px;
|
|
--space-xxl: 24px;
|
|
|
|
/* ===================================
|
|
Border Radius (radius-*)
|
|
=================================== */
|
|
--radius-s: 2px;
|
|
--radius-m: 4px;
|
|
--radius-l: 8px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ===================================
|
|
Border Width (border-width-*)
|
|
=================================== */
|
|
--border-width: 1px;
|
|
--border-width-thick: 2px;
|
|
|
|
/* ===================================
|
|
Font Size (font-size-*)
|
|
=================================== */
|
|
--font-size-h1: 26px;
|
|
--font-size-h2: 14px;
|
|
--font-size-h3: 13px;
|
|
--font-size-h4: 11px;
|
|
--font-size-h5: 11px;
|
|
--font-size-h6: 11px;
|
|
--font-size-body1: 13px;
|
|
--font-size-body2: 12px;
|
|
--font-size-label1: 14px;
|
|
--font-size-label2: 12px;
|
|
--font-size-label3: 11px;
|
|
--font-size-label4: 9px;
|
|
--font-size-code: 12px;
|
|
|
|
/* ===================================
|
|
Component Sizes (size-*)
|
|
=================================== */
|
|
--size-btn-height: 24px;
|
|
--size-btn-min-width: 80px;
|
|
--size-input-height: 24px;
|
|
--size-icon-btn: 20px;
|
|
--size-nav-btn: 24px;
|
|
--size-modal-min-width: 300px;
|
|
|
|
/* ===================================
|
|
Animation (anim-*)
|
|
=================================== */
|
|
--anim-fast: 100ms;
|
|
--anim-normal: 200ms;
|
|
--anim-slow: 300ms;
|
|
|
|
/* ===================================
|
|
Z-Index (z-*)
|
|
=================================== */
|
|
--z-default: 0;
|
|
--z-dropdown: 100;
|
|
--z-modal: 200;
|
|
--z-tooltip: 300;
|
|
|
|
/* TreeView 들여쓰기 폭 설정 */
|
|
--unity-item-indent-width: 0px;
|
|
}
|
|
|
|
/* ===================================
|
|
드롭다운 팝업 아이템 스타일
|
|
- DropdownField의 팝업 메뉴 항목 스타일
|
|
=================================== */
|
|
|
|
|
|
|
|
/* 드롭다운 개별 항목 - 패딩 제거 및 어두운 배경색 적용 */
|
|
.unity-base-dropdown__item {
|
|
padding: 0px;
|
|
background-color: rgb(40, 44, 52); /* 어두운 회색 배경 */
|
|
color: rgb(255, 255, 255); /* 흰색 텍스트 */
|
|
}
|
|
|
|
/* 드롭다운 내부 컨테이너 - 패딩 제거 */
|
|
.unity-base-dropdown__container-inner {
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
TreeView 항목 스타일
|
|
- TreeView의 펼치기/접기 토글 버튼 스타일
|
|
=================================== */
|
|
|
|
/* TreeView 펼치기/접기 화살표 토글 - 우측 여백 추가 */
|
|
.unity-tree-view__item-toggle {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
#unity-checkmark {
|
|
-unity-background-image-tint-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
#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;
|
|
width: auto;
|
|
margin-top: 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: rgb(255, 255, 255); /* 캐럿(커서) 색상 흰색 */
|
|
font-size: 13px;
|
|
color: rgb(204, 204, 204);
|
|
}
|
|
|
|
.unity-base-text-field__input {
|
|
padding-top: 4px;
|
|
padding-right: 24px;
|
|
padding-bottom: 4px;
|
|
padding-left: 4px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-top-width: 0;
|
|
border-right-width: 0;
|
|
border-bottom-width: 0;
|
|
border-left-width: 0;
|
|
background-color: rgb(60, 60, 60);
|
|
}
|
|
|
|
.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: 4px;
|
|
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-repeat-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 슬라이더 - 여백 제거 */
|
|
.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-repeat-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 슬라이더 - 여백 제거 */
|
|
.unity-scroller--horizontal .unity-slider {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 입력 영역 - 높이 6px로 고정 */
|
|
.unity-scroller--horizontal .unity-base-field__input {
|
|
height: 6px;
|
|
min-height: 6px;
|
|
}
|
|
|
|
|