Spaces:
Running
Running
Download css/computer-use.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 4.6 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/computer-use.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/computer-use.css
-
curl -L -o computer-use.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/computer-use.css
4.6 kB
| .computer-use-workspace{gap:14px} | |
| .computer-use-tabs{display:flex;gap:3px;padding:4px;width:max-content;max-width:100%;border:1px solid var(--border);border-radius:7px;background:var(--bg-sunken)} | |
| .computer-use-tabs>button{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border:0;border-radius:5px;background:transparent;color:var(--text-secondary);font-size:11px;cursor:pointer} | |
| .computer-use-tabs>button[aria-selected="true"]{background:var(--bg-elevated);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.08)} | |
| .computer-use-toolbar{display:flex;align-items:flex-end;gap:14px;padding:12px 14px} | |
| .computer-use-toolbar>label{display:grid;gap:5px;min-width:240px;color:var(--text-tertiary);font-size:10px} | |
| .computer-use-toolbar>label select{width:100%} | |
| .computer-local-badge{display:flex;align-items:center;gap:6px;margin-right:auto;color:var(--success);font-size:10px} | |
| .computer-sandbox-card{display:grid;gap:10px;padding:13px} | |
| .computer-sandbox-card>header,.computer-action-log>header{display:flex;align-items:center;gap:10px} | |
| .computer-sandbox-card>header>div{display:grid;gap:3px;margin-right:auto} | |
| .computer-sandbox-card>header strong,.computer-action-log>header strong{font-size:11px;font-weight:600} | |
| .computer-sandbox-card>header span,.computer-action-log>header span{color:var(--text-tertiary);font-size:9px} | |
| .computer-sandbox-canvas{display:block;width:100%;height:auto;max-height:62vh;aspect-ratio:12/7;border:1px solid var(--border);border-radius:4px;background:#eef2f6;object-fit:contain;cursor:default;image-rendering:auto} | |
| .computer-sandbox-canvas.is-agent-running{cursor:progress} | |
| .computer-action-log{display:grid;gap:9px;padding:13px} | |
| .computer-action-log>header{margin-bottom:2px} | |
| .computer-action-log>header>span{margin-left:auto} | |
| .computer-action-log>div{display:grid;grid-template-columns:28px minmax(120px,1fr) minmax(140px,2fr) 70px;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--border)} | |
| .computer-action-log>div>small,.computer-action-log>div>code{color:var(--text-tertiary);font:9px var(--font-mono)} | |
| .computer-action-log>div>strong{font-size:10px;font-weight:550} | |
| .computer-action-log>div>span{overflow:hidden;color:var(--text-secondary);font-size:9px;text-overflow:ellipsis;white-space:nowrap} | |
| .computer-action-log .ws-empty{margin:0} | |
| .computer-benchmark{display:grid;gap:13px} | |
| .computer-benchmark>.feature-heading{margin:0;padding:0} | |
| .computer-model-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} | |
| .computer-model-choices>label{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:5px;background:var(--bg-elevated);font-size:10px} | |
| .computer-model-choices input{accent-color:var(--accent)} | |
| .computer-model-choices>label>span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap} | |
| .computer-model-choices small{color:var(--text-tertiary);font:9px var(--font-mono)} | |
| .computer-benchmark-summary{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:5px;background:var(--bg-sunken);font-size:10px} | |
| .computer-benchmark-summary strong{color:var(--accent)} | |
| .computer-benchmark-summary span{color:var(--text-secondary)} | |
| .computer-benchmark-rows{display:grid;gap:6px} | |
| .computer-benchmark-row{padding:10px 12px;border:1px solid var(--border);border-radius:5px;background:var(--bg-elevated)} | |
| .computer-benchmark-row>header{display:grid;grid-template-columns:minmax(100px,1fr) auto minmax(120px,auto);align-items:center;gap:10px} | |
| .computer-benchmark-row>header strong{font-size:10px;font-weight:600} | |
| .computer-benchmark-row>header>span{font-size:9px}.computer-benchmark-row .is-pass{color:var(--success)}.computer-benchmark-row .is-fail{color:var(--warning)} | |
| .computer-benchmark-row>header small{color:var(--text-tertiary);font:9px var(--font-mono);text-align:right} | |
| .computer-benchmark-row>p{margin:8px 0 0;color:var(--text-secondary);font-size:10px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere} | |
| .computer-benchmark-row .computer-failure{display:block;margin-top:6px;color:var(--warning);font-size:9px} | |
| @media(max-width:760px){.computer-use-toolbar{align-items:stretch;flex-direction:column}.computer-use-toolbar>label{min-width:0}.computer-local-badge{margin:0}.computer-action-log>div{grid-template-columns:25px 1fr 60px}.computer-action-log>div>span{grid-column:2/-1}.computer-model-choices{grid-template-columns:1fr}.computer-benchmark-row>header{grid-template-columns:1fr auto}.computer-benchmark-row>header small{grid-column:1/-1;text-align:left}} | |