/* * =================================== * 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; }