/* ============================================================ Lite mode CSS — applies when Hides advanced features, simplifies the interface. ============================================================ */ /* === TOPNAV: hide most nav buttons in lite mode === */ /* Brand Kit + Characters were previously hidden in lite, but they're useful regardless of mode (multichar slot picker pulls from the same /api/references store the Characters page populates). The .member-feature gate on those nav anchors still hides them for non-admin / non-member visitors via topnav.css:167. */ body.lite-mode .topnav__btn[data-area="workflow"], body.lite-mode .topnav__btn[data-area="music"], body.lite-mode .topnav__btn[data-area="templates"], body.lite-mode .topnav__btn[data-area="community"], body.lite-mode .topnav__btn[data-area="stitcher"], body.lite-mode .topnav__btn[data-area="composer"], body.lite-mode .topnav__btn[data-area="collab"], body.lite-mode .topnav__btn[data-area="series"], body.lite-mode .topnav__btn[data-area="analytics"], body.lite-mode .topnav__btn[data-area="more"], body.lite-mode .topnav__overflow { display: none !important; } /* === DASHBOARD: hide Storyboard / Shot List tabs in lite === */ body.lite-mode .tabs > .tab[data-mode="storyboard"], body.lite-mode .tabs > .tab[data-mode="shot-list"] { display: none !important; } /* === DASHBOARD: hide AI Director sidebar in lite === */ /* The Render queue and the AI Director are both panels inside the .rightcol aside. Lite mode hides the Director but keeps the queue so users can still cancel and dismiss in-flight jobs without needing to flip back to Pro. */ body.lite-mode .director, body.lite-mode .ai-director, body.lite-mode #directorPanel, body.lite-mode .director-panel, body.lite-mode .rightcol .panel.chat { display: none !important; } /* Render queue panel: visible in lite, but compacted. The .queue-collapsed modifier (toggled via the caret button + persisted in localStorage) hides the body so only the header + count badge show, matching Lite's "small surface" aesthetic. */ body.lite-mode .rightcol { /* keep the column visible — only the chat panel above is hidden */ } body.lite-mode .rightcol .panel:not(.chat) .queue-list, body.lite-mode .rightcol .panel:not(.chat) #queueEmpty { max-height: 30vh; } body.lite-mode .rightcol .panel.queue-collapsed .queue-list, body.lite-mode .rightcol .panel.queue-collapsed #queueEmpty { display: none !important; } body.lite-mode .rightcol .panel.queue-collapsed { padding-bottom: 4px; } /* Three-column layout in Lite (sidebar | main | rightcol) so the render queue panel keeps its right-rail position. The rightcol is narrower than Pro's 340 to honour Lite's compact aesthetic. Earlier this was 2-column ("expand main to fill space") which demoted .rightcol out of the grid → it fell into an implicit row at the bottom-left. The AI Director chat panel is still hidden via .rightcol .panel.chat above, so the only thing in the right column in Lite is the queue. */ body.lite-mode .app, body.lite-mode .dashboard-grid, body.lite-mode .dashboard-layout { grid-template-columns: minmax(0, 264px) 1fr 280px !important; } @media (max-width: 1079px) { body.lite-mode .app, body.lite-mode .dashboard-grid, body.lite-mode .dashboard-layout { grid-template-columns: 1fr !important; } } /* === LEFT SIDEBAR: hide Brand Kit + Auto resolution toggle === */ body.lite-mode #brandKitPanel, body.lite-mode #brandKitToggle, body.lite-mode .brandkit-card, body.lite-mode .brand-kit-toggle, body.lite-mode #brandKitCard { display: none !important; } /* === GENERATION WORKBENCH: hide variations + auto-res === */ /* Auto resolution toggle and its label */ body.lite-mode .res-auto, body.lite-mode #imageAutoRes, body.lite-mode .res-auto-label, body.lite-mode label:has(#imageAutoRes), body.lite-mode .auto-resolution, body.lite-mode #autoResolution { display: none !important; } /* Variations selector — hide entire row including label. The seg's parent .row contains both the "Variations" label and the seg buttons, so we hide the parent. */ body.lite-mode .panel-body.compose > div:has(> [data-seg="imageVariations"]), body.lite-mode .panel-body.compose > div:has(> [data-seg="videoVariations"]), body.lite-mode .panel-body.compose > .label-row:has(+ div [data-seg="imageVariations"]), body.lite-mode .panel-body.compose > .label-row:has(+ div [data-seg="videoVariations"]), body.lite-mode .row:has([data-seg="imageVariations"]), body.lite-mode .row:has([data-seg="videoVariations"]), body.lite-mode [data-seg="imageVariations"], body.lite-mode [data-seg="videoVariations"], body.lite-mode .variations-row, body.lite-mode .variations-seg-wrap, body.lite-mode label[for="variations"] { display: none !important; } /* === TOPAZ UPSCALE: hide entire upscale module === */ body.lite-mode .topaz-upscale, body.lite-mode #topazUpscale, body.lite-mode [data-feature="topaz-upscale"] { display: none !important; } /* === MODE TOGGLE BUTTON STYLING === The mode toggle sits on the topnav, which renders on a near-white surface across the whole app (Pro and Lite are UI density modes, not color themes — there is no dark-theme palette). Colors use theme tokens (--text2, --line-strong, --border, --text1) so the button picks up future palette tweaks and stays readable. */ .cg-mode-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(0, 0, 0, 0.03); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text2); font: 500 12px Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .cg-mode-toggle:hover { background: rgba(124, 109, 250, 0.08); border-color: var(--border); color: var(--text1); } .cg-mode-toggle .cg-mode-arrow { font-size: 11px; opacity: 0.7; } /* === MOBILE RESPONSIVE === */ /* On mobile, hide the mode toggle text — show icon only */ @media (max-width: 600px) { .cg-mode-toggle .cg-mode-label-long { display: none; } .cg-mode-toggle { padding: 6px 10px; } } /* Lite mode + mobile: stack everything cleanly */ @media (max-width: 768px) { body.lite-mode .quick-start-grid, body.lite-mode .qs-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } body.lite-mode .qs-tile { padding: 14px !important; min-height: auto !important; } body.lite-mode .qs-tile p, body.lite-mode .qs-tile .tile-desc { /* Hide longer descriptions on tiles in mobile lite — keep just the title */ display: none !important; } body.lite-mode .qs-tile .qs-meta, body.lite-mode .qs-tile .nodes-count { display: none !important; } /* Workbench takes full width, no sidebar */ body.lite-mode #sidebar, body.lite-mode .sidebar, body.lite-mode .left-sidebar, body.lite-mode .sidebar-left { display: none !important; } /* Generation workbench tabs: scrollable horizontally if needed */ body.lite-mode .tabs { overflow-x: auto; flex-wrap: nowrap !important; } /* Aspect ratio segs: wrap into 2 rows on mobile */ body.lite-mode [data-seg="imageAspect"], body.lite-mode [data-seg="videoAspect"], body.lite-mode .seg.aspect-ratio-seg, body.lite-mode .aspect-ratio-row .seg { flex-wrap: wrap; gap: 6px !important; } body.lite-mode [data-seg="imageAspect"] .seg-btn, body.lite-mode [data-seg="videoAspect"] .seg-btn, body.lite-mode .seg.aspect-ratio-seg .seg-btn { flex: 1 1 calc(33.333% - 6px); min-width: 0; } /* Render queue: collapse to a small badge instead of full list */ body.lite-mode .render-queue { max-height: 40vh; overflow-y: auto; } /* Topnav: shrink padding on mobile in lite */ body.lite-mode .topnav { padding: 8px 12px !important; } body.lite-mode .topnav__left .topnav__brand-text { font-size: 14px !important; } } /* === Pro mode: explicit (default) === */ /* Pro mode shows everything as usual. No special CSS needed. */ /* === Onboarding hint: show a small banner explaining lite mode === */ body.lite-mode .lite-hint-banner:not(.dismissed) { display: flex !important; } body:not(.lite-mode) .lite-hint-banner { display: none !important; } .lite-hint-banner { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; margin: 8px 24px 0; background: linear-gradient(135deg, rgba(124,109,250,0.08), rgba(34,212,253,0.06)); border: 1px solid rgba(124,109,250,0.20); border-radius: 10px; font-size: 12px; color: rgba(232,233,239,0.80); } .lite-hint-banner .lite-hint-text strong { color: #b8b0ff; font-weight: 600; } .lite-hint-banner .lite-hint-dismiss { background: transparent; border: 0; color: rgba(232,233,239,0.55); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; } .lite-hint-banner.dismissed { display: none !important; } @media (max-width: 600px) { .lite-hint-banner { margin: 8px 12px 0; padding: 8px 12px; font-size: 11px; flex-wrap: wrap; } }