XRLib/Assets/Resources/UIToolkit/Input/UTKVector2Field.uss

/*
 * ===================================
 * UTKVector2Field.uss
 * Unity Vector2Field 래핑 스타일
 * ===================================
 */

/* ===================================
   Base Container
   =================================== */

.utk-vector2-field {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    margin-right: 0;
}

/* ===================================
   Label
   =================================== */

.utk-vector2-field > .unity-label {
    min-width: 60px;
    margin-right: var(--space-m);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    -unity-text-align: middle-left;
}

/* ===================================
   Input Container
   =================================== */

.utk-vector2-field > .unity-composite-field__input {
    flex-grow: 1;
    flex-direction: row;
}

/* ===================================
   Field Spacer (X, Y labels)
   =================================== */

.utk-vector2-field .unity-composite-field__field-spacer {
    flex-grow: 0;
}

/* ===================================
   Individual Fields
   =================================== */

.utk-vector2-field .unity-float-field {
    flex-grow: 1;
    margin-right: var(--space-s);
}

.utk-vector2-field #unity-y-input {
    margin-right: 0;
}

.utk-vector2-field #unity-y-input #unity-text-input {
    padding-right: 0;
}


/* Unity USS does not support :last-child pseudo-class */
/* .utk-vector2-field .unity-float-field:last-child {
    margin-right: 0;
} */

.utk-vector2-field .unity-float-field > .unity-label {
    min-width: 12px;
    margin-right: var(--space-xs);
    font-size: var(--font-size-label3);
    color: var(--color-text-secondary);
}

.utk-vector2-field .unity-float-field > .unity-base-text-field__input {
    height: var(--size-input-height);
    min-width: 40px;
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    background-color: var(--color-bg-input);
    border-width: var(--border-width);
    border-color: var(--color-border);
    border-radius: var(--radius-s);
    font-size: var(--font-size-body2);
    color: var(--color-text-primary);
    --unity-cursor-color: var(--color-text-primary);
    transition-duration: var(--anim-fast);
    transition-property: border-color, background-color;
}

.utk-vector2-field .unity-float-field > .unity-base-text-field__input:hover {
    border-color: var(--color-btn-primary);
}

.utk-vector2-field .unity-float-field > .unity-base-text-field__input:focus {
    border-color: var(--color-border-focus);
}

/* ===================================
   Error State
   =================================== */

.utk-vector2-field--error .unity-float-field > .unity-base-text-field__input {
    border-color: var(--color-border-error);
}

.utk-vector2-field--error > .unity-label {
    color: var(--color-state-error);
}

/* Error Message Label */
.utk-vector2-field__error-message {
    width: 100%;
    margin-top: var(--space-xs);
    font-size: var(--font-size-caption);
    color: var(--color-state-error);
    white-space: normal;
}

/* ===================================
   Disabled State
   =================================== */

.utk-vector2-field--disabled {
    cursor: arrow;
}

.utk-vector2-field--disabled .unity-float-field > .unity-base-text-field__input {
    background-color: var(--color-btn-disabled);
    color: var(--color-text-disabled);
    cursor: arrow;
}

.utk-vector2-field--disabled .unity-float-field > .unity-base-text-field__input:hover {
    border-color: var(--color-border);
}

.utk-vector2-field--disabled > .unity-label {
    color: var(--color-text-disabled);
}


/* ===================================
   Read Only
   =================================== */

.utk-vector2-field--readonly > .unity-base-text-field__input {
    background-color: var(--color-btn-disabled);
}