409 lines
9.7 KiB
Plaintext
409 lines
9.7 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKPropertyItemViewCommonUss.uss
|
|
* PropertyItem View 공통 스타일
|
|
* ===================================
|
|
*
|
|
* 이 파일은 UTKThemeManager의 테마 변수를 참조합니다.
|
|
* - 색상: var(--color-*)
|
|
* - 간격: var(--space-*)
|
|
* - 반지름: var(--radius-*)
|
|
*/
|
|
|
|
/* ===================================
|
|
기본 컨테이너
|
|
=================================== */
|
|
|
|
.utk-property-item-view {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
min-height: 28px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
padding-left: var(--space-m);
|
|
padding-right: 0;
|
|
border-bottom-width: var(--border-width);
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
|
|
/* .utk-property-item-view:hover {
|
|
background-color: var(--color-collection-item-hover);
|
|
} */
|
|
|
|
.utk-property-item-view TemplateContainer {
|
|
flex-grow: 1;
|
|
min-height: 28px;
|
|
}
|
|
|
|
/* ===================================
|
|
Property Item Container
|
|
=================================== */
|
|
|
|
.utk-property-item-view-container {
|
|
flex-grow: 1;
|
|
flex-direction: row;
|
|
}
|
|
|
|
|
|
|
|
/* ===================================
|
|
읽기 전용 상태
|
|
=================================== */
|
|
|
|
.utk-property-item-view--readonly {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.utk-property-item-view--readonly .utk-property-item-view__field {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* ===================================
|
|
숨김 상태
|
|
=================================== */
|
|
|
|
.utk-property-item-view--hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* ===================================
|
|
라벨 스타일
|
|
=================================== */
|
|
|
|
.utk-property-item-view__label {
|
|
width: 120px;
|
|
min-width: 120px;
|
|
max-width: 200px;
|
|
flex-shrink: 0;
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-body2);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-unity-text-overflow-position: end;
|
|
white-space: nowrap;
|
|
-unity-text-align: middle-left;
|
|
padding-right: 10px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ===================================
|
|
값 컨테이너
|
|
=================================== */
|
|
|
|
.utk-property-item-view__value {
|
|
flex-grow: 1;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
align-self: center;
|
|
}
|
|
|
|
/* ===================================
|
|
공통 필드 스타일
|
|
=================================== */
|
|
|
|
.utk-property-item-view__field {
|
|
flex-grow: 1;
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* ===================================
|
|
TextField 공통
|
|
=================================== */
|
|
|
|
.utk-property-item-view TextField,
|
|
.utk-property-item-view IntegerField,
|
|
.utk-property-item-view FloatField {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.utk-property-item-view TextField .unity-text-field__input,
|
|
.utk-property-item-view IntegerField .unity-integer-field__input,
|
|
.utk-property-item-view FloatField .unity-float-field__input {
|
|
background-color: var(--color-bg-input);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
color: var(--color-text-primary);
|
|
padding: 3px var(--space-m);
|
|
min-height: 22px;
|
|
}
|
|
|
|
.utk-property-item-view TextField:focus .unity-text-field__input,
|
|
.utk-property-item-view IntegerField:focus .unity-integer-field__input,
|
|
.utk-property-item-view FloatField:focus .unity-float-field__input {
|
|
border-color: var(--color-border-focus);
|
|
}
|
|
|
|
/* ===================================
|
|
Toggle
|
|
=================================== */
|
|
|
|
.utk-property-item-view Toggle {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.utk-property-item-view Toggle .unity-toggle__checkmark {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: var(--color-bg-input);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.utk-property-item-view Toggle:checked .unity-toggle__checkmark {
|
|
background-color: var(--color-btn-primary);
|
|
border-color: var(--color-btn-primary-hover);
|
|
}
|
|
|
|
/* ===================================
|
|
슬라이더 스타일
|
|
=================================== */
|
|
|
|
.utk-property-item-view__slider {
|
|
flex-grow: 1;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.utk-property-item-view__field--with-slider {
|
|
flex-grow: 0;
|
|
min-width: 60px;
|
|
max-width: 80px;
|
|
}
|
|
|
|
.utk-property-item-view Slider {
|
|
flex-grow: 1;
|
|
margin-left: var(--space-m);
|
|
margin-right: var(--space-m);
|
|
}
|
|
|
|
.utk-property-item-view Slider .unity-base-slider__dragger {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-base-05);
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.utk-property-item-view Slider .unity-base-slider__tracker {
|
|
height: 4px;
|
|
background-color: var(--color-base-12);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
/* ===================================
|
|
SliderInt
|
|
=================================== */
|
|
|
|
.utk-property-item-view SliderInt {
|
|
flex-grow: 1;
|
|
margin-left: var(--space-m);
|
|
margin-right: var(--space-m);
|
|
}
|
|
|
|
.utk-property-item-view SliderInt .unity-base-slider__dragger {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-base-05);
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.utk-property-item-view SliderInt .unity-base-slider__tracker {
|
|
height: 4px;
|
|
background-color: var(--color-base-12);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
/* ===================================
|
|
슬라이더 모드 공통
|
|
=================================== */
|
|
|
|
.utk-property-item-view--slider .utk-property-item-view__value {
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.utk-property-item-view--slider .utk-property-item-view__slider {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.utk-property-item-view--slider .utk-property-item-view__number-field {
|
|
width: 60px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* ===================================
|
|
Dropdown
|
|
=================================== */
|
|
|
|
.utk-property-item-view DropdownField {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.utk-property-item-view DropdownField .unity-base-popup-field__input {
|
|
background-color: var(--color-bg-input);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
padding: 3px var(--space-m);
|
|
min-height: 22px;
|
|
}
|
|
|
|
/* ===================================
|
|
Button (Color/Date Picker 열기)
|
|
=================================== */
|
|
|
|
.utk-property-item-view__picker-btn {
|
|
width: 24px;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
margin-left: var(--space-m);
|
|
background-color: var(--color-btn-normal);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
padding: 0;
|
|
}
|
|
|
|
.utk-property-item-view__picker-btn:hover {
|
|
background-color: var(--color-btn-hover);
|
|
}
|
|
|
|
/* ===================================
|
|
Color Preview
|
|
=================================== */
|
|
|
|
.utk-property-item-view__color-preview {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
margin-right: var(--space-s);
|
|
}
|
|
|
|
/* ===================================
|
|
Vector 필드
|
|
=================================== */
|
|
|
|
.utk-property-item-view--vector2 .utk-property-item-view__value,
|
|
.utk-property-item-view--vector3 .utk-property-item-view__value {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.utk-property-item-view__vector-field {
|
|
flex-grow: 1;
|
|
margin-right: var(--space-m);
|
|
}
|
|
|
|
.utk-property-item-view__vector-label {
|
|
width: 12px;
|
|
font-size: var(--font-size-label4);
|
|
color: var(--color-text-secondary);
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
/* Vector label colors */
|
|
.utk-vector-label--x {
|
|
color: var(--color-vector-x);
|
|
}
|
|
|
|
.utk-vector-label--y {
|
|
color: var(--color-vector-y);
|
|
}
|
|
|
|
.utk-vector-label--z {
|
|
color: var(--color-vector-z);
|
|
}
|
|
|
|
/* ===================================
|
|
State label
|
|
=================================== */
|
|
|
|
.utk-property-item-view__state-label {
|
|
flex-grow: 1;
|
|
-unity-text-align: middle-left;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* ===================================
|
|
Range 필드
|
|
=================================== */
|
|
|
|
.utk-property-item-view__range-separator {
|
|
color: var(--color-text-secondary);
|
|
margin-left: var(--space-m);
|
|
margin-right: var(--space-m);
|
|
font-size: var(--font-size-body2);
|
|
}
|
|
|
|
/* ===================================
|
|
Description 영역
|
|
=================================== */
|
|
|
|
.utk-property-item-view__description {
|
|
font-size: var(--font-size-label4);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
/* ===================================
|
|
라벨 없는 상태 (ShowLabel=false)
|
|
=================================== */
|
|
|
|
.utk-property-item-view--no-label .utk-property-item-view__label {
|
|
display: none;
|
|
}
|
|
|
|
.utk-property-item-view--no-label .utk-property-item-view__value {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* ===================================
|
|
Stepper 스타일 (Float용)
|
|
=================================== */
|
|
|
|
.utk-property-item-view__stepper {
|
|
flex-direction: column;
|
|
margin-left: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.utk-property-item-view__stepper-btn {
|
|
width: 16px;
|
|
height: 11px;
|
|
min-height: 11px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--color-btn-normal);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
font-size: 10px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
.utk-property-item-view__stepper-btn:hover {
|
|
background-color: var(--color-btn-hover);
|
|
}
|
|
|
|
.utk-property-item-view__stepper-btn:active {
|
|
background-color: var(--color-btn-active);
|
|
}
|
|
|
|
.utk-property-item-view__stepper-btn--up {
|
|
border-top-left-radius: var(--radius-s);
|
|
border-top-right-radius: var(--radius-s);
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.utk-property-item-view__stepper-btn--down {
|
|
border-bottom-left-radius: var(--radius-s);
|
|
border-bottom-right-radius: var(--radius-s);
|
|
}
|
|
|
|
.utk-property-item-view__field--with-stepper {
|
|
flex-grow: 1;
|
|
}
|