Spaces:
Sleeping
Sleeping
| :root{ | |
| --bg0:#070A10; | |
| --bg1:#0B1020; | |
| --card: rgba(255,255,255,.06); | |
| --card2: rgba(255,255,255,.09); | |
| --stroke: rgba(255,255,255,.10); | |
| --stroke2: rgba(255,255,255,.18); | |
| --text:#EAF0FF; | |
| --muted:#A8B3D6; | |
| --accent:#6AE4FF; | |
| --accent2:#A78BFA; | |
| --good:#34D399; | |
| --warn:#FBBF24; | |
| --bad:#FB7185; | |
| --shadow: 0 18px 60px rgba(0,0,0,.55); | |
| --r: 18px; | |
| --r2: 26px; | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%} | |
| body{ | |
| margin:0; | |
| font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; | |
| background: | |
| radial-gradient(1200px 600px at 22% 10%, rgba(106,228,255,.20), transparent 60%), | |
| radial-gradient(900px 700px at 80% 18%, rgba(167,139,250,.18), transparent 55%), | |
| radial-gradient(1400px 900px at 50% 90%, rgba(34,211,238,.08), transparent 60%), | |
| linear-gradient(180deg, var(--bg0), var(--bg1)); | |
| color: var(--text); | |
| overflow-x:hidden; | |
| } | |
| /* Layout */ | |
| .app{ | |
| display:grid; | |
| grid-template-columns: 460px 1fr; | |
| gap:14px; | |
| height:100vh; | |
| padding:14px; | |
| } | |
| .sidebar, .topbar, .card{ | |
| border:1px solid var(--stroke); | |
| background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); | |
| border-radius: var(--r2); | |
| box-shadow: var(--shadow); | |
| } | |
| .sidebar{ | |
| overflow:hidden; | |
| display:flex; | |
| flex-direction:column; | |
| min-width: 380px; | |
| } | |
| .main{ | |
| display:flex; | |
| flex-direction:column; | |
| gap:14px; | |
| min-width: 680px; | |
| } | |
| /* Sidebar header */ | |
| .sideTop{ | |
| padding:14px; | |
| border-bottom: 1px solid rgba(255,255,255,.08); | |
| background: rgba(255,255,255,.03); | |
| } | |
| .sideTitle{ | |
| display:flex; | |
| align-items:center; | |
| gap:12px; | |
| } | |
| .logo{ | |
| width:38px;height:38px;border-radius:14px; | |
| background: radial-gradient(circle at 30% 30%, rgba(106,228,255,.85), rgba(167,139,250,.65)); | |
| border:1px solid rgba(255,255,255,.20); | |
| box-shadow: 0 10px 28px rgba(106,228,255,.18); | |
| position:relative; | |
| } | |
| .logo:after{ | |
| content:""; | |
| position:absolute; inset:8px; | |
| border-radius:12px; | |
| border:1px dashed rgba(255,255,255,.35); | |
| opacity:.55; | |
| } | |
| .title{font-weight:900; letter-spacing:.04em} | |
| .sub{font-size:12px; color:var(--muted); margin-top:2px} | |
| .sideScroll{padding:12px 14px; overflow:auto; flex:1} | |
| /* Cards */ | |
| .section{ | |
| padding:12px; | |
| border-radius: 22px; | |
| } | |
| .sectionTitle{ | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| font-size:12px; | |
| font-weight:900; | |
| letter-spacing:.06em; | |
| text-transform:uppercase; | |
| margin-bottom:10px; | |
| color: rgba(255,255,255,.88); | |
| } | |
| .divider{height:1px; background: rgba(255,255,255,.08); margin:12px 0} | |
| /* Fields */ | |
| .field{margin:10px 0} | |
| label{ | |
| display:block; | |
| font-size:12px; | |
| color: rgba(255,255,255,.82); | |
| margin-bottom:6px; | |
| } | |
| .hint{ | |
| font-size:11px; | |
| color: var(--muted); | |
| margin-top:6px; | |
| line-height:1.35; | |
| } | |
| select, input[type="text"], textarea{ | |
| width:100%; | |
| padding:10px 10px; | |
| border-radius: 14px; | |
| border:1px solid rgba(255,255,255,.10); | |
| background: rgba(0,0,0,.22); | |
| color: var(--text); | |
| outline:none; | |
| transition: border-color .12s ease; | |
| font-size:12px; | |
| } | |
| select:focus, input[type="text"]:focus, textarea:focus{border-color: rgba(106,228,255,.45);} | |
| .grid2{ | |
| display:grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap:10px; | |
| } | |
| /* Buttons */ | |
| .btn{ | |
| appearance:none; | |
| border:1px solid var(--stroke); | |
| background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); | |
| color:var(--text); | |
| border-radius: 14px; | |
| padding:10px 12px; | |
| font-weight:800; | |
| font-size:12px; | |
| cursor:pointer; | |
| transition: transform .12s ease, border-color .12s ease; | |
| display:inline-flex; | |
| align-items:center; | |
| gap:8px; | |
| justify-content:center; | |
| } | |
| .btn:hover{transform: translateY(-1px); border-color: var(--stroke2);} | |
| .btn:active{transform: translateY(0px) scale(.99);} | |
| .btn.primary{ | |
| border-color: rgba(106,228,255,.38); | |
| background: linear-gradient(180deg, rgba(106,228,255,.18), rgba(167,139,250,.10)); | |
| box-shadow: 0 12px 30px rgba(106,228,255,.10); | |
| } | |
| .btn.ghost{background: transparent; border-color: rgba(255,255,255,.10);} | |
| .btnRow{display:flex; gap:10px; margin-top:10px} | |
| .btnRow .btn{flex:1} | |
| .tinyBtn{padding:8px 10px; font-weight:900} | |
| .hidden{display:none } | |
| .hidden { display: none; } | |
| .tabBar { display: flex; gap: 8px; margin: 8px 0 12px; } | |
| .tabBtn { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: inherit; cursor: pointer; } | |
| .tabBtn.active { background: rgba(255,255,255,.08); } | |
| .tabPanel { margin-top: 8px; } | |
| /* Spinner */ | |
| .spinner{ | |
| width:14px;height:14px;border-radius:50%; | |
| border:2px solid rgba(255,255,255,.22); | |
| border-top-color: rgba(106,228,255,.85); | |
| animation: spin .8s linear infinite; | |
| } | |
| @keyframes spin{to{transform: rotate(360deg);}} | |
| /* Dropzone */ | |
| .dropzone{ | |
| display:flex; | |
| gap:12px; | |
| align-items:center; | |
| border-radius: 18px; | |
| border:1px dashed rgba(255,255,255,.22); | |
| background: rgba(0,0,0,.14); | |
| padding:12px; | |
| cursor:pointer; | |
| transition: border-color .12s ease, background .12s ease; | |
| } | |
| .dropzone:hover{ | |
| border-color: rgba(106,228,255,.52); | |
| background: rgba(106,228,255,.05); | |
| } | |
| .dropzone.drag{ | |
| border-color: rgba(167,139,250,.65); | |
| background: rgba(167,139,250,.06); | |
| } | |
| .dzLeft{ | |
| width:38px;height:38px;border-radius:14px; | |
| display:flex;align-items:center;justify-content:center; | |
| background: rgba(106,228,255,.10); | |
| border:1px solid rgba(106,228,255,.22); | |
| } | |
| .dzRight{flex:1} | |
| .dzTitle{font-weight:900; letter-spacing:.02em} | |
| .dzSub{font-size:12px; color: var(--muted); margin-top:2px} | |
| .dzMeta{font-size:11px; color: rgba(255,255,255,.70); margin-top:6px; font-family: var(--mono);} | |
| .previewWrap{ | |
| margin-top:10px; | |
| border:1px solid rgba(255,255,255,.10); | |
| border-radius: 18px; | |
| overflow:hidden; | |
| background: rgba(0,0,0,.18); | |
| } | |
| .previewWrap img{display:block; width:100%; height:auto; max-height: 220px; object-fit: contain} | |
| /* Status */ | |
| .statusRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center} | |
| .pill{ | |
| display:inline-flex; | |
| align-items:center; | |
| gap:8px; | |
| padding:8px 10px; | |
| border:1px solid var(--stroke); | |
| border-radius: 999px; | |
| background: rgba(255,255,255,.04); | |
| font-size:12px; | |
| color: var(--muted); | |
| } | |
| .dot{ | |
| width:8px;height:8px;border-radius:50%; | |
| background: var(--muted); | |
| box-shadow:0 0 0 3px rgba(168,179,214,.10); | |
| } | |
| .dot.idle{background: var(--muted);} | |
| .dot.run{background: var(--warn); box-shadow:0 0 0 3px rgba(251,191,36,.12);} | |
| .dot.ok{background: var(--good); box-shadow:0 0 0 3px rgba(52,211,153,.12);} | |
| .dot.bad{background: var(--bad); box-shadow:0 0 0 3px rgba(251,113,133,.12);} | |
| .mono{font-family: var(--mono);} | |
| .logBox{ | |
| margin-top:10px; | |
| border:1px solid rgba(255,255,255,.10); | |
| background: rgba(0,0,0,.20); | |
| border-radius: 16px; | |
| padding:10px; | |
| font-size:11px; | |
| line-height:1.55; | |
| white-space:pre-wrap; | |
| max-height: 200px; | |
| overflow:auto; | |
| } | |
| /* Topbar */ | |
| .topbar{ | |
| padding: 12px 14px; | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| gap:12px; | |
| } | |
| .topTitle{font-weight:900; letter-spacing:.04em} | |
| .topSub{font-size:12px; color: var(--muted); margin-top:2px} | |
| .topLeft{display:flex; flex-direction:column} | |
| .topRight{display:flex; gap:10px; align-items:center} | |
| .muted{color: var(--muted)} | |
| /* Result grid */ | |
| .grid3{ | |
| display:grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap:12px; | |
| } | |
| .resultCard{overflow:hidden} | |
| .cardHeader{ | |
| padding:10px 12px; | |
| border-bottom: 1px solid rgba(255,255,255,.08); | |
| background: rgba(0,0,0,.16); | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| } | |
| .cardHeaderTitle{ | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| font-weight:900; | |
| font-size:12px; | |
| letter-spacing:.06em; | |
| text-transform:uppercase; | |
| color: rgba(255,255,255,.88); | |
| } | |
| .imgWrap{ | |
| padding:10px; | |
| height: 360px; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| background: rgba(0,0,0,.18); | |
| } | |
| .imgWrap img{ | |
| max-width:100%; | |
| max-height:100%; | |
| border-radius: 18px; | |
| border:1px solid rgba(255,255,255,.10); | |
| background: rgba(0,0,0,.14); | |
| } | |
| .miniLink{ | |
| font-size:12px; | |
| color: rgba(255,255,255,.75); | |
| text-decoration:none; | |
| border:1px solid rgba(255,255,255,.12); | |
| padding:6px 10px; | |
| border-radius: 999px; | |
| background: rgba(255,255,255,.04); | |
| } | |
| .miniLink:hover{border-color: rgba(106,228,255,.38);} | |
| .metaCard .meta{ | |
| margin:0; | |
| padding:12px; | |
| font-size:11px; | |
| line-height:1.6; | |
| background: rgba(0,0,0,.20); | |
| border-top: 1px solid rgba(255,255,255,.08); | |
| border-bottom-left-radius: var(--r2); | |
| border-bottom-right-radius: var(--r2); | |
| overflow:auto; | |
| max-height: 220px; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1180px){ | |
| .app{grid-template-columns: 1fr; height:auto} | |
| .main{min-width:0} | |
| .sidebar{min-height: 420px} | |
| .grid3{grid-template-columns: 1fr} | |
| .imgWrap{height: auto} | |
| } | |
| .fileHidden{ | |
| position:absolute; | |
| left:-9999px; | |
| width:1px; | |
| height:1px; | |
| opacity:0; | |
| pointer-events:none; | |
| } |