423 lines
8.8 KiB
Plaintext
423 lines
8.8 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKComponents.uss
|
|
* 재사용 가능한 컴포넌트 클래스 정의
|
|
* ===================================
|
|
*
|
|
* 이 파일은 C# 인라인 스타일을 대체하는 USS 클래스를 정의합니다.
|
|
* 모든 색상은 테마 변수를 참조하여 테마 전환 시 자동 반영됩니다.
|
|
*
|
|
* 네이밍 컨벤션:
|
|
* - .utk-{component} : 컴포넌트 루트
|
|
* - .utk-{component}__{element} : 자식 요소
|
|
* - .utk-{component}--{modifier} : 상태/변형
|
|
*/
|
|
|
|
|
|
/* ===================================
|
|
Modal / Panel Base
|
|
=================================== */
|
|
|
|
.utk-modal {
|
|
position: absolute;
|
|
background-color: var(--color-bg-modal);
|
|
border-radius: var(--radius-l);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
min-width: var(--size-modal-min-width);
|
|
}
|
|
|
|
.utk-modal--draggable {
|
|
/* 드래그 가능한 모달 */
|
|
}
|
|
|
|
.utk-panel {
|
|
background-color: var(--color-bg-panel);
|
|
border-radius: var(--radius-m);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
.utk-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--color-bg-overlay);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Header
|
|
=================================== */
|
|
|
|
.utk-header {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 32px;
|
|
padding-left: var(--space-l);
|
|
padding-right: var(--space-s);
|
|
background-color: var(--color-bg-elevated);
|
|
border-bottom-width: var(--border-width);
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
|
|
.utk-header--rounded {
|
|
border-top-left-radius: var(--radius-l);
|
|
border-top-right-radius: var(--radius-l);
|
|
}
|
|
|
|
.utk-header__title {
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-body1);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-header__subtitle {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-body2);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Buttons
|
|
=================================== */
|
|
|
|
.utk-btn {
|
|
height: var(--size-btn-height);
|
|
min-width: var(--size-btn-min-width);
|
|
padding-left: var(--space-l);
|
|
padding-right: var(--space-l);
|
|
background-color: var(--color-btn-normal);
|
|
border-width: 0;
|
|
border-radius: var(--radius-m);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-body2);
|
|
transition-duration: var(--anim-fast);
|
|
transition-property: background-color;
|
|
}
|
|
|
|
.utk-btn:hover {
|
|
background-color: var(--color-btn-hover);
|
|
}
|
|
|
|
.utk-btn:active {
|
|
background-color: var(--color-btn-pressed);
|
|
}
|
|
|
|
.utk-btn:disabled {
|
|
background-color: var(--color-btn-disabled);
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-btn--primary {
|
|
background-color: var(--color-btn-primary);
|
|
color: var(--color-base-01);
|
|
}
|
|
|
|
.utk-btn--primary:hover {
|
|
background-color: var(--color-btn-primary-hover);
|
|
}
|
|
|
|
.utk-btn--secondary {
|
|
background-color: var(--color-btn-secondary);
|
|
}
|
|
|
|
.utk-btn--secondary:hover {
|
|
background-color: var(--color-btn-secondary-hover);
|
|
}
|
|
|
|
.utk-btn--ghost {
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
}
|
|
|
|
.utk-btn--ghost:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.utk-btn--icon {
|
|
width: var(--size-icon-btn);
|
|
height: var(--size-icon-btn);
|
|
min-width: var(--size-icon-btn);
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
}
|
|
|
|
.utk-btn--icon:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.utk-btn--close {
|
|
width: 24px;
|
|
height: 24px;
|
|
min-width: 24px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.utk-btn--close:hover {
|
|
color: var(--color-text-primary);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Text / Labels
|
|
=================================== */
|
|
|
|
.utk-text--primary {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-text--secondary {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.utk-text--disabled {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-text--placeholder {
|
|
color: var(--color-text-placeholder);
|
|
}
|
|
|
|
.utk-text--error {
|
|
color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-text--success {
|
|
color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-text--warning {
|
|
color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-text--h1 {
|
|
font-size: var(--font-size-h1);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-text--h2 {
|
|
font-size: var(--font-size-h2);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-text--body1 {
|
|
font-size: var(--font-size-body1);
|
|
}
|
|
|
|
.utk-text--body2 {
|
|
font-size: var(--font-size-body2);
|
|
}
|
|
|
|
.utk-text--label {
|
|
font-size: var(--font-size-label2);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Input Fields
|
|
=================================== */
|
|
|
|
.utk-input {
|
|
height: var(--size-input-height);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-body1);
|
|
}
|
|
|
|
.utk-input:focus {
|
|
border-color: var(--color-border-focus);
|
|
}
|
|
|
|
.utk-input--error {
|
|
border-color: var(--color-border-error);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Vector Fields (X, Y, Z)
|
|
=================================== */
|
|
|
|
.utk-vector-label--x {
|
|
color: var(--color-vector-x);
|
|
min-width: 16px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
.utk-vector-label--y {
|
|
color: var(--color-vector-y);
|
|
min-width: 16px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
.utk-vector-label--z {
|
|
color: var(--color-vector-z);
|
|
min-width: 16px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Tooltip
|
|
=================================== */
|
|
|
|
.utk-tooltip {
|
|
position: absolute;
|
|
background-color: var(--color-bg-tooltip);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--space-s) var(--space-m);
|
|
max-width: 300px;
|
|
}
|
|
|
|
.utk-tooltip__text {
|
|
color: var(--color-base-01);
|
|
font-size: var(--font-size-body2);
|
|
white-space: normal;
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Drag Ghost
|
|
=================================== */
|
|
|
|
.utk-drag-ghost {
|
|
position: absolute;
|
|
opacity: 0.8;
|
|
background-color: var(--color-drag-ghost-bg);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
State Indicators
|
|
=================================== */
|
|
|
|
.utk-state--success {
|
|
background-color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-state--warning {
|
|
background-color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-state--error {
|
|
background-color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-state--info {
|
|
background-color: var(--color-state-info);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Calendar
|
|
=================================== */
|
|
|
|
.utk-calendar__day--sunday {
|
|
color: var(--color-calendar-sunday);
|
|
}
|
|
|
|
.utk-calendar__day--saturday {
|
|
color: var(--color-calendar-saturday);
|
|
}
|
|
|
|
.utk-calendar__day--today {
|
|
background-color: var(--color-calendar-today);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.utk-calendar__day--selected {
|
|
background-color: var(--color-calendar-selected);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Divider / Separator
|
|
=================================== */
|
|
|
|
.utk-divider {
|
|
height: var(--border-width);
|
|
background-color: var(--color-border);
|
|
margin-top: var(--space-m);
|
|
margin-bottom: var(--space-m);
|
|
}
|
|
|
|
.utk-divider--vertical {
|
|
width: var(--border-width);
|
|
height: auto;
|
|
margin-left: var(--space-m);
|
|
margin-right: var(--space-m);
|
|
}
|
|
|
|
|
|
/* ===================================
|
|
Spacing Utilities
|
|
=================================== */
|
|
|
|
.utk-p-xs { padding: var(--space-xs); }
|
|
.utk-p-s { padding: var(--space-s); }
|
|
.utk-p-m { padding: var(--space-m); }
|
|
.utk-p-l { padding: var(--space-l); }
|
|
.utk-p-xl { padding: var(--space-xl); }
|
|
|
|
.utk-m-xs { margin: var(--space-xs); }
|
|
.utk-m-s { margin: var(--space-s); }
|
|
.utk-m-m { margin: var(--space-m); }
|
|
.utk-m-l { margin: var(--space-l); }
|
|
.utk-m-xl { margin: var(--space-xl); }
|
|
|
|
.utk-gap-xs { margin-bottom: var(--space-xs); }
|
|
.utk-gap-s { margin-bottom: var(--space-s); }
|
|
.utk-gap-m { margin-bottom: var(--space-m); }
|
|
.utk-gap-l { margin-bottom: var(--space-l); }
|
|
|
|
|
|
/* ===================================
|
|
Layout Utilities
|
|
=================================== */
|
|
|
|
.utk-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.utk-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.utk-center {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.utk-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.utk-flex-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.utk-flex-shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
/* ===================================
|
|
Border Radius Utilities
|
|
=================================== */
|
|
|
|
.utk-rounded-s { border-radius: var(--radius-s); }
|
|
.utk-rounded-m { border-radius: var(--radius-m); }
|
|
.utk-rounded-l { border-radius: var(--radius-l); }
|
|
.utk-rounded-full { border-radius: var(--radius-full); }
|