@keyframes ph-pulse { 50% { opacity: 0.55; } } @keyframes ph-spin { to { transform: rotate(360deg); } } @scope ([data-theme-version="v2-neon-broadcast"]) { /* NOTE (channel-cheevos #1718): bundle_css.py's --scope wraps this bundle in @scope([data-theme-version="v2-neon-broadcast"]) { ... }. That scope root is , not . Per the CSS Scoping spec, a plain :root selector nested inside @scope(S) only matches elements that are S itself or its descendants -- is an ANCESTOR of , so it's never in scope, and these token blocks would silently define nothing (verified in Chrome 151). Adding :scope alongside :root binds the custom properties to the scope root element itself (), which still cascades to every descendant that reads var(--ph-*). This is a hand-applied fix on top of the generated bundle, not a change to polyhydra-stylebook's scripts -- flagged for a permanent fix there. */ /* === base.css === */ /* * Polyhydra Stylebook — structural base (v1.0.0) * Skin-independent tokens: geometry, spacing, motion, and the fallback * neutral color contract. A skin (see skins/) overrides the color/font * tokens below to give an app its own personality; components.css only * ever reads var(--ph-*), never hardcodes a value, so any skin drops in * cleanly. Load order: base.css, then exactly one skins/*.css, then * components.css. */ :root, :scope { /* Geometry — skins should not need to override these */ --ph-radius-sm: 0.375rem; --ph-radius-md: 0.75rem; --ph-radius-lg: 1.125rem; /* Spacing (fluid, clamp-based) — skins should not need to override these */ --ph-space-page: clamp(1rem, 2vw, 2rem); --ph-space-card: clamp(0.875rem, 1.5vw, 1.25rem); /* Motion — skins should not need to override these */ --ph-motion-fast: 160ms; /* Elevation — derives from the skin's primary-glow, defined below */ --ph-shadow-card: 0 0.75rem 2rem rgb(0 0 0 / 28%); --ph-shadow-glow: 0 0 1.25rem var(--ph-primary-glow); /* Color/font contract — every skin MUST define these. Fallback values here are a plain neutral skin so base.css + components.css alone still render something legible if a skin file is missing. */ --ph-bg: #14161c; --ph-bg-elevated: #1b1e26; --ph-surface: #21242e; --ph-surface-strong: #2b2f3c; --ph-border: #3a3f4e; --ph-border-strong: #565c70; --ph-text: #f2f3f5; --ph-text-muted: #a5aab8; --ph-primary: #6fb1ff; --ph-primary-glow: rgb(111 177 255 / 35%); --ph-on-primary: #06101f; --ph-secondary: #b8a4ff; --ph-danger: #ff7a90; --ph-on-danger: #260810; --ph-warning: #ffcb6b; --ph-success: #7be0a8; --ph-focus-ring: #fff2a6; --ph-font-body: ui-sans-serif, system-ui, sans-serif; --ph-font-display: ui-sans-serif, system-ui, sans-serif; } @media (prefers-reduced-motion: reduce) { :root, :scope { --ph-motion-fast: 1ms; } } /* === skins/neon-broadcast.css === */ /* * Polyhydra Stylebook — "Neon Broadcast" skin (v1.0.0) * Canonicalized from channel-cheevos's "v2 Neon Broadcast" theme * (docs/themes/v2-neon-broadcast/tokens.css). Source repo: * lancer1977/channel-cheevos. Dark control-room mood: near-black * surfaces, cyan primary / violet secondary signal accents, Orbitron * display type. Overrides only the color/font contract from base.css — * load base.css first, then this file, then components.css. */ :root, :scope { --ph-bg: #080a12; --ph-bg-elevated: #101524; --ph-surface: #151c2e; --ph-surface-strong: #1d2740; --ph-border: #344464; --ph-border-strong: #5d78a8; --ph-text: #f3f7ff; --ph-text-muted: #a9b7cf; --ph-primary: #4de2ff; --ph-primary-glow: rgb(77 226 255 / 35%); --ph-on-primary: #061019; --ph-secondary: #a78bfa; --ph-danger: #ff617d; --ph-on-danger: #21030a; --ph-warning: #ffcb6b; --ph-success: #64e6a5; --ph-focus-ring: #fff2a6; --ph-font-body: Inter, ui-sans-serif, system-ui, sans-serif; --ph-font-display: Orbitron, Inter, ui-sans-serif, sans-serif; /* Extended accents — this skin's optional highlight colors, use sparingly */ --ph-accent-magenta: #f229ff; --ph-accent-violet: #8b3dff; --ph-accent-cyan: #10d9ff; --ph-accent-gold: #ffc21a; } body { background: radial-gradient(circle at 16% 0%, rgb(77 226 255 / 12%), transparent 28%), radial-gradient(circle at 88% 8%, rgb(167 139 250 / 12%), transparent 24%), var(--ph-bg); } /* === components.css === */ /* * Polyhydra Stylebook — component classes (v1.0.0) * Plain, framework-agnostic classes. Every rule reads var(--ph-*) only — * never a hardcoded color/font/radius — so any skin (see skins/) drops * in cleanly underneath. Ported from channel-cheevos's "v2 Neon * Broadcast" primitives (src/ChannelCheevos/wwwroot/css/v2-neon- * broadcast.css), generalized: channel-cheevos-specific names * (cc-domain-signal, cc-connection-row, cc-setting-surface) were renamed * to generic equivalents and MudBlazor-coupled selectors were dropped. * Requires base.css + one skins/*.css loaded first. */ body { color: var(--ph-text); font-family: var(--ph-font-body); } /* Panel */ .ph-panel { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-card); overflow: hidden; } .ph-panel__header { align-items: center; border-bottom: 1px solid var(--ph-border); display: flex; gap: var(--ph-space-card); justify-content: space-between; padding: 0.75rem var(--ph-space-card); } .ph-panel__header h2 { font: 600 1rem/1.25 var(--ph-font-display); letter-spacing: 0.04em; margin: 0; } .ph-panel__body { padding: var(--ph-space-card); } @media (max-width: 640px) { .ph-panel__header { align-items: flex-start; flex-direction: column; } } /* Button */ .ph-button { align-items: center; border: 1px solid transparent; border-radius: var(--ph-radius-sm); cursor: pointer; display: inline-flex; font: 600 0.8rem/1 var(--ph-font-display); gap: 0.5rem; justify-content: center; letter-spacing: 0.05em; min-height: 2.5rem; padding: 0.6rem 0.85rem; transition: background var(--ph-motion-fast), box-shadow var(--ph-motion-fast), transform var(--ph-motion-fast); } .ph-button--primary { background: var(--ph-primary); color: var(--ph-on-primary); } .ph-button--secondary { background: transparent; border-color: var(--ph-border-strong); color: var(--ph-text); } .ph-button--danger { background: var(--ph-danger); color: var(--ph-on-danger); } .ph-button:hover:not(:disabled) { box-shadow: var(--ph-shadow-glow); transform: translateY(-1px); } .ph-button:focus-visible { outline: 3px solid var(--ph-focus-ring); outline-offset: 3px; } .ph-button:disabled { cursor: not-allowed; opacity: 0.52; } .ph-button__spinner { animation: ph-spin 0.8s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; height: 0.8rem; width: 0.8rem; } @media (max-width: 640px) { .ph-button { width: 100%; } } /* Link-styled button (e.g. row actions) */ .ph-link-button { align-items: center; border: 1px solid transparent; border-radius: var(--ph-radius-sm); display: inline-flex; font: 600 0.72rem/1 var(--ph-font-display); justify-content: center; letter-spacing: 0.075em; min-height: 2.25rem; padding: 0.55rem 0.7rem; text-decoration: none; text-transform: uppercase; transition: box-shadow var(--ph-motion-fast), transform var(--ph-motion-fast), background var(--ph-motion-fast); white-space: nowrap; } .ph-link-button--primary { background: var(--ph-primary); color: var(--ph-on-primary); } .ph-link-button--secondary { border-color: var(--ph-border-strong); color: var(--ph-text); } .ph-link-button--danger { background: var(--ph-danger); color: var(--ph-on-danger); } .ph-link-button:hover:not(.is-disabled) { box-shadow: var(--ph-shadow-glow); transform: translateY(-1px); } .ph-link-button:focus-visible { outline: 3px solid var(--ph-focus-ring); outline-offset: 3px; } .ph-link-button.is-disabled { cursor: not-allowed; opacity: 0.52; } /* Empty state */ .ph-empty-state { background: var(--ph-bg-elevated); border: 1px dashed var(--ph-border-strong); border-radius: var(--ph-radius-md); padding: clamp(1.5rem, 5vw, 3rem); text-align: center; } .ph-empty-state__eyebrow { color: var(--ph-primary); font: 600 0.7rem/1 var(--ph-font-display); letter-spacing: 0.1em; text-transform: uppercase; } .ph-empty-state h2 { font-family: var(--ph-font-display); margin: 0.75rem 0 0.5rem; } .ph-empty-state p { color: var(--ph-text-muted); margin: 0 auto 1rem; max-width: 42rem; } /* Badge */ .ph-badge { border: 1px solid currentColor; border-radius: 999px; display: inline-block; font: 600 0.65rem/1 var(--ph-font-display); letter-spacing: 0.07em; padding: 0.35rem 0.5rem; text-transform: uppercase; } .ph-badge--success { color: var(--ph-success); } .ph-badge--warning { color: var(--ph-warning); } .ph-badge--error { color: var(--ph-danger); } .ph-badge--neutral { color: var(--ph-text-muted); } /* Signal (status/state indicator row — e.g. locked/unlocked/completed/error) */ .ph-signal { align-items: start; background: var(--ph-surface-strong); border: 1px solid var(--ph-border); border-left: 3px solid var(--ph-primary); border-radius: var(--ph-radius-sm); display: flex; gap: 0.75rem; min-width: 0; padding: 0.8rem; } .ph-signal__icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; flex: 0 0 auto; height: 2rem; justify-content: center; width: 2rem; } .ph-signal__content { display: grid; gap: 0.2rem; min-width: 0; } .ph-signal__eyebrow, .ph-signal__state { font: 600 0.65rem/1 var(--ph-font-display); letter-spacing: 0.08em; text-transform: uppercase; } .ph-signal__label { font-size: 0.95rem; } .ph-signal__detail { color: var(--ph-text-muted); font-size: 0.85rem; } .ph-signal__progress { align-items: center; display: flex; gap: 0.5rem; font-size: 0.8rem; } .ph-signal__progress progress { accent-color: var(--ph-primary); flex: 1; min-width: 6rem; } .ph-signal--locked, .ph-signal--unavailable, .ph-signal--disabled { border-left-color: var(--ph-text-muted); color: var(--ph-text-muted); } .ph-signal--unlocked, .ph-signal--available { border-left-color: var(--ph-primary); color: var(--ph-primary); } .ph-signal--completed { border-left-color: var(--ph-success); color: var(--ph-success); } .ph-signal--error { border-left-color: var(--ph-danger); color: var(--ph-danger); } .ph-signal__label, .ph-signal__detail { color: var(--ph-text); } .ph-signal--compact { padding: 0.55rem 0.65rem; } @media (max-width: 640px) { .ph-signal { gap: 0.6rem; } .ph-signal__progress { align-items: flex-start; flex-direction: column; } .ph-signal__progress progress { width: 100%; } } /* Field (form input wrapper) */ .ph-field { display: grid; gap: 0.4rem; margin-bottom: 1rem; } .ph-field label { font-weight: 700; } .ph-field input, .ph-field select, .ph-field textarea { background: var(--ph-bg); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); color: var(--ph-text); min-height: 2.5rem; padding: 0.6rem 0.75rem; } .ph-field :is(input, select, textarea):focus-visible { border-color: var(--ph-primary); outline: 3px solid var(--ph-focus-ring); outline-offset: 2px; } .ph-field__error { color: var(--ph-danger); font-weight: 600; } .ph-field small { color: var(--ph-text-muted); } /* Stat card */ .ph-stat-card { background: var(--ph-surface-strong); border-left: 3px solid var(--ph-primary); border-radius: var(--ph-radius-sm); display: grid; gap: 0.35rem; padding: var(--ph-space-card); } .ph-stat-card__label, .ph-stat-card__detail { color: var(--ph-text-muted); } .ph-stat-card__value { font: 700 clamp(1.5rem, 4vw, 2.5rem)/1 var(--ph-font-display); } /* Row (e.g. connection/list item with leading icon, content, trailing action) */ .ph-row { align-items: center; background: linear-gradient(100deg, rgb(8 10 18 / 74%), var(--ph-surface)); border: 1px solid var(--ph-border); border-left: 2px solid var(--ph-border-strong); display: grid; gap: 0.875rem; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 5.25rem; padding: 0.75rem 1rem; transition: border-color var(--ph-motion-fast), background var(--ph-motion-fast), box-shadow var(--ph-motion-fast); } .ph-row:hover { background: linear-gradient(100deg, rgb(77 226 255 / 8%), var(--ph-surface)); border-color: var(--ph-border-strong); } .ph-row:focus-within { border-color: var(--ph-primary); box-shadow: 0 0 0 2px var(--ph-focus-ring); } .ph-row--success { border-left-color: var(--ph-success); } .ph-row--warning { border-left-color: var(--ph-warning); } .ph-row--error { border-left-color: var(--ph-danger); } .ph-row__icon { align-items: center; background: var(--ph-bg-elevated); border: 1px solid var(--ph-border); color: var(--ph-primary); display: flex; font-size: 1.25rem; height: 2.75rem; justify-content: center; width: 2.75rem; } .ph-row__content { min-width: 0; } .ph-row__heading { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; } .ph-row h3 { color: var(--ph-text); font: 600 0.9rem/1.2 var(--ph-font-display); letter-spacing: 0.035em; margin: 0; } .ph-row p { color: var(--ph-text-muted); font-size: 0.82rem; line-height: 1.45; margin: 0.3rem 0 0; overflow-wrap: anywhere; white-space: normal; } .ph-row__action { display: flex; justify-content: flex-end; } @media (max-width: 640px) { .ph-row { align-items: start; grid-template-columns: auto minmax(0, 1fr); } .ph-row__action { grid-column: 2; justify-content: stretch; } .ph-row__action .ph-link-button { width: 100%; } } /* Toast / operation status */ .ph-toast { align-items: center; background: var(--ph-bg-elevated); border: 1px solid var(--ph-border); display: flex; flex-wrap: wrap; gap: 0.65rem; padding: 0.8rem 1rem; } .ph-toast--failure { border-color: var(--ph-danger); } .ph-toast--warning { border-color: var(--ph-secondary); } /* Skeleton / progress */ .ph-skeleton { animation: ph-pulse 1.2s ease-in-out infinite; background: linear-gradient(90deg, var(--ph-surface), var(--ph-surface-strong), var(--ph-surface)); border-radius: var(--ph-radius-sm); min-height: 1rem; } .ph-progress { background: var(--ph-surface); min-height: 1.5rem; position: relative; } .ph-progress > span:first-child { background: var(--ph-primary); display: block; height: 100%; transition: width 0.2s ease; } .ph-progress__label { inset: 0; padding: 0.2rem 0.5rem; position: absolute; } .ph-health-indicator--degraded, .ph-health-indicator--warning { color: var(--ph-secondary); } .ph-health-indicator--offline, .ph-health-indicator--failure { color: var(--ph-danger); } .ph-event-feed { margin: 0; padding-left: 1.25rem; } .ph-transition-boundary { contain: layout style; } /* Command palette */ .ph-command-palette__backdrop { align-items: flex-start; background: rgb(0 0 0 / 72%); display: flex; inset: 0; justify-content: center; padding: clamp(1rem, 10vh, 7rem) 1rem 1rem; position: fixed; z-index: 1500; } .ph-command-palette { background: var(--ph-bg-elevated); border: 1px solid var(--ph-border-strong); box-shadow: var(--ph-shadow-card), var(--ph-shadow-glow); color: var(--ph-text); display: grid; max-height: min(44rem, 80vh); max-width: 46rem; overflow: hidden; width: 100%; } .ph-command-palette__header { align-items: center; border-bottom: 1px solid var(--ph-border); display: flex; justify-content: space-between; padding: 1rem; } .ph-command-palette__header span, .ph-command-palette__group { color: var(--ph-primary); font: 0.65rem/1 var(--ph-font-display); letter-spacing: 0.09em; text-transform: uppercase; } .ph-command-palette__header h2 { font: 600 1.1rem/1.2 var(--ph-font-display); margin: 0.35rem 0 0; } .ph-command-palette kbd { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm); color: var(--ph-text-muted); padding: 0.2rem 0.4rem; } .ph-command-palette__search { border-bottom: 1px solid var(--ph-border); display: block; padding: 1rem; } .ph-command-palette__search input { background: var(--ph-bg); border: 1px solid var(--ph-border); color: var(--ph-text); font-size: 1rem; min-height: 3rem; padding: 0.75rem; width: 100%; } .ph-command-palette__search input:focus-visible { outline: 3px solid var(--ph-focus-ring); outline-offset: 2px; } .ph-command-palette__results { display: grid; overflow: auto; padding: 0.5rem; } .ph-command-palette__result { background: transparent; border: 1px solid transparent; color: var(--ph-text); display: grid; gap: 0.25rem; min-height: 4.5rem; padding: 0.75rem; text-align: left; width: 100%; } .ph-command-palette__result small { color: var(--ph-text-muted); } .ph-command-palette__result:is(:hover, .is-active, :focus-visible) { background: var(--ph-surface); border-color: var(--ph-primary); outline: none; } .ph-command-palette__empty { color: var(--ph-text-muted); padding: 2rem 1rem; text-align: center; } .ph-command-palette footer { border-top: 1px solid var(--ph-border); display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1rem; } .ph-command-palette footer span { align-items: center; display: flex; gap: 0.3rem; } @media (max-width: 640px) { .ph-command-palette__backdrop { padding: 0.5rem; } .ph-command-palette { max-height: calc(100vh - 1rem); } .ph-command-palette footer { font-size: 0.75rem; } } }