263 lines
7.0 KiB
Plaintext
263 lines
7.0 KiB
Plaintext
/*
|
||
* ===================================
|
||
* 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;
|
||
}
|