Spaces:
Running on Zero
Running on Zero
| /* ============================================================ | |
| FreeFakeStudio Web — Citrus Lime Theme Stylesheet | |
| ============================================================ */ | |
| :root { | |
| --bg-outside: #f7fee7; | |
| --bg-outside-gradient: linear-gradient(135deg, #f7fee7 0%, #ecfccb 45%, #d9f99d 100%); | |
| --bg-navbar: rgba(255, 255, 255, 0.95); | |
| --bg-card: #ffffff; | |
| --bg-input: #f7fee7; | |
| --bg-input-hover: #edfaca; | |
| --border-color: #bef264; | |
| --border-accent: #65a30d; | |
| --text-main: #14532d; | |
| --text-muted: #3f6212; | |
| --text-dim: #65a30d; | |
| --primary: #65a30d; | |
| --primary-hover: #4d7c0f; | |
| --primary-glow: rgba(101, 163, 13, 0.35); | |
| --box-shadow: 0 16px 40px rgba(101, 163, 13, 0.15); | |
| --btn-gradient: linear-gradient(135deg, #65a30d 0%, #16a34a 100%); | |
| --checked-bg: rgba(101, 163, 13, 0.14); | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background-color: var(--bg-outside); | |
| background-image: var(--bg-outside-gradient); | |
| background-attachment: fixed; | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── Navbar ──────────────────────────────────────────────── */ | |
| .navbar { | |
| border-bottom: 1px solid var(--border-color); | |
| background: var(--bg-navbar); | |
| backdrop-filter: blur(12px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); | |
| } | |
| .nav-container { | |
| max-width: 1300px; | |
| margin: 0 auto; | |
| padding: 10px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .brand-icon { | |
| font-size: 1.8rem; | |
| } | |
| .brand-text h1 { | |
| font-size: 1.25rem; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--text-main); | |
| } | |
| .nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| /* ── Status Pill ─────────────────────────────────────────── */ | |
| .status-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 5px 12px; | |
| border-radius: 9999px; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .status-disconnected { | |
| background: rgba(100, 116, 139, 0.1); | |
| color: var(--text-dim); | |
| border: 1px solid rgba(100, 116, 139, 0.2); | |
| } | |
| .status-disconnected .status-dot { | |
| background: var(--text-dim); | |
| } | |
| .status-connected { | |
| background: rgba(101, 163, 13, 0.15); | |
| color: #4d7c0f; | |
| border: 1px solid rgba(101, 163, 13, 0.3); | |
| } | |
| .status-connected .status-dot { | |
| background: #65a30d; | |
| box-shadow: 0 0 8px #65a30d; | |
| } | |
| /* ── Main Content & Layout ───────────────────────────────── */ | |
| .main-content { | |
| flex: 1; | |
| max-width: 1200px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 8px 20px 24px; /* Reduced gap from top navbar */ | |
| } | |
| .view { | |
| display: none; | |
| } | |
| .view.active { | |
| display: block; | |
| } | |
| /* ── Minimal Launcher ────────────────────────────────────── */ | |
| .minimal-launcher { | |
| max-width: 520px; | |
| margin: 4px auto 0; /* Minimized vertical void */ | |
| text-align: center; | |
| } | |
| .minimal-title { | |
| font-size: 2.2rem; | |
| font-weight: 900; | |
| margin-bottom: 14px; /* Minimized vertical void */ | |
| letter-spacing: -0.03em; | |
| color: var(--text-main); | |
| } | |
| .launcher-box { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-xl); | |
| padding: 26px 22px; | |
| box-shadow: var(--box-shadow); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| /* ── Models Header ───────────────────────────────────────── */ | |
| .models-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 2px; | |
| } | |
| .models-label { | |
| font-size: 0.88rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| } | |
| .quick-select-btns { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .pill-btn { | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| padding: 4px 10px; | |
| border-radius: 9999px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .pill-btn:hover { | |
| color: var(--text-main); | |
| border-color: var(--primary); | |
| } | |
| .pill-btn.active { | |
| background: var(--checked-bg); | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| font-weight: 800; | |
| } | |
| .rec-badge { | |
| font-size: 0.62rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| background: var(--primary); | |
| color: #ffffff; | |
| padding: 1px 6px; | |
| border-radius: 9999px; | |
| letter-spacing: 0.04em; | |
| } | |
| /* ── Models Grid ─────────────────────────────────────────── */ | |
| .models-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| text-align: left; | |
| } | |
| .model-checkbox-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 12px 16px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| user-select: none; | |
| } | |
| .model-checkbox-item:hover { | |
| border-color: var(--border-accent); | |
| background: var(--bg-input-hover); | |
| transform: translateY(-1px); | |
| } | |
| .model-checkbox-item input[type="checkbox"] { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--primary); | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| } | |
| .model-checkbox-item.checked { | |
| border-color: var(--border-accent); | |
| background: var(--checked-bg); | |
| box-shadow: 0 0 10px var(--primary-glow); | |
| } | |
| .model-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .model-info strong { | |
| font-size: 0.95rem; | |
| font-weight: 800; | |
| color: var(--text-main); | |
| } | |
| .model-info small { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| /* ── Launch Button (Citrus Lime Theme, No Emojis) ────────── */ | |
| .btn-giant { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 18px 32px; | |
| font-size: 1.25rem; | |
| font-weight: 900; | |
| border-radius: var(--radius-lg); | |
| letter-spacing: 0.04em; | |
| text-decoration: none; | |
| background: var(--btn-gradient); | |
| color: #ffffff; | |
| box-shadow: 0 10px 28px var(--primary-glow); | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .btn-giant:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 14px 36px var(--primary-glow); | |
| filter: brightness(1.05); | |
| } | |
| .btn-pulse { | |
| animation: pulse-glow 2.4s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { | |
| box-shadow: 0 10px 28px var(--primary-glow); | |
| } | |
| 50% { | |
| box-shadow: 0 14px 42px var(--primary-glow); | |
| } | |
| } | |
| /* ── Buttons Utility ─────────────────────────────────────── */ | |
| .btn { | |
| border: 1px solid transparent; | |
| cursor: pointer; | |
| font-family: inherit; | |
| font-weight: 700; | |
| border-radius: var(--radius-sm); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-sm { | |
| padding: 6px 12px; | |
| font-size: 0.82rem; | |
| } | |
| .btn-outline { | |
| border-color: var(--border-color); | |
| color: var(--text-muted); | |
| background: transparent; | |
| } | |
| .btn-outline:hover { | |
| color: var(--text-main); | |
| border-color: var(--primary); | |
| background: var(--bg-card); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-muted); | |
| } | |
| .btn-ghost:hover { | |
| color: var(--text-main); | |
| background: rgba(0, 0, 0, 0.05); | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| /* ── Studio View ─────────────────────────────────────────── */ | |
| .studio-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 16px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md) var(--radius-md) 0 0; | |
| } | |
| .studio-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .backend-url-badge { | |
| font-family: monospace; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| background: var(--bg-input); | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| } | |
| .studio-controls { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .studio-frame-container { | |
| position: relative; | |
| width: 100%; | |
| height: calc(100vh - 140px); | |
| min-height: 600px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-top: none; | |
| border-radius: 0 0 var(--radius-md) var(--radius-md); | |
| overflow: hidden; | |
| } | |
| /* ── Full-Fit Studio View (Eliminate outer gaps) ──────────── */ | |
| body.in-studio, | |
| body:has(#studio-view.active) { | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| body.in-studio .navbar, | |
| body:has(#studio-view.active) .navbar { | |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); | |
| } | |
| body.in-studio .nav-container, | |
| body:has(#studio-view.active) .nav-container { | |
| max-width: 100%; | |
| padding: 6px 14px; | |
| } | |
| body.in-studio .main-content, | |
| body:has(#studio-view.active) .main-content { | |
| max-width: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 4px 10px 8px; | |
| height: calc(100vh - 48px); | |
| display: flex; | |
| flex-direction: column; | |
| box-sizing: border-box; | |
| } | |
| body.in-studio #studio-view, | |
| body:has(#studio-view.active) #studio-view { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| width: 100%; | |
| min-height: 0; | |
| } | |
| body.in-studio .studio-header, | |
| body:has(#studio-view.active) .studio-header { | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm) var(--radius-sm) 0 0; | |
| flex-shrink: 0; | |
| } | |
| body.in-studio .studio-frame-container, | |
| body:has(#studio-view.active) .studio-frame-container { | |
| flex: 1; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 0; | |
| border-radius: 0 0 var(--radius-sm) var(--radius-sm); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); | |
| } | |
| .frame-loader { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--bg-card); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| z-index: 10; | |
| transition: opacity 0.4s ease; | |
| } | |
| .frame-loader.fade-out { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .spinner { | |
| width: 44px; | |
| height: 44px; | |
| border: 3px solid rgba(0, 0, 0, 0.08); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .frame-loader p { | |
| font-size: 0.95rem; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| .studio-frame { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| background: transparent; | |
| } | |
| @media (max-width: 600px) { | |
| .minimal-title { | |
| font-size: 1.8rem; | |
| } | |
| .launcher-box { | |
| padding: 20px 16px; | |
| } | |
| } | |