6 lines
8.5 KiB
CSS
6 lines
8.5 KiB
CSS
:root{--ink:#192126;--muted:#6b7478;--line:#dce1df;--paper:#f4f6f4;--white:#fff;--sea:#147b78;--sea-dark:#0b5c5a;--coral:#e7674f;--warn:#c38a22}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;letter-spacing:0}header{height:64px;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:11px}.brand .mark{width:36px;height:36px;display:grid;place-items:center;background:var(--sea);color:#fff;font-weight:800}.brand div{display:flex;flex-direction:column}.brand strong{font-size:14px}.brand div span{font-size:12px;color:var(--muted)}.health{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.health i{width:8px;height:8px;border-radius:50%;background:var(--warn)}.health.ok i{background:#39a36c}.health.bad i{background:var(--coral)}main{height:calc(100vh - 64px);display:grid;grid-template-columns:340px 1fr}aside{background:#fff;border-right:1px solid var(--line);overflow:auto;padding:22px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-title>span{font-size:14px;font-weight:700}.section-title small{color:var(--muted)}.dropzone{height:190px;border:1px dashed #aeb8b5;background:#f8faf9;display:grid;place-items:center;cursor:pointer;overflow:hidden}.dropzone.drag{border-color:var(--sea);background:#edf7f5}.dropzone input{display:none}.dropzone img{display:none;width:100%;height:100%;object-fit:contain}.dropzone.has-image img{display:block}.dropzone.has-image #dropHint{display:none}#dropHint{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted)}#dropHint b{font-size:28px;color:var(--sea);font-weight:400}#dropHint strong{font-size:13px;color:var(--ink)}#dropHint span{font-size:11px}.field{display:block;margin-top:17px}.field span,legend{display:block;font-size:12px;font-weight:650;margin-bottom:7px}.field input{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);font:inherit;font-size:13px;outline:none}.field input:focus{border-color:var(--sea)}fieldset{border:0;padding:0;margin:16px 0}.segments{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.segments label input{display:none}.segments label span{height:36px;display:grid;place-items:center;font-size:12px;border-right:1px solid var(--line);cursor:pointer}.segments label:last-child span{border:0}.segments input:checked+span{background:var(--sea);color:#fff}.primary{height:42px;width:100%;border:0;background:var(--sea);color:#fff;padding:0 14px;display:flex;align-items:center;justify-content:space-between;font-weight:700;cursor:pointer}.primary:hover{background:var(--sea-dark)}.primary:disabled{background:#aeb8b5;cursor:not-allowed}.error{min-height:17px;color:#b44736;font-size:11px}.history{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}.section-title button{border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer}.job-item{width:100%;border:0;border-left:3px solid transparent;background:none;text-align:left;padding:10px 9px;margin-bottom:3px;cursor:pointer}.job-item:hover,.job-item.active{background:#f0f5f4;border-left-color:var(--sea)}.job-item strong,.job-item span{display:block}.job-item strong{font-size:12px;margin-bottom:4px}.job-item span{font-size:10px;color:var(--muted)}.workspace{overflow:auto;padding:28px;display:grid;place-items:center}.empty{text-align:center;color:var(--muted)}.empty h1{font-size:20px;color:var(--ink);margin:18px 0 7px}.empty p{font-size:13px}.grid-icon{margin:auto;width:76px;height:76px;border:1px solid var(--line);padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.grid-icon i{background:#d9e9e6}.job-view{width:min(880px,100%);align-self:start}.hidden{display:none!important}.job-head{display:flex;justify-content:space-between;align-items:flex-start}.job-head h1{font-size:22px;margin:5px 0}.job-head p,.job-head>span{font-size:12px;color:var(--muted)}.status{font-size:11px;color:var(--sea);font-weight:700}.progress{height:3px;background:#dce1df;margin:18px 0 20px;overflow:hidden}.progress i{display:block;height:100%;background:var(--sea);width:0;transition:width .3s}.preview-panel{background:#fff;border:1px solid var(--line)}.preview-top{height:48px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding-right:16px}.tabs{height:100%;display:flex}.tabs button{border:0;border-right:1px solid var(--line);background:#fff;padding:0 20px;cursor:pointer;color:var(--muted)}.tabs button.active{color:var(--sea);box-shadow:inset 0 -2px var(--sea);font-weight:700}.preview-top>span{font-size:11px;color:var(--muted)}.stage{min-height:380px;display:grid;place-items:center;background-color:#eef1ef;background-image:linear-gradient(45deg,#dfe4e1 25%,transparent 25%),linear-gradient(-45deg,#dfe4e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe4e1 75%),linear-gradient(-45deg,transparent 75%,#dfe4e1 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}canvas{width:320px;height:320px;image-rendering:pixelated}.frames{height:68px;display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line)}.frames button{border:0;border-right:1px solid var(--line);background:#fff;padding:3px;cursor:pointer}.frames button:last-child{border:0}.frames button.active{background:#dcefeb;box-shadow:inset 0 -3px var(--sea)}.frames canvas{width:54px;height:54px;max-width:100%;object-fit:contain}.downloads{display:flex;gap:8px;margin:12px 0}.downloads a{font-size:12px;padding:9px 12px;background:#fff;border:1px solid var(--line);color:var(--sea);text-decoration:none}details{background:#fff;border:1px solid var(--line);margin-top:12px;padding:12px 14px}summary{font-size:12px;font-weight:700;cursor:pointer}pre{font-size:11px;white-space:pre-wrap;color:#445156;max-height:220px;overflow:auto} @media(max-width:760px){header{padding:0 14px}main{height:auto;display:block}aside{border-right:0;border-bottom:1px solid var(--line)}.workspace{padding:16px;min-height:520px}.preview-top{height:auto;align-items:stretch}.tabs{display:grid;grid-template-columns:repeat(4,1fr);flex:1}.tabs button{padding:12px 6px}.preview-top>span{display:none}.stage{min-height:300px}canvas{width:260px;height:260px}.frames{height:54px}.frames canvas{height:42px}}
|
|
:root{--preview-border:#c9d4d1}.stage canvas,.pose-canvas-preview{grid-area:1/1;width:320px;height:320px;image-rendering:pixelated;object-fit:contain}.pose-canvas-preview{background:#ff00ff;padding:8px}.task-heading{display:flex;align-items:center;gap:12px}.task-heading>span:first-child{flex:1}.pose-summary{font-size:11px;color:var(--muted);font-weight:500}.preview-note{font-size:11px;color:var(--muted);padding:9px 10px 0}.prompt-grid .pose-cell{position:relative;background:#fff;border:1px solid var(--preview-border);padding:6px;min-width:0}.prompt-grid .pose-cell.active{border:2px solid var(--sea)}.pose-cell .pose-image{width:100%;height:118px;object-fit:contain;background:#ff00ff;display:block}.pose-cell .pose-image.reference{background:#eef1ef}.pose-cell .pose-badge{display:inline-block;font-size:9px;color:var(--sea-dark);background:#e5f3f0;padding:2px 5px;margin-top:4px}.pose-cell .pose-badge.candidate{color:#9b5c12;background:#fff1d4}.pose-cell .pose-badge.failed{color:#b44736;background:#fde9e5}.pose-cell .pose-link{font-size:10px;color:var(--sea);float:right;margin-top:5px}.pose-cell p{clear:both}.pose-cell small{display:block;color:#b44736;font-size:9px;margin-top:4px;max-height:32px;overflow:auto}.pose-cell .pose-generate{margin-top:6px}.pose-cell.busy{opacity:.7}@media(max-width:760px){.stage canvas,.pose-canvas-preview{width:260px;height:260px}.task-heading{gap:6px;flex-wrap:wrap}.task-heading button{margin-left:auto}}
|
|
.identity-inputs{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:16px;align-items:start;text-align:left;width:min(760px,100%);margin:20px auto 0}.identity-inputs>img{display:block;width:100%;height:260px;object-fit:contain;background:#ff00ff}.identity-inputs>div{min-width:0}.identity-inputs pre{max-height:260px;overflow:auto;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}.empty{width:min(760px,100%)}
|
|
@media(max-width:760px){.identity-inputs{grid-template-columns:1fr}.identity-inputs>img{height:220px}.identity-inputs pre{max-height:240px}}
|
|
.pose-cell .qa-warning{color:#9b6b1d;background:#fff7df}.pose-cell .attempt-note{color:#687778;background:#edf2f1}
|