lerobot/glove_visualizer

1#glove-input {2  position: absolute; top: 100px; bottom: 76px; left: 16px; width: 350px;3  box-sizing: border-box; overflow: auto; padding: 14px; pointer-events: auto;4  background: rgba(8, 8, 12, .94); border: 1px solid #36363d; border-radius: 5px;5  font: 14px/1.45 var(--mono); letter-spacing: 0; text-transform: none; scrollbar-width: thin;6}7#glove-input[hidden] { display: none; }8#glove-input h2 { font-size: 16px; margin: 0; color: #ffac71; }9#glove-input h4 { margin: 12px 0 6px; text-transform: capitalize; }10#glove-input p { margin: 7px 0; }11#glove-input .muted { color: #a5a5b5; font-size: 12px; }12#glove-input .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }13#glove-input .pbtn { padding: 7px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }14#glove-input .status { color: #80e4d7; }15#glove-input .notice { padding: 8px; background: #191921; border-left: 2px solid #ff7a2f; }16#glove-input .error { color: #ff9d96; }17#glove-input .fit-ok { color: #80e4d7; }18#glove-input details { border-top: 1px solid #33333e; margin-top: 12px; padding-top: 10px; }19#glove-input summary { cursor: pointer; color: #ffac71; font-weight: 600; }20#glove-input .check { display: inline-flex; align-items: center; gap: 4px; margin: 5px 0; }21#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; }22#glove-input input[type=checkbox] { accent-color: #ff7a2f; }23#glove-input input[type=number] { width: 65px; min-width: 0; }24#glove-input select { max-width: 100%; }25#glove-input table { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 12px; }26#glove-input th { color: #9999ad; text-align: left; padding: 3px; }27#glove-input td { padding: 5px 2px; border-bottom: 1px solid #242430; vertical-align: top; }28#glove-input td:first-child { overflow-wrap: anywhere; }29#glove-input td input[type=number] { width: 56px; }30#glove-input small { display: block; color: #82d4c6; font-size: 12px; }31#glove-input .mapping-row { padding: 7px 0; border-bottom: 1px solid #242430; }32#glove-input .mapping-row > label { display: block; color: #aaaabe; font-size: 12px; }33#glove-input .mapping-row select { width: 100%; margin: 5px 0; }34#glove-input .angle-row { display: flex; gap: 8px; font-size: 12px; }35#glove-input .angle-row label { display: flex; flex-direction: column; gap: 4px; }36#glove-input .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; font-size: 12px; }37#glove-input .fields label { display: flex; flex-direction: column; gap: 4px; }38#glove-input .fields input { width: 100%; }39#glove-input pre { max-height: 250px; overflow: auto; font-size: 12px; color: #c9c9d5; }40#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; }41#hand-controls[hidden], #osd #controls[hidden] { display: none; }42#osd .cname { font-size: 12px; }43#osd .cval { font-size: 12px; }44#osd .ctitle { font-size: 14px; }45#osd .crow { grid-template-columns: 100px 1fr 40px; min-height: 27px; }46#hand-controls .cgroup { background: rgba(8,8,12,.88); }47#glove-input button:focus-visible, #glove-input input:focus-visible, #glove-input summary:focus-visible { outline: 2px solid #ffac71; outline-offset: 2px; }48@media (max-width: 1100px) {49  #glove-input { width: 290px; }50  #osd #controls { width: 230px; }51  #osd #tabs { top: 58px; }52  #osd #controls { top: 102px; }53  #hand-controls { top: 102px; width: 260px; }54}55@media (max-width: 700px) {56  #glove-input { width: calc(100% - 32px); top: auto; height: 38vh; bottom: 12px; }57  #osd #controls { width: 185px; bottom: calc(38vh + 30px); }58  #hand-controls { width: 210px; bottom: calc(38vh + 30px); }59  #osd #bl, #osd #br, #osd #tr { display: none; }60  #osd #tabs { gap: 3px; white-space: nowrap; }61  #osd #tabs .pbtn { padding: 6px; }62}63