0a372cb88d
캐릭터-first 전환 전에 만든 PDA/창고 UI 작업물을 히스토리에 보존. - InboundPda.uxml/.uss/.tss + InboundPanelSettings - InboundUIController: 단계별 렌더링 + 입력 위임 - InboundSceneSetup: UIDocument/PanelSettings 자동 와이어링 씬에는 비활성 상태로 존재. 추후 입고 로직 재연결 시 재사용 가능. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
246 lines
4.5 KiB
Plaintext
246 lines
4.5 KiB
Plaintext
/* SINO WMS 입고 교육 — PDA/창고 UI 스타일 (mockup/inbound_pda.html 이식) */
|
|
|
|
.root {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: 24px;
|
|
background-color: rgb(31, 36, 48);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.h1 {
|
|
font-size: 18px;
|
|
color: rgb(230, 233, 239);
|
|
-unity-font-style: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sub {
|
|
color: rgb(139, 147, 167);
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ---- 탑다운 창고 ---- */
|
|
.warehouse {
|
|
background-color: rgb(39, 45, 58);
|
|
border-radius: 12px;
|
|
padding: 18px;
|
|
margin-right: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.grid {
|
|
flex-direction: column;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.grid-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.loc {
|
|
width: 64px;
|
|
height: 56px;
|
|
border-radius: 8px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 4px;
|
|
border-width: 2px;
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.loc-code {
|
|
font-size: 11px;
|
|
color: rgb(230, 233, 239);
|
|
}
|
|
|
|
.loc-cap {
|
|
font-size: 9px;
|
|
color: rgb(170, 178, 197);
|
|
}
|
|
|
|
.ambient { background-color: rgb(58, 66, 86); }
|
|
.chilled { background-color: rgb(30, 74, 95); }
|
|
.frozen { background-color: rgb(30, 58, 111); }
|
|
|
|
.loc--selectable {
|
|
border-color: rgb(110, 168, 254);
|
|
}
|
|
|
|
.loc--filled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.legend {
|
|
flex-direction: row;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.legend-item {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.legend-item Label {
|
|
font-size: 11px;
|
|
color: rgb(139, 147, 167);
|
|
}
|
|
|
|
.dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.dot-ambient { background-color: rgb(58, 66, 86); }
|
|
.dot-chilled { background-color: rgb(30, 74, 95); }
|
|
.dot-frozen { background-color: rgb(30, 58, 111); }
|
|
|
|
/* ---- PDA ---- */
|
|
.pda {
|
|
width: 300px;
|
|
background-color: rgb(17, 21, 28);
|
|
border-radius: 28px;
|
|
padding: 16px;
|
|
border-width: 8px;
|
|
border-color: rgb(10, 13, 18);
|
|
}
|
|
|
|
.pda-screen {
|
|
background-color: rgb(244, 246, 251);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
min-height: 460px;
|
|
}
|
|
|
|
.step-bar {
|
|
flex-direction: row;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.step-seg {
|
|
flex-grow: 1;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
margin-right: 4px;
|
|
background-color: rgb(211, 217, 230);
|
|
}
|
|
|
|
.step-seg--on {
|
|
background-color: rgb(43, 111, 255);
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 13px;
|
|
color: rgb(43, 111, 255);
|
|
-unity-font-style: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.step-head {
|
|
font-size: 17px;
|
|
color: rgb(31, 36, 48);
|
|
-unity-font-style: bold;
|
|
margin-bottom: 12px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.line-card {
|
|
background-color: rgb(255, 255, 255);
|
|
border-width: 1px;
|
|
border-color: rgb(227, 232, 242);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.line-card .name {
|
|
-unity-font-style: bold;
|
|
font-size: 14px;
|
|
color: rgb(31, 36, 48);
|
|
white-space: normal;
|
|
}
|
|
|
|
.line-card .meta {
|
|
font-size: 12px;
|
|
color: rgb(107, 114, 128);
|
|
margin-top: 2px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.row {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 10px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
border-radius: 6px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.b-ambient { background-color: rgb(231, 236, 251); color: rgb(43, 78, 255); }
|
|
.b-chilled { background-color: rgb(223, 241, 246); color: rgb(12, 116, 145); }
|
|
.b-frozen { background-color: rgb(223, 235, 255); color: rgb(30, 58, 111); }
|
|
|
|
Button {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
border-width: 0;
|
|
border-radius: 10px;
|
|
background-color: rgb(43, 111, 255);
|
|
color: rgb(255, 255, 255);
|
|
font-size: 14px;
|
|
-unity-font-style: bold;
|
|
margin-top: 6px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
Button.ghost {
|
|
background-color: rgb(238, 241, 248);
|
|
color: rgb(43, 111, 255);
|
|
}
|
|
|
|
TextField, IntegerField {
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.feedback {
|
|
font-size: 12px;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.fb-ok { background-color: rgb(227, 247, 234); color: rgb(26, 127, 67); }
|
|
.fb-warn { background-color: rgb(253, 236, 236); color: rgb(192, 57, 43); }
|
|
|
|
.result-score {
|
|
font-size: 42px;
|
|
-unity-font-style: bold;
|
|
-unity-text-align: middle-center;
|
|
color: rgb(43, 111, 255);
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.err-item {
|
|
font-size: 12px;
|
|
color: rgb(192, 57, 43);
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
white-space: normal;
|
|
}
|