Spaces:
Runtime error
Runtime error
Refactor VideoTemplateEditor component: remove AI editing features and related state management, streamline template loading, and update styles for improved layout. Enhance CSS for responsive design and visual consistency across various components, including dropdowns, sync stats, and quiz elements. Remove deprecated premium badge styles and adjust layout for chat components.
66de9c8 | /* Upgrade system: the space popup, the nudge dock and the sidebar fuel gauge. | |
| Strict palette: black, #217cff, white. */ | |
| /* ---------- Popup ---------- */ | |
| .upg-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 60; | |
| display: grid; | |
| place-items: center; | |
| padding: 16px; | |
| overflow: auto; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(6px); | |
| animation: upg-fade 0.25s ease both; | |
| } | |
| .upg { | |
| position: relative; | |
| width: min(540px, 100%); | |
| max-height: calc(100vh - 32px); | |
| overflow: auto; | |
| display: grid; | |
| gap: 18px; | |
| padding: 0 22px 20px; | |
| background: var(--black); | |
| border-color: var(--blue-35); | |
| box-shadow: var(--glow-lg), 0 0 0 1px var(--blue-10) inset; | |
| animation: upg-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; | |
| } | |
| .upg:focus { | |
| outline: none; | |
| } | |
| .upg-wide { | |
| width: min(800px, 100%); | |
| } | |
| .upg-close { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| z-index: 3; | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .upg-head { | |
| display: grid; | |
| gap: 8px; | |
| text-align: center; | |
| justify-items: center; | |
| } | |
| .upg-head h2 { | |
| font-family: var(--font-display); | |
| font-size: clamp(1.5rem, 4vw, 2.1rem); | |
| line-height: 1.1; | |
| margin: 0; | |
| } | |
| .upg-head > p.muted { | |
| max-width: 52ch; | |
| margin: 0; | |
| } | |
| /* Scene: drifting stars and a ringed planet */ | |
| .upg-scene { | |
| position: relative; | |
| height: 190px; | |
| margin: 0 -22px; | |
| overflow: hidden; | |
| background: | |
| radial-gradient(60% 90% at 50% 100%, var(--blue-20), transparent 70%), | |
| radial-gradient(40% 60% at 50% 60%, var(--blue-10), transparent 70%), | |
| var(--black); | |
| border-bottom: 1px solid var(--line); | |
| mask-image: linear-gradient(to bottom, #000 70%, transparent); | |
| } | |
| .upg-stars { | |
| position: absolute; | |
| inset: -50% 0 0; | |
| background-repeat: repeat; | |
| animation: upg-drift linear infinite; | |
| } | |
| .upg-stars.l1 { | |
| background-image: | |
| radial-gradient(1px 1px at 12px 18px, rgba(255, 255, 255, 0.7), transparent), | |
| radial-gradient(1px 1px at 70px 90px, rgba(255, 255, 255, 0.5), transparent), | |
| radial-gradient(1px 1px at 130px 40px, rgba(255, 255, 255, 0.6), transparent); | |
| background-size: 160px 120px; | |
| animation-duration: 40s; | |
| } | |
| .upg-stars.l2 { | |
| background-image: | |
| radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, 0.85), transparent), | |
| radial-gradient(1.5px 1.5px at 190px 20px, rgba(33, 124, 255, 0.9), transparent); | |
| background-size: 240px 150px; | |
| animation-duration: 24s; | |
| } | |
| .upg-stars.l3 { | |
| background-image: | |
| radial-gradient(2px 2px at 80px 30px, #fff, transparent), | |
| radial-gradient(2px 2px at 260px 110px, rgba(33, 124, 255, 1), transparent); | |
| background-size: 340px 180px; | |
| animation-duration: 14s; | |
| } | |
| .upg-planet-wrap { | |
| position: absolute; | |
| left: 50%; | |
| top: 54%; | |
| width: 170px; | |
| height: 170px; | |
| transform: translate(-50%, -50%); | |
| } | |
| .upg-planet { | |
| width: 100%; | |
| height: 100%; | |
| filter: drop-shadow(0 0 24px var(--blue-35)); | |
| animation: upg-bob 6s ease-in-out infinite; | |
| } | |
| .upg-ring { | |
| fill: none; | |
| stroke: rgba(255, 255, 255, 0.55); | |
| stroke-width: 1.5; | |
| } | |
| .upg-ring.back { | |
| stroke: rgba(255, 255, 255, 0.2); | |
| } | |
| .upg-crater { | |
| fill: rgba(0, 0, 0, 0.35); | |
| stroke: rgba(255, 255, 255, 0.15); | |
| } | |
| /* Explore: warp streaks racing past */ | |
| .upg-warp span { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 90px; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8)); | |
| transform-origin: 0 50%; | |
| opacity: 0; | |
| animation: upg-warp 2.6s ease-in infinite; | |
| } | |
| .upg-warp span:nth-child(odd) { | |
| background: linear-gradient(90deg, transparent, var(--blue)); | |
| } | |
| .upg-warp span:nth-child(1) { --a: 8deg; animation-delay: 0s; } | |
| .upg-warp span:nth-child(2) { --a: 34deg; animation-delay: 0.3s; } | |
| .upg-warp span:nth-child(3) { --a: 61deg; animation-delay: 1.1s; } | |
| .upg-warp span:nth-child(4) { --a: 97deg; animation-delay: 0.7s; } | |
| .upg-warp span:nth-child(5) { --a: 128deg; animation-delay: 1.6s; } | |
| .upg-warp span:nth-child(6) { --a: 152deg; animation-delay: 0.2s; } | |
| .upg-warp span:nth-child(7) { --a: 181deg; animation-delay: 1.3s; } | |
| .upg-warp span:nth-child(8) { --a: 206deg; animation-delay: 0.5s; } | |
| .upg-warp span:nth-child(9) { --a: 233deg; animation-delay: 1.9s; } | |
| .upg-warp span:nth-child(10) { --a: 262deg; animation-delay: 0.9s; } | |
| .upg-warp span:nth-child(11) { --a: 289deg; animation-delay: 2.2s; } | |
| .upg-warp span:nth-child(12) { --a: 312deg; animation-delay: 0.4s; } | |
| .upg-warp span:nth-child(13) { --a: 337deg; animation-delay: 1.4s; } | |
| .upg-warp span:nth-child(14) { --a: 355deg; animation-delay: 2s; } | |
| /* Limit: the planet dims */ | |
| .upg-limit .upg-planet { | |
| filter: drop-shadow(0 0 10px var(--blue-20)) saturate(0.6); | |
| } | |
| /* Welcome: a burst of sparkles */ | |
| .upg-burst span { | |
| position: absolute; | |
| top: 54%; | |
| left: 50%; | |
| width: 6px; | |
| height: 6px; | |
| margin: -3px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| box-shadow: 0 0 10px var(--blue); | |
| animation: upg-burst 1.6s cubic-bezier(0.1, 0.7, 0.2, 1) both; | |
| } | |
| .upg-burst span:nth-child(3n) { | |
| background: var(--blue); | |
| } | |
| .upg-burst span:nth-child(1) { --a: 0deg; } | |
| .upg-burst span:nth-child(2) { --a: 22deg; animation-delay: 0.05s; } | |
| .upg-burst span:nth-child(3) { --a: 45deg; } | |
| .upg-burst span:nth-child(4) { --a: 67deg; animation-delay: 0.1s; } | |
| .upg-burst span:nth-child(5) { --a: 90deg; } | |
| .upg-burst span:nth-child(6) { --a: 112deg; animation-delay: 0.05s; } | |
| .upg-burst span:nth-child(7) { --a: 135deg; } | |
| .upg-burst span:nth-child(8) { --a: 157deg; animation-delay: 0.1s; } | |
| .upg-burst span:nth-child(9) { --a: 180deg; } | |
| .upg-burst span:nth-child(10) { --a: 202deg; animation-delay: 0.05s; } | |
| .upg-burst span:nth-child(11) { --a: 225deg; } | |
| .upg-burst span:nth-child(12) { --a: 247deg; animation-delay: 0.1s; } | |
| .upg-burst span:nth-child(13) { --a: 270deg; } | |
| .upg-burst span:nth-child(14) { --a: 292deg; animation-delay: 0.05s; } | |
| .upg-burst span:nth-child(15) { --a: 315deg; } | |
| .upg-burst span:nth-child(16) { --a: 337deg; animation-delay: 0.1s; } | |
| /* Fuel meter (limit mode) */ | |
| .upg-fuel { | |
| width: min(360px, 100%); | |
| display: grid; | |
| gap: 6px; | |
| margin-top: 6px; | |
| text-align: left; | |
| } | |
| .upg-fuel p { | |
| margin: 0; | |
| } | |
| .upg-empty { | |
| color: var(--blue); | |
| animation: upg-blink 1.2s steps(2, jump-none) infinite; | |
| } | |
| .upg-fuel-track { | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| overflow: hidden; | |
| } | |
| .upg-fuel-fill { | |
| height: 100%; | |
| border-radius: inherit; | |
| background: linear-gradient(90deg, var(--blue-60), var(--blue)); | |
| box-shadow: var(--glow-sm); | |
| } | |
| /* Plans */ | |
| .upg-cycle { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .upg-plans { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| @media (min-width: 640px) { | |
| .upg-plans { | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| } | |
| } | |
| .upg-plan { | |
| position: relative; | |
| display: grid; | |
| align-content: start; | |
| gap: 6px; | |
| padding: 18px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| } | |
| .upg-plan.pick { | |
| border-color: var(--blue); | |
| background: linear-gradient(180deg, var(--blue-10), transparent 60%); | |
| box-shadow: var(--glow-md); | |
| } | |
| .upg-plan h3 { | |
| margin: 0; | |
| font-family: var(--font-display); | |
| font-size: 1.25rem; | |
| } | |
| .upg-plan p { | |
| margin: 0; | |
| } | |
| .upg-flag { | |
| position: absolute; | |
| top: -11px; | |
| right: 14px; | |
| background: var(--blue); | |
| border-color: var(--blue); | |
| } | |
| .upg-price { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 4px; | |
| margin-top: 6px ; | |
| } | |
| .upg-price .tier-amount { | |
| font-family: var(--font-display); | |
| font-size: 2rem; | |
| font-weight: 600; | |
| } | |
| .upg-boosts { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin: 8px 0 12px; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .upg-boosts li { | |
| padding: 3px 9px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: 999px; | |
| background: var(--blue-05); | |
| font-size: 0.72rem; | |
| } | |
| .upg-cta { | |
| width: 100%; | |
| justify-content: center; | |
| margin-top: auto; | |
| } | |
| .upg-features { | |
| display: grid; | |
| gap: 8px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .upg-features li { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .upg-features .icon { | |
| color: var(--blue); | |
| flex: none; | |
| } | |
| .upg-foot { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 10px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .upg-foot .row { | |
| gap: 16px; | |
| } | |
| .upg-foot a { | |
| color: var(--white); | |
| } | |
| /* ---------- Nudge dock ---------- */ | |
| .nudge { | |
| position: fixed; | |
| right: 16px; | |
| bottom: 16px; | |
| left: 16px; | |
| z-index: 40; | |
| display: flex; | |
| gap: 12px; | |
| padding: 14px 36px 14px 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: rgba(0, 0, 0, 0.92); | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--glow-lg); | |
| animation: nudge-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; | |
| } | |
| @media (min-width: 640px) { | |
| .nudge { | |
| left: auto; | |
| width: 360px; | |
| right: 24px; | |
| bottom: 24px; | |
| } | |
| } | |
| .nudge-limit, | |
| .nudge-upgrade { | |
| border-color: var(--blue-60); | |
| } | |
| .nudge-icon { | |
| flex: none; | |
| display: grid; | |
| place-items: center; | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| border: 1px solid var(--blue-35); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| } | |
| .nudge-limit .nudge-icon { | |
| background: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| animation: pulse-ring 2s ease-out infinite; | |
| } | |
| .nudge-body { | |
| display: grid; | |
| gap: 6px; | |
| min-width: 0; | |
| } | |
| .nudge-body h3 { | |
| margin: 0; | |
| font-size: 1rem; | |
| } | |
| .nudge-body p { | |
| margin: 0; | |
| } | |
| .nudge-body .eyebrow { | |
| font-size: 0.65rem; | |
| } | |
| .nudge-body .row { | |
| margin-top: 4px; | |
| gap: 14px; | |
| } | |
| .nudge-close { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| width: 26px; | |
| height: 26px; | |
| } | |
| /* ---------- Sidebar fuel gauge ---------- */ | |
| .fuel, | |
| .fuel-mini { | |
| display: none; | |
| } | |
| @media (min-width: 900px) { | |
| .fuel { | |
| display: grid; | |
| gap: 8px; | |
| margin-top: auto; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| } | |
| .fuel + .sidebar-user { | |
| margin-top: 0; | |
| } | |
| .fuel.low { | |
| border-color: var(--blue-35); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .fuel-warn { | |
| color: var(--blue); | |
| } | |
| .fuel-head-end { | |
| gap: 6px; | |
| align-items: center; | |
| } | |
| /* The small chevron that opens the rest of the plan: it points down, and turns up when open */ | |
| .fuel-toggle { | |
| width: 24px; | |
| height: 24px; | |
| padding: 0; | |
| } | |
| .fuel-toggle svg { | |
| transition: transform 0.2s; | |
| } | |
| .fuel-toggle.open svg { | |
| transform: rotate(180deg); | |
| } | |
| .fuel-row { | |
| display: grid; | |
| gap: 4px; | |
| font-size: 0.7rem; | |
| color: var(--text-2); | |
| } | |
| /* Label on the left, what is left on the right */ | |
| .fuel-label { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .fuel-left { | |
| flex: none; | |
| color: var(--text-3); | |
| } | |
| .fuel-left.hot { | |
| color: var(--text); | |
| } | |
| /* Invisible padding around the thin bar, so it is easy to hover */ | |
| .fuel-hit { | |
| padding: 5px 0; | |
| margin: -5px 0; | |
| cursor: default; | |
| } | |
| .fuel-track { | |
| height: 4px; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| overflow: hidden; | |
| } | |
| .fuel-fill { | |
| height: 100%; | |
| border-radius: inherit; | |
| background: var(--blue-60); | |
| } | |
| .fuel-fill.hot { | |
| background: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .fuel-cta { | |
| width: 100%; | |
| justify-content: center; | |
| gap: 6px; | |
| margin-top: 4px; | |
| } | |
| .shell.collapsed .fuel { | |
| display: none; | |
| } | |
| .shell.collapsed .fuel-mini { | |
| display: inline-grid; | |
| margin-top: auto; | |
| color: var(--white); | |
| border-color: var(--blue-35); | |
| } | |
| .fuel-mini.low { | |
| background: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| } | |
| /* ---------- Motion ---------- */ | |
| @keyframes upg-fade { | |
| from { opacity: 0; } | |
| } | |
| @keyframes upg-rise { | |
| from { opacity: 0; transform: translateY(24px) scale(0.97); } | |
| } | |
| @keyframes upg-drift { | |
| to { transform: translateY(50%); } | |
| } | |
| @keyframes upg-bob { | |
| 50% { transform: translateY(-5px); } | |
| } | |
| @keyframes upg-warp { | |
| 0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scaleX(0.2); } | |
| 30% { opacity: 1; } | |
| 100% { opacity: 0; transform: rotate(var(--a)) translateX(360px) scaleX(1.4); } | |
| } | |
| @keyframes upg-burst { | |
| 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.4); } | |
| 100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scale(0.3); } | |
| } | |
| @keyframes upg-blink { | |
| 50% { opacity: 0.3; } | |
| } | |
| @keyframes nudge-in { | |
| from { opacity: 0; transform: translateY(20px); } | |
| } | |
| @keyframes pulse-ring { | |
| 0% { box-shadow: 0 0 0 0 var(--blue-60); } | |
| 100% { box-shadow: 0 0 0 12px transparent; } | |
| } | |