UIToolkit 기본 UI 개발 중
This commit is contained in:
logonkhi
@@ -8,7 +8,9 @@
|
||||
"Bash(move:*)",
|
||||
"Bash(find:*)",
|
||||
"Bash(claude mcp add:*)",
|
||||
"Bash(claude mcp list:*)"
|
||||
"Bash(claude mcp list:*)",
|
||||
"Bash(del \"d:\\\\works\\\\2025\\\\02.Studio\\\\dev\\\\base\\\\XRBase\\\\Assets\\\\Scripts\\\\UVC\\\\UIToolkit\\\\Input\\\\NumberStepper.cs\")",
|
||||
"Bash(del \"d:\\\\works\\\\2025\\\\02.Studio\\\\dev\\\\base\\\\XRBase\\\\Assets\\\\Scripts\\\\UVC\\\\UIToolkit\\\\Modal\\\\UTKColorPickerHSV.cs\")"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
||||
8
Assets/Resources/UIToolkit/Button.meta
Normal file
8
Assets/Resources/UIToolkit/Button.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 0c207fd08d36fad46b095869721794d7
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
322
Assets/Resources/UIToolkit/Button/UTKButton.uss
Normal file
322
Assets/Resources/UIToolkit/Button/UTKButton.uss
Normal file
@@ -0,0 +1,322 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKButton.uss
|
||||
* 기본 버튼 컴포넌트 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Button
|
||||
=================================== */
|
||||
|
||||
.utk-button {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
padding-top: var(--space-s);
|
||||
padding-bottom: var(--space-s);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-btn-normal);
|
||||
color: var(--color-text-primary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, border-color, color;
|
||||
cursor: link;
|
||||
}
|
||||
|
||||
.utk-button:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-button:active {
|
||||
background-color: var(--color-btn-pressed);
|
||||
}
|
||||
|
||||
.utk-button:focus {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Button Icon
|
||||
=================================== */
|
||||
|
||||
.utk-button__icon {
|
||||
font-size: var(--font-size-body1);
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-unity-text-align: middle-center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.utk-button--has-icon .utk-button__icon {
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Button Text
|
||||
=================================== */
|
||||
|
||||
.utk-button__text {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon Only Mode
|
||||
=================================== */
|
||||
|
||||
.utk-button--icon-only {
|
||||
padding: 0;
|
||||
min-width: auto;
|
||||
width: var(--size-icon-btn);
|
||||
height: var(--size-icon-btn);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.utk-button--icon-only .utk-button__icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Size Variants
|
||||
=================================== */
|
||||
|
||||
.utk-button--small {
|
||||
height: 20px;
|
||||
min-width: 60px;
|
||||
padding-left: var(--space-s);
|
||||
padding-right: var(--space-s);
|
||||
font-size: var(--font-size-label3);
|
||||
}
|
||||
|
||||
.utk-button--small .utk-button__text {
|
||||
font-size: var(--font-size-label3);
|
||||
}
|
||||
|
||||
.utk-button--small .utk-button__icon {
|
||||
font-size: var(--font-size-label3);
|
||||
}
|
||||
|
||||
.utk-button--medium {
|
||||
height: var(--size-btn-height);
|
||||
min-width: var(--size-btn-min-width);
|
||||
}
|
||||
|
||||
.utk-button--large {
|
||||
height: 32px;
|
||||
min-width: 100px;
|
||||
padding-left: var(--space-l);
|
||||
padding-right: var(--space-l);
|
||||
}
|
||||
|
||||
.utk-button--large .utk-button__text {
|
||||
font-size: var(--font-size-body1);
|
||||
}
|
||||
|
||||
.utk-button--large .utk-button__icon {
|
||||
font-size: var(--font-size-body1);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Style Variants
|
||||
=================================== */
|
||||
|
||||
/* Normal (Default) */
|
||||
.utk-button--normal {
|
||||
background-color: var(--color-btn-normal);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-button--normal:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-button--normal:active {
|
||||
background-color: var(--color-btn-pressed);
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.utk-button--primary {
|
||||
background-color: var(--color-btn-primary);
|
||||
border-color: var(--color-btn-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-button--primary:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
border-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-button--primary:active {
|
||||
background-color: var(--color-blue-04);
|
||||
border-color: var(--color-blue-04);
|
||||
}
|
||||
|
||||
.utk-button--primary .utk-button__text,
|
||||
.utk-button--primary .utk-button__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* Secondary */
|
||||
.utk-button--secondary {
|
||||
background-color: var(--color-btn-secondary);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-button--secondary:hover {
|
||||
background-color: var(--color-btn-secondary-hover);
|
||||
}
|
||||
|
||||
/* Ghost (Transparent) */
|
||||
.utk-button--ghost {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-button--ghost:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.utk-button--ghost:active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
.utk-button--danger {
|
||||
background-color: var(--color-red-01);
|
||||
border-color: var(--color-red-01);
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-button--danger:hover {
|
||||
background-color: var(--color-red-02);
|
||||
border-color: var(--color-red-02);
|
||||
}
|
||||
|
||||
.utk-button--danger .utk-button__text,
|
||||
.utk-button--danger .utk-button__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Outline Variants
|
||||
=================================== */
|
||||
|
||||
/* Outline Normal */
|
||||
.utk-button--outline-normal {
|
||||
background-color: transparent;
|
||||
border-color: var(--color-border);
|
||||
border-width: 1px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-button--outline-normal:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
border-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-button--outline-normal:active {
|
||||
background-color: var(--color-btn-pressed);
|
||||
}
|
||||
|
||||
.utk-button--outline-normal .utk-button__text,
|
||||
.utk-button--outline-normal .utk-button__icon {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Outline Primary */
|
||||
.utk-button--outline-primary {
|
||||
background-color: transparent;
|
||||
border-color: var(--color-btn-primary);
|
||||
border-width: 1px;
|
||||
color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-button--outline-primary:hover {
|
||||
background-color: var(--color-btn-primary);
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-button--outline-primary:active {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
border-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-button--outline-primary .utk-button__text,
|
||||
.utk-button--outline-primary .utk-button__icon {
|
||||
color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-button--outline-primary:hover .utk-button__text,
|
||||
.utk-button--outline-primary:hover .utk-button__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* Outline Danger */
|
||||
.utk-button--outline-danger {
|
||||
background-color: transparent;
|
||||
border-color: var(--color-red-01);
|
||||
border-width: 1px;
|
||||
color: var(--color-red-01);
|
||||
}
|
||||
|
||||
.utk-button--outline-danger:hover {
|
||||
background-color: var(--color-red-01);
|
||||
border-color: var(--color-red-01);
|
||||
}
|
||||
|
||||
.utk-button--outline-danger:active {
|
||||
background-color: var(--color-red-02);
|
||||
border-color: var(--color-red-02);
|
||||
}
|
||||
|
||||
.utk-button--outline-danger .utk-button__text,
|
||||
.utk-button--outline-danger .utk-button__icon {
|
||||
color: var(--color-red-01);
|
||||
}
|
||||
|
||||
.utk-button--outline-danger:hover .utk-button__text,
|
||||
.utk-button--outline-danger:hover .utk-button__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-button--disabled {
|
||||
background-color: var(--color-btn-disabled);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-button--disabled:hover {
|
||||
background-color: var(--color-btn-disabled);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-button--disabled:active {
|
||||
background-color: var(--color-btn-disabled);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-button--disabled:focus {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-button--disabled .utk-button__text,
|
||||
.utk-button--disabled .utk-button__icon {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Button/UTKButton.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Button/UTKButton.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: d87c1fbcdd3ffee42b5860c781bcb4f8
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
115
Assets/Resources/UIToolkit/Button/UTKCheckBox.uss
Normal file
115
Assets/Resources/UIToolkit/Button/UTKCheckBox.uss
Normal file
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKCheckBox.uss
|
||||
* 체크박스 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-checkbox {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
cursor: link;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Checkbox Box
|
||||
=================================== */
|
||||
|
||||
.utk-checkbox__box {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
border-radius: var(--radius-s);
|
||||
border-width: 2px;
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-bg-input);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: border-color, background-color;
|
||||
}
|
||||
|
||||
.utk-checkbox:hover .utk-checkbox__box {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-checkbox--checked .utk-checkbox__box,
|
||||
.utk-checkbox--indeterminate .utk-checkbox__box {
|
||||
border-color: var(--color-btn-primary);
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Check Icon
|
||||
=================================== */
|
||||
|
||||
.utk-checkbox__icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-on-primary);
|
||||
-unity-text-align: middle-center;
|
||||
-unity-font-style: bold;
|
||||
opacity: 0;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: opacity;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
.utk-checkbox--checked .utk-checkbox__icon,
|
||||
.utk-checkbox--indeterminate .utk-checkbox__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-checkbox__label {
|
||||
margin-left: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-checkbox--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-checkbox--disabled .utk-checkbox__box {
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-btn-disabled);
|
||||
}
|
||||
|
||||
.utk-checkbox--disabled:hover .utk-checkbox__box {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-checkbox--disabled.utk-checkbox--checked .utk-checkbox__box,
|
||||
.utk-checkbox--disabled.utk-checkbox--indeterminate .utk-checkbox__box {
|
||||
background-color: var(--color-text-disabled);
|
||||
border-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-checkbox--disabled.utk-checkbox--checked:hover .utk-checkbox__box,
|
||||
.utk-checkbox--disabled.utk-checkbox--indeterminate:hover .utk-checkbox__box {
|
||||
border-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-checkbox--disabled .utk-checkbox__label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Button/UTKCheckBox.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Button/UTKCheckBox.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: c2c311091db8199469dcc687e40e3765
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
124
Assets/Resources/UIToolkit/Button/UTKRadioButton.uss
Normal file
124
Assets/Resources/UIToolkit/Button/UTKRadioButton.uss
Normal file
@@ -0,0 +1,124 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKRadioButton.uss
|
||||
* Unity RadioButton 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-radio {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
cursor: link;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radio Input Container
|
||||
=================================== */
|
||||
|
||||
.utk-radio > .unity-radio-button__input {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Checkmark Container (Outer Circle)
|
||||
=================================== */
|
||||
|
||||
.utk-radio .unity-radio-button__checkmark-background {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 9px;
|
||||
border-width: 2px;
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-bg-input);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: border-color, background-color;
|
||||
}
|
||||
|
||||
.utk-radio:hover .unity-radio-button__checkmark-background {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-radio:checked .unity-radio-button__checkmark-background {
|
||||
border-color: var(--color-btn-primary);
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Checkmark (Inner Dot)
|
||||
=================================== */
|
||||
|
||||
.utk-radio .unity-radio-button__checkmark {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
-unity-background-image-tint-color: transparent;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-radio:checked .unity-radio-button__checkmark {
|
||||
background-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-radio .unity-radio-button__text {
|
||||
margin-left: var(--space-s);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-radio:disabled {
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.utk-radio:disabled .unity-radio-button__checkmark-background {
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-btn-disabled);
|
||||
}
|
||||
|
||||
.utk-radio:disabled:hover .unity-radio-button__checkmark-background {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-radio:disabled:checked:hover .unity-radio-button__checkmark-background {
|
||||
border-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-radio:disabled:checked .unity-radio-button__checkmark-background {
|
||||
background-color: var(--color-text-disabled);
|
||||
border-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-radio:disabled .unity-radio-button__checkmark {
|
||||
background-color: var(--color-btn-disabled);
|
||||
}
|
||||
|
||||
.utk-radio:disabled:checked .unity-radio-button__checkmark {
|
||||
background-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-radio:disabled .unity-radio-button__text {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Button/UTKRadioButton.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Button/UTKRadioButton.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 1480e5ed2b9f5914f8a920e59c027cf3
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
111
Assets/Resources/UIToolkit/Button/UTKToggle.uss
Normal file
111
Assets/Resources/UIToolkit/Button/UTKToggle.uss
Normal file
@@ -0,0 +1,111 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKToggle.uss
|
||||
* Unity Toggle 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-toggle {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
cursor: link;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Hide default Unity checkmark
|
||||
=================================== */
|
||||
|
||||
.utk-toggle > .unity-toggle__input {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
min-width: 36px;
|
||||
min-height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-btn-normal);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
flex-shrink: 0;
|
||||
transition-duration: var(--anim-normal);
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
.utk-toggle:hover > .unity-toggle__input {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-toggle--on > .unity-toggle__input {
|
||||
background-color: var(--color-btn-primary);
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Checkmark (Thumb)
|
||||
=================================== */
|
||||
|
||||
.utk-toggle > .unity-toggle__input > .unity-toggle__checkmark {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-text-secondary);
|
||||
-unity-background-image-tint-color: transparent;
|
||||
background-image: none;
|
||||
margin: 2px;
|
||||
transition-duration: var(--anim-normal);
|
||||
transition-property: translate, background-color;
|
||||
}
|
||||
|
||||
.utk-toggle--on > .unity-toggle__input > .unity-toggle__checkmark {
|
||||
translate: 16px 0;
|
||||
background-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-toggle > .unity-toggle__label,
|
||||
.utk-toggle > .unity-label {
|
||||
margin-left: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-toggle--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-toggle--disabled > .unity-toggle__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-toggle--disabled:hover > .unity-toggle__input {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-toggle--disabled.utk-toggle--on > .unity-toggle__input {
|
||||
background-color: var(--color-text-disabled);
|
||||
border-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-toggle--disabled.utk-toggle--on:hover > .unity-toggle__input {
|
||||
border-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-toggle--disabled > .unity-toggle__input > .unity-toggle__checkmark {
|
||||
background-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-toggle--disabled > .unity-toggle__label,
|
||||
.utk-toggle--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Button/UTKToggle.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Button/UTKToggle.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: ea8e7fa6e2b464743a2cb236bc35086f
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
87
Assets/Resources/UIToolkit/Button/UTKToggleButtonGroup.uss
Normal file
87
Assets/Resources/UIToolkit/Button/UTKToggleButtonGroup.uss
Normal file
@@ -0,0 +1,87 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKToggleButtonGroup.uss
|
||||
* Unity ToggleButtonGroup 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-toggle-group {
|
||||
flex-direction: row;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Toggle Buttons
|
||||
=================================== */
|
||||
|
||||
.utk-toggle-group > .unity-button {
|
||||
margin: 0;
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
.utk-toggle-group > .unity-button:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-toggle-group > .unity-button:checked {
|
||||
background-color: var(--color-btn-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-toggle-group > .unity-button:checked:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Custom Button Class
|
||||
=================================== */
|
||||
|
||||
.utk-toggle-group__button {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.utk-toggle-group__icon {
|
||||
margin-right: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-toggle-group--disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.utk-toggle-group--disabled > .unity-button {
|
||||
color: var(--color-text-disabled);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-toggle-group--disabled > .unity-button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-toggle-group--disabled > .unity-button:checked {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-toggle-group--disabled > .unity-button:checked:hover {
|
||||
background-color: var(--color-btn-disabled);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: b86bf8de13087274d838017cb2603ed2
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Card.meta
Normal file
8
Assets/Resources/UIToolkit/Card.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 68a77a858a5c1ce44832e5b9580b80de
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
112
Assets/Resources/UIToolkit/Card/UTKCard.uss
Normal file
112
Assets/Resources/UIToolkit/Card/UTKCard.uss
Normal file
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKCard.uss
|
||||
* 카드 컴포넌트 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-card {
|
||||
flex-direction: column;
|
||||
border-radius: var(--radius-l);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Variants
|
||||
=================================== */
|
||||
|
||||
.utk-card--elevated {
|
||||
background-color: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.utk-card--outlined {
|
||||
background-color: var(--color-bg-panel);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-card--filled {
|
||||
background-color: var(--color-btn-normal);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Clickable State
|
||||
=================================== */
|
||||
|
||||
.utk-card--clickable {
|
||||
cursor: link;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-card--clickable:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-card--clickable:active {
|
||||
background-color: var(--color-btn-pressed);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Image Container
|
||||
=================================== */
|
||||
|
||||
.utk-card__image {
|
||||
height: 160px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-card__header {
|
||||
flex-direction: column;
|
||||
padding: var(--space-l);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Title
|
||||
=================================== */
|
||||
|
||||
.utk-card__title {
|
||||
font-size: var(--font-size-h3);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Subtitle
|
||||
=================================== */
|
||||
|
||||
.utk-card__subtitle {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content
|
||||
=================================== */
|
||||
|
||||
.utk-card__content {
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Actions
|
||||
=================================== */
|
||||
|
||||
.utk-card__actions {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border-top-width: var(--border-width);
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Card/UTKCard.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Card/UTKCard.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 2fe5884914f7ee14d8a93eedb3b40fd4
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Common.meta
Normal file
8
Assets/Resources/UIToolkit/Common.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 31176a3f98a362d4283ac94b4d603372
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
90
Assets/Resources/UIToolkit/Common/UTKFoldout.uss
Normal file
90
Assets/Resources/UIToolkit/Common/UTKFoldout.uss
Normal file
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKFoldout.uss
|
||||
* Unity Foldout 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-foldout {
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Toggle (Header)
|
||||
=================================== */
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle {
|
||||
margin: 0;
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Checkmark (Arrow)
|
||||
=================================== */
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle > .unity-toggle__input > .unity-foldout__checkmark {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: var(--space-s);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: rotate;
|
||||
}
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle:checked > .unity-toggle__input > .unity-foldout__checkmark {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Title Label
|
||||
=================================== */
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle > .unity-toggle__input > .unity-foldout__text {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content Container
|
||||
=================================== */
|
||||
|
||||
.utk-foldout > .unity-foldout__content {
|
||||
margin-top: var(--space-s);
|
||||
margin-left: var(--space-m);
|
||||
padding: var(--space-m);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Collapsed State - Remove content border radius on top
|
||||
=================================== */
|
||||
|
||||
.utk-foldout:checked > .unity-foldout__toggle {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.utk-foldout:checked > .unity-foldout__content {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Common/UTKFoldout.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Common/UTKFoldout.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 7a0f870707b8498449e18047de242133
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
108
Assets/Resources/UIToolkit/Common/UTKHelpBox.uss
Normal file
108
Assets/Resources/UIToolkit/Common/UTKHelpBox.uss
Normal file
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKHelpBox.uss
|
||||
* Unity HelpBox 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-m);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox > .unity-help-box__icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: var(--space-m);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox > .unity-help-box__label {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
white-space: normal;
|
||||
-unity-text-align: upper-left;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Info Type
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--info {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--color-blue-02);
|
||||
}
|
||||
|
||||
.utk-helpbox--info > .unity-help-box__icon {
|
||||
-unity-background-image-tint-color: var(--color-blue-02);
|
||||
}
|
||||
|
||||
.utk-helpbox--info > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Warning Type
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--warning {
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
border-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-helpbox--warning > .unity-help-box__icon {
|
||||
-unity-background-image-tint-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-helpbox--warning > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Error Type
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--error {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
border-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-helpbox--error > .unity-help-box__icon {
|
||||
-unity-background-image-tint-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-helpbox--error > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
None Type (No icon)
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--none {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-helpbox--none > .unity-help-box__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-helpbox--none > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Common/UTKHelpBox.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Common/UTKHelpBox.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: e71b5c9d9a33d264fbd619b3b6e3a707
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
106
Assets/Resources/UIToolkit/Common/UTKScrollView.uss
Normal file
106
Assets/Resources/UIToolkit/Common/UTKScrollView.uss
Normal file
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKScrollView.uss
|
||||
* Unity ScrollView 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content Container
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview > .unity-scroll-view__content-and-vertical-scroll-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.utk-scrollview > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.utk-scrollview > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Vertical Scroller
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-scrollview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical > .unity-scroller__slider {
|
||||
width: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Horizontal Scroller
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal {
|
||||
height: 8px;
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal > .unity-scroller__low-button,
|
||||
.utk-scrollview .unity-scroller--horizontal > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal > .unity-scroller__slider {
|
||||
height: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal .unity-base-slider__tracker {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal .unity-base-slider__dragger {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Common/UTKScrollView.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Common/UTKScrollView.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: ff0a7d358a20ced4dbe5ef646db9b0f3
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
18
Assets/Resources/UIToolkit/Common/UTKTooltip.uss
Normal file
18
Assets/Resources/UIToolkit/Common/UTKTooltip.uss
Normal file
@@ -0,0 +1,18 @@
|
||||
/* UTKTooltip.uss - 툴팁 스타일 */
|
||||
|
||||
.utk-tooltip-container {
|
||||
position: absolute;
|
||||
background-color: var(--color-bg-tooltip);
|
||||
border-radius: var(--radius-m);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
max-width: 300px;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border-light);
|
||||
}
|
||||
|
||||
.utk-tooltip-label {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body2);
|
||||
white-space: normal;
|
||||
-unity-text-align: middle-left;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Common/UTKTooltip.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Common/UTKTooltip.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: d18684c4217403848995bd0890378f98
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
6
Assets/Resources/UIToolkit/Common/UTKTooltip.uxml
Normal file
6
Assets/Resources/UIToolkit/Common/UTKTooltip.uxml
Normal file
@@ -0,0 +1,6 @@
|
||||
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
|
||||
<Style src="UTKTooltip.uss" />
|
||||
<ui:VisualElement name="tooltip-container" class="utk-tooltip-container" picking-mode="Ignore">
|
||||
<ui:Label name="tooltip-label" class="utk-tooltip-label" picking-mode="Ignore" />
|
||||
</ui:VisualElement>
|
||||
</ui:UXML>
|
||||
10
Assets/Resources/UIToolkit/Common/UTKTooltip.uxml.meta
Normal file
10
Assets/Resources/UIToolkit/Common/UTKTooltip.uxml.meta
Normal file
@@ -0,0 +1,10 @@
|
||||
fileFormatVersion: 2
|
||||
guid: f473e51c9a54d0842a93597f537a6d8b
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
|
||||
@@ -1,9 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<ui:UXML
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xmlns:ui="UnityEngine.UIElements"
|
||||
xmlns:uie="UnityEditor.UIElements"
|
||||
xsi:noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd"
|
||||
>
|
||||
|
||||
</ui:UXML>
|
||||
<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
|
||||
</ui:UXML>
|
||||
|
||||
8
Assets/Resources/UIToolkit/Dropdown.meta
Normal file
8
Assets/Resources/UIToolkit/Dropdown.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: e3e102ff4716d6d4599fe861ea58a444
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
108
Assets/Resources/UIToolkit/Dropdown/UTKDropdown.uss
Normal file
108
Assets/Resources/UIToolkit/Dropdown/UTKDropdown.uss
Normal file
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKDropdown.uss
|
||||
* Unity DropdownField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-dropdown {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-dropdown > .unity-label {
|
||||
min-width: 60px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Dropdown Input (Button)
|
||||
=================================== */
|
||||
|
||||
.utk-dropdown > .unity-popup-field__input {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 120px;
|
||||
height: var(--size-input-height);
|
||||
padding-left: var(--space-m);
|
||||
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);
|
||||
cursor: link;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: border-color, background-color;
|
||||
}
|
||||
|
||||
.utk-dropdown > .unity-popup-field__input:hover {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-dropdown:focus > .unity-popup-field__input {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Selected Text
|
||||
=================================== */
|
||||
|
||||
.utk-dropdown .unity-text-element {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Arrow Icon
|
||||
=================================== */
|
||||
|
||||
.utk-dropdown .unity-base-popup-field__arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
margin-left: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-dropdown--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-dropdown--disabled > .unity-popup-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-dropdown--disabled > .unity-popup-field__input:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-dropdown--disabled .unity-text-element {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-dropdown--disabled .unity-base-popup-field__arrow {
|
||||
-unity-background-image-tint-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-dropdown--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Dropdown/UTKDropdown.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Dropdown/UTKDropdown.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 11125bf6e9398df479a3ca01d6b286a9
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
108
Assets/Resources/UIToolkit/Dropdown/UTKEnumField.uss
Normal file
108
Assets/Resources/UIToolkit/Dropdown/UTKEnumField.uss
Normal file
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKEnumField.uss
|
||||
* Unity EnumField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-enum-field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-enum-field > .unity-label {
|
||||
min-width: 60px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Dropdown Input (Button)
|
||||
=================================== */
|
||||
|
||||
.utk-enum-field > .unity-enum-field__input {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 120px;
|
||||
height: var(--size-input-height);
|
||||
padding-left: var(--space-m);
|
||||
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);
|
||||
cursor: link;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: border-color, background-color;
|
||||
}
|
||||
|
||||
.utk-enum-field > .unity-enum-field__input:hover {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-enum-field:focus > .unity-enum-field__input {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Selected Text
|
||||
=================================== */
|
||||
|
||||
.utk-enum-field .unity-text-element {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Arrow Icon
|
||||
=================================== */
|
||||
|
||||
.utk-enum-field .unity-enum-field__arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
margin-left: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-enum-field--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-enum-field--disabled > .unity-enum-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-enum-field--disabled > .unity-enum-field__input:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-enum-field--disabled .unity-text-element {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-enum-field--disabled .unity-enum-field__arrow {
|
||||
-unity-background-image-tint-color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-enum-field--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Dropdown/UTKEnumField.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Dropdown/UTKEnumField.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 5d35d99d851e8eb42a04f3a1ffddf765
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Input.meta
Normal file
8
Assets/Resources/UIToolkit/Input.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: e2678ea1ea23c6e41a4d300953917924
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
105
Assets/Resources/UIToolkit/Input/UTKBoundsField.uss
Normal file
105
Assets/Resources/UIToolkit/Input/UTKBoundsField.uss
Normal file
@@ -0,0 +1,105 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKBoundsField.uss
|
||||
* Unity BoundsField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-boundsfield {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-boundsfield > .unity-label {
|
||||
min-width: 80px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
padding-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Input Container
|
||||
=================================== */
|
||||
|
||||
.utk-boundsfield > .unity-base-field__input {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Vector3 Fields (Center, Extents rows)
|
||||
=================================== */
|
||||
|
||||
.utk-boundsfield .unity-composite-field__field-spacer {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-vector3-field {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-vector3-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-vector3-field > .unity-label {
|
||||
min-width: 50px;
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Individual Float Fields
|
||||
=================================== */
|
||||
|
||||
.utk-boundsfield .unity-float-field {
|
||||
flex-grow: 1;
|
||||
margin-right: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-float-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-float-field > .unity-label {
|
||||
min-width: 14px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-float-field > .unity-base-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-s);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
--unity-cursor-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-boundsfield .unity-float-field > .unity-base-text-field__input:focus {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-boundsfield--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-boundsfield--disabled .unity-float-field > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKBoundsField.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKBoundsField.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: fb9218d9b4dadb746acba91bd552dd78
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
77
Assets/Resources/UIToolkit/Input/UTKFloatField.uss
Normal file
77
Assets/Resources/UIToolkit/Input/UTKFloatField.uss
Normal file
@@ -0,0 +1,77 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKFloatField.uss
|
||||
* Unity FloatField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-float-field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-float-field > .unity-label {
|
||||
min-width: 60px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Input
|
||||
=================================== */
|
||||
|
||||
.utk-float-field > .unity-base-text-field__input {
|
||||
flex-grow: 1;
|
||||
height: var(--size-input-height);
|
||||
min-width: 60px;
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
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-float-field > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-float-field > .unity-base-text-field__input:focus {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-float-field--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-float-field--disabled > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-float-field--disabled > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-float-field--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKFloatField.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKFloatField.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: d8137ecc1856dfe48a66a72b186845b2
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
176
Assets/Resources/UIToolkit/Input/UTKInputField.uss
Normal file
176
Assets/Resources/UIToolkit/Input/UTKInputField.uss
Normal file
@@ -0,0 +1,176 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKInputField.uss
|
||||
* Unity TextField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-input {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: var(--space-s);
|
||||
padding-right: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-input > .unity-label {
|
||||
min-width: 60px;
|
||||
height: var(--size-input-height);
|
||||
margin-left: 0;
|
||||
margin-right: var(--space-s);
|
||||
padding-left: var(--space-s);
|
||||
padding-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
-unity-text-align: middle-left;
|
||||
border-right-width: var(--border-width);
|
||||
border-right-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Text Input
|
||||
=================================== */
|
||||
|
||||
.utk-input > .unity-base-text-field__input {
|
||||
flex-grow: 1;
|
||||
height: var(--size-input-height);
|
||||
min-width: 120px;
|
||||
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-text-align: middle-left;
|
||||
--unity-cursor-color: var(--color-text-primary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: border-color, background-color;
|
||||
}
|
||||
|
||||
/* Hide inner text-input border and cursor container */
|
||||
.utk-input .unity-text-input {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.utk-input .unity-base-text-field__input > .unity-text-element {
|
||||
-unity-text-align: middle-left;
|
||||
}
|
||||
|
||||
/* Hide cursor container right border (the vertical line) */
|
||||
.utk-input .unity-text-field__input,
|
||||
.utk-input .unity-base-text-field__input--single-line {
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-input > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-input--focused > .unity-base-text-field__input {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Placeholder
|
||||
=================================== */
|
||||
|
||||
.utk-input .unity-text-element--placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Multiline
|
||||
=================================== */
|
||||
|
||||
.utk-input--multiline > .unity-base-text-field__input {
|
||||
height: auto;
|
||||
min-height: 60px;
|
||||
padding-top: var(--space-s);
|
||||
padding-bottom: var(--space-s);
|
||||
white-space: normal;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Note: min-width: 60px (label), min-width: 120px (input), min-height: 60px (multiline)
|
||||
are intentionally kept as fixed values for layout consistency */
|
||||
|
||||
/* ===================================
|
||||
Error State
|
||||
=================================== */
|
||||
|
||||
.utk-input--error > .unity-base-text-field__input {
|
||||
border-color: var(--color-border-error);
|
||||
}
|
||||
|
||||
.utk-input--error > .unity-label {
|
||||
color: var(--color-state-error);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Variants
|
||||
=================================== */
|
||||
|
||||
/* Default */
|
||||
.utk-input--default > .unity-base-text-field__input {
|
||||
background-color: var(--color-bg-input);
|
||||
}
|
||||
|
||||
/* Filled */
|
||||
.utk-input--filled > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-normal);
|
||||
border-width: 0;
|
||||
border-bottom-width: var(--border-width-thick);
|
||||
border-radius: var(--radius-s) var(--radius-s) 0 0;
|
||||
}
|
||||
|
||||
.utk-input--filled.utk-input--focused > .unity-base-text-field__input {
|
||||
border-bottom-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* Outlined */
|
||||
.utk-input--outlined > .unity-base-text-field__input {
|
||||
background-color: transparent;
|
||||
border-width: var(--border-width-thick);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Read Only
|
||||
=================================== */
|
||||
|
||||
.utk-input--readonly > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-input--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-input--disabled > .unity-base-text-field__input {
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-input--disabled > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-input--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKInputField.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKInputField.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: a075fdf47d701b6489cea68e97eb9ccf
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
77
Assets/Resources/UIToolkit/Input/UTKIntegerField.uss
Normal file
77
Assets/Resources/UIToolkit/Input/UTKIntegerField.uss
Normal file
@@ -0,0 +1,77 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKIntegerField.uss
|
||||
* Unity IntegerField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-integer-field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-integer-field > .unity-label {
|
||||
min-width: 60px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Input
|
||||
=================================== */
|
||||
|
||||
.utk-integer-field > .unity-base-text-field__input {
|
||||
flex-grow: 1;
|
||||
height: var(--size-input-height);
|
||||
min-width: 60px;
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
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-integer-field > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-integer-field > .unity-base-text-field__input:focus {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-integer-field--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-integer-field--disabled > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-integer-field--disabled > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-integer-field--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKIntegerField.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKIntegerField.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: b105d56f950b4b948aee9d86d8c1b85f
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
121
Assets/Resources/UIToolkit/Input/UTKNumberStepper.uss
Normal file
121
Assets/Resources/UIToolkit/Input/UTKNumberStepper.uss
Normal file
@@ -0,0 +1,121 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKNumberStepper.uss
|
||||
* Number Stepper Component Styles
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Root Container
|
||||
=================================== */
|
||||
|
||||
.utk-number-stepper {
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
height: var(--size-input-height);
|
||||
}
|
||||
|
||||
|
||||
/* ===================================
|
||||
Text Input Field
|
||||
=================================== */
|
||||
|
||||
.utk-number-stepper__input {
|
||||
flex-grow: 1;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-size-body2);
|
||||
}
|
||||
|
||||
.utk-number-stepper__text-input {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-bg-input);
|
||||
color: var(--color-text-primary);
|
||||
--unity-cursor-color: var(--color-text-primary);
|
||||
border-top-left-radius: var(--radius-s);
|
||||
border-bottom-left-radius: var(--radius-s);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-width: var(--border-width);
|
||||
border-bottom-width: var(--border-width);
|
||||
border-left-width: var(--border-width);
|
||||
border-right-width: 0;
|
||||
border-top-color: var(--color-border);
|
||||
border-bottom-color: var(--color-border);
|
||||
border-left-color: var(--color-border);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
margin: 0;
|
||||
-unity-text-align: middle-right;
|
||||
}
|
||||
|
||||
|
||||
/* ===================================
|
||||
Button Container
|
||||
=================================== */
|
||||
|
||||
.utk-number-stepper__buttons {
|
||||
flex-direction: column;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* ===================================
|
||||
Stepper Buttons (Base)
|
||||
=================================== */
|
||||
|
||||
.utk-number-stepper__btn {
|
||||
flex-grow: 1;
|
||||
width: 16px;
|
||||
font-size: 6px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: var(--color-btn-normal);
|
||||
color: var(--color-text-secondary);
|
||||
border-top-width: var(--border-width);
|
||||
border-left-width: 0;
|
||||
border-right-width: var(--border-width);
|
||||
border-top-color: var(--color-border);
|
||||
border-right-color: var(--color-border);
|
||||
border-bottom-color: var(--color-border);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
.utk-number-stepper__btn:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-number-stepper__btn:active {
|
||||
background-color: var(--color-btn-pressed);
|
||||
}
|
||||
|
||||
|
||||
/* ===================================
|
||||
Up Button
|
||||
=================================== */
|
||||
|
||||
.utk-number-stepper__btn--up {
|
||||
border-bottom-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: var(--radius-s);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ===================================
|
||||
Down Button
|
||||
=================================== */
|
||||
|
||||
.utk-number-stepper__btn--down {
|
||||
border-bottom-width: var(--border-width);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: var(--radius-s);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKNumberStepper.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKNumberStepper.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 224543ff0f5af4b48b6c73948d95c4a0
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
99
Assets/Resources/UIToolkit/Input/UTKRectField.uss
Normal file
99
Assets/Resources/UIToolkit/Input/UTKRectField.uss
Normal file
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKRectField.uss
|
||||
* Unity RectField 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-rectfield {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-rectfield > .unity-label {
|
||||
min-width: 80px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
padding-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Input Container
|
||||
=================================== */
|
||||
|
||||
.utk-rectfield > .unity-base-field__input {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Vector2 Fields (X/Y, W/H rows)
|
||||
=================================== */
|
||||
|
||||
.utk-rectfield .unity-composite-field__field-spacer {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.utk-rectfield .unity-vector2-field {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-rectfield .unity-vector2-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Individual Float Fields
|
||||
=================================== */
|
||||
|
||||
.utk-rectfield .unity-float-field {
|
||||
flex-grow: 1;
|
||||
margin-right: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-rectfield .unity-float-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.utk-rectfield .unity-float-field > .unity-label {
|
||||
min-width: 14px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.utk-rectfield .unity-float-field > .unity-base-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-s);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
--unity-cursor-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-rectfield .unity-float-field > .unity-base-text-field__input:focus {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-rectfield--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-rectfield--disabled .unity-float-field > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKRectField.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKRectField.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 09f901972d800d74f869b052c2d61386
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
109
Assets/Resources/UIToolkit/Input/UTKVector2Field.uss
Normal file
109
Assets/Resources/UIToolkit/Input/UTKVector2Field.uss
Normal file
@@ -0,0 +1,109 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKVector2Field.uss
|
||||
* Unity Vector2Field 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-vector2-field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
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);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
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-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);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-vector2-field--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-vector2-field--disabled .unity-float-field > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKVector2Field.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKVector2Field.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 0880ec227c210aa40872b9d849ac2fcd
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
109
Assets/Resources/UIToolkit/Input/UTKVector3Field.uss
Normal file
109
Assets/Resources/UIToolkit/Input/UTKVector3Field.uss
Normal file
@@ -0,0 +1,109 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKVector3Field.uss
|
||||
* Unity Vector3Field 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-vector3-field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-vector3-field > .unity-label {
|
||||
min-width: 60px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Input Container
|
||||
=================================== */
|
||||
|
||||
.utk-vector3-field > .unity-composite-field__input {
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Field Spacer (X, Y, Z labels)
|
||||
=================================== */
|
||||
|
||||
.utk-vector3-field .unity-composite-field__field-spacer {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Individual Fields
|
||||
=================================== */
|
||||
|
||||
.utk-vector3-field .unity-float-field {
|
||||
flex-grow: 1;
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
|
||||
.utk-vector3-field .unity-float-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.utk-vector3-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-vector3-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-vector3-field .unity-float-field > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-vector3-field .unity-float-field > .unity-base-text-field__input:focus {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-vector3-field--disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-vector3-field--disabled .unity-float-field > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.utk-vector3-field--disabled .unity-float-field > .unity-base-text-field__input:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-vector3-field--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKVector3Field.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKVector3Field.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 6771e66d29af64c47948f5ae956025da
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
82
Assets/Resources/UIToolkit/Input/UTKVector4Field.uss
Normal file
82
Assets/Resources/UIToolkit/Input/UTKVector4Field.uss
Normal file
@@ -0,0 +1,82 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKVector4Field.uss
|
||||
* Unity Vector4Field 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-vector4field {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
|
||||
.utk-vector4field > .unity-label {
|
||||
min-width: 80px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Input Container
|
||||
=================================== */
|
||||
|
||||
.utk-vector4field > .unity-base-field__input {
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Individual Float Fields
|
||||
=================================== */
|
||||
|
||||
.utk-vector4field .unity-float-field {
|
||||
flex-grow: 1;
|
||||
margin-right: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-vector4field .unity-float-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.utk-vector4field .unity-float-field > .unity-label {
|
||||
min-width: 14px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.utk-vector4field .unity-float-field > .unity-base-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-s);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
--unity-cursor-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-vector4field .unity-float-field > .unity-base-text-field__input:focus {
|
||||
border-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-vector4field--disabled > .unity-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-vector4field--disabled .unity-float-field > .unity-base-text-field__input {
|
||||
background-color: var(--color-btn-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Input/UTKVector4Field.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Input/UTKVector4Field.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: ad2e424eb06c9bf48b0bbd625b13141b
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Label.meta
Normal file
8
Assets/Resources/UIToolkit/Label.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 3d58a6cd086613c4abcaa122afdbea56
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
138
Assets/Resources/UIToolkit/Label/UTKLabel.uss
Normal file
138
Assets/Resources/UIToolkit/Label/UTKLabel.uss
Normal file
@@ -0,0 +1,138 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKLabel.uss
|
||||
* 텍스트 라벨 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-label {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-label__text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Size Variants
|
||||
=================================== */
|
||||
|
||||
.utk-label--h1 .utk-label__text {
|
||||
font-size: var(--font-size-h1);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-label--h2 .utk-label__text {
|
||||
font-size: var(--font-size-h2);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-label--h3 .utk-label__text {
|
||||
font-size: var(--font-size-h3);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-label--body1 .utk-label__text {
|
||||
font-size: var(--font-size-body1);
|
||||
}
|
||||
|
||||
.utk-label--body2 .utk-label__text {
|
||||
font-size: var(--font-size-body2);
|
||||
}
|
||||
|
||||
.utk-label--label1 .utk-label__text {
|
||||
font-size: var(--font-size-label1);
|
||||
}
|
||||
|
||||
.utk-label--label2 .utk-label__text {
|
||||
font-size: var(--font-size-label2);
|
||||
}
|
||||
|
||||
.utk-label--label3 .utk-label__text {
|
||||
font-size: var(--font-size-label3);
|
||||
}
|
||||
|
||||
.utk-label--caption .utk-label__text {
|
||||
font-size: var(--font-size-label4);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Color Variants
|
||||
=================================== */
|
||||
|
||||
.utk-label--primary .utk-label__text {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-label--secondary .utk-label__text {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.utk-label--disabled .utk-label__text {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-label--success .utk-label__text {
|
||||
color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-label--warning .utk-label__text {
|
||||
color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-label--error .utk-label__text {
|
||||
color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-label--info .utk-label__text {
|
||||
color: var(--color-state-info);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Font Style
|
||||
=================================== */
|
||||
|
||||
.utk-label--bold .utk-label__text {
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-label--italic .utk-label__text {
|
||||
-unity-font-style: italic;
|
||||
}
|
||||
|
||||
.utk-label--bold.utk-label--italic .utk-label__text {
|
||||
-unity-font-style: bold-and-italic;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Text Alignment
|
||||
=================================== */
|
||||
|
||||
.utk-label--left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.utk-label--left .utk-label__text {
|
||||
-unity-text-align: middle-left;
|
||||
}
|
||||
|
||||
.utk-label--center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.utk-label--center .utk-label__text {
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.utk-label--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.utk-label--right .utk-label__text {
|
||||
-unity-text-align: middle-right;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Label/UTKLabel.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Label/UTKLabel.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: ba4afab5648d05542a67be81b62b3ceb
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
@@ -1,19 +1,17 @@
|
||||
:root {
|
||||
--accordion-bg: rgb(37, 37, 38);
|
||||
--accordion-header-bg: rgb(45, 45, 46);
|
||||
--accordion-header-hover: rgb(55, 55, 56);
|
||||
--accordion-body-bg: rgb(37, 37, 38);
|
||||
--accordion-item-hover: rgb(50, 50, 52);
|
||||
--accordion-item-selected: rgb(0, 92, 174);
|
||||
--accordion-border-color: rgb(30, 30, 30);
|
||||
--accordion-text-color: rgb(204, 204, 204);
|
||||
--accordion-text-muted: rgb(150, 150, 150);
|
||||
--accordion-icon-color: rgb(150, 150, 150);
|
||||
--accordion-icon-hover: rgb(200, 200, 200);
|
||||
}
|
||||
/*
|
||||
* ===================================
|
||||
* UTKAccordionList.uss
|
||||
* 테마 변수를 사용하는 아코디언 리스트 스타일
|
||||
* ===================================
|
||||
*
|
||||
* 이 파일은 UTKThemeManager의 테마 변수를 참조합니다.
|
||||
* - 색상: var(--color-*)
|
||||
* - 간격: var(--space-*)
|
||||
* - 반지름: var(--radius-*)
|
||||
*/
|
||||
|
||||
.accordion-list-container {
|
||||
background-color: var(--accordion-bg);
|
||||
background-color: var(--color-bg-panel);
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
@@ -21,7 +19,7 @@
|
||||
|
||||
.accordion-search-field {
|
||||
height: 24px;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 var(--space-m) 0;
|
||||
}
|
||||
|
||||
.accordion-clear-button {
|
||||
@@ -33,21 +31,21 @@
|
||||
background-color: transparent;
|
||||
background-image: resource('UIToolkit/Images/btn_close_16');
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
right: var(--space-s);
|
||||
align-self: center;
|
||||
-unity-background-image-tint-color: rgb(180, 180, 180);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.accordion-clear-button:hover {
|
||||
-unity-background-image-tint-color: rgb(220, 220, 220);
|
||||
-unity-background-image-tint-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.accordion-search-result-label {
|
||||
color: var(--accordion-text-muted);
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-label3);
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
|
||||
margin-bottom: 8px;
|
||||
padding-left: 4px;
|
||||
margin-bottom: var(--space-m);
|
||||
padding-left: var(--space-s);
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@@ -64,7 +62,7 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: resource('UIToolkit/Images/icon_right_22');
|
||||
-unity-background-image-tint-color: var(--accordion-icon-color);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
rotate: 0;
|
||||
}
|
||||
|
||||
@@ -78,12 +76,12 @@
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
background-color: rgb(80, 80, 82);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-scroller-dragger-normal);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: rgb(100, 100, 102);
|
||||
background-color: var(--color-scroller-dragger-hover);
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-tree-view__item {
|
||||
@@ -121,17 +119,17 @@
|
||||
}
|
||||
|
||||
.accordion-section-row {
|
||||
background-color: var(--accordion-header-bg);
|
||||
background-color: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.accordion-section-row:hover {
|
||||
background-color: var(--accordion-header-hover);
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.accordion-section-row .unity-tree-view__item-toggle {
|
||||
display: flex;
|
||||
width: 16px;
|
||||
margin-left: 4px;
|
||||
margin-left: var(--space-s);
|
||||
}
|
||||
|
||||
.accordion-item-container {
|
||||
@@ -147,12 +145,12 @@
|
||||
}
|
||||
|
||||
.accordion-sections-container .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
background-color: rgb(80, 80, 82);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-scroller-dragger-normal);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.accordion-sections-container .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: rgb(100, 100, 102);
|
||||
background-color: var(--color-scroller-dragger-hover);
|
||||
}
|
||||
|
||||
.accordion-section {
|
||||
@@ -166,7 +164,7 @@
|
||||
height: 30px;
|
||||
background-color: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 8px;
|
||||
padding-right: var(--space-m);
|
||||
}
|
||||
|
||||
.accordion-section-header:hover {
|
||||
@@ -183,18 +181,18 @@
|
||||
|
||||
.accordion-section-title {
|
||||
flex-grow: 1;
|
||||
color: var(--accordion-text-color);
|
||||
font-size: 12px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-style: bold;
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-SemiBold');
|
||||
padding-left: 4px;
|
||||
padding-left: var(--space-s);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.accordion-section-body {
|
||||
background-color: var(--accordion-body-bg);
|
||||
background-color: var(--color-bg-panel);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -207,23 +205,23 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 25px;
|
||||
padding: 0 8px 0 28px;
|
||||
padding: 0 var(--space-m) 0 28px;
|
||||
background-color: transparent;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.accordion-horizontal-item:hover {
|
||||
background-color: var(--accordion-item-hover);
|
||||
background-color: var(--color-collection-item-hover);
|
||||
}
|
||||
|
||||
.accordion-horizontal-item.selected {
|
||||
background-color: var(--accordion-item-selected);
|
||||
background-color: var(--color-collection-item-selected);
|
||||
}
|
||||
|
||||
.accordion-head-container {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
margin-right: var(--space-s);
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -250,8 +248,8 @@
|
||||
}
|
||||
|
||||
.accordion-content-label {
|
||||
color: var(--accordion-text-color);
|
||||
font-size: 12px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -259,7 +257,7 @@
|
||||
}
|
||||
|
||||
.accordion-horizontal-item.selected .accordion-content-label {
|
||||
color: white;
|
||||
color: var(--color-base-01);
|
||||
}
|
||||
|
||||
.accordion-tail-container {
|
||||
@@ -281,18 +279,18 @@
|
||||
|
||||
.accordion-tail-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.accordion-tail-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
-unity-background-scale-mode: scale-to-fit;
|
||||
-unity-background-image-tint-color: var(--accordion-icon-color);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.accordion-tail-button:hover .accordion-tail-icon {
|
||||
-unity-background-image-tint-color: var(--accordion-icon-hover);
|
||||
-unity-background-image-tint-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.accordion-grid-row {
|
||||
@@ -309,24 +307,24 @@
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
margin: var(--space-xs);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
transition-duration: 0.15s;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.accordion-grid-item:hover {
|
||||
background-color: rgb(60, 60, 64);
|
||||
background-color: var(--color-collection-item-hover);
|
||||
}
|
||||
|
||||
.accordion-grid-item:checked {
|
||||
background-color: var(--accordion-item-selected);
|
||||
background-color: var(--color-collection-item-selected);
|
||||
}
|
||||
|
||||
.accordion-grid-item:checked:hover {
|
||||
background-color: rgb(0, 102, 184);
|
||||
background-color: var(--color-collection-item-selected-hover);
|
||||
}
|
||||
|
||||
.accordion-grid-item--hidden {
|
||||
@@ -338,8 +336,8 @@
|
||||
height: 87px;
|
||||
min-width: 100px;
|
||||
min-height: 75px;
|
||||
background-color: rgb(40, 40, 42);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-bg-input);
|
||||
border-radius: var(--radius-m);
|
||||
margin-bottom: 0;
|
||||
-unity-background-scale-mode: scale-to-fit;
|
||||
flex-shrink: 0;
|
||||
@@ -350,8 +348,8 @@
|
||||
}
|
||||
|
||||
.accordion-grid-caption {
|
||||
color: var(--accordion-text-color);
|
||||
font-size: 11px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-label3);
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
|
||||
-unity-text-align: upper-left;
|
||||
white-space: normal;
|
||||
@@ -363,26 +361,30 @@
|
||||
}
|
||||
|
||||
.accordion-grid-item:checked .accordion-grid-caption {
|
||||
color: white;
|
||||
color: var(--color-base-01);
|
||||
}
|
||||
|
||||
.accordion-grid-container {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 4px;
|
||||
padding-left: 24px;
|
||||
padding: var(--space-s);
|
||||
padding-left: var(--space-xxl);
|
||||
}
|
||||
|
||||
.accordion-grid-image-container {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 4px;
|
||||
background-color: rgb(40, 40, 42);
|
||||
border-radius: 4px;
|
||||
margin-bottom: var(--space-s);
|
||||
background-color: var(--color-bg-input);
|
||||
border-radius: var(--radius-m);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Drag Ghost (dynamically created)
|
||||
=================================== */
|
||||
|
||||
.accordion-drag-ghost {
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
@@ -390,7 +392,7 @@
|
||||
width: 116px;
|
||||
height: 87px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.accordion-drag-ghost .accordion-grid-image {
|
||||
@@ -398,13 +400,26 @@
|
||||
height: 87px;
|
||||
min-width: 116px;
|
||||
min-height: 87px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
/* New theme-aware drag ghost classes */
|
||||
.utk-accordion-drag-ghost {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.utk-accordion-drag-ghost__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-drag-ghost-bg);
|
||||
border-radius: var(--radius-m);
|
||||
-unity-background-scale-mode: scale-to-fit;
|
||||
}
|
||||
|
||||
.accordion-empty-label {
|
||||
color: var(--accordion-text-muted);
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-label3);
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
|
||||
-unity-text-align: middle-center;
|
||||
padding: 20px;
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
121
Assets/Resources/UIToolkit/List/UTKListView.uss
Normal file
121
Assets/Resources/UIToolkit/List/UTKListView.uss
Normal file
@@ -0,0 +1,121 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKListView.uss
|
||||
* Unity ListView 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-listview {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scroll View
|
||||
=================================== */
|
||||
|
||||
.utk-listview > .unity-scroll-view {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
List Items
|
||||
=================================== */
|
||||
|
||||
.utk-listview .unity-list-view__item {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-listview .unity-list-view__item:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.utk-listview .unity-list-view__item:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-listview .unity-list-view__item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-listview .unity-list-view__item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Item Label
|
||||
=================================== */
|
||||
|
||||
.utk-listview .unity-list-view__item > .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-listview .unity-list-view__item--selected > .unity-label {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Alternating Rows
|
||||
=================================== */
|
||||
|
||||
.utk-listview--alternating .unity-list-view__item:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-listview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-listview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Empty State
|
||||
=================================== */
|
||||
|
||||
.utk-listview--empty::after {
|
||||
content: "No items";
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/List/UTKListView.uss.meta
Normal file
11
Assets/Resources/UIToolkit/List/UTKListView.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 6e3628d47dbfa294f8c3bc3a59f34ceb
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
155
Assets/Resources/UIToolkit/List/UTKMultiColumnListView.uss
Normal file
155
Assets/Resources/UIToolkit/List/UTKMultiColumnListView.uss
Normal file
@@ -0,0 +1,155 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKMultiColumnListView.uss
|
||||
* Unity MultiColumnListView 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header {
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background-color: transparent;
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border-light);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column-title {
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Column Resize Handle
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column-resize-handle {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column-resize-handle:hover {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
List Items
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-list-view__item {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border-light);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-list-view__item:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-list-view__item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-list-view__item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Cell Content
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-view__cell {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border-light);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-view__cell:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-view__cell > .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-list-view__item--selected .unity-multi-column-view__cell > .unity-label {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Alternating Rows
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview--alternating .unity-list-view__item:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-multicolumn-listview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Sort Indicator
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column-sort-indicator {
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 5ef1882bb2a54494282198832116277e
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
180
Assets/Resources/UIToolkit/List/UTKMultiColumnTreeView.uss
Normal file
180
Assets/Resources/UIToolkit/List/UTKMultiColumnTreeView.uss
Normal file
@@ -0,0 +1,180 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKMultiColumnTreeView.uss
|
||||
* Unity MultiColumnTreeView 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header {
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background-color: transparent;
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border-light);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column-title {
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Column Resize Handle
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column-resize-handle {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column-resize-handle:hover {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Tree Items
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border-light);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Toggle (Expand/Collapse)
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item-toggle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: var(--space-xs);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: rotate;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item-toggle:checked {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle {
|
||||
-unity-background-image-tint-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Indentation
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item-indents-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item-indent {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Cell Content
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-view__cell {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border-light);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-view__cell:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-view__cell > .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item--selected .unity-multi-column-view__cell > .unity-label {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Sort Indicator
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column-sort-indicator {
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 9512ad13c373364418bea8ea44f8a315
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
122
Assets/Resources/UIToolkit/List/UTKTreeView.uss
Normal file
122
Assets/Resources/UIToolkit/List/UTKTreeView.uss
Normal file
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKTreeView.uss
|
||||
* Unity TreeView 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-treeview {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Tree Items
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-tree-view__item {
|
||||
padding: var(--space-xs) 0;
|
||||
background-color: transparent;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Toggle (Expand/Collapse)
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-tree-view__item-toggle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: var(--space-xs);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: rotate;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item-toggle:checked {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle {
|
||||
-unity-background-image-tint-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Indentation
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-tree-view__item-indents-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item-indent {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Item Content
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-tree-view__item-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-right: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item-content > .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-content > .unity-label {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-treeview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/List/UTKTreeView.uss.meta
Normal file
11
Assets/Resources/UIToolkit/List/UTKTreeView.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 7ef2b4606bf118044acc9a5234e19390
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Modal.meta
Normal file
8
Assets/Resources/UIToolkit/Modal.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 6efcdba06c0bdaa43a85c917cbaf193c
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
132
Assets/Resources/UIToolkit/Modal/UTKAlert.uss
Normal file
132
Assets/Resources/UIToolkit/Modal/UTKAlert.uss
Normal file
@@ -0,0 +1,132 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKAlert.uss
|
||||
* Alert 팝업 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-alert {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
padding: var(--space-xl);
|
||||
background-color: var(--color-bg-modal);
|
||||
border-radius: var(--radius-l);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon Container
|
||||
=================================== */
|
||||
|
||||
.utk-alert__icon-container {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-full);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.utk-alert__icon {
|
||||
font-size: 24px;
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Type Variants - Icons
|
||||
=================================== */
|
||||
|
||||
.utk-alert--info .utk-alert__icon-container {
|
||||
background-color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-alert--info .utk-alert__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-alert--success .utk-alert__icon-container {
|
||||
background-color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-alert--success .utk-alert__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-alert--warning .utk-alert__icon-container {
|
||||
background-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-alert--warning .utk-alert__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-alert--error .utk-alert__icon-container {
|
||||
background-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-alert--error .utk-alert__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-alert--confirm .utk-alert__icon-container {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-alert--confirm .utk-alert__icon {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content
|
||||
=================================== */
|
||||
|
||||
.utk-alert__content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Title
|
||||
=================================== */
|
||||
|
||||
.utk-alert__title {
|
||||
font-size: var(--font-size-h3);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
-unity-text-align: middle-center;
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Message
|
||||
=================================== */
|
||||
|
||||
.utk-alert__message {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Buttons
|
||||
=================================== */
|
||||
|
||||
.utk-alert__buttons {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.utk-alert__btn {
|
||||
min-width: 80px;
|
||||
margin-left: var(--space-s);
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKAlert.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKAlert.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 7abc80fd54e4cbe4b81e83c23a5de327
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
252
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uss
Normal file
252
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uss
Normal file
@@ -0,0 +1,252 @@
|
||||
/* UTKColorPicker.uss - 컬러 피커 스타일 (테마 변수 사용) */
|
||||
|
||||
/* ===================================
|
||||
Root Container
|
||||
=================================== */
|
||||
.utk-color-picker {
|
||||
position: absolute;
|
||||
background-color: var(--color-bg-modal);
|
||||
border-radius: var(--radius-m);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
padding: var(--space-l);
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
.utk-color-picker__header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.utk-color-picker__title {
|
||||
font-size: var(--font-size-h3);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-color-picker__close-btn {
|
||||
width: var(--size-icon-btn);
|
||||
height: var(--size-icon-btn);
|
||||
font-size: var(--font-size-body2);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-color-picker__close-btn:hover {
|
||||
color: var(--color-text-primary);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Color Area
|
||||
=================================== */
|
||||
.utk-color-picker__color-area {
|
||||
flex-direction: row;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
SV Box (Saturation/Value)
|
||||
=================================== */
|
||||
.utk-color-picker__sv-box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-right: var(--space-m);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
/* 배경색은 C# 코드에서 동적으로 설정 */
|
||||
}
|
||||
|
||||
.utk-color-picker__sv-indicator {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
border-width: 2px;
|
||||
border-color: white;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Right Column (Hue + Preview)
|
||||
=================================== */
|
||||
.utk-color-picker__right-column {
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Hue Bar
|
||||
=================================== */
|
||||
.utk-color-picker__hue-bar {
|
||||
width: 25px;
|
||||
height: 150px;
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
margin-bottom: var(--space-m);
|
||||
/* 배경 텍스처는 C# 코드에서 동적으로 설정 */
|
||||
}
|
||||
|
||||
.utk-color-picker__hue-indicator {
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Preview Container
|
||||
=================================== */
|
||||
.utk-color-picker__preview-container {
|
||||
flex-direction: row;
|
||||
height: 40px;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-color-picker__preview-current {
|
||||
flex-grow: 1;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px;
|
||||
}
|
||||
|
||||
.utk-color-picker__preview-original {
|
||||
flex-grow: 1;
|
||||
border-top-right-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Slider Rows
|
||||
=================================== */
|
||||
.utk-color-picker__slider-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: var(--space-s);
|
||||
}
|
||||
|
||||
.utk-color-picker__slider-label {
|
||||
width: 20px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.utk-color-picker__slider {
|
||||
flex-grow: 1;
|
||||
margin-left: var(--space-s);
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
|
||||
/* Slider 트랙 스타일 */
|
||||
.utk-color-picker__slider .unity-base-slider__tracker {
|
||||
background-color: var(--color-bg-input);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
height: 12px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
/* Slider 드래거 스타일 */
|
||||
.utk-color-picker__slider .unity-base-slider__dragger {
|
||||
background-color: var(--color-btn-primary);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-color-picker__slider .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-color-picker__slider-field {
|
||||
width: 50px;
|
||||
font-size: var(--font-size-body2);
|
||||
}
|
||||
|
||||
/* IntegerField 내부 input 스타일 (Unity의 BaseField 구조) */
|
||||
.utk-color-picker__slider-field .unity-base-text-field__input {
|
||||
background-color: var(--color-bg-input);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Hex Row
|
||||
=================================== */
|
||||
.utk-color-picker__hex-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-color-picker__hex-label {
|
||||
width: 40px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.utk-color-picker__hex-field {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* TextField 내부 input 스타일 (Unity의 BaseField 구조) */
|
||||
.utk-color-picker__hex-field .unity-base-text-field__input {
|
||||
background-color: var(--color-bg-input);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Button Row
|
||||
=================================== */
|
||||
.utk-color-picker__button-row {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.utk-color-picker__cancel-btn {
|
||||
margin-right: var(--space-m);
|
||||
width: var(--size-btn-min-width);
|
||||
height: var(--size-btn-height);
|
||||
font-size: var(--font-size-body2);
|
||||
background-color: var(--color-btn-normal);
|
||||
color: var(--color-text-primary);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-color-picker__cancel-btn:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-color-picker__confirm-btn {
|
||||
width: var(--size-btn-min-width);
|
||||
height: var(--size-btn-height);
|
||||
font-size: var(--font-size-body2);
|
||||
background-color: var(--color-btn-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border-width: 0;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-color-picker__confirm-btn:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 7ae6523e61765d84caaec92e84dcc017
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
51
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uxml
Normal file
51
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uxml
Normal file
@@ -0,0 +1,51 @@
|
||||
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
|
||||
<Style src="project://database/Assets/Resources/UIToolkit/Modal/UTKColorPicker.uss?fileID=7433441132597879392&guid=7ae6523e61765d84caaec92e84dcc017&type=3#UTKColorPicker" />
|
||||
<ui:VisualElement name="root" class="utk-color-picker">
|
||||
<ui:VisualElement name="header" class="utk-color-picker__header">
|
||||
<ui:Label name="title" text="Color Picker" class="utk-color-picker__title" />
|
||||
<ui:Button name="close-btn" text="✕" class="utk-color-picker__close-btn" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="color-area" class="utk-color-picker__color-area">
|
||||
<ui:VisualElement name="sv-box" class="utk-color-picker__sv-box">
|
||||
<ui:VisualElement name="sv-indicator" picking-mode="Ignore" class="utk-color-picker__sv-indicator" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="right-column" class="utk-color-picker__right-column">
|
||||
<ui:VisualElement name="hue-bar" class="utk-color-picker__hue-bar">
|
||||
<ui:VisualElement name="hue-indicator" picking-mode="Ignore" class="utk-color-picker__hue-indicator" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="preview-container" class="utk-color-picker__preview-container">
|
||||
<ui:VisualElement name="preview-current" class="utk-color-picker__preview-current" />
|
||||
<ui:VisualElement name="preview-original" class="utk-color-picker__preview-original" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="row-r" class="utk-color-picker__slider-row">
|
||||
<ui:Label text="R" class="utk-color-picker__slider-label" />
|
||||
<ui:Slider name="slider-r" low-value="0" high-value="255" class="utk-color-picker__slider" />
|
||||
<ui:IntegerField name="field-r" class="utk-color-picker__slider-field" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="row-g" class="utk-color-picker__slider-row">
|
||||
<ui:Label text="G" class="utk-color-picker__slider-label" />
|
||||
<ui:Slider name="slider-g" low-value="0" high-value="255" class="utk-color-picker__slider" />
|
||||
<ui:IntegerField name="field-g" class="utk-color-picker__slider-field" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="row-b" class="utk-color-picker__slider-row">
|
||||
<ui:Label text="B" class="utk-color-picker__slider-label" />
|
||||
<ui:Slider name="slider-b" low-value="0" high-value="255" class="utk-color-picker__slider" />
|
||||
<ui:IntegerField name="field-b" class="utk-color-picker__slider-field" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="row-a" class="utk-color-picker__slider-row">
|
||||
<ui:Label text="A" class="utk-color-picker__slider-label" />
|
||||
<ui:Slider name="slider-a" low-value="0" high-value="255" class="utk-color-picker__slider" />
|
||||
<ui:IntegerField name="field-a" class="utk-color-picker__slider-field" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="hex-row" class="utk-color-picker__hex-row">
|
||||
<ui:Label name="hex-label" text="Hex:" class="utk-color-picker__hex-label" />
|
||||
<ui:TextField name="hex-field" class="utk-color-picker__hex-field" />
|
||||
</ui:VisualElement>
|
||||
<ui:VisualElement name="button-row" class="utk-color-picker__button-row">
|
||||
<ui:Button name="cancel-btn" text="Cancel" class="utk-color-picker__cancel-btn" />
|
||||
<ui:Button name="confirm-btn" text="OK" class="utk-color-picker__confirm-btn" />
|
||||
</ui:VisualElement>
|
||||
</ui:VisualElement>
|
||||
</ui:UXML>
|
||||
10
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uxml.meta
Normal file
10
Assets/Resources/UIToolkit/Modal/UTKColorPicker.uxml.meta
Normal file
@@ -0,0 +1,10 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 40262d70405954948964edafa2ed92c6
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
|
||||
277
Assets/Resources/UIToolkit/Modal/UTKDatePicker.uss
Normal file
277
Assets/Resources/UIToolkit/Modal/UTKDatePicker.uss
Normal file
@@ -0,0 +1,277 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKDatePicker.uss
|
||||
* 날짜 피커 모달 스타일
|
||||
* ===================================
|
||||
*
|
||||
* 테마 변수를 사용하여 Light/Dark 테마를 지원합니다.
|
||||
* 색상 변수는 UTKThemeDark.uss / UTKThemeLight.uss에서 정의됩니다.
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Root Container
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker {
|
||||
position: absolute;
|
||||
background-color: var(--color-bg-modal);
|
||||
border-radius: var(--radius-l);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
padding: var(--space-l);
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
.utk-date-picker__title {
|
||||
font-size: var(--font-size-h3);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-date-picker__close-btn {
|
||||
width: var(--size-icon-btn);
|
||||
height: var(--size-icon-btn);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-body2);
|
||||
}
|
||||
|
||||
.utk-date-picker__close-btn:hover {
|
||||
color: var(--color-text-primary);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Navigation Row
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__nav-row {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-date-picker__nav-group {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-date-picker__nav-btn {
|
||||
width: var(--size-nav-btn);
|
||||
height: var(--size-nav-btn);
|
||||
background-color: var(--color-btn-normal);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-h2);
|
||||
}
|
||||
|
||||
.utk-date-picker__nav-btn:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-date-picker__nav-btn:active {
|
||||
background-color: var(--color-btn-pressed);
|
||||
}
|
||||
|
||||
.utk-date-picker__nav-btn--prev-year {
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
|
||||
.utk-date-picker__nav-btn--next-year {
|
||||
margin-left: var(--space-s);
|
||||
}
|
||||
|
||||
.utk-date-picker__year-month-label {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body1);
|
||||
-unity-text-align: middle-center;
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Weekday Header
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__day-names {
|
||||
flex-direction: row;
|
||||
margin-bottom: var(--space-s);
|
||||
padding-bottom: var(--space-s);
|
||||
border-bottom-width: var(--border-width);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-name {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
-unity-text-align: middle-center;
|
||||
font-size: var(--font-size-label3);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-name--sunday {
|
||||
color: var(--color-calendar-sunday);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-name--saturday {
|
||||
color: var(--color-calendar-saturday);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Calendar Grid
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__calendar-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
height: 28px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
font-size: var(--font-size-body2);
|
||||
border-width: 0;
|
||||
border-radius: var(--radius-s);
|
||||
background-color: transparent;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn:disabled {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--sunday {
|
||||
color: var(--color-calendar-sunday);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--saturday {
|
||||
color: var(--color-calendar-saturday);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--today {
|
||||
color: var(--color-calendar-today);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--selected {
|
||||
background-color: var(--color-calendar-selected);
|
||||
color: var(--color-text-on-primary);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--other-month {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Time Picker Row
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__time-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: var(--space-l);
|
||||
padding-top: var(--space-l);
|
||||
border-top-width: var(--border-width);
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-date-picker__time-label {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-body2);
|
||||
margin-right: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-date-picker__time-stepper {
|
||||
width: 70px;
|
||||
height: var(--size-input-height);
|
||||
}
|
||||
|
||||
.utk-date-picker__time-separator {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body2);
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Button Row
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__button-row {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.utk-date-picker__cancel-btn {
|
||||
margin-right: var(--space-m);
|
||||
width: var(--size-btn-min-width);
|
||||
height: var(--size-btn-height);
|
||||
font-size: var(--font-size-body2);
|
||||
background-color: var(--color-btn-normal);
|
||||
color: var(--color-text-primary);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-date-picker__cancel-btn:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-date-picker__confirm-btn {
|
||||
width: var(--size-btn-min-width);
|
||||
height: var(--size-btn-height);
|
||||
font-size: var(--font-size-body2);
|
||||
background-color: var(--color-btn-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border-width: 0;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-date-picker__confirm-btn:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-date-picker__today-btn {
|
||||
margin-right: auto;
|
||||
width: 60px;
|
||||
height: var(--size-btn-height);
|
||||
background-color: transparent;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-label3);
|
||||
}
|
||||
|
||||
.utk-date-picker__today-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKDatePicker.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKDatePicker.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: cbbed4896e3757b45b89e62ac9df576e
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
112
Assets/Resources/UIToolkit/Modal/UTKModal.uss
Normal file
112
Assets/Resources/UIToolkit/Modal/UTKModal.uss
Normal file
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKModal.uss
|
||||
* 모달 창 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-modal {
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg-modal);
|
||||
border-radius: var(--radius-l);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Size Variants
|
||||
=================================== */
|
||||
|
||||
.utk-modal--small {
|
||||
width: 320px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.utk-modal--medium {
|
||||
width: 480px;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.utk-modal--large {
|
||||
width: 640px;
|
||||
max-height: 800px;
|
||||
}
|
||||
|
||||
.utk-modal--fullscreen {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-modal__header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border-bottom-width: var(--border-width);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Title
|
||||
=================================== */
|
||||
|
||||
.utk-modal__title {
|
||||
font-size: var(--font-size-h3);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Close Button
|
||||
=================================== */
|
||||
|
||||
.utk-modal__close-btn {
|
||||
width: var(--size-icon-btn);
|
||||
height: var(--size-icon-btn);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-body2);
|
||||
border-radius: var(--radius-s);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
.utk-modal__close-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content
|
||||
=================================== */
|
||||
|
||||
.utk-modal__content {
|
||||
flex-grow: 1;
|
||||
padding: var(--space-l);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Footer
|
||||
=================================== */
|
||||
|
||||
.utk-modal__footer {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border-top-width: var(--border-width);
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKModal.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKModal.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: dea65574cc82b744db024a1db4622c80
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
12
Assets/Resources/UIToolkit/Modal/UTKModalBlocker.uss
Normal file
12
Assets/Resources/UIToolkit/Modal/UTKModalBlocker.uss
Normal file
@@ -0,0 +1,12 @@
|
||||
/* UTKModalBlocker.uss - 모달 블로커 스타일 */
|
||||
|
||||
.utk-modal-blocker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
transition-duration: 200ms;
|
||||
transition-property: background-color;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKModalBlocker.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKModalBlocker.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: c5a92ce2e45c3854f92c937cff83bed6
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
133
Assets/Resources/UIToolkit/Modal/UTKNotification.uss
Normal file
133
Assets/Resources/UIToolkit/Modal/UTKNotification.uss
Normal file
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKNotification.uss
|
||||
* 알림 창 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-notification {
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
padding: var(--space-m);
|
||||
background-color: var(--color-bg-modal);
|
||||
border-radius: var(--radius-m);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Type Variants
|
||||
=================================== */
|
||||
|
||||
.utk-notification--info {
|
||||
border-left-width: 4px;
|
||||
border-left-color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-notification--success {
|
||||
border-left-width: 4px;
|
||||
border-left-color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-notification--warning {
|
||||
border-left-width: 4px;
|
||||
border-left-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-notification--error {
|
||||
border-left-width: 4px;
|
||||
border-left-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-notification__header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon
|
||||
=================================== */
|
||||
|
||||
.utk-notification__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: var(--space-s);
|
||||
font-size: 14px;
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
.utk-notification--info .utk-notification__icon {
|
||||
color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-notification--success .utk-notification__icon {
|
||||
color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-notification--warning .utk-notification__icon {
|
||||
color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-notification--error .utk-notification__icon {
|
||||
color: var(--color-state-error);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Title
|
||||
=================================== */
|
||||
|
||||
.utk-notification__title {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body1);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Close Button
|
||||
=================================== */
|
||||
|
||||
.utk-notification__close-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 10px;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-notification__close-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Message
|
||||
=================================== */
|
||||
|
||||
.utk-notification__message {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: normal;
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Actions
|
||||
=================================== */
|
||||
|
||||
.utk-notification__actions {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--space-s);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKNotification.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKNotification.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 54de9d31de2dc2e4ab6f6937f4563a4b
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
121
Assets/Resources/UIToolkit/Modal/UTKPanel.uss
Normal file
121
Assets/Resources/UIToolkit/Modal/UTKPanel.uss
Normal file
@@ -0,0 +1,121 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKPanel.uss
|
||||
* 패널 컨테이너 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-panel {
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg-panel);
|
||||
border-radius: var(--radius-m);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Variants
|
||||
=================================== */
|
||||
|
||||
.utk-panel--default {
|
||||
background-color: var(--color-bg-panel);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-panel--elevated {
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-panel--outlined {
|
||||
background-color: transparent;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-panel--flat {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-panel__header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border-bottom-width: var(--border-width);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-panel--flat .utk-panel__header {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.utk-panel--collapsible .utk-panel__header {
|
||||
cursor: link;
|
||||
}
|
||||
|
||||
.utk-panel--collapsible .utk-panel__header:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Title
|
||||
=================================== */
|
||||
|
||||
.utk-panel__title {
|
||||
font-size: var(--font-size-body1);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header Actions
|
||||
=================================== */
|
||||
|
||||
.utk-panel__header-actions {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content
|
||||
=================================== */
|
||||
|
||||
.utk-panel__content {
|
||||
flex-grow: 1;
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
.utk-panel--collapsed .utk-panel__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Footer
|
||||
=================================== */
|
||||
|
||||
.utk-panel__footer {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border-top-width: var(--border-width);
|
||||
border-top-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-panel--flat .utk-panel__footer {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.utk-panel--collapsed .utk-panel__footer {
|
||||
display: none;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKPanel.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKPanel.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 2c1cfb237fa5a2b448b6cb4f272a918d
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
104
Assets/Resources/UIToolkit/Modal/UTKToast.uss
Normal file
104
Assets/Resources/UIToolkit/Modal/UTKToast.uss
Normal file
@@ -0,0 +1,104 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKToast.uss
|
||||
* 토스트 알림 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Container
|
||||
=================================== */
|
||||
|
||||
.utk-toast {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
background-color: var(--color-bg-tooltip);
|
||||
border-radius: var(--radius-m);
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon
|
||||
=================================== */
|
||||
|
||||
.utk-toast__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: 14px;
|
||||
-unity-text-align: middle-center;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Type Variants
|
||||
=================================== */
|
||||
|
||||
.utk-toast--info {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-toast--info .utk-toast__icon {
|
||||
color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-toast--success {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-toast--success .utk-toast__icon {
|
||||
color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-toast--warning {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-toast--warning .utk-toast__icon {
|
||||
color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-toast--error {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-toast--error .utk-toast__icon {
|
||||
color: var(--color-state-error);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Message
|
||||
=================================== */
|
||||
|
||||
.utk-toast__message {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Close Button
|
||||
=================================== */
|
||||
|
||||
.utk-toast__close-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: var(--space-m);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 10px;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-toast__close-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Modal/UTKToast.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Modal/UTKToast.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 9248b856a8f7b9d4f9bccbb6e7ca5df6
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Property.meta
Normal file
8
Assets/Resources/UIToolkit/Property.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: eeaca9ed10799e14790c67f788530585
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
8
Assets/Resources/UIToolkit/Property/Items.meta
Normal file
8
Assets/Resources/UIToolkit/Property/Items.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 6cb5ab7a40776b0479114d3cf76e5054
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
364
Assets/Resources/UIToolkit/Property/UTKPropertyCommon.uss
Normal file
364
Assets/Resources/UIToolkit/Property/UTKPropertyCommon.uss
Normal file
@@ -0,0 +1,364 @@
|
||||
/* UTKPropertyCommon.uss - 속성 공통 스타일 */
|
||||
/* 테마 시스템 CSS 변수 사용 (UTKThemeDark.uss / UTKThemeLight.uss) */
|
||||
|
||||
/* ===================================
|
||||
Property List Container
|
||||
=================================== */
|
||||
.utk-property-list {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-bg-panel);
|
||||
}
|
||||
|
||||
.utk-property-list__search-container {
|
||||
flex-direction: row;
|
||||
padding: var(--space-m);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.utk-property-list__search-field {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.utk-property-list__search-placeholder {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 50%;
|
||||
translate: 0 -50%;
|
||||
color: var(--color-text-placeholder);
|
||||
font-size: var(--font-size-body2);
|
||||
}
|
||||
|
||||
.utk-property-list__tree-view {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Property Item Container
|
||||
=================================== */
|
||||
.utk-property-item-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Property Item 공통 스타일
|
||||
=================================== */
|
||||
.utk-property-item {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 3px var(--space-m);
|
||||
border-bottom-width: var(--border-width);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-property-item:hover {
|
||||
background-color: var(--color-collection-item-hover);
|
||||
}
|
||||
|
||||
.utk-property-item--readonly {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.utk-property-item--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
=================================== */
|
||||
.utk-property-item__label {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body2);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-unity-text-overflow-position: end;
|
||||
white-space: nowrap;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Value 영역
|
||||
=================================== */
|
||||
.utk-property-item__value {
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
TextField 공통
|
||||
=================================== */
|
||||
.utk-property-item TextField,
|
||||
.utk-property-item IntegerField,
|
||||
.utk-property-item FloatField {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.utk-property-item TextField .unity-text-field__input,
|
||||
.utk-property-item IntegerField .unity-integer-field__input,
|
||||
.utk-property-item 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 TextField:focus .unity-text-field__input,
|
||||
.utk-property-item IntegerField:focus .unity-integer-field__input,
|
||||
.utk-property-item FloatField:focus .unity-float-field__input {
|
||||
border-color: var(--color-border-focus);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Toggle
|
||||
=================================== */
|
||||
.utk-property-item Toggle {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.utk-property-item 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 Toggle:checked .unity-toggle__checkmark {
|
||||
background-color: var(--color-btn-primary);
|
||||
border-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Slider
|
||||
=================================== */
|
||||
.utk-property-item Slider {
|
||||
flex-grow: 1;
|
||||
margin-left: var(--space-m);
|
||||
margin-right: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-property-item 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 Slider .unity-base-slider__tracker {
|
||||
height: 4px;
|
||||
background-color: var(--color-base-12);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
SliderInt
|
||||
=================================== */
|
||||
.utk-property-item SliderInt {
|
||||
flex-grow: 1;
|
||||
margin-left: var(--space-m);
|
||||
margin-right: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-property-item 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 SliderInt .unity-base-slider__tracker {
|
||||
height: 4px;
|
||||
background-color: var(--color-base-12);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Dropdown
|
||||
=================================== */
|
||||
.utk-property-item DropdownField {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.utk-property-item 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__picker-btn {
|
||||
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__picker-btn:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Color Preview
|
||||
=================================== */
|
||||
.utk-property-item__color-preview {
|
||||
width: 60px;
|
||||
height: 22px;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Vector 필드
|
||||
=================================== */
|
||||
.utk-property-item--vector2 .utk-property-item__value,
|
||||
.utk-property-item--vector3 .utk-property-item__value {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-property-item__vector-field {
|
||||
flex-grow: 1;
|
||||
margin-right: var(--space-m);
|
||||
}
|
||||
|
||||
.utk-property-item__vector-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.utk-property-item__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__state-label {
|
||||
flex-grow: 1;
|
||||
-unity-text-align: middle-left;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Range 필드
|
||||
=================================== */
|
||||
.utk-property-item__range-separator {
|
||||
color: var(--color-text-secondary);
|
||||
margin-left: var(--space-m);
|
||||
margin-right: var(--space-m);
|
||||
font-size: var(--font-size-body2);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Group Header
|
||||
=================================== */
|
||||
.utk-property-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.utk-property-group__header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom-width: var(--border-width);
|
||||
border-bottom-color: var(--color-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.utk-property-group__header:hover {
|
||||
background-color: var(--color-collection-item-hover);
|
||||
}
|
||||
|
||||
.utk-property-group__expand-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
margin-right: var(--space-m);
|
||||
transition: rotate var(--anim-fast) ease-out;
|
||||
}
|
||||
|
||||
.utk-property-group--collapsed .utk-property-group__expand-icon {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
.utk-property-group__title {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-property-group__count {
|
||||
font-size: var(--font-size-label4);
|
||||
color: var(--color-text-secondary);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.utk-property-group__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.utk-property-group--collapsed .utk-property-group__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Description 영역
|
||||
=================================== */
|
||||
.utk-property-item__description {
|
||||
font-size: var(--font-size-label4);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Int/Float 슬라이더 모드
|
||||
=================================== */
|
||||
.utk-property-item--slider .utk-property-item__value {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.utk-property-item--slider .utk-property-item__slider {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.utk-property-item--slider .utk-property-item__number-field {
|
||||
width: 60px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 43ab82593a6aab947a50de637b2aff82
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
62
Assets/Resources/UIToolkit/Property/UTKPropertyWindow.uss
Normal file
62
Assets/Resources/UIToolkit/Property/UTKPropertyWindow.uss
Normal file
@@ -0,0 +1,62 @@
|
||||
/* UTKPropertyWindow.uss - 윈도우 스타일 (테마 시스템 적용) */
|
||||
|
||||
.utk-property-window {
|
||||
position: absolute;
|
||||
background-color: var(--color-bg-panel);
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
border-color: var(--color-border);
|
||||
min-width: 300px;
|
||||
min-height: 200px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.utk-property-window__header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding-left: 10px;
|
||||
padding-right: 5px;
|
||||
background-color: var(--color-bg-modal);
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.utk-property-window__title {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
.utk-property-window__close-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.utk-property-window__close-btn:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-property-window__close-btn:active {
|
||||
background-color: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.utk-property-window__content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* PropertyList 내부 스타일 오버라이드 */
|
||||
.utk-property-window .utk-property-list {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: f9d09b438b4037f4882690134b40529d
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
8
Assets/Resources/UIToolkit/Sample.meta
Normal file
8
Assets/Resources/UIToolkit/Sample.meta
Normal file
@@ -0,0 +1,8 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 5cd9bd6d5b687884c8fdbf24bcf70d8e
|
||||
folderAsset: yes
|
||||
DefaultImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
234
Assets/Resources/UIToolkit/Sample/UTKStyleGuideSample.uss
Normal file
234
Assets/Resources/UIToolkit/Sample/UTKStyleGuideSample.uss
Normal file
@@ -0,0 +1,234 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKStyleGuideSample.uss
|
||||
* Style Guide Sample Theme-aware Styles
|
||||
* ===================================
|
||||
*
|
||||
* Uses theme variables for Light/Dark theme support.
|
||||
* Color variables are defined in UTKThemeDark.uss / UTKThemeLight.uss.
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Main Container
|
||||
=================================== */
|
||||
|
||||
.utk-sample-main {
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg-base);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Header
|
||||
=================================== */
|
||||
|
||||
.utk-sample-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-sample-title {
|
||||
font-size: 24px;
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-sample-theme-area {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.utk-sample-theme-label {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content (Sidebar + Preview)
|
||||
=================================== */
|
||||
|
||||
.utk-sample-content {
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Sidebar
|
||||
=================================== */
|
||||
|
||||
.utk-sample-sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-sample-sidebar-scroll {
|
||||
flex-grow: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.utk-sample-sidebar-scroll > .utk-foldout {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Control Item (in sidebar)
|
||||
=================================== */
|
||||
|
||||
.utk-sample-control-item {
|
||||
padding: 8px 12px;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
cursor: link;
|
||||
transition-duration: 0.15s;
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-sample-control-item:hover {
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
.utk-sample-control-item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-sample-control-item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-sample-control-item > Label {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-sample-control-item--selected > Label {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Preview Area
|
||||
=================================== */
|
||||
|
||||
.utk-sample-preview {
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.utk-sample-preview-title {
|
||||
font-size: 20px;
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
padding: 20px 24px;
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-sample-preview-scroll {
|
||||
flex-grow: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.utk-sample-preview-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Section (in preview)
|
||||
=================================== */
|
||||
|
||||
.utk-sample-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.utk-sample-section__title {
|
||||
font-size: 14px;
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--color-border-light);
|
||||
}
|
||||
|
||||
.utk-sample-section__desc {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Row (horizontal layout)
|
||||
=================================== */
|
||||
|
||||
.utk-sample-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.utk-sample-row > * {
|
||||
margin-right: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Legacy Styles (backward compatibility)
|
||||
=================================== */
|
||||
|
||||
.utk-sample-stepper-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.utk-sample-stepper-label {
|
||||
width: 100px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-sample-button-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.utk-sample-button-row > * {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.utk-sample-slider-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.utk-sample-slider-row > Label {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.utk-sample-card-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.utk-sample-card-row > * {
|
||||
margin-right: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 75552633a0e64384894930c530fe73e1
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
429
Assets/Resources/UIToolkit/Settings/UTKComponents.uss
Normal file
429
Assets/Resources/UIToolkit/Settings/UTKComponents.uss
Normal file
@@ -0,0 +1,429 @@
|
||||
/*
|
||||
* ===================================
|
||||
* 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);
|
||||
background-color: var(--color-bg-input);
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-body1);
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
}
|
||||
|
||||
.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); }
|
||||
11
Assets/Resources/UIToolkit/Settings/UTKComponents.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Settings/UTKComponents.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 8891f6df576b60f4698429e0dcbe8095
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
@@ -1,12 +1,24 @@
|
||||
/*
|
||||
* ===================================
|
||||
* DefaultStyle.uss
|
||||
* UTKDefaultStyle.uss
|
||||
* UI Toolkit 공통 기본 스타일시트
|
||||
* ===================================
|
||||
*
|
||||
* 이 파일은 UI Toolkit 컴포넌트들의 기본 스타일을 정의합니다.
|
||||
* Unity의 기본 UI 요소들을 커스터마이징하여 일관된 디자인을 적용합니다.
|
||||
*
|
||||
* [테마 시스템]
|
||||
* 테마 전환이 필요한 경우 UTKThemeManager를 사용하세요:
|
||||
* - UTKVariables.uss : 공통 레이아웃 변수
|
||||
* - UTKThemeDark.uss / UTKThemeLight.uss : 테마별 색상 변수
|
||||
* - UTKComponents.uss : 재사용 컴포넌트 클래스
|
||||
*
|
||||
* 사용법: UTKThemeManager.Instance.RegisterRoot(rootVisualElement);
|
||||
*
|
||||
* [호환성]
|
||||
* 이 파일은 기존 코드 호환성을 위해 모든 변수를 포함합니다.
|
||||
* 새로운 컴포넌트는 UTKThemeManager를 통해 테마 스타일시트를 사용하세요.
|
||||
*
|
||||
* 주요 스타일 섹션:
|
||||
* 1. 드롭다운 팝업 스타일
|
||||
* 2. TreeView 항목 스타일
|
||||
@@ -19,26 +31,251 @@
|
||||
/* 전체 텍스트 요소에 적용 */
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
|
||||
|
||||
/* 스크롤바 드래거 색상 변수 (코드에서 참조) */
|
||||
--scroller-dragger-normal: #333333;
|
||||
--scroller-dragger-hover: #525252;
|
||||
--scroller-dragger-active: #333333;
|
||||
/* ===================================
|
||||
Base Colors (color-base-*)
|
||||
=================================== */
|
||||
--color-base-01: #FFFFFF;
|
||||
--color-base-02: #F0F0F0;
|
||||
--color-base-03: #E7E7E7;
|
||||
--color-base-04: #E5E5E5;
|
||||
--color-base-05: #D4D4D4;
|
||||
--color-base-06: #CCCCCC;
|
||||
--color-base-07: #C6C6C6;
|
||||
--color-base-08: #BBBBBB;
|
||||
--color-base-09: #A0A0A0;
|
||||
--color-base-10: #888080;
|
||||
--color-base-11: #7F7F7F;
|
||||
--color-base-12: #606060;
|
||||
--color-base-13: #454545;
|
||||
--color-base-14: #3C3C3C;
|
||||
--color-base-15: #3A3D41;
|
||||
--color-base-16: #333333;
|
||||
--color-base-17: #303031;
|
||||
--color-base-18: #292929;
|
||||
--color-base-19: #252526;
|
||||
--color-base-20: #1E1E1E;
|
||||
--color-base-21: #000000;
|
||||
|
||||
/* 스크롤바 트래커(배경) 색상 변수 (코드에서 참조) */
|
||||
--scroller-tracker-normal: rgba(0, 0, 0, 0);
|
||||
--scroller-tracker-hover: rgba(26, 26, 26, 0);
|
||||
|
||||
/* 일반 항목의 기본 배경색 #252526 */
|
||||
--collection-item: rgba(37, 37, 38, 0);
|
||||
/* ===================================
|
||||
Accent Colors - Blue (color-blue-*)
|
||||
=================================== */
|
||||
--color-blue-01: #75BEFF;
|
||||
--color-blue-02: #4AA6FF;
|
||||
--color-blue-03: #3399CC;
|
||||
--color-blue-04: #3794FF;
|
||||
--color-blue-05: #0897FB;
|
||||
--color-blue-06: #087ACC;
|
||||
--color-blue-07: #0E639C;
|
||||
--color-blue-08: #264F78;
|
||||
--color-blue-09: #094771;
|
||||
--color-blue-10: #062F4A;
|
||||
--color-blue-11: #001F33;
|
||||
|
||||
/* 마우스 오버 시 배경색 변경 */
|
||||
--collection-item-hover: #333333;
|
||||
/* ===================================
|
||||
Accent Colors - Red (color-red-*)
|
||||
=================================== */
|
||||
--color-red-01: #F14C4C;
|
||||
--color-red-02: #C74E39;
|
||||
--color-red-03: #FF0000;
|
||||
--color-red-04: #264F78;
|
||||
|
||||
/* 선택된 항목의 배경색 */
|
||||
--collection-item-selected: #0E639C;
|
||||
/* ===================================
|
||||
Accent Colors - Green (color-green-*)
|
||||
=================================== */
|
||||
--color-green-01: #73C991;
|
||||
--color-green-02: #40C8AE;
|
||||
--color-green-03: #16825D;
|
||||
--color-green-04: #327E36;
|
||||
--color-green-05: #28632B;
|
||||
|
||||
/* 선택된 항목에 마우스 오버 시 배경색*/
|
||||
--collection-item-selected-hover: #1176b9;
|
||||
/* ===================================
|
||||
Accent Colors - Purple (color-purple-*)
|
||||
=================================== */
|
||||
--color-purple-01: #6C6CC4;
|
||||
--color-purple-02: #B180D7;
|
||||
--color-purple-03: #BC3FBC;
|
||||
--color-purple-04: #68217A;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Yellow (color-yellow-*)
|
||||
=================================== */
|
||||
--color-yellow-01: #D7BA7D;
|
||||
--color-yellow-02: #CCA700;
|
||||
--color-yellow-03: #B89500;
|
||||
--color-yellow-04: #BF8803;
|
||||
--color-yellow-05: #FFFF00;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Orange (color-orange-*)
|
||||
=================================== */
|
||||
--color-orange-01: #CC6633;
|
||||
--color-orange-02: #EE9D28;
|
||||
--color-orange-03: #EA5C00;
|
||||
|
||||
/* ===================================
|
||||
Gray Colors (color-gray-*)
|
||||
=================================== */
|
||||
--color-gray-01: #E4E6F1;
|
||||
--color-gray-02: #5F6A79;
|
||||
--color-gray-03: #424750;
|
||||
|
||||
/* ===================================
|
||||
Seti Colors (color-seti-*)
|
||||
=================================== */
|
||||
--color-seti-blue: #519ABA;
|
||||
--color-seti-green: #8DC149;
|
||||
--color-seti-orange: #E37933;
|
||||
--color-seti-pink: #F55385;
|
||||
--color-seti-red: #CC3E44;
|
||||
--color-seti-steel: #7494A3;
|
||||
--color-seti-yellow: #CBCB41;
|
||||
--color-seti-purple: #A074C4;
|
||||
--color-seti-ignore: #41535B;
|
||||
--color-seti-white: #D4D7D6;
|
||||
--color-seti-gray: #6D8086;
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Text (color-text-*)
|
||||
=================================== */
|
||||
--color-text-primary: var(--color-base-03);
|
||||
--color-text-secondary: var(--color-base-08);
|
||||
--color-text-disabled: var(--color-gray-02);
|
||||
--color-text-placeholder: var(--color-base-12);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Background (color-bg-*)
|
||||
=================================== */
|
||||
--color-bg-modal: var(--color-base-18);
|
||||
--color-bg-panel: var(--color-base-20);
|
||||
--color-bg-input: var(--color-base-19);
|
||||
--color-bg-tooltip: rgba(38, 38, 38, 0.95);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Border (color-border-*)
|
||||
=================================== */
|
||||
--color-border: var(--color-base-16);
|
||||
--color-border-focus: var(--color-blue-05);
|
||||
--color-border-error: var(--color-red-01);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Button (color-btn-*)
|
||||
=================================== */
|
||||
--color-btn-normal: var(--color-base-17);
|
||||
--color-btn-hover: #3C3C3D;
|
||||
--color-btn-pressed: var(--color-base-19);
|
||||
--color-btn-primary: var(--color-blue-05);
|
||||
--color-btn-primary-hover: var(--color-blue-06);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Calendar (color-calendar-*)
|
||||
=================================== */
|
||||
--color-calendar-sunday: var(--color-red-01);
|
||||
--color-calendar-saturday: var(--color-blue-02);
|
||||
--color-calendar-today: var(--color-seti-orange);
|
||||
--color-calendar-selected: var(--color-blue-06);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - State (color-state-*)
|
||||
=================================== */
|
||||
--color-state-success: var(--color-green-01);
|
||||
--color-state-warning: var(--color-orange-02);
|
||||
--color-state-error: var(--color-red-01);
|
||||
--color-state-info: var(--color-blue-05);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Vector (color-vector-*)
|
||||
=================================== */
|
||||
--color-vector-x: rgba(230, 102, 102, 1);
|
||||
--color-vector-y: rgba(102, 230, 102, 1);
|
||||
--color-vector-z: rgba(102, 102, 230, 1);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Scrollbar (color-scroller-*)
|
||||
=================================== */
|
||||
--color-scroller-dragger-normal: var(--color-base-16);
|
||||
--color-scroller-dragger-hover: #525252;
|
||||
--color-scroller-dragger-active: var(--color-base-16);
|
||||
--color-scroller-tracker-normal: rgba(0, 0, 0, 0);
|
||||
--color-scroller-tracker-hover: rgba(26, 26, 26, 0);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Drag Ghost (color-drag-*)
|
||||
=================================== */
|
||||
--color-drag-ghost-bg: rgba(41, 41, 41, 1);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Collection (color-collection-*)
|
||||
=================================== */
|
||||
--color-collection-item: rgba(37, 37, 38, 0);
|
||||
--color-collection-item-hover: var(--color-base-16);
|
||||
--color-collection-item-selected: var(--color-blue-07);
|
||||
--color-collection-item-selected-hover: #1176b9;
|
||||
|
||||
/* ===================================
|
||||
Spacing (space-*)
|
||||
=================================== */
|
||||
--space-xs: 2px;
|
||||
--space-s: 4px;
|
||||
--space-m: 8px;
|
||||
--space-l: 12px;
|
||||
--space-xl: 16px;
|
||||
--space-xxl: 24px;
|
||||
|
||||
/* ===================================
|
||||
Border Radius (radius-*)
|
||||
=================================== */
|
||||
--radius-s: 2px;
|
||||
--radius-m: 4px;
|
||||
--radius-l: 8px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ===================================
|
||||
Border Width (border-width-*)
|
||||
=================================== */
|
||||
--border-width: 1px;
|
||||
--border-width-thick: 2px;
|
||||
|
||||
/* ===================================
|
||||
Font Size (font-size-*)
|
||||
=================================== */
|
||||
--font-size-h1: 26px;
|
||||
--font-size-h2: 14px;
|
||||
--font-size-h3: 13px;
|
||||
--font-size-h4: 11px;
|
||||
--font-size-h5: 11px;
|
||||
--font-size-h6: 11px;
|
||||
--font-size-body1: 13px;
|
||||
--font-size-body2: 12px;
|
||||
--font-size-label1: 14px;
|
||||
--font-size-label2: 12px;
|
||||
--font-size-label3: 11px;
|
||||
--font-size-label4: 9px;
|
||||
--font-size-code: 12px;
|
||||
|
||||
/* ===================================
|
||||
Component Sizes (size-*)
|
||||
=================================== */
|
||||
--size-btn-height: 24px;
|
||||
--size-btn-min-width: 80px;
|
||||
--size-input-height: 24px;
|
||||
--size-icon-btn: 20px;
|
||||
--size-nav-btn: 24px;
|
||||
--size-modal-min-width: 300px;
|
||||
|
||||
/* ===================================
|
||||
Animation (anim-*)
|
||||
=================================== */
|
||||
--anim-fast: 100ms;
|
||||
--anim-normal: 200ms;
|
||||
--anim-slow: 300ms;
|
||||
|
||||
/* ===================================
|
||||
Z-Index (z-*)
|
||||
=================================== */
|
||||
--z-default: 0;
|
||||
--z-dropdown: 100;
|
||||
--z-modal: 200;
|
||||
--z-tooltip: 300;
|
||||
|
||||
/* TreeView 들여쓰기 폭 설정 */
|
||||
--unity-item-indent-width: 0px;
|
||||
@@ -132,22 +369,22 @@ Textfield 항목 스타일
|
||||
|
||||
/* 일반 항목의 기본 배경색 */
|
||||
.unity-collection-view__item {
|
||||
background-color: var(--collection-item);
|
||||
background-color: var(--color-collection-item);
|
||||
}
|
||||
|
||||
/* 마우스 오버 시 배경색 변경 - :hover:enabled를 더 높은 specificity로 덮어씀 */
|
||||
.unity-collection-view__item:hover:enabled {
|
||||
background-color: var(--collection-item-hover);
|
||||
background-color: var(--color-collection-item-hover);
|
||||
}
|
||||
|
||||
/* 선택된 항목의 배경색 - Unity 기본 테마의 :focus:enabled 셀렉터를 덮어씀 */
|
||||
.unity-collection-view:focus:enabled .unity-collection-view__item--selected {
|
||||
background-color: var(--collection-item-selected);
|
||||
background-color: var(--color-collection-item-selected);
|
||||
}
|
||||
|
||||
/* 선택된 항목에 마우스 오버 시 배경색 - :hover:enabled를 더 높은 specificity로 덮어씀 */
|
||||
.unity-collection-view:focus:enabled .unity-collection-view__item--selected:hover:enabled {
|
||||
background-color: var(--collection-item-selected-hover);
|
||||
background-color: var(--color-collection-item-selected-hover);
|
||||
}
|
||||
|
||||
|
||||
@@ -173,7 +410,7 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
|
||||
/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
|
||||
.unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: var(--scroller-tracker-normal);
|
||||
background-color: var(--color-scroller-tracker-normal);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
@@ -185,7 +422,7 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
|
||||
/* 드래거 (스크롤 핸들) - 기본 상태 */
|
||||
.unity-scroller--vertical .unity-base-slider__dragger {
|
||||
background-color: var(--scroller-dragger-normal);
|
||||
background-color: var(--color-scroller-dragger-normal);
|
||||
border-width: 0;
|
||||
border-radius: 3px; /* 둥근 모서리 */
|
||||
width: 6px;
|
||||
@@ -230,7 +467,7 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
|
||||
/* 스크롤바 트랙 (배경) - 반투명 어두운 배경 */
|
||||
.unity-scroller--horizontal .unity-base-slider__tracker {
|
||||
background-color: var(--scroller-tracker-normal);
|
||||
background-color: var(--color-scroller-tracker-normal);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
@@ -242,7 +479,7 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
|
||||
/* 드래거 (스크롤 핸들) - 기본 상태 */
|
||||
.unity-scroller--horizontal .unity-base-slider__dragger {
|
||||
background-color: var(--scroller-dragger-normal);
|
||||
background-color: var(--color-scroller-dragger-normal);
|
||||
border-width: 0;
|
||||
border-radius: 3px; /* 둥근 모서리 */
|
||||
height: 6px;
|
||||
|
||||
201
Assets/Resources/UIToolkit/Settings/UTKThemeDark.uss
Normal file
201
Assets/Resources/UIToolkit/Settings/UTKThemeDark.uss
Normal file
@@ -0,0 +1,201 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKThemeDark.uss
|
||||
* 다크 테마 색상 변수 정의
|
||||
* ===================================
|
||||
*
|
||||
* 이 파일은 다크 테마의 모든 색상 변수를 정의합니다.
|
||||
* 테마 전환 시 이 파일을 UTKThemeLight.uss로 교체합니다.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ===================================
|
||||
Base Colors (color-base-*)
|
||||
그레이스케일 팔레트 (밝음 -> 어두움)
|
||||
=================================== */
|
||||
--color-base-01: #FFFFFF;
|
||||
--color-base-02: #F0F0F0;
|
||||
--color-base-03: #E7E7E7;
|
||||
--color-base-04: #E5E5E5;
|
||||
--color-base-05: #D4D4D4;
|
||||
--color-base-06: #CCCCCC;
|
||||
--color-base-07: #C6C6C6;
|
||||
--color-base-08: #BBBBBB;
|
||||
--color-base-09: #A0A0A0;
|
||||
--color-base-10: #888080;
|
||||
--color-base-11: #7F7F7F;
|
||||
--color-base-12: #606060;
|
||||
--color-base-13: #454545;
|
||||
--color-base-14: #3C3C3C;
|
||||
--color-base-15: #3A3D41;
|
||||
--color-base-16: #333333;
|
||||
--color-base-17: #303031;
|
||||
--color-base-18: #292929;
|
||||
--color-base-19: #252526;
|
||||
--color-base-20: #1E1E1E;
|
||||
--color-base-21: #000000;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Blue (color-blue-*)
|
||||
=================================== */
|
||||
--color-blue-01: #75BEFF;
|
||||
--color-blue-02: #4AA6FF;
|
||||
--color-blue-03: #3399CC;
|
||||
--color-blue-04: #3794FF;
|
||||
--color-blue-05: #0897FB;
|
||||
--color-blue-06: #087ACC;
|
||||
--color-blue-07: #0E639C;
|
||||
--color-blue-08: #264F78;
|
||||
--color-blue-09: #094771;
|
||||
--color-blue-10: #062F4A;
|
||||
--color-blue-11: #001F33;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Red (color-red-*)
|
||||
=================================== */
|
||||
--color-red-01: #F14C4C;
|
||||
--color-red-02: #C74E39;
|
||||
--color-red-03: #FF0000;
|
||||
--color-red-04: #264F78;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Green (color-green-*)
|
||||
=================================== */
|
||||
--color-green-01: #73C991;
|
||||
--color-green-02: #40C8AE;
|
||||
--color-green-03: #16825D;
|
||||
--color-green-04: #327E36;
|
||||
--color-green-05: #28632B;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Purple (color-purple-*)
|
||||
=================================== */
|
||||
--color-purple-01: #6C6CC4;
|
||||
--color-purple-02: #B180D7;
|
||||
--color-purple-03: #BC3FBC;
|
||||
--color-purple-04: #68217A;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Yellow (color-yellow-*)
|
||||
=================================== */
|
||||
--color-yellow-01: #D7BA7D;
|
||||
--color-yellow-02: #CCA700;
|
||||
--color-yellow-03: #B89500;
|
||||
--color-yellow-04: #BF8803;
|
||||
--color-yellow-05: #FFFF00;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Orange (color-orange-*)
|
||||
=================================== */
|
||||
--color-orange-01: #CC6633;
|
||||
--color-orange-02: #EE9D28;
|
||||
--color-orange-03: #EA5C00;
|
||||
|
||||
/* ===================================
|
||||
Gray Colors (color-gray-*)
|
||||
=================================== */
|
||||
--color-gray-01: #E4E6F1;
|
||||
--color-gray-02: #5F6A79;
|
||||
--color-gray-03: #424750;
|
||||
|
||||
/* ===================================
|
||||
Seti Colors (color-seti-*)
|
||||
=================================== */
|
||||
--color-seti-blue: #519ABA;
|
||||
--color-seti-green: #8DC149;
|
||||
--color-seti-orange: #E37933;
|
||||
--color-seti-pink: #F55385;
|
||||
--color-seti-red: #CC3E44;
|
||||
--color-seti-steel: #7494A3;
|
||||
--color-seti-yellow: #CBCB41;
|
||||
--color-seti-purple: #A074C4;
|
||||
--color-seti-ignore: #41535B;
|
||||
--color-seti-white: #D4D7D6;
|
||||
--color-seti-gray: #6D8086;
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Text (color-text-*)
|
||||
=================================== */
|
||||
--color-text-primary: var(--color-base-03);
|
||||
--color-text-secondary: var(--color-base-08);
|
||||
--color-text-disabled: var(--color-gray-02);
|
||||
--color-text-placeholder: var(--color-base-12);
|
||||
--color-text-inverse: var(--color-base-20);
|
||||
--color-text-on-primary: var(--color-base-01);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Background (color-bg-*)
|
||||
=================================== */
|
||||
--color-bg-base: var(--color-base-20);
|
||||
--color-bg-elevated: var(--color-base-18);
|
||||
--color-bg-modal: var(--color-base-18);
|
||||
--color-bg-panel: var(--color-base-20);
|
||||
--color-bg-input: var(--color-base-19);
|
||||
--color-bg-tooltip: rgba(38, 38, 38, 0.95);
|
||||
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Border (color-border-*)
|
||||
=================================== */
|
||||
--color-border: var(--color-base-16);
|
||||
--color-border-light: var(--color-base-14);
|
||||
--color-border-focus: var(--color-blue-05);
|
||||
--color-border-error: var(--color-red-01);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Button (color-btn-*)
|
||||
=================================== */
|
||||
--color-btn-normal: var(--color-base-17);
|
||||
--color-btn-hover: #3C3C3D;
|
||||
--color-btn-pressed: var(--color-base-19);
|
||||
--color-btn-disabled: var(--color-base-16);
|
||||
--color-btn-primary: var(--color-blue-05);
|
||||
--color-btn-primary-hover: var(--color-blue-06);
|
||||
--color-btn-secondary: var(--color-base-14);
|
||||
--color-btn-secondary-hover: var(--color-base-13);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Calendar (color-calendar-*)
|
||||
=================================== */
|
||||
--color-calendar-sunday: var(--color-red-01);
|
||||
--color-calendar-saturday: var(--color-blue-02);
|
||||
--color-calendar-today: var(--color-seti-orange);
|
||||
--color-calendar-selected: var(--color-blue-06);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - State (color-state-*)
|
||||
=================================== */
|
||||
--color-state-success: var(--color-green-01);
|
||||
--color-state-warning: var(--color-orange-02);
|
||||
--color-state-error: var(--color-red-01);
|
||||
--color-state-info: var(--color-blue-05);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Vector (color-vector-*)
|
||||
=================================== */
|
||||
--color-vector-x: rgba(230, 102, 102, 1);
|
||||
--color-vector-y: rgba(102, 230, 102, 1);
|
||||
--color-vector-z: rgba(102, 102, 230, 1);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Scrollbar (color-scroller-*)
|
||||
=================================== */
|
||||
--color-scroller-dragger-normal: var(--color-base-16);
|
||||
--color-scroller-dragger-hover: #525252;
|
||||
--color-scroller-dragger-active: var(--color-base-16);
|
||||
--color-scroller-tracker-normal: rgba(0, 0, 0, 0);
|
||||
--color-scroller-tracker-hover: rgba(26, 26, 26, 0);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Drag Ghost (color-drag-*)
|
||||
=================================== */
|
||||
--color-drag-ghost-bg: rgba(41, 41, 41, 1);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Collection (color-collection-*)
|
||||
=================================== */
|
||||
--color-collection-item: rgba(37, 37, 38, 0);
|
||||
--color-collection-item-hover: var(--color-base-16);
|
||||
--color-collection-item-selected: var(--color-blue-07);
|
||||
--color-collection-item-selected-hover: #1176b9;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Settings/UTKThemeDark.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Settings/UTKThemeDark.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 976ed833f077d514b968b34fa0549223
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
208
Assets/Resources/UIToolkit/Settings/UTKThemeLight.uss
Normal file
208
Assets/Resources/UIToolkit/Settings/UTKThemeLight.uss
Normal file
@@ -0,0 +1,208 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKThemeLight.uss
|
||||
* 라이트 테마 색상 변수 정의
|
||||
* ===================================
|
||||
*
|
||||
* 이 파일은 라이트 테마의 모든 색상 변수를 정의합니다.
|
||||
* 테마 전환 시 UTKThemeDark.uss를 이 파일로 교체합니다.
|
||||
*
|
||||
* 라이트 테마에서는 base 색상 순서가 반전됩니다:
|
||||
* - 배경: 밝은 색상 (base-01 ~ base-05)
|
||||
* - 텍스트: 어두운 색상 (base-16 ~ base-21)
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ===================================
|
||||
Base Colors (color-base-*)
|
||||
그레이스케일 팔레트 (밝음 -> 어두움)
|
||||
=================================== */
|
||||
--color-base-01: #FFFFFF;
|
||||
--color-base-02: #F8F8F8;
|
||||
--color-base-03: #F0F0F0;
|
||||
--color-base-04: #E8E8E8;
|
||||
--color-base-05: #E0E0E0;
|
||||
--color-base-06: #D0D0D0;
|
||||
--color-base-07: #C0C0C0;
|
||||
--color-base-08: #A0A0A0;
|
||||
--color-base-09: #808080;
|
||||
--color-base-10: #707070;
|
||||
--color-base-11: #606060;
|
||||
--color-base-12: #505050;
|
||||
--color-base-13: #404040;
|
||||
--color-base-14: #353535;
|
||||
--color-base-15: #303030;
|
||||
--color-base-16: #282828;
|
||||
--color-base-17: #222222;
|
||||
--color-base-18: #1C1C1C;
|
||||
--color-base-19: #161616;
|
||||
--color-base-20: #101010;
|
||||
--color-base-21: #000000;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Blue (color-blue-*)
|
||||
라이트 테마에서는 약간 더 어두운 톤 사용
|
||||
=================================== */
|
||||
--color-blue-01: #0066CC;
|
||||
--color-blue-02: #0078D4;
|
||||
--color-blue-03: #106EBE;
|
||||
--color-blue-04: #005A9E;
|
||||
--color-blue-05: #004578;
|
||||
--color-blue-06: #003F6E;
|
||||
--color-blue-07: #003462;
|
||||
--color-blue-08: #002952;
|
||||
--color-blue-09: #001F3F;
|
||||
--color-blue-10: #001530;
|
||||
--color-blue-11: #000B1A;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Red (color-red-*)
|
||||
=================================== */
|
||||
--color-red-01: #D32F2F;
|
||||
--color-red-02: #B71C1C;
|
||||
--color-red-03: #E53935;
|
||||
--color-red-04: #C62828;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Green (color-green-*)
|
||||
=================================== */
|
||||
--color-green-01: #388E3C;
|
||||
--color-green-02: #2E7D32;
|
||||
--color-green-03: #1B5E20;
|
||||
--color-green-04: #4CAF50;
|
||||
--color-green-05: #43A047;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Purple (color-purple-*)
|
||||
=================================== */
|
||||
--color-purple-01: #7B1FA2;
|
||||
--color-purple-02: #6A1B9A;
|
||||
--color-purple-03: #9C27B0;
|
||||
--color-purple-04: #8E24AA;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Yellow (color-yellow-*)
|
||||
=================================== */
|
||||
--color-yellow-01: #F9A825;
|
||||
--color-yellow-02: #F57F17;
|
||||
--color-yellow-03: #FF8F00;
|
||||
--color-yellow-04: #FF6F00;
|
||||
--color-yellow-05: #FFD600;
|
||||
|
||||
/* ===================================
|
||||
Accent Colors - Orange (color-orange-*)
|
||||
=================================== */
|
||||
--color-orange-01: #E65100;
|
||||
--color-orange-02: #EF6C00;
|
||||
--color-orange-03: #F57C00;
|
||||
|
||||
/* ===================================
|
||||
Gray Colors (color-gray-*)
|
||||
=================================== */
|
||||
--color-gray-01: #424242;
|
||||
--color-gray-02: #757575;
|
||||
--color-gray-03: #9E9E9E;
|
||||
|
||||
/* ===================================
|
||||
Seti Colors (color-seti-*)
|
||||
=================================== */
|
||||
--color-seti-blue: #1976D2;
|
||||
--color-seti-green: #689F38;
|
||||
--color-seti-orange: #E65100;
|
||||
--color-seti-pink: #D81B60;
|
||||
--color-seti-red: #C62828;
|
||||
--color-seti-steel: #455A64;
|
||||
--color-seti-yellow: #F9A825;
|
||||
--color-seti-purple: #7B1FA2;
|
||||
--color-seti-ignore: #78909C;
|
||||
--color-seti-white: #ECEFF1;
|
||||
--color-seti-gray: #607D8B;
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Text (color-text-*)
|
||||
라이트 테마에서는 어두운 텍스트 사용
|
||||
=================================== */
|
||||
--color-text-primary: var(--color-base-17);
|
||||
--color-text-secondary: var(--color-base-12);
|
||||
--color-text-disabled: var(--color-base-08);
|
||||
--color-text-placeholder: var(--color-base-09);
|
||||
--color-text-inverse: var(--color-base-01);
|
||||
--color-text-on-primary: var(--color-base-01);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Background (color-bg-*)
|
||||
라이트 테마에서는 밝은 배경 사용
|
||||
=================================== */
|
||||
--color-bg-base: var(--color-base-01);
|
||||
--color-bg-elevated: var(--color-base-02);
|
||||
--color-bg-modal: var(--color-base-02);
|
||||
--color-bg-panel: var(--color-base-01);
|
||||
--color-bg-input: var(--color-base-01);
|
||||
--color-bg-tooltip: rgba(50, 50, 50, 0.95);
|
||||
--color-bg-overlay: rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Border (color-border-*)
|
||||
=================================== */
|
||||
--color-border: var(--color-base-05);
|
||||
--color-border-light: var(--color-base-04);
|
||||
--color-border-focus: var(--color-blue-02);
|
||||
--color-border-error: var(--color-red-01);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Button (color-btn-*)
|
||||
=================================== */
|
||||
--color-btn-normal: var(--color-base-04);
|
||||
--color-btn-hover: var(--color-base-05);
|
||||
--color-btn-pressed: var(--color-base-06);
|
||||
--color-btn-disabled: var(--color-base-03);
|
||||
--color-btn-primary: var(--color-blue-02);
|
||||
--color-btn-primary-hover: var(--color-blue-03);
|
||||
--color-btn-secondary: var(--color-base-05);
|
||||
--color-btn-secondary-hover: var(--color-base-06);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Calendar (color-calendar-*)
|
||||
=================================== */
|
||||
--color-calendar-sunday: var(--color-red-01);
|
||||
--color-calendar-saturday: var(--color-blue-02);
|
||||
--color-calendar-today: var(--color-orange-02);
|
||||
--color-calendar-selected: var(--color-blue-02);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - State (color-state-*)
|
||||
=================================== */
|
||||
--color-state-success: var(--color-green-01);
|
||||
--color-state-warning: var(--color-orange-02);
|
||||
--color-state-error: var(--color-red-01);
|
||||
--color-state-info: var(--color-blue-02);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Vector (color-vector-*)
|
||||
=================================== */
|
||||
--color-vector-x: rgba(200, 60, 60, 1);
|
||||
--color-vector-y: rgba(60, 160, 60, 1);
|
||||
--color-vector-z: rgba(60, 60, 200, 1);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Scrollbar (color-scroller-*)
|
||||
=================================== */
|
||||
--color-scroller-dragger-normal: var(--color-base-07);
|
||||
--color-scroller-dragger-hover: var(--color-base-09);
|
||||
--color-scroller-dragger-active: var(--color-base-10);
|
||||
--color-scroller-tracker-normal: rgba(0, 0, 0, 0);
|
||||
--color-scroller-tracker-hover: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Drag Ghost (color-drag-*)
|
||||
=================================== */
|
||||
--color-drag-ghost-bg: rgba(255, 255, 255, 0.95);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - Collection (color-collection-*)
|
||||
=================================== */
|
||||
--color-collection-item: rgba(255, 255, 255, 0);
|
||||
--color-collection-item-hover: var(--color-base-04);
|
||||
--color-collection-item-selected: var(--color-blue-01);
|
||||
--color-collection-item-selected-hover: var(--color-blue-02);
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Settings/UTKThemeLight.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Settings/UTKThemeLight.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 4e001056f6c41f8438a97966cf0be17e
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
89
Assets/Resources/UIToolkit/Settings/UTKVariables.uss
Normal file
89
Assets/Resources/UIToolkit/Settings/UTKVariables.uss
Normal file
@@ -0,0 +1,89 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKVariables.uss
|
||||
* 테마에 독립적인 공통 변수 정의
|
||||
* ===================================
|
||||
*
|
||||
* 이 파일은 테마와 무관한 레이아웃/크기 관련 변수를 정의합니다.
|
||||
* 색상 변수는 UTKThemeDark.uss / UTKThemeLight.uss에서 정의됩니다.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ===================================
|
||||
Font
|
||||
=================================== */
|
||||
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
|
||||
|
||||
/* ===================================
|
||||
Spacing (space-*)
|
||||
=================================== */
|
||||
--space-xs: 2px;
|
||||
--space-s: 4px;
|
||||
--space-m: 8px;
|
||||
--space-l: 12px;
|
||||
--space-xl: 16px;
|
||||
--space-xxl: 24px;
|
||||
|
||||
/* ===================================
|
||||
Border Radius (radius-*)
|
||||
=================================== */
|
||||
--radius-s: 2px;
|
||||
--radius-m: 4px;
|
||||
--radius-l: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ===================================
|
||||
Border Width (border-*)
|
||||
=================================== */
|
||||
--border-width: 1px;
|
||||
--border-width-thick: 2px;
|
||||
|
||||
/* ===================================
|
||||
Font Size (font-size-*)
|
||||
=================================== */
|
||||
--font-size-h1: 26px;
|
||||
--font-size-h2: 14px;
|
||||
--font-size-h3: 13px;
|
||||
--font-size-h4: 11px;
|
||||
--font-size-h5: 11px;
|
||||
--font-size-h6: 11px;
|
||||
--font-size-body1: 13px;
|
||||
--font-size-body2: 12px;
|
||||
--font-size-label1: 14px;
|
||||
--font-size-label2: 12px;
|
||||
--font-size-label3: 11px;
|
||||
--font-size-label4: 9px;
|
||||
--font-size-code: 12px;
|
||||
|
||||
/* ===================================
|
||||
Component Sizes (size-*)
|
||||
=================================== */
|
||||
--size-btn-height: 24px;
|
||||
--size-btn-min-width: 80px;
|
||||
--size-input-height: 24px;
|
||||
--size-icon-btn: 20px;
|
||||
--size-nav-btn: 24px;
|
||||
--size-modal-min-width: 300px;
|
||||
--size-modal-max-width: 600px;
|
||||
|
||||
/* ===================================
|
||||
Animation (anim-*)
|
||||
=================================== */
|
||||
--anim-fast: 100ms;
|
||||
--anim-normal: 200ms;
|
||||
--anim-slow: 300ms;
|
||||
|
||||
/* ===================================
|
||||
Z-Index (z-*)
|
||||
=================================== */
|
||||
--z-default: 0;
|
||||
--z-dropdown: 100;
|
||||
--z-modal: 200;
|
||||
--z-tooltip: 300;
|
||||
|
||||
/* ===================================
|
||||
Unity Overrides
|
||||
=================================== */
|
||||
--unity-item-indent-width: 0px;
|
||||
}
|
||||
11
Assets/Resources/UIToolkit/Settings/UTKVariables.uss.meta
Normal file
11
Assets/Resources/UIToolkit/Settings/UTKVariables.uss.meta
Normal file
@@ -0,0 +1,11 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 06d6bf55aa4e5d24282724e6f9899643
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user