/* * FIELDSETS-BASE.CSS - Base fieldset styling * Uses LOCAL --accent, --primary, --secondary variables * Parent context (.fieldset--char, .fieldset--env) sets these * Part of fieldsets split - see 009_FIELDSET_CSS_SPLIT.md */ /* Global dark seed — available everywhere, overridden by component scopes */ :root { --card-base: #1a1a2e; /* Slot-tinted text token. Each fieldset sets --accent (slot color); this mixes 75% accent with 25% white so the text reads alive on tinted backgrounds and stays bright even when the slot color is dark (e.g. black eyes). Falls back to white when no --accent in scope — so swapping `color: white` → `var(--text-tinted)` is safe everywhere. Bumped from 60% → 75% so the tint is visible even when slot colors are pale (subtle 60/40 mix nearly disappeared on light slot palettes). */ --text-tinted: color-mix(in srgb, var(--accent, white) 75%, white); /* Neutral-grey UI text tokens — used by titles, field labels, and any icon/label that needs to stay readable regardless of slot color (black hair/eyes/outfit would otherwise vanish). Three tiers: strong — active button labels, hovered icons, primary action text medium — fieldset h2 / panel titles soft — field labels, sub-labels Tune in one spot to dial the whole UI greyer/whiter. */ --ui-text-strong: rgba(255, 255, 255, 0.85); --ui-text-medium: rgba(255, 255, 255, 0.7); --ui-text-soft: rgba(255, 255, 255, 0.55); /* Neutral UI grey — the ONE mid-grey for neutral accents / borders / dividers (e.g. a fieldset's --accent when no character colour applies). --neutral-rgb holds the raw channels so rgba(var(--neutral-rgb), A) keeps its exact alpha; --neutral is the solid form. Replaced scattered rgb/rgba(156,163,175). */ --neutral-rgb: 156, 163, 175; --neutral: rgb(var(--neutral-rgb)); /* Semantic DESTRUCTIVE/ERROR red — the ONE danger colour (delete, remove, roster ×, auth errors). Used raw or via color-mix for bg/border/text tints. Deliberately NOT a character role: danger must read the same regardless of who's centered. Replaced scattered #c0392b/#e44/#f88/#f44/#e94560 literals. */ --danger: #ee4444; } /* Desktop: html + body BOTH paint the same fixed gradient. html's own background turns off the canvas-propagation rule that would otherwise hoist body's gradient to paint every viewport pixel; identical gradient on both makes the seam invisible when body shrinks to content (see mobile override below). */ html, .aurora-standalone { /* Intentional two-role bracket: a faint PRIMARY (hair) tint at the top, CARD-BASE through the middle, a faint SECONDARY (eyes) tint at the bottom. Uses raw --slot-1/--slot-2 (not the role vars) because this rule ALSO targets , which sits ABOVE the .aurora-standalone role scope. Top stays hair — the anchor; eyes alone once washed through the header chrome. Bottom carries the companion eyes, replacing the legacy dormant --slot-11 (lighting) stop that used to sit here. */ background: linear-gradient( 160deg, color-mix(in srgb, var(--slot-1) 10%, var(--card-base)) 0%, var(--card-base) 40%, color-mix(in srgb, var(--slot-2) 8%, var(--card-base)) 100% ); background-attachment: fixed; } /* ═══════════════════════════════════════════════════════════════════════════ DESIGN TOKENS — semantic colour ROLES (see STYLE_GUIDE.md) --primary (hair) and --secondary (eyes) are the two STABLE identity roles. Seeded globally here so EVERY surface — inside a fieldset or not — can read a role instead of a raw --slot-N. (Fieldset scopes redefine them to the same values; harmless. Confirmed no code relies on them being unset.) --accent is DIFFERENT — a CONTEXTUAL role each component sets for ITSELF (--outfit-accent, --tag-color, --gs-accent …). It is deliberately LEFT UNSET here so --text-tinted (color-mix(var(--accent, white) …)) falls back to white outside a themed context. NEVER give --accent a global default. PRIME DIRECTIVE: read a role, never a raw --slot-N or a hardcoded hex. 15 palette colours, exactly one blue — a second hardcoded blue is bleeding. */ .aurora-standalone { --primary: var(--slot-1); /* hair — anchor identity role */ --secondary: var(--slot-2); /* eyes — companion identity role */ /* --accent intentionally NOT set here — it's contextual (per note above). */ } .aurora-standalone { min-height: 100vh; color: rgba(255, 255, 255, 0.9); } /* Mobile: drop the gradient entirely. background-attachment: fixed is broken on mobile Safari/Chrome — the URL-bar-hide-on-scroll moves the viewport, but fixed backgrounds re-snap to the new viewport bounds, which makes body's and html's gradient slices compute to different pixels at the body/html boundary. Result: a visible "bar" of mismatched gradient below the last fieldset. A solid card-base on both elements paints uniformly, no seam no matter how the URL bar moves. */ @media (max-width: 768px) { html, .aurora-standalone { background: var(--card-base); background-attachment: initial; } } .aurora-standalone a { color: var(--secondary); -webkit-tap-highlight-color: transparent; } /* Brand cursive — font from --brand-font CSS variable (set via APP_BRAND_FONT env) */ .brand-cursive { font-family: var(--brand-font); font-size: var(--brand-font-size, 2.2rem); font-weight: 700; letter-spacing: 0.02em; } /* ═══════════════════════════════════════════════════════════════════ AURORA HEADER — mirrored .scene-control-surface Reuses .scene-control-surface + .control-panel + .drawer-controls + .transport-btn so the chrome family matches the scene control panel exactly. --header modifier flips the geometry from inline- panel to full-width page-top: no outer border-radius, bottom-edge accent only. Top strip = panel-footer's role mirrored; bottom row = drawer-controls with transport-style nav buttons. ═══════════════════════════════════════════════════════════════════ */ .scene-control-surface--header { width: 100%; /* Inner padding mirrors .container-fluid (Bootstrap 0.75rem per side on desktop) so the chrome's content lines up with the page content's left/right edge. Mobile zeros it to match the .container-fluid override below 768px. */ padding: 4px 0.75rem; /* Plain grey bottom edge — no slot/outfit tint. */ border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.15); border-radius: 0; } @media (max-width: 768px) { .scene-control-surface--header { padding: 4px 0; } } .scene-control-surface--header:hover { border-bottom-color: rgba(255, 255, 255, 0.22); } .scene-control-surface--header .control-panel { /* Inner bevel: keep the rounded corners (the panel reads as a seated tile inside the surface tray) but lose the surface's own rounding. */ border-radius: 8px; } /* Top strip — mirrors .panel-footer's recipe (dark wash + hairline border). At the top of the panel here instead of the bottom. */ .aurora-header__strip { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.6rem; /* vertical 0 — buttons/brand flush to the header border, no band */ /* No own background/border. The strip used to paint its own 180deg gradient (dark bottom stop) + a faint border-bottom — together that read as a thin seam/line against the surface gradient and thickened the header. Buttons now sit directly on the header's own wash, and the brand aligns with the line gone. */ } /* Gallery tag-filter row in the header (gallery only). A thin always-on strip under the nav; the gallery carousel reserves its height (fieldsets-layout --carousel-chrome / --mobile-chrome) so it never covers the image. Fields sit flush to the header's own (thick) border. */ .aurora-header__filter { padding: 0 0.6rem; /* side padding on the filter line's ends — matches the strip's 0.6rem so the filter aligns with the brand/logout above it (the logout-to-right-border gap, carried down to the filter) */ border-top: 1px solid rgba(255, 255, 255, 0.05); } .aurora-header__filter .gallery-search-bar { padding: 0; } .aurora-header__brand { flex: 0 0 auto; padding: 0 0.3rem; text-decoration: none; line-height: 1; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; } .aurora-header__brand .brand-cursive { font-family: var(--brand-font); font-size: 2.4rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35; /* background-clip: text paints the gradient inside the element's box; cursive glyphs overhang past their advance width on BOTH ends (leading A flourish, trailing b flourish), and the background doesn't paint under the overhang → flourishes render transparent. Symmetric padding gives the gradient room on both sides. */ padding-left: 0.2em; padding-right: 0.2em; padding-bottom: 0.05em; /* Slot-tinted gradient text — logo shifts color with the active character (slot-1 hair → slot-2 eyes). */ background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, white) 0%, color-mix(in srgb, var(--secondary) 80%, white) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: filter 0.2s ease; } .aurora-header__brand:hover .brand-cursive, .aurora-header__brand:focus .brand-cursive { filter: brightness(1.15); } /* Reserved slack — pushes user chip + logout to the right; future home for status data / promos. */ .aurora-header__slot { flex: 1 1 auto; min-width: 0; } /* Header deck — reuses .chat-control-deck recipe (inset tray, slot-2 tinted dark gradient, 1px hairline border). align-self pins to the strip's top edge so it sits inline with the brand without stretching the strip vertically. */ .aurora-header__deck { align-self: flex-start; margin-left: 0; /* override .chat-control-deck's margin-left: auto */ } .aurora-user-chip { padding: 0.2rem 0.5rem; font-size: 0.72rem; font-weight: 600; color: color-mix(in srgb, var(--secondary) 70%, white); border-radius: 4px; background: color-mix(in srgb, black 30%, var(--card-base)); border: 1px solid rgba(255, 255, 255, 0.05); letter-spacing: 0.02em; white-space: nowrap; /* Centered inside the deck row alongside the toggle/logout buttons. align-self overridden above on the deck wrapper. */ align-self: center; } .aurora-logout-form { margin: 0; display: flex; } /* Login (logged-out) chip button — same chat-deck-btn chrome used inside the deck for consistency. .aurora-header__deck-btn is just a hook for alignment/size tweaks if needed later. */ .aurora-header__deck-btn { align-self: flex-start; text-decoration: none; } /* Bottom row — drawer-controls modifier with nav-style transport buttons that grow to fill the row evenly. Tray background bumped to nearly-opaque black so the slot-tinted panel underneath doesn't bleed through — without that, both the buttons AND the tray pick up the same slot tint and the row reads as a wash instead of buttons-on-a-well. */ .drawer-controls--nav { margin: 0; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, 0.04); background: rgba(0, 0, 0, 0.85); } /* Nav buttons: pure grey, no slot tint anywhere. Default = darker grey (raised/off), active = brighter grey + inset shadow (depressed/on, like a backlit toggle that's been pressed in). Icon stays grey at every state — wins .transport-btn:hover's slot-1 color via the .scene-control-surface--header prefix without !important. */ .aurora-header__nav-btn { flex: 1 1 auto; width: auto; height: 42px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .aurora-header__nav-btn svg { width: 20px; height: 20px; /* NEUTRAL — inherits the button's own text colour (grey when available, brighter when selected/hover via the transport-btn rules), NOT a slot tint. The toolbar is OUTSIDE the card, so a slot colour here can only arrive via color-propagation on carousel:centered — which races the chats disable-toggle on the same event and reads a not-yet-settled card as 'transparent' → the intermittent on/off/new flash. No slot var on the shared nav = nothing to propagate, nothing to race. */ color: inherit; } /* chats-nav carries BOTH icons and swaps them with its state (JS sets data-nav- state on the button): the LOAD icon — the card's own Load glyph — while it's a load-a-slot proxy, the role icon (edit/chat) once a clone exists so it enters. Resting / disabled (no or non-load state) shows the role icon. Label text is driven separately by the same JS (load / edit / chat). */ .chats-nav .chats-nav-icon--load { display: none; } .chats-nav[data-nav-state^="load"] .chats-nav-icon--load { display: inline; } .chats-nav[data-nav-state^="load"] .chats-nav-icon--role { display: none; } /* Desktop nav labels — the header/brand font beside the icon, so the three tabs (characters / chats / gallery) read at a glance. Neutral: follows the button's text colour like the icon (no slot gradient — see the svg note). */ .aurora-header__nav-label { /* Readable sans-serif (was the cursive brand font — the tab labels read at a glance now, not as decoration). */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; padding: 0; color: inherit; } /* Mobile bottom bar — edit / chat / search are short, so show them (small) beside the icons instead of hiding the labels. */ @media (max-width: 700px) { .aurora-header__nav-label { font-size: 0.82rem; } .scs-mobile-nav .aurora-header__nav-btn { gap: 0.25rem; } } .scene-control-surface--header .aurora-header__nav-btn, .scene-control-surface--header .aurora-header__nav-btn:hover { color: var(--ui-text-strong); } .scene-control-surface--header .aurora-header__nav-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%), var(--card-base); border-color: rgba(255, 255, 255, 0.25); box-shadow: none; } .transport-btn--header-active, .scene-control-surface--header .transport-btn--header-active, .scene-control-surface--header .transport-btn--header-active:hover { /* Slightly-lit grey panel — reads as "on" without shouting. Bumped back from 0.18 → 0.10 top; selected-vs-default is still legible because the inset-shadow press carries half the signal. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%), var(--card-base); border-color: rgba(255, 255, 255, 0.22); color: var(--ui-text-strong); /* Pressed-in: dark inset top + light inset bottom for the depressed metal-toggle feel. No outer glow — keep the edge crisp so the selected/unselected difference is the BUTTON, not a halo around it. */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06); } /* Face tabs: NEUTRAL grey text like every other nav tab — the eyes-slot text experiment left three different treatments across editor/chat/gallery, so nav text is grey everywhere now (see the shared rule in scene-control-surface.css, which also out-specifies the .aurora-standalone a eyes tint on the link tabs). The active tab still brightens to ui-text-strong via the header-active rules. */ /* Match the toolbar Create/Discover nav-btn height (36px desktop, shorter than the 42px header default) so the face-tabs row isn't over-tall in its tray. Portrait drops it further (30px) in fieldsets-layout.css's reclaim block. */ .aurora-header__scene-tabs .aurora-header__nav-btn { height: 36px; } /* Landscape face tabs: the header goes 2-COLUMN in the landscape rail (portrait's 2 header rows = landscape's 2 header columns — strip | face tabs), mirroring the gallery's strip|filter split. Those rules live in standalone-carousel.css's landscape block: it LOADS LAST, and rules here lose equal-specificity cascade ties to later sheets (.drawer-controls{display:flex} silently beat a display:none hide from this file — the "invisible landscape header row" trap). */ @media (max-width: 600px) { .aurora-header__strip { padding: 0.3rem 0.45rem; gap: 0.4rem; } .aurora-header__brand .brand-cursive { font-size: 1.8rem; } .aurora-user-chip { font-size: 0.66rem; padding: 0.18rem 0.4rem; } .aurora-header__nav-btn { height: 38px; } .aurora-header__nav-btn svg { width: 18px; height: 18px; } .aurora-header__chip-btn { width: 28px; height: 24px; } } /* On the scene page the transport control becomes the fixed bottom dashboard and carries the page tabs, so the header nav row is hidden there — see the mobile block in scene-control-surface.css (scoped via body:has). */ /* ═══════════════════════════════════════════════════════════════════ BASE FIELDSET - Uses --accent from parent context For bare .fieldset, reads --slot-3 from inline style as fallback ═══════════════════════════════════════════════════════════════════ */ .fieldset { /* Fallback: if no context modifier, use --slot-3 from inline style */ --accent: var(--neutral); /* neutral grey (was --outfit-accent — neutralized) */ margin: 0; padding: 0.75rem; border-radius: 8px; background: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 15%, var(--card-base)) 0%, color-mix(in srgb, var(--accent) 8%, var(--card-base)) 100% ); /* Beveled control surface — plain grey 2px frame. Was tinted via var(--accent) which collapsed to invisible when no slot color was set; plain grey reads as a frame on every character. Slot tinting still happens in the surface gradient + the glow box-shadow below — borders just stop being slot-conditional. */ border: 2px solid rgba(255, 255, 255, 0.15); box-shadow: /* Outer depth + accent glow */ 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent), /* Inset bevel — dark top edge, light bottom edge */ inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1), /* Top highlight — subtle rim light */ inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .fieldset:hover { border-color: color-mix(in srgb, var(--accent) 35%, rgba(255, 255, 255, 0.1)); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5), 0 0 18px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Flush: no padding, no heading — container only */ .fieldset--flush { padding: 0; overflow: hidden; } /* Grid: charcoal work surface with a faint 20px grid lattice. Same pattern the generate-card / prompt-card uses (so the look is consistent across surfaces) but neutral — no slot-color tint. Pokes through wherever the contents don't cover the fieldset (strip padding, gaps between cards). Compound selector beats .fieldset's slot-color background shorthand. The grid lattice lives on ::before with a radial mask so it softens toward the edges (the worn / blurred-edges look from the generate-card). Mask is tighter than the generate-card's (95% / 90% vs 70% / 60%) — center stays solid, just the outer ~10% feathers out. The charcoal background stays solid edge- to-edge underneath. */ .fieldset.fieldset--grid { position: relative; background: #1a1a1f; border-color: rgba(255, 255, 255, 0.08); } .fieldset.fieldset--grid:hover { border-color: rgba(255, 255, 255, 0.12); } .fieldset.fieldset--grid::before { content: ''; position: absolute; inset: 0; /* Brighter grid lines (0.09 vs 0.05) so the fade-out reads across the whole surface, then a login-style radial mask (75% × 65% ellipse, fully opaque at center → transparent at the edge) for the worn / soft-edges look. The preview is much smaller than the login's full viewport, so the ellipse is slightly bigger than login's 70 × 60 — same feel, just sized for a smaller canvas. */ background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 20px 20px; mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 0%, transparent 100%); pointer-events: none; z-index: 0; } .fieldset h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.75rem 0; padding: 0; font-size: 0.9rem; font-weight: 600; /* Neutral grey — survives any --accent (including near-black slot colors like black hair/eyes). Modifier fieldsets used to tint this toward their slot, but that broke contrast for dark characters. Tune via --ui-text-medium in :root. */ color: var(--ui-text-medium); background: none; border: none; } /* Preview-fieldset zoom deck — absolute top-right of the preview fieldset, styled like .chat-control-deck (inset tray, slot-2 tint, 1px white border) so it reads as the same family of buttons used in the chat fieldset's header. Available on mobile too (user needs to shrink cards to fit the gallery + search + pips into one viewport). .chat-deck-btn picks up the shared chip styling from chat-input.css. */ .preview-control-deck { position: absolute; top: 8px; right: 8px; display: flex; align-items: stretch; gap: 2px; padding: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--secondary) 4%, rgba(0, 0, 0, 0.18)) 0%, color-mix(in srgb, var(--secondary) 4%, rgba(0, 0, 0, 0.28)) 100%); border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04); z-index: 3; } /* Mirror deck on the LEFT — overlay toggle sits opposite the zoom buttons, same z-index and chrome so the carousel reads as flanked by two matching control fittings. */ .preview-control-deck--left { right: auto; left: 8px; } /* ═══════════════════════════════════════════════════════════════════ FIELDSET MODIFIERS ═══════════════════════════════════════════════════════════════════ */ .fieldset--compact { padding: 0.5rem; } .fieldset--compact h2 { font-size: 0.75rem; margin-bottom: 0.4rem; } .fieldset--tech { --accent: var(--neutral); background: linear-gradient( 135deg, rgba(75, 85, 99, 0.15) 0%, rgba(55, 65, 81, 0.1) 100% ); border-color: color-mix(in srgb, var(--neutral) 25%, rgba(255, 255, 255, 0.08)); } .fieldset--tech h2 { color: rgba(var(--neutral-rgb), 0.9); cursor: pointer; } .fieldset--scene { /* Uses --slot-3 from parent context - NO HARDCODED COLORS */ --accent: var(--neutral); /* neutral grey (was --outfit-accent — neutralized) */ background: linear-gradient( 135deg, var(--card-base) 0%, var(--card-base) 100% ); border-color: rgba(255, 255, 255, 0.08); } .fieldset--scene:hover { border-color: rgba(255, 255, 255, 0.1); } .fieldset--scene h2 { color: var(--neutral); } .fieldset--nav { cursor: pointer; } .fieldset--nav:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 4px 20px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ═══════════════════════════════════════════════════════════════════ FORM FIELDS - Use --accent from context ═══════════════════════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; } .field:last-child { margin-bottom: 0; } .field label { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; /* Neutral grey — same reason as .fieldset h2: --accent can resolve to a near-black slot color and would vanish here. Tune via --ui-text-soft. */ color: var(--ui-text-soft); padding-left: 0.25rem; margin: 0; } /* ═══════════════════════════════════════════════════════════════════ INPUTS - Use --accent from context ═══════════════════════════════════════════════════════════════════ */ .input, .field input[type="text"], .field input[type="number"], .field textarea, .field select { width: 100%; min-width: 0; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 4px; /* Inline color-mix instead of var(--text-tinted) — chained var() inside a custom property's color-mix() doesn't substitute reliably at the consumer. Using --accent directly here works. Grey-led so slot only tints the text, keeping contrast against coloured bubbles. */ color: #c0c0c0; padding: 0.5rem; font-size: 0.85rem; transition: all 0.2s ease; } /* Text/number inputs match the select2 single-select height (28px) so the Name input doesn't tower above the Mood/Race/etc. select2 fields. */ .input:not(textarea), .field input[type="text"], .field input[type="number"] { height: 28px; padding: 0 0.5rem; font-size: 0.8rem; } .input::placeholder, .field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.3); font-size: 0.75rem; } .input:hover, .field input[type="text"]:hover, .field input[type="number"]:hover, .field textarea:hover, .field select:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); border-left-color: var(--accent); background: rgba(0, 0, 0, 0.4); } .input:focus, .field input[type="text"]:focus, .field input[type="number"]:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); border-left-color: var(--accent); background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .input[readonly] { background: rgba(0, 0, 0, 0.15); cursor: default; } /* Textarea */ textarea.input, .field textarea { resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.4; } /* Select */ select.input, .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; padding-right: 2rem; cursor: pointer; } /* Tech fieldset uses gray accent */ .fieldset--tech select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); } select.input option, .field select option { background: var(--card-base); color: white; padding: 0.5rem; } /* Number input - hide spinners */ input[type="number"].input, .field input[type="number"] { -moz-appearance: textfield; } input[type="number"].input::-webkit-outer-spin-button, input[type="number"].input::-webkit-inner-spin-button, .field input[type="number"]::-webkit-outer-spin-button, .field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Input modifiers */ .input--compact { padding: 0.35rem 0.5rem; font-size: 0.75rem; } .input--compact::placeholder { font-size: 0.7rem; } .input--muted { border-left-color: rgba(var(--neutral-rgb), 0.4); color: rgba(255, 255, 255, 0.7); } /* ═══════════════════════════════════════════════════════════════════ COLOR PICKERS ═══════════════════════════════════════════════════════════════════ */ .color-picker { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 28px; height: 28px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 6px; cursor: pointer; padding: 0; background: transparent; transition: all 0.2s ease; } .color-picker::-webkit-color-swatch-wrapper { padding: 0; } .color-picker::-webkit-color-swatch { border: none; border-radius: 4px; } .color-picker::-moz-color-swatch { border: none; border-radius: 4px; } .color-picker:hover { transform: scale(1.1); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .color-picker--small { width: 20px; height: 20px; border-radius: 4px; } .color-picker--small::-webkit-color-swatch { border-radius: 2px; } .color-swatches { display: flex; gap: 4px; } .color-swatch { width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 4px; transition: all 0.3s ease; } .color-swatch:hover { transform: scale(1.15); border-color: rgba(255, 255, 255, 0.7); } /* ═══════════════════════════════════════════════════════════════════ FK FIELD (Foreign Key dropdown with Select2) ═══════════════════════════════════════════════════════════════════ */ .fk-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; } .fk-field label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); opacity: 0.8; padding-left: 0.25rem; } .fk-select-row { display: flex; gap: 0.5rem; align-items: center; } .fk-select-row .select2-container { flex: 1; min-width: 0; } .fk-hint { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 4px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } .fk-hint--empty { opacity: 0.5; font-style: italic; } /* ═══════════════════════════════════════════════════════════════════ PREVIEW IMAGE ═══════════════════════════════════════════════════════════════════ */ .preview-image { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.4); border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); } .preview-image--portrait { aspect-ratio: 2 / 3; } .preview-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .preview-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.3); font-size: 2rem; } .preview-placeholder span:last-child { font-size: 0.8rem; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════ SEED WRAPPER ═══════════════════════════════════════════════════════════════════ */ .seed-wrapper { display: flex; gap: 0.25rem; } .seed-wrapper .input { flex: 1; min-width: 0; } .seed-btn { width: 36px; height: 36px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--card-base)) 0%, color-mix(in srgb, var(--accent) 10%, var(--card-base)) 100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .seed-btn:hover { background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, var(--card-base)) 100%); transform: scale(1.05); } /* ═══════════════════════════════════════════════════════════════════ CHECKBOX WRAPPER ═══════════════════════════════════════════════════════════════════ */ .checkbox-wrapper { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 4px; border-left: 3px solid rgba(var(--neutral-rgb), 0.4); } .checkbox-wrapper input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .checkbox-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } /* ═══════════════════════════════════════════════════════════════════ FILE UPLOAD ═══════════════════════════════════════════════════════════════════ */ .file-upload-wrapper { display: flex; flex-direction: column; gap: 0.5rem; } .file-upload-wrapper input[type="file"] { width: 100%; padding: 0.5rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 4px; color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; } .file-upload-wrapper input[type="file"]:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); border-left-color: var(--accent); background: rgba(0, 0, 0, 0.4); } .file-upload-wrapper input[type="file"]::file-selector-button { padding: 0.35rem 0.75rem; margin-right: 0.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, rgba(0, 0, 0, 0.5)) 0%, color-mix(in srgb, var(--accent) 15%, rgba(0, 0, 0, 0.4)) 100% ); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 4px; color: white; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; } .file-upload-wrapper input[type="file"]::file-selector-button:hover { background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, var(--card-base)) 100%); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); } .file-upload-wrapper a { color: var(--accent); font-size: 0.75rem; text-decoration: none; transition: color 0.2s ease; } .file-upload-wrapper a:hover { color: white; text-decoration: underline; } .file-upload-wrapper input[type="checkbox"] { width: 16px; height: 16px; margin-right: 0.5rem; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════ RECORD NAVIGATION - Prev/Next buttons below preview Pure Django, no JavaScript - uses NavigationMixin context ═══════════════════════════════════════════════════════════════════ */ .record-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); } .nav-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, rgba(0, 0, 0, 0.5)) 0%, color-mix(in srgb, var(--accent) 15%, rgba(0, 0, 0, 0.4)) 100% ); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; color: white; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .nav-btn:hover { background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, var(--card-base)) 100%); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); } .nav-btn--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .nav-position { font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.05em; } /* ═══════════════════════════════════════════════════════════════════ ENTITY STRIP - Visual navigation for all entities of current type Pure Django, no JavaScript - uses NavigationMixin.get_strip_context() ═══════════════════════════════════════════════════════════════════ */ .entity-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem; background: rgba(0, 0, 0, 0.3); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.75rem; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .entity-strip::-webkit-scrollbar { height: 4px; } .entity-strip::-webkit-scrollbar-track { background: transparent; } .entity-strip::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 2px; } .entity-strip__card { flex: 0 0 60px; width: 60px; min-width: 60px; max-width: 60px; display: flex; flex-direction: column; text-decoration: none; border-radius: 4px; overflow: hidden; border: 2px solid transparent; transition: all 0.2s ease; background: rgba(0, 0, 0, 0.2); } .entity-strip__card:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .entity-strip__card--current { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); } .entity-strip__image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; } .entity-strip__placeholder { width: 100%; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--card-base)) 0%, color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--card-base) 75%, black)) 100% ); } .entity-strip__initials { font-size: 1rem; font-weight: 700; color: var(--accent); opacity: 0.7; } .entity-strip__name { display: block; padding: 0.25rem; font-size: 0.6rem; font-weight: 600; text-align: center; color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entity-strip__empty { padding: 1rem; color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; font-style: italic; } /* ═══════════════════════════════════════════════════════════════════ TECH STACK - Settings fieldset inner layout Used in settings-fieldset.html include ═══════════════════════════════════════════════════════════════════ */ .tech-stack { display: flex; flex-direction: column; gap: 0.5rem; } .tech-row { display: grid; gap: 0.75rem; } .tech-row--single { grid-template-columns: 1fr; } .tech-row--3col { grid-template-columns: 1fr 1fr 1fr; } .tech-value { display: block; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 4px; border-left: 3px solid rgba(var(--neutral-rgb), 0.4); font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); font-family: monospace; } .tech-link { display: block; padding: 0.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 4px; border-left: 3px solid rgba(var(--neutral-rgb), 0.4); font-size: 0.7rem; color: rgba(var(--neutral-rgb), 0.8); text-decoration: none; word-break: break-all; transition: all 0.2s ease; } .tech-link:hover { color: white; border-left-color: rgba(var(--neutral-rgb), 0.8); background: rgba(0, 0, 0, 0.3); } /* Face Lock Button - toggle button for locking face seed */ .face-lock-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.25rem; padding: 0.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--card-base)) 0%, color-mix(in srgb, var(--accent) 8%, var(--card-base)) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .face-lock-btn:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--card-base)) 0%, color-mix(in srgb, var(--accent) 15%, var(--card-base)) 100%); border-color: rgba(255, 255, 255, 0.2); } .face-lock-btn.locked { background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, var(--card-base)) 100%); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); } .face-lock-btn.locked:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, white) 0%, color-mix(in srgb, var(--accent) 80%, var(--card-base)) 100%); } .face-lock-btn .lock-icon { font-size: 1rem; line-height: 1; } /* ═══════════════════════════════════════════════════════════════════ TECH CONTROLS - Inline controls for settings fieldset Row 1: Aspect + Quality + Seed/Lock (all on one line) Row 2: Prompt toggle (centered) + collapsible textarea ═══════════════════════════════════════════════════════════════════ */ .tech-controls { display: flex; flex-direction: column; gap: 0.6rem; } /* Row 1: All controls in one row, no wrapping */ .controls-inline { display: flex; gap: 0.5rem; align-items: flex-end; } .control-group { display: flex; flex-direction: column; gap: 0.25rem; flex-shrink: 0; } .control-group label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--neutral-rgb), 0.7); padding-left: 0.15rem; } /* Aspect dropdown - needs room for "Landscape" */ .control-group--select { flex: 0 0 auto; } .control-group--select select { min-width: 90px; padding: 0.4rem 1.8rem 0.4rem 0.5rem; font-size: 0.75rem; } /* Seed group - takes remaining space, right-aligned content */ .control-group--seed { flex: 1 1 auto; align-items: flex-end; } /* Prompt Section - button + collapsible textarea */ .prompt-section { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } /* Prompt Toggle Button */ .prompt-toggle { display: flex; align-items: center; gap: 0.3rem; width: fit-content; height: 28px; padding: 0 0.6rem; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: rgba(var(--neutral-rgb), 0.7); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; } .prompt-toggle:hover { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.2); color: rgba(200, 200, 210, 0.9); } .prompt-toggle.active { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.4); color: rgba(165, 180, 252, 0.9); } .prompt-toggle-icon { font-size: 0.5rem; transition: transform 0.2s ease; } .prompt-toggle.active .prompt-toggle-icon { transform: rotate(180deg); } /* Seed + Lock inline row */ .seed-lock-row { display: flex; align-items: center; gap: 0.35rem; height: 32px; background: rgba(0, 0, 0, 0.3); padding: 0 0.2rem 0 0.5rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid rgba(var(--neutral-rgb), 0.4); } .seed-value--inline { font-size: 0.75rem; font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; color: rgba(255, 255, 255, 0.7); line-height: 32px; white-space: nowrap; min-width: 80px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; } /* Face Lock button - compact for inline */ .seed-lock-row .face-lock-btn { width: 30px; height: 30px; padding: 0; flex-shrink: 0; border-radius: 3px; } .seed-lock-row .face-lock-btn .lock-icon { font-size: 0.85rem; } /* Prompt Row - Collapsible, full width */ .prompt-row { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; overflow: hidden; transition: all 0.25s ease; } .prompt-row.collapsed { max-height: 0; opacity: 0; } .prompt-row:not(.collapsed) { max-height: 300px; opacity: 1; } .prompt-row label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--neutral-rgb), 0.7); padding-left: 0.15rem; } .prompt-textarea { width: 100%; min-height: 2.5rem; padding: 0.4rem 0.5rem; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid rgba(var(--neutral-rgb), 0.4); border-radius: 4px; color: rgba(180, 180, 195, 0.9); font-size: 0.7rem; font-family: inherit; line-height: 1.4; resize: none; overflow: hidden; transition: all 0.2s ease; field-sizing: content; } .prompt-textarea::placeholder { color: rgba(var(--neutral-rgb), 0.4); } .prompt-textarea:hover { border-color: rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.25); } .prompt-textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.25); } .prompt-textarea[readonly] { cursor: default; } /* v9.0: Placeholder text for future element fields */ .placeholder-text { display: block; padding: 0.4rem 0.5rem; background: rgba(0, 0, 0, 0.15); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 4px; color: rgba(var(--neutral-rgb), 0.4); font-size: 0.75rem; font-style: italic; }