/* * =================================== * UTKShortcutListUss.uss * 단축키 설정 리스트 컴포넌트 전용 스타일 * =================================== * * 이 파일은 UTKThemeManager 의 CSS 변수를 참조합니다. * - 색상 : var(--color-*) * - 간격 : var(--space-*) * - 반지름: var(--radius-*) * - 폰트 : var(--font-size-*) * * 컬럼 너비 (컨테이너 · 헤더 · 아이템 공통으로 맞춤): * command flex-grow:1 명령 이름 (나머지 공간 전부) * modifier 52px Ctrl / Shift / Alt 체크박스 셀 * key 76px 주요 키 입력 셀 * * 관련 파일: * UTKShortcutList.uxml – 메인 레이아웃 * UTKShortcutListItem.uxml – 아이템 행 레이아웃 * UTKShortcutList.cs – 컴포넌트 로직 */ /* ============================================= 루트 컨테이너 ============================================= */ .utk-shortcut-list { flex-grow: 1; flex-direction: column; background-color: var(--color-bg-panel); } .utk-shortcut-list-container { flex-grow: 1; flex-direction: column; } /* ============================================= 검색 영역 (검색 필드 + Clear 버튼) ============================================= */ .utk-shortcut-list__search-container { position: relative; margin: var(--space-m) var(--space-m) 0 var(--space-m); justify-content: center; } .utk-shortcut-list__search { flex-grow: 1; } /* 검색어 있을 때 텍스트가 버튼 뒤로 가리지 않도록 오른쪽 패딩 확보 */ .utk-shortcut-list__search .unity-text-field__input { padding-right: 28px; } .utk-shortcut-list__clear-btn { width: 16px; height: 16px; min-width: 16px; min-height: 16px; border-width: 0; margin: 0; padding: 0; align-self: center; position: absolute; right: 4px; } .utk-shortcut-list__search .unity-text-field__input { background-color: var(--color-bg-input); border-width: var(--border-width); border-color: var(--color-border); border-radius: var(--radius-s); padding: var(--space-xs) var(--space-m); font-size: var(--font-size-body2); min-height: 28px; } .utk-shortcut-list__search:focus .unity-text-field__input { border-color: var(--color-border-focus); } /* UTKInputField 내부 label 숨김 (placeholder 모드에서 label 없이 사용) */ .utk-shortcut-list__search .unity-label { display: none; min-width: 0; width: 0; padding: 0; } /* ============================================= 컬럼 헤더 행 ============================================= */ .utk-shortcut-list__header { flex-direction: row; align-items: center; padding: var(--space-s) var(--space-m); margin-top: var(--space-s); border-bottom-width: 1px; border-color: var(--color-border); } .utk-shortcut-list__header-command { flex-grow: 1; font-size: var(--font-size-body2); color: var(--color-text-secondary); -unity-font-style: bold; overflow: hidden; min-width: 0; } .utk-shortcut-list__header-modifier { width: 52px; flex-shrink: 0; font-size: var(--font-size-body2); color: var(--color-text-secondary); -unity-text-align: middle-center; -unity-font-style: bold; } .utk-shortcut-list__header-key { width: 90px; flex-shrink: 0; font-size: var(--font-size-body2); color: var(--color-text-secondary); -unity-text-align: middle-center; -unity-font-style: bold; } /* ============================================= UTKListView 컨테이너 ============================================= */ .utk-shortcut-list__listview { flex-grow: 1; background-color: transparent; } /* ListView 자체의 테두리·배경 제거 (디자인 가이드: 패널 배경 사용) */ .utk-shortcut-list__listview.utk-listview { border-width: 0; border-radius: 0; background-color: transparent; } /* ============================================= 아이템 행 컨테이너 ============================================= */ .utk-shortcut-list-item { flex-direction: row; align-items: center; padding: 0 var(--space-m); min-height: 36px; flex-grow: 1; border-bottom-width: 1px; border-color: var(--color-border); transition-duration: var(--anim-fast); transition-property: background-color; } .utk-shortcut-list-item:hover { background-color: var(--color-btn-hover); } /* ============================================= 아이템 – 명령 이름 레이블 ============================================= */ .utk-shortcut-list-item__command { flex-grow: 1; min-width: 0; overflow: hidden; } /* UTKLabel 내부 Label 텍스트 스타일 */ .utk-shortcut-list-item__command .unity-label { font-size: var(--font-size-body2); color: var(--color-text-primary); -unity-text-align: middle-left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================= 아이템 – 수정자 키 체크박스 (Ctrl / Shift / Alt) ============================================= */ .utk-shortcut-list-item__modifier { width: 52px; flex-shrink: 0; justify-content: center; align-items: center; margin: 0; padding: 0; } /* UTKCheckBox 내부 컨테이너를 중앙 정렬 */ .utk-shortcut-list-item__modifier .utk-checkbox { justify-content: center; margin: 0; } /* 체크박스 레이블(텍스트) 숨김 – 헤더가 컬럼 레이블 역할을 담당 */ .utk-shortcut-list-item__modifier .utk-checkbox__label { display: none; } /* ============================================= 아이템 – 주요 키 입력 필드 ============================================= */ .utk-shortcut-list-item__key { width: 90px; flex-shrink: 0; margin: 0; padding: 0; } /* UTKInputField label 숨김 */ .utk-shortcut-list-item__key .unity-label { display: none; min-width: 0; width: 0; padding: 0; } /* 텍스트 입력 영역: 키 뱃지 스타일 */ .utk-shortcut-list-item__key .unity-text-field__input { background-color: var(--color-bg-secondary); border-width: var(--border-width); border-color: var(--color-border); border-radius: var(--radius-s); -unity-text-align: middle-center; font-size: var(--font-size-body2); color: var(--color-text-primary); padding: 0 var(--space-s); min-height: 24px; cursor: link; transition-duration: var(--anim-fast); transition-property: border-color, background-color; } .utk-shortcut-list-item__key .unity-text-field__input:hover { border-color: var(--color-border-focus); } /* 캡처 모드: 키 입력 대기 중 */ .utk-shortcut-list-item__key--capturing .unity-text-field__input { border-color: var(--color-border-focus); background-color: var(--color-bg-input); color: var(--color-text-secondary); } /* 텍스트 커서(caret) 숨김 – 읽기전용이므로 커서 불필요 */ .utk-shortcut-list-item__key .unity-text-field__input > TextElement { cursor: link; }