스타일 가이드 적용 완료. UTKCOlorPicker, UTKDatePicker 확인해야 함

This commit is contained in:
logonkhi
2026-01-12 20:16:17 +09:00
parent 6ae48ff30e
commit e1f2ac5b02
31 changed files with 1854 additions and 660 deletions

View File

@@ -37,16 +37,19 @@
=================================== */
.utk-foldout > .unity-foldout__toggle > .unity-toggle__input > .unity-foldout__checkmark {
width: 12px;
height: 12px;
margin-right: var(--space-s);
width: 16px;
height: 16px;
-unity-background-image-tint-color: var(--color-text-secondary);
transition-duration: var(--anim-fast);
transition-property: rotate;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: var(--space-xs);
}
.utk-foldout > .unity-foldout__toggle:checked > .unity-toggle__input > .unity-foldout__checkmark {
rotate: 90deg;
rotate: 0deg;
}
/* ===================================
@@ -57,13 +60,15 @@
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-font-style: bold;
margin: 0;
padding: var(--space-s) 0;
}
/* ===================================
Content Container
=================================== */
.utk-foldout > .unity-foldout__content {
.utk-foldout .unity-foldout__content {
margin-top: var(--space-s);
margin-left: var(--space-m);
padding: var(--space-m);
@@ -73,6 +78,11 @@
border-color: var(--color-border);
}
.utk-foldout .unity-foldout__content {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
}
/* ===================================
Collapsed State - Remove content border radius on top
=================================== */
@@ -82,7 +92,7 @@
border-bottom-right-radius: 0;
}
.utk-foldout:checked > .unity-foldout__content {
.utk-foldout:checked .unity-foldout__content {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;

View File

@@ -29,78 +29,29 @@
padding: 0;
}
/* ===================================
Content Text
=================================== */
.utk-scrollview .unity-label {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
}
/* ===================================
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;
width: 6px;
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;
height: 6px;
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);
}

View File

@@ -11,7 +11,7 @@
}
.utk-tooltip-label {
color: var(--color-text-primary);
color: #FFFFFF;
font-size: var(--font-size-body2);
white-space: normal;
-unity-text-align: middle-left;

View File

@@ -71,19 +71,6 @@
background-color: transparent;
}
.accordion-tree-view .unity-scroller--vertical {
width: 8px;
}
.accordion-tree-view .unity-scroller--vertical .unity-base-slider__dragger {
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: var(--color-scroller-dragger-hover);
}
.accordion-tree-view .unity-tree-view__item {
padding: 0;
margin: 0;

View File

@@ -60,19 +60,6 @@
background-color: transparent;
}
#main-list-view .unity-scroller--vertical {
width: 8px;
}
#main-list-view .unity-scroller--vertical .unity-base-slider__dragger {
background-color: rgb(80, 80, 82);
border-radius: 4px;
}
#main-list-view .unity-scroller--vertical .unity-base-slider__dragger:hover {
background-color: rgb(100, 100, 102);
}
.image-list-row {
flex-direction: row;
justify-content: flex-start;

View File

@@ -30,8 +30,8 @@
=================================== */
.utk-listview .unity-list-view__item {
padding-top: var(--space-s);
padding-bottom: var(--space-s);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--space-m);
padding-right: var(--space-m);
margin: 0;
@@ -40,14 +40,10 @@
transition-property: background-color;
font-size: var(--font-size-body2);
height: auto;
min-height: 28px;
min-height: 24px;
-unity-text-align: middle-left;
}
.utk-listview .unity-collection-view__item--selected {
color: var(--color-base-01);
}
/* Unity USS does not support :last-child pseudo-class */
/* .utk-listview .unity-list-view__item:last-child {
border-bottom-width: 0;
@@ -57,10 +53,13 @@
background-color: var(--color-btn-hover);
}
/* Unity ListView uses unity-collection-view__item--selected class internally */
.utk-listview .unity-collection-view__item--selected,
.utk-listview .unity-list-view__item--selected {
background-color: var(--color-btn-primary);
}
.utk-listview .unity-collection-view__item--selected:hover,
.utk-listview .unity-list-view__item--selected:hover {
background-color: var(--color-btn-primary-hover);
}
@@ -78,9 +77,11 @@
padding-bottom: 0 !important;
}
.utk-listview .unity-collection-view__item--selected .unity-label,
.utk-listview .unity-collection-view__item--selected .unity-text-element,
.utk-listview .unity-list-view__item--selected .unity-label,
.utk-listview .unity-list-view__item--selected .unity-text-element {
color: var(--color-base-01) !important;
color: var(--color-text-on-primary) !important;
}
/* ===================================
@@ -90,31 +91,6 @@
/* Note: Alternating rows must be handled in C# code
Unity USS does not support :nth-child() pseudo-class */
/* ===================================
Scrollbar
=================================== */
.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
=================================== */

View File

@@ -46,7 +46,11 @@
.utk-multicolumn-listview .unity-multi-column-header__column-title {
font-size: var(--font-size-body2);
-unity-font-style: bold;
color: var(--color-text-primary);
color: var(--color-text-primary) !important;
}
.utk-multicolumn-listview .unity-multi-column-header__column .unity-text-element {
color: var(--color-text-primary) !important;
}
/* ===================================
@@ -92,7 +96,7 @@
=================================== */
.utk-multicolumn-listview .unity-multi-column-view__cell {
padding: var(--space-s) var(--space-m);
padding: 0 var(--space-m);
border-right-width: 1px;
border-right-color: var(--color-border-light);
}
@@ -105,6 +109,8 @@
.utk-multicolumn-listview .unity-multi-column-view__cell > .unity-label {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
padding-top: 0;
padding-bottom: 0;
}
.utk-multicolumn-listview .unity-list-view__item--selected .unity-multi-column-view__cell > .unity-label {
@@ -118,35 +124,6 @@
/* Note: Alternating rows must be handled in C# code
Unity USS does not support :nth-child() pseudo-class */
/* ===================================
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
=================================== */

View File

@@ -46,7 +46,11 @@
.utk-multicolumn-treeview .unity-multi-column-header__column-title {
font-size: var(--font-size-body2);
-unity-font-style: bold;
color: var(--color-text-primary);
color: var(--color-text-primary) !important;
}
.utk-multicolumn-treeview .unity-multi-column-header__column .unity-text-element {
color: var(--color-text-primary) !important;
}
/* ===================================
@@ -100,10 +104,6 @@
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);
}
@@ -125,9 +125,10 @@
=================================== */
.utk-multicolumn-treeview .unity-multi-column-view__cell {
padding: var(--space-s) var(--space-m);
padding: 0 var(--space-m);
border-right-width: 1px;
border-right-color: var(--color-border-light);
align-self: center;
}
/* Unity USS does not support :last-child pseudo-class */
@@ -144,35 +145,6 @@
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
=================================== */

View File

@@ -22,7 +22,7 @@
=================================== */
.utk-treeview .unity-tree-view__item {
padding: var(--space-xs) 0;
padding: 0;
background-color: transparent;
transition-duration: var(--anim-fast);
transition-property: background-color;
@@ -32,10 +32,13 @@
background-color: var(--color-btn-hover);
}
/* Unity TreeView uses unity-collection-view__item--selected class internally */
.utk-treeview .unity-collection-view__item--selected,
.utk-treeview .unity-tree-view__item--selected {
background-color: var(--color-btn-primary);
}
.utk-treeview .unity-collection-view__item--selected:hover,
.utk-treeview .unity-tree-view__item--selected:hover {
background-color: var(--color-btn-primary-hover);
}
@@ -47,20 +50,30 @@
.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: 0deg;
/* Override #unity-checkmark white color from UTKDefaultStyle.uss */
.utk-treeview .unity-tree-view__item-toggle #unity-checkmark {
-unity-background-image-tint-color: var(--color-text-secondary);
}
.utk-treeview .unity-tree-view__item-toggle:hover #unity-checkmark {
-unity-background-image-tint-color: var(--color-text-primary);
}
.utk-treeview .unity-collection-view__item--selected .unity-tree-view__item-toggle,
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle {
-unity-background-image-tint-color: var(--color-text-on-primary);
}
.utk-treeview .unity-collection-view__item--selected .unity-tree-view__item-toggle #unity-checkmark,
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle #unity-checkmark {
-unity-background-image-tint-color: var(--color-text-on-primary);
}
/* ===================================
Indentation
=================================== */
@@ -88,35 +101,7 @@
color: var(--color-text-primary);
}
.utk-treeview .unity-collection-view__item--selected .unity-tree-view__item-content > .unity-label,
.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);
}

View File

@@ -11,10 +11,12 @@
.utk-alert {
flex-direction: column;
align-items: center;
min-width: 280px;
max-width: 400px;
padding: var(--space-xl);
padding-top: var(--space-m);
padding-left: var(--space-xl);
padding-right: var(--space-xl);
padding-bottom: var(--space-xl);
background-color: var(--color-bg-modal);
border-radius: var(--radius-l);
border-width: var(--border-width);
@@ -22,91 +24,33 @@
}
/* ===================================
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
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);
-unity-text-align: middle-left;
margin: 0;
padding: 0;
align-self: flex-start;
}
/* ===================================
Message
Content (가운데)
=================================== */
.utk-alert__content {
flex-direction: column;
align-items: center;
flex-grow: 1;
margin-top: var(--space-l);
margin-bottom: var(--space-l);
}
/* ===================================
Message (가운데)
=================================== */
.utk-alert__message {
@@ -130,3 +74,27 @@
margin-left: var(--space-s);
margin-right: var(--space-s);
}
/* ===================================
Type Variants - Title Color
=================================== */
.utk-alert--info .utk-alert__title {
color: var(--color-text-primary);
}
.utk-alert--success .utk-alert__title {
color: var(--color-state-success);
}
.utk-alert--warning .utk-alert__title {
color: var(--color-state-warning);
}
.utk-alert--error .utk-alert__title {
color: var(--color-state-error);
}
.utk-alert--confirm .utk-alert__title {
color: var(--color-text-primary);
}

View File

@@ -21,6 +21,7 @@
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-l);
cursor: move;
}
.utk-color-picker__title {

View File

@@ -187,6 +187,67 @@
color: var(--color-text-disabled);
}
/* ===================================
Date Range Selection Styles
=================================== */
.utk-date-picker__day-btn--range-start {
background-color: var(--color-calendar-selected);
color: var(--color-text-on-primary);
-unity-font-style: bold;
border-top-left-radius: var(--radius-s);
border-bottom-left-radius: var(--radius-s);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.utk-date-picker__day-btn--range-start:hover {
background-color: var(--color-btn-primary-hover);
}
.utk-date-picker__day-btn--range-end {
background-color: var(--color-calendar-selected);
color: var(--color-text-on-primary);
-unity-font-style: bold;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-s);
border-bottom-right-radius: var(--radius-s);
}
.utk-date-picker__day-btn--range-end:hover {
background-color: var(--color-btn-primary-hover);
}
/* 시작일과 종료일이 같은 경우 */
.utk-date-picker__day-btn--range-start.utk-date-picker__day-btn--range-end {
border-radius: var(--radius-s);
}
.utk-date-picker__day-btn--in-range {
background-color: var(--color-calendar-range);
color: var(--color-text-primary);
border-radius: 0;
}
.utk-date-picker__day-btn--in-range:hover {
background-color: var(--color-calendar-range-hover);
}
/* ===================================
Range Info Label
=================================== */
.utk-date-picker__range-info {
margin-top: var(--space-m);
padding: var(--space-s) var(--space-m);
background-color: var(--color-bg-secondary);
border-radius: var(--radius-s);
font-size: var(--font-size-body2);
color: var(--color-text-secondary);
-unity-text-align: middle-center;
}
/* ===================================
Time Picker Row
=================================== */

View File

@@ -95,6 +95,11 @@
padding: var(--space-l);
}
.utk-panel__content .unity-label {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
}
.utk-panel--collapsed .utk-panel__content {
display: none;
}

View File

@@ -20,56 +20,24 @@
}
/* ===================================
Icon
Type Variants - Message Color
Toast는 항상 어두운 배경을 사용하므로 밝은 색상 직접 지정
=================================== */
.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);
.utk-toast--info .utk-toast__message {
color: #FFFFFF;
}
/* ===================================
Type Variants
=================================== */
.utk-toast--info {
border-left-width: 3px;
border-left-color: var(--color-state-info);
.utk-toast--success .utk-toast__message {
color: #4CAF50;
}
.utk-toast--info .utk-toast__icon {
color: var(--color-state-info);
.utk-toast--warning .utk-toast__message {
color: #FFB74D;
}
.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);
.utk-toast--error .utk-toast__message {
color: #EF5350;
}
/* ===================================
@@ -79,7 +47,7 @@
.utk-toast__message {
flex-grow: 1;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
color: #FFFFFF;
white-space: normal;
}

View File

@@ -354,13 +354,17 @@ ListView/TreeView 항목 텍스트 스타일
color: var(--color-base-01) !important;
}
.unity-tree-view__item-content {
align-self: center;
}
/* TreeView 항목 텍스트 색상 */
.unity-tree-view__item .unity-label,
.unity-tree-view__item .unity-text-element {
color: var(--color-text-primary) !important;
-unity-text-align: middle-left;
padding-top: 0;
padding-bottom: 0;
padding: 0;
margin: 0;
}
.unity-tree-view__item--selected .unity-label,
@@ -376,12 +380,16 @@ TreeView 항목 스타일
/* TreeView 펼치기/접기 화살표 토글 - 크기 및 정렬 조정 */
.unity-tree-view__item-toggle {
margin-right: 4px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
padding: 0;
align-self: center;
-unity-background-image-tint-color: var(--color-text-secondary);
}
@@ -557,6 +565,10 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
transition-property: background-color;
}
.unity-scroller--vertical .unity-base-slider__dragger:hover {
background-color: var(--color-scroller-dragger-hover);
}
/* 상하 화살표 버튼 - 완전히 숨김 처리 */
.unity-scroller--vertical .unity-repeat-button {
display: none;
@@ -566,6 +578,11 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
min-height: 0;
}
.unity-scroller--vertical > .unity-scroller__low-button,
.unity-scroller--vertical > .unity-scroller__high-button {
display: none;
}
/* 슬라이더 - 여백 제거 */
.unity-scroller--vertical .unity-slider {
margin: 0;
@@ -614,6 +631,10 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
transition-property: background-color;
}
.unity-scroller--horizontal .unity-base-slider__dragger:hover {
background-color: var(--color-scroller-dragger-hover);
}
/* 좌우 화살표 버튼 - 완전히 숨김 처리 */
.unity-scroller--horizontal .unity-repeat-button {
display: none;
@@ -623,6 +644,11 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
min-height: 0;
}
.unity-scroller--horizontal > .unity-scroller__low-button,
.unity-scroller--horizontal > .unity-scroller__high-button {
display: none;
}
/* 슬라이더 - 여백 제거 */
.unity-scroller--horizontal .unity-slider {
margin: 0;

View File

@@ -161,6 +161,8 @@
--color-calendar-saturday: var(--color-blue-02);
--color-calendar-today: var(--color-seti-orange);
--color-calendar-selected: var(--color-blue-06);
--color-calendar-range: rgba(66, 133, 244, 0.25);
--color-calendar-range-hover: rgba(66, 133, 244, 0.35);
/* ===================================
Semantic Colors - State (color-state-*)

View File

@@ -168,6 +168,8 @@
--color-calendar-saturday: var(--color-blue-02);
--color-calendar-today: var(--color-orange-02);
--color-calendar-selected: var(--color-blue-02);
--color-calendar-range: rgba(66, 133, 244, 0.15);
--color-calendar-range-hover: rgba(66, 133, 244, 0.25);
/* ===================================
Semantic Colors - State (color-state-*)

View File

@@ -1,95 +0,0 @@
/*
* ===================================
* UTKTab.uss
* Unity Tab 래핑 스타일
* ===================================
*/
/* ===================================
Base Tab
=================================== */
.utk-tab {
flex-direction: row;
align-items: center;
justify-content: center;
padding: var(--space-m) var(--space-l);
background-color: transparent;
border-width: 0;
border-bottom-width: 2px;
border-bottom-color: transparent;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
transition-duration: var(--anim-fast);
transition-property: background-color, border-color, color;
}
.utk-tab:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.utk-tab--selected {
border-bottom-color: var(--color-btn-primary);
}
/* ===================================
Tab Header (Label Container)
=================================== */
.utk-tab > .unity-tab__header {
flex-direction: row;
align-items: center;
justify-content: center;
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
}
/* ===================================
Tab Header Label
=================================== */
.utk-tab > .unity-tab__header > .unity-tab__header-label {
font-size: var(--font-size-body2);
color: var(--color-text-secondary);
margin: 0;
padding: 0;
}
.utk-tab--selected > .unity-tab__header > .unity-tab__header-label {
color: var(--color-btn-primary);
-unity-font-style: bold;
}
/* ===================================
Tab Content Container
=================================== */
.utk-tab > .unity-tab__content-container {
flex-grow: 1;
padding: var(--space-m);
}
/* ===================================
Hide Tab Underline (Use Custom)
=================================== */
.utk-tab > .unity-tab__header > .unity-tab__header-underline {
display: none;
}
/* ===================================
Disabled State
=================================== */
.utk-tab--disabled {
cursor: arrow;
}
.utk-tab--disabled:hover {
background-color: transparent;
}
.utk-tab--disabled > .unity-tab__header > .unity-tab__header-label {
color: var(--color-text-disabled);
}

View File

@@ -1,11 +0,0 @@
fileFormatVersion: 2
guid: 26349aa08d395b241b70ebcbf9b99671
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

View File

@@ -12,6 +12,7 @@
.utk-tabview {
flex-direction: column;
flex-grow: 1;
color: var(--color-text-secondary);
}
/* ===================================
@@ -42,47 +43,57 @@
padding: var(--space-l);
}
/* Tab Content inside unity-tab__content-container */
.utk-tabview .unity-tab__content-container {
background-color: transparent;
}
.utk-tabview .unity-tab__content-container .unity-label {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
}
/* ===================================
Tab styling inside TabView
Tab Header inside TabView
=================================== */
.utk-tabview > .unity-tab-view__header-container > .unity-tab {
padding: var(--space-m) var(--space-l);
background-color: transparent;
.utk-tabview .unity-tab__header {
background-color: transparent !important;
border-width: 0;
border-bottom-width: 2px;
border-bottom-color: transparent;
padding: var(--space-s) var(--space-l);
margin-right: var(--space-s);
transition-duration: var(--anim-fast);
transition-property: background-color, border-color;
transition-property: background-color;
}
.utk-tabview > .unity-tab-view__header-container > .unity-tab:hover {
background-color: rgba(255, 255, 255, 0.05);
.utk-tabview .unity-tab__header:hover {
background-color: var(--color-btn-hover) !important;
}
.utk-tabview > .unity-tab-view__header-container > .unity-tab:checked {
border-bottom-color: var(--color-btn-primary);
.utk-tabview .unity-tab__header:checked {
background-color: transparent !important;
}
/* Tab Header inside TabView */
.utk-tabview > .unity-tab-view__header-container > .unity-tab > .unity-tab__header {
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
}
.utk-tabview > .unity-tab-view__header-container > .unity-tab > .unity-tab__header > .unity-tab__header-label {
.utk-tabview .unity-tab__header-label {
font-size: var(--font-size-body2);
color: var(--color-text-secondary);
color: var(--color-text-secondary) !important;
}
.utk-tabview > .unity-tab-view__header-container > .unity-tab:checked > .unity-tab__header > .unity-tab__header-label {
color: var(--color-btn-primary);
.utk-tabview .unity-tab__header:checked .unity-tab__header-label {
color: var(--color-btn-primary) !important;
-unity-font-style: bold;
}
/* Hide underline (use custom border) */
.utk-tabview > .unity-tab-view__header-container > .unity-tab > .unity-tab__header > .unity-tab__header-underline {
display: none;
/* Tab Underline */
.utk-tabview .unity-tab__header-underline {
height: 2px;
background-color: transparent !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.utk-tabview .unity-tab__header:checked > .unity-tab__header-underline {
background-color: var(--color-btn-primary) !important;
}