Spaces:
Running
Running
| #glove-input { | |
| position: absolute; top: 100px; bottom: 76px; left: 16px; width: 350px; | |
| box-sizing: border-box; overflow: auto; padding: 14px; pointer-events: auto; | |
| background: rgba(8, 8, 12, .94); border: 1px solid #36363d; border-radius: 5px; | |
| font: 14px/1.45 var(--mono); letter-spacing: 0; text-transform: none; scrollbar-width: thin; | |
| } | |
| #glove-input[hidden] { display: none; } | |
| #glove-input h2 { font-size: 16px; margin: 0; color: #ffac71; } | |
| #glove-input h4 { margin: 12px 0 6px; text-transform: capitalize; } | |
| #glove-input p { margin: 7px 0; } | |
| #glove-input .muted { color: #a5a5b5; font-size: 12px; } | |
| #glove-input .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; } | |
| #glove-input .pbtn { padding: 7px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; } | |
| #glove-input .status { color: #80e4d7; } | |
| #glove-input .notice { padding: 8px; background: #191921; border-left: 2px solid #ff7a2f; } | |
| #glove-input .error { color: #ff9d96; } | |
| #glove-input .fit-ok { color: #80e4d7; } | |
| #glove-input details { border-top: 1px solid #33333e; margin-top: 12px; padding-top: 10px; } | |
| #glove-input summary { cursor: pointer; color: #ffac71; font-weight: 600; } | |
| #glove-input .check { display: inline-flex; align-items: center; gap: 4px; margin: 5px 0; } | |
| #glove-input input, #glove-input select { color: #e6e6ed; background: #20202a; border: 1px solid #535365; padding: 4px; border-radius: 3px; font: inherit; box-sizing: border-box; } | |
| #glove-input input[type=checkbox] { accent-color: #ff7a2f; } | |
| #glove-input input[type=number] { width: 65px; min-width: 0; } | |
| #glove-input select { max-width: 100%; } | |
| #glove-input table { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 12px; } | |
| #glove-input th { color: #9999ad; text-align: left; padding: 3px; } | |
| #glove-input td { padding: 5px 2px; border-bottom: 1px solid #242430; vertical-align: top; } | |
| #glove-input td:first-child { overflow-wrap: anywhere; } | |
| #glove-input td input[type=number] { width: 56px; } | |
| #glove-input small { display: block; color: #82d4c6; font-size: 12px; } | |
| #glove-input .mapping-row { padding: 7px 0; border-bottom: 1px solid #242430; } | |
| #glove-input .mapping-row > label { display: block; color: #aaaabe; font-size: 12px; } | |
| #glove-input .mapping-row select { width: 100%; margin: 5px 0; } | |
| #glove-input .angle-row { display: flex; gap: 8px; font-size: 12px; } | |
| #glove-input .angle-row label { display: flex; flex-direction: column; gap: 4px; } | |
| #glove-input .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; font-size: 12px; } | |
| #glove-input .fields label { display: flex; flex-direction: column; gap: 4px; } | |
| #glove-input .fields input { width: 100%; } | |
| #glove-input pre { max-height: 250px; overflow: auto; font-size: 12px; color: #c9c9d5; } | |
| #hand-controls { position: absolute; top: 65px; right: 16px; bottom: 65px; width: 300px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; } | |
| #hand-controls[hidden], #osd #controls[hidden] { display: none; } | |
| #osd .cname { font-size: 12px; } | |
| #osd .cval { font-size: 12px; } | |
| #osd .ctitle { font-size: 14px; } | |
| #osd .crow { grid-template-columns: 100px 1fr 40px; min-height: 27px; } | |
| #hand-controls .cgroup { background: rgba(8,8,12,.88); } | |
| #glove-input button:focus-visible, #glove-input input:focus-visible, #glove-input summary:focus-visible { outline: 2px solid #ffac71; outline-offset: 2px; } | |
| @media (max-width: 1100px) { | |
| #glove-input { width: 290px; } | |
| #osd #controls { width: 230px; } | |
| #osd #tabs { top: 58px; } | |
| #osd #controls { top: 102px; } | |
| #hand-controls { top: 102px; width: 260px; } | |
| } | |
| @media (max-width: 700px) { | |
| #glove-input { width: calc(100% - 32px); top: auto; height: 38vh; bottom: 12px; } | |
| #osd #controls { width: 185px; bottom: calc(38vh + 30px); } | |
| #hand-controls { width: 210px; bottom: calc(38vh + 30px); } | |
| #osd #bl, #osd #br, #osd #tr { display: none; } | |
| #osd #tabs { gap: 3px; white-space: nowrap; } | |
| #osd #tabs .pbtn { padding: 6px; } | |
| } | |