git / moonbite-network / reactor-app/ui/reactor.css · raw
/* MoonBite Reactor — desktop app shell. Wraps the verbatim god-reactor stage in an "app of the day" console. Tokens intentionally self-contained (this ships outside the Flask app). */:root { --rx-bg: #05060f; --rx-bg2: #0a0c1c; --rx-panel: rgba(18, 20, 40, 0.62); --rx-panel-line: rgba(120, 130, 220, 0.16); --rx-text: #eef0ff; --rx-muted: #9aa0c8; --rx-faint: #6b7099; --rx-accent: #7c5cff; --rx-accent2: #33e1ed; --rx-good: #38f0a8; --rx-warn: #ffcf5c; --rx-bad: #ff6b8b; --rx-grad: linear-gradient(120deg, #7c5cff 0%, #33e1ed 100%); --rx-glow: 0 0 40px rgba(124, 92, 255, 0.45); --rx-radius: 18px;}* { box-sizing: border-box; }html, body { height: 100%; }body { margin: 0; font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; color: var(--rx-text); background: radial-gradient(1200px 700px at 80% -10%, rgba(124,92,255,0.20), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(51,225,237,0.14), transparent 60%), linear-gradient(160deg, var(--rx-bg) 0%, var(--rx-bg2) 100%); background-attachment: fixed; overflow: hidden; user-select: none;}/* ---- draggable title bar ---- */.rx-titlebar { -webkit-app-region: drag; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: rgba(6, 7, 18, 0.55); border-bottom: 1px solid var(--rx-panel-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);}.rx-brand { font-size: 15px; letter-spacing: 0.02em; font-weight: 500; color: var(--rx-muted); }.rx-brand b { color: var(--rx-text); font-weight: 700; }.rx-brand-moon { filter: drop-shadow(0 0 8px rgba(124,92,255,0.7)); }.rx-titlebar-spacer { flex: 1; }.rx-conn { -webkit-app-region: no-drag; display: flex; align-items: center; gap: 8px; font: 500 12px/1 "JetBrains Mono", monospace; color: var(--rx-muted); text-transform: uppercase; letter-spacing: 0.08em;}.rx-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rx-warn); box-shadow: 0 0 10px var(--rx-warn); animation: rxpulse 1.6s ease-in-out infinite;}.rx-conn.is-online .rx-conn-dot { background: var(--rx-good); box-shadow: 0 0 10px var(--rx-good); }.rx-conn.is-offline .rx-conn-dot { background: var(--rx-bad); box-shadow: 0 0 10px var(--rx-bad); animation: none; }@keyframes rxpulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }/* ---- layout ---- */.rx-shell { display: grid; grid-template-columns: minmax(360px, 460px) 1fr; gap: 26px; height: calc(100vh - 44px); padding: 26px;}/* ---- console (left) ---- */.rx-console { display: flex; flex-direction: column; gap: 18px; padding: 26px; background: var(--rx-panel); border: 1px solid var(--rx-panel-line); border-radius: var(--rx-radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden;}.rx-eyebrow { font: 700 11px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.22em; color: var(--rx-accent2);}.rx-title { margin: 12px 0 0; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em;}.rx-title-grad { background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent;}.rx-sub { margin: 12px 0 0; color: var(--rx-muted); font-size: 14px; line-height: 1.6; }.rx-form { display: flex; flex-direction: column; gap: 8px; }.rx-label { font: 600 11px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.14em; color: var(--rx-faint);}.rx-input { -webkit-app-region: no-drag; width: 100%; padding: 14px 16px; font: 500 14px/1 "JetBrains Mono", monospace; color: var(--rx-text); background: rgba(4, 5, 14, 0.6); border: 1px solid var(--rx-panel-line); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s; user-select: text;}.rx-input:focus { border-color: var(--rx-accent); box-shadow: 0 0 0 3px rgba(124,92,255,0.18); }.rx-input.is-bad { border-color: var(--rx-bad); box-shadow: 0 0 0 3px rgba(255,107,139,0.16); }.rx-hint { font-size: 12px; color: var(--rx-faint); min-height: 16px; }.rx-hint.is-bad { color: var(--rx-bad); }.rx-actions { display: flex; gap: 10px; margin-top: 6px; }.rx-btn { -webkit-app-region: no-drag; position: relative; flex: 1; padding: 14px 18px; font: 700 14px/1 "Space Grotesk", sans-serif; letter-spacing: 0.02em; color: #0b0620; border: none; border-radius: 12px; cursor: pointer; overflow: hidden; transition: transform .12s ease, filter .2s;}.rx-btn:active { transform: translateY(1px) scale(0.995); }.rx-btn-fire { background: var(--rx-grad); box-shadow: var(--rx-glow); }.rx-btn-fire:hover { filter: brightness(1.08); }.rx-btn-fire:disabled { filter: grayscale(0.5) brightness(0.7); cursor: default; box-shadow: none; }.rx-btn-glow { position: absolute; inset: 0; background: radial-gradient(120px 60px at var(--mx,50%) 50%, rgba(255,255,255,0.35), transparent 70%); opacity: 0; transition: opacity .2s; pointer-events: none;}.rx-btn-fire:hover .rx-btn-glow { opacity: 1; }.rx-btn-stop { color: var(--rx-text); background: rgba(255, 107, 139, 0.12); border: 1px solid rgba(255, 107, 139, 0.4); box-shadow: none;}.rx-btn-stop:hover { background: rgba(255, 107, 139, 0.22); }.rx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.rx-stat { padding: 12px; background: rgba(4, 5, 14, 0.45); border: 1px solid var(--rx-panel-line); border-radius: 12px; text-align: center;}.rx-stat-label { font: 600 9.5px/1.2 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rx-faint);}.rx-stat-value { margin-top: 6px; font: 700 22px/1 "Space Grotesk", sans-serif; background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent;}.rx-logfeed { flex: 1; min-height: 80px; overflow-y: auto; padding: 12px 14px; font: 500 12px/1.7 "JetBrains Mono", monospace; color: var(--rx-muted); background: rgba(2, 3, 10, 0.5); border: 1px solid var(--rx-panel-line); border-radius: 12px;}.rx-logfeed::-webkit-scrollbar { width: 8px; }.rx-logfeed::-webkit-scrollbar-thumb { background: rgba(124,92,255,0.3); border-radius: 8px; }.rx-logline { display: block; opacity: 0; animation: rxin .3s forwards; }.rx-logline.is-good { color: var(--rx-good); }.rx-logline.is-bad { color: var(--rx-bad); }.rx-logline.is-hit { color: var(--rx-text); }.rx-logline b { color: var(--rx-accent2); }@keyframes rxin { from { opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }.rx-foot { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--rx-faint);}.rx-foot-dot { width:6px; height:6px; border-radius:50%; background: var(--rx-good); box-shadow: 0 0 8px var(--rx-good); flex: none; }/* ---- stage (right) ---- */.rx-stagewrap { position: relative; border-radius: var(--rx-radius); overflow: hidden; border: 1px solid var(--rx-panel-line); box-shadow: inset 0 0 120px rgba(124,92,255,0.08);}.rx-stagewrap .god-stage { height: 100%; min-height: 0; border-radius: var(--rx-radius); }/* ---- responsive: narrow windows stack ---- */@media (max-width: 900px) { .rx-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; height: calc(100vh - 44px); } .rx-stagewrap { min-height: 380px; }}@media (prefers-reduced-motion: reduce) { .rx-conn-dot { animation: none; } .rx-logline { animation: none; opacity: 1; }}