user
41270a34f5
- 모든 컨트롤러 에디터를 IMGUI → UI Toolkit(UXML/USS)으로 전환 (Camera, Item, Event, Avatar, System, StreamDeck, OptiTrack, Facial) - StreamingleCommon.uss 공통 테마 + 개별 에디터 USS 스타일시트 - SystemController 서브매니저 분리 (OptiTrack, Facial, Recording, Screenshot 등) - 런타임 컨트롤 패널 (ESC 토글, 좌측 오버레이, 150% 스케일) - 웹 대시보드 서버 (StreamingleDashboardServer) + 리타게팅 통합 - 설정 도구(StreamingleControllerSetupTool) UXML 재작성 + 원클릭 설정 - SimplePoseTransfer UXML 에디터 추가 - 전체 UXML 한글화 + NanumGothic 폰트 적용 - Streamingle.Debug → Streamingle.Debugging 네임스페이스 변경 (Debug.Log 충돌 해결) - 불필요 코드 제거 (rawkey.cs, RetargetingHTTPServer, OptitrackSkeletonAnimator 등) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
363 lines
7.4 KiB
Plaintext
363 lines
7.4 KiB
Plaintext
/* ======== Streamingle Runtime Control Panel — Left Overlay (150%) ======== */
|
|
|
|
/* Font — NanumGothic */
|
|
.panel-root, .panel-root Label, .panel-root Button {
|
|
-unity-font: resource('Fonts/NanumGothic');
|
|
}
|
|
|
|
.panel-title, .cat-title, .cat-btn--active, .action-btn, .status-value {
|
|
-unity-font: resource('Fonts/NanumGothicBold');
|
|
}
|
|
|
|
/* Root — left-docked, full height, ~1/3 screen */
|
|
.panel-root {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 520px;
|
|
background-color: rgba(15, 23, 42, 0.96);
|
|
border-right-width: 1px;
|
|
border-right-color: rgba(99, 102, 241, 0.25);
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ---- Header ---- */
|
|
.header {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 20px;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 18px;
|
|
-unity-font-style: bold;
|
|
color: rgb(99, 102, 241);
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.esc-badge {
|
|
color: rgb(100, 116, 139);
|
|
font-size: 14px;
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
border-radius: 6px;
|
|
padding: 4px 12px;
|
|
border-width: 1px;
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* ---- Tab Bar ---- */
|
|
.tab-bar {
|
|
flex-direction: row;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.cat-btn {
|
|
flex-grow: 1;
|
|
height: 48px;
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
border-bottom-width: 3px;
|
|
border-bottom-color: transparent;
|
|
border-radius: 0;
|
|
color: rgb(100, 116, 139);
|
|
font-size: 15px;
|
|
-unity-font-style: normal;
|
|
-unity-text-align: middle-center;
|
|
padding: 0 4px;
|
|
margin: 0;
|
|
transition-duration: 0.12s;
|
|
transition-property: color, border-bottom-color, background-color;
|
|
}
|
|
|
|
.cat-btn:hover {
|
|
color: rgb(203, 213, 225);
|
|
background-color: rgba(99, 102, 241, 0.08);
|
|
}
|
|
|
|
.cat-btn--active {
|
|
color: rgb(129, 140, 248);
|
|
border-bottom-color: rgb(99, 102, 241);
|
|
-unity-font-style: bold;
|
|
background-color: rgba(99, 102, 241, 0.06);
|
|
}
|
|
|
|
/* ---- Content ---- */
|
|
.content {
|
|
flex-grow: 1;
|
|
padding: 16px 18px 0 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cat-title {
|
|
font-size: 20px;
|
|
-unity-font-style: bold;
|
|
color: rgb(241, 245, 249);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.cat-desc {
|
|
font-size: 14px;
|
|
color: rgb(100, 116, 139);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.action-list {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* ---- Action Items ---- */
|
|
.action-item {
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 6px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-width: 1px;
|
|
border-color: transparent;
|
|
transition-duration: 0.1s;
|
|
transition-property: background-color, border-color;
|
|
}
|
|
|
|
.action-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
.action-item--active {
|
|
border-color: rgba(34, 197, 94, 0.5);
|
|
background-color: rgba(34, 197, 94, 0.08);
|
|
}
|
|
|
|
.action-item-index {
|
|
color: rgb(71, 85, 105);
|
|
font-size: 14px;
|
|
min-width: 36px;
|
|
-unity-text-align: middle-right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.action-item-label {
|
|
flex-grow: 1;
|
|
color: rgb(226, 232, 240);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.action-item-status {
|
|
color: rgb(34, 197, 94);
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
/* ---- Buttons ---- */
|
|
.action-btn {
|
|
background-color: rgb(99, 102, 241);
|
|
color: white;
|
|
border-radius: 6px;
|
|
border-width: 0;
|
|
padding: 6px 16px;
|
|
font-size: 14px;
|
|
-unity-font-style: bold;
|
|
min-width: 80px;
|
|
height: 34px;
|
|
transition-duration: 0.1s;
|
|
transition-property: background-color;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background-color: rgb(79, 70, 229);
|
|
}
|
|
|
|
.action-btn:active {
|
|
background-color: rgb(67, 56, 202);
|
|
}
|
|
|
|
.action-btn--secondary {
|
|
background-color: rgb(51, 65, 85);
|
|
}
|
|
|
|
.action-btn--secondary:hover {
|
|
background-color: rgb(71, 85, 105);
|
|
}
|
|
|
|
.action-btn--danger {
|
|
background-color: rgb(220, 38, 38);
|
|
}
|
|
|
|
.action-btn--danger:hover {
|
|
background-color: rgb(185, 28, 28);
|
|
}
|
|
|
|
.action-btn--success {
|
|
background-color: rgb(22, 163, 74);
|
|
}
|
|
|
|
.action-btn--success:hover {
|
|
background-color: rgb(21, 128, 61);
|
|
}
|
|
|
|
/* Action row */
|
|
.action-row {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.action-row > .action-btn {
|
|
margin-right: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Section group title */
|
|
.group-title {
|
|
font-size: 14px;
|
|
color: rgb(100, 116, 139);
|
|
margin-top: 14px;
|
|
margin-bottom: 6px;
|
|
padding-bottom: 4px;
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(255, 255, 255, 0.05);
|
|
-unity-font-style: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Avatar group */
|
|
.avatar-group {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 8px;
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.avatar-group-name {
|
|
font-size: 16px;
|
|
color: rgb(148, 163, 184);
|
|
-unity-font-style: bold;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.outfit-row {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.outfit-btn {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
color: rgb(203, 213, 225);
|
|
border-radius: 6px;
|
|
border-width: 1px;
|
|
border-color: transparent;
|
|
padding: 6px 14px;
|
|
font-size: 14px;
|
|
margin-right: 4px;
|
|
margin-bottom: 4px;
|
|
transition-duration: 0.1s;
|
|
transition-property: background-color, border-color;
|
|
}
|
|
|
|
.outfit-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.outfit-btn--active {
|
|
background-color: rgba(99, 102, 241, 0.2);
|
|
border-color: rgb(99, 102, 241);
|
|
color: white;
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
/* ---- Status Bar ---- */
|
|
.status-bar {
|
|
height: 44px;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
border-top-width: 1px;
|
|
border-top-color: rgba(255, 255, 255, 0.06);
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
justify-content: flex-start;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-group {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.status-label {
|
|
color: rgb(71, 85, 105);
|
|
font-size: 13px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: rgb(51, 65, 85);
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.status-dot--on {
|
|
background-color: rgb(34, 197, 94);
|
|
}
|
|
|
|
.status-dot--rec {
|
|
background-color: rgb(239, 68, 68);
|
|
}
|
|
|
|
.status-value {
|
|
color: rgb(203, 213, 225);
|
|
font-size: 13px;
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
/* ---- Scrollbar ---- */
|
|
.unity-scroller--vertical {
|
|
width: 6px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.unity-scroller--vertical .unity-base-slider__tracker {
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
border-width: 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.unity-scroller--vertical .unity-base-slider__dragger {
|
|
background-color: rgba(148, 163, 184, 0.25);
|
|
border-width: 0;
|
|
border-radius: 3px;
|
|
min-height: 30px;
|
|
transition-duration: 0.15s;
|
|
transition-property: background-color;
|
|
}
|
|
|
|
.unity-scroller--vertical .unity-base-slider__dragger:hover {
|
|
background-color: rgba(148, 163, 184, 0.45);
|
|
}
|
|
|
|
.unity-scroller--vertical .unity-base-slider__dragger:active {
|
|
background-color: rgba(99, 102, 241, 0.6);
|
|
}
|
|
|
|
/* Hide scrollbar arrow buttons */
|
|
.unity-scroller--vertical .unity-repeat-button {
|
|
display: none;
|
|
}
|
|
|
|
/* Horizontal scrollbar (hide if any) */
|
|
.unity-scroller--horizontal {
|
|
height: 0;
|
|
display: none;
|
|
}
|