| * { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
| :root { |
| --bg: #0a0a1a; |
| --surface: #1a1a2e; |
| --border: #2a2a40; |
| --accent: #FF6B35; |
| --accent-dim: rgba(255, 107, 53, 0.15); |
| --text: #e0e0e0; |
| --text-muted: #888; |
| --green: #00e676; |
| --yellow: #ffd740; |
| --red: #ff5252; |
| } |
|
|
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| user-select: none; |
| } |
|
|
| .hidden { display: none !important; } |
|
|
| .app-view { |
| display: none; |
| flex-direction: column; |
| height: 100vh; |
| } |
|
|
| .app-view.visible { |
| display: flex; |
| } |
|
|
| |
| .login-view { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| height: 100vh; |
| background: radial-gradient(ellipse at center, #1a1a3e 0%, var(--bg) 70%); |
| } |
|
|
| .login-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 3rem; |
| text-align: center; |
| max-width: 380px; |
| width: 90%; |
| } |
|
|
| .login-card h2 { |
| font-size: 1.8rem; |
| margin-bottom: 0.5rem; |
| color: var(--accent); |
| } |
|
|
| .login-card p { |
| color: var(--text-muted); |
| margin-bottom: 2rem; |
| font-size: 0.9rem; |
| } |
|
|
| .btn-hf { |
| background: #FFD21E; |
| color: #1a1a1a; |
| border: none; |
| padding: 0.8rem 1.5rem; |
| border-radius: 8px; |
| font-size: 0.95rem; |
| font-weight: 600; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| transition: transform 0.15s, box-shadow 0.15s; |
| } |
|
|
| .btn-hf:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(255, 210, 30, 0.3); |
| } |
|
|
| |
| header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0.6rem 1rem; |
| background: var(--surface); |
| border-bottom: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
|
|
| .brand { |
| font-weight: 700; |
| font-size: 1rem; |
| color: var(--accent); |
| } |
|
|
| .brand span { |
| color: var(--text-muted); |
| font-weight: 400; |
| font-size: 0.85rem; |
| margin-left: 0.4rem; |
| } |
|
|
| .user-info { |
| display: flex; |
| align-items: center; |
| gap: 0.8rem; |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| } |
|
|
| .btn-logout { |
| background: none; |
| border: 1px solid var(--border); |
| color: var(--text-muted); |
| padding: 0.3rem 0.8rem; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| cursor: pointer; |
| transition: border-color 0.15s; |
| } |
|
|
| .btn-logout:hover { border-color: var(--text-muted); } |
|
|
| |
| main { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| min-height: 0; |
| } |
|
|
| |
| .video-container { |
| flex: 1; |
| position: relative; |
| background: #000; |
| min-height: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .video-container video { |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| display: block; |
| } |
|
|
| .video-container canvas { |
| position: absolute; |
| pointer-events: none; |
| } |
|
|
| |
| .hud { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| pointer-events: none; |
| padding: 0.6rem; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| } |
|
|
| .hud-top, .hud-bottom { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| } |
|
|
| .badge { |
| background: rgba(0, 0, 0, 0.7); |
| backdrop-filter: blur(8px); |
| padding: 0.3rem 0.6rem; |
| border-radius: 6px; |
| font-size: 0.75rem; |
| font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; |
| white-space: nowrap; |
| } |
|
|
| .badge.status-disconnected { border-left: 3px solid var(--red); } |
| .badge.status-connecting { border-left: 3px solid var(--yellow); } |
| .badge.status-connected { border-left: 3px solid var(--green); } |
| .badge.status-streaming { border-left: 3px solid var(--green); } |
|
|
| .badge.tracking-active { border-left: 3px solid var(--green); } |
| .badge.tracking-searching { border-left: 3px solid var(--yellow); } |
| .badge.tracking-disabled { border-left: 3px solid var(--text-muted); } |
|
|
| .badge-group { |
| display: flex; |
| gap: 0.4rem; |
| flex-wrap: wrap; |
| } |
|
|
| .model-loading { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| } |
|
|
| .model-loading .spinner { |
| width: 32px; |
| height: 32px; |
| border: 3px solid var(--border); |
| border-top-color: var(--accent); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| margin: 0 auto 0.8rem; |
| } |
|
|
| @keyframes spin { to { transform: rotate(360deg); } } |
|
|
| |
| .controls { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.5rem 0.8rem; |
| background: var(--surface); |
| border-top: 1px solid var(--border); |
| flex-shrink: 0; |
| flex-wrap: wrap; |
| } |
|
|
| .controls select { |
| background: var(--bg); |
| color: var(--text); |
| border: 1px solid var(--border); |
| padding: 0.4rem 0.6rem; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| min-width: 120px; |
| } |
|
|
| .btn { |
| padding: 0.4rem 0.9rem; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| font-weight: 600; |
| border: none; |
| cursor: pointer; |
| transition: opacity 0.15s; |
| } |
|
|
| .btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| .btn-connect { background: var(--accent); color: #fff; } |
| .btn-start { background: var(--green); color: #111; } |
| .btn-stop { background: var(--red); color: #fff; } |
|
|
| .spacer { flex: 1; } |
|
|
| |
| .toggle { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| cursor: pointer; |
| } |
|
|
| .toggle input[type="checkbox"] { |
| appearance: none; |
| width: 36px; |
| height: 20px; |
| background: var(--border); |
| border-radius: 10px; |
| position: relative; |
| cursor: pointer; |
| transition: background 0.2s; |
| } |
|
|
| .toggle input[type="checkbox"]::after { |
| content: ''; |
| position: absolute; |
| width: 16px; |
| height: 16px; |
| background: #fff; |
| border-radius: 50%; |
| top: 2px; |
| left: 2px; |
| transition: transform 0.2s; |
| } |
|
|
| .toggle input[type="checkbox"]:checked { |
| background: var(--accent); |
| } |
|
|
| .toggle input[type="checkbox"]:checked::after { |
| transform: translateX(16px); |
| } |
|
|
| |
| .tuning { |
| display: flex; |
| gap: 1.5rem; |
| padding: 0.5rem 0.8rem; |
| background: var(--bg); |
| border-top: 1px solid var(--border); |
| flex-shrink: 0; |
| flex-wrap: wrap; |
| align-items: center; |
| } |
|
|
| .tuning label { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| white-space: nowrap; |
| } |
|
|
| .tuning input[type="range"] { |
| width: 80px; |
| accent-color: var(--accent); |
| } |
|
|
| .tuning .value { |
| font-family: 'SF Mono', monospace; |
| color: var(--text); |
| min-width: 2.5em; |
| text-align: right; |
| } |
|
|
| .btn-tune { |
| background: none; |
| border: 1px solid var(--border); |
| color: var(--text-muted); |
| padding: 0.3rem 0.6rem; |
| border-radius: 6px; |
| font-size: 0.75rem; |
| cursor: pointer; |
| } |
|
|
| .btn-tune:hover { border-color: var(--accent); color: var(--accent); } |
|
|
| |
| @media (max-width: 600px) { |
| .controls { gap: 0.3rem; } |
| .btn { padding: 0.35rem 0.6rem; font-size: 0.75rem; } |
| .tuning { gap: 0.8rem; } |
| .tuning input[type="range"] { width: 60px; } |
| } |
|
|
