Spaces:
Running
Running
| /* PowerSwarm run viewer. Light and dark follow prefers-color-scheme. */ | |
| :root { | |
| color-scheme: light dark; | |
| --bg: #eef1f4; | |
| --card: #ffffff; | |
| --ink: #17202a; | |
| --muted: #4a5968; | |
| --line: #d5dee8; | |
| --accent: #1f6feb; | |
| --green: #0f7b45; | |
| --green-bg: #e7f6ee; | |
| --red: #9f1d14; | |
| --red-bg: #fdeceb; | |
| --amber: #8a5a00; | |
| --amber-bg: #fff6de; | |
| --blue: #1857b6; | |
| --blue-bg: #e8f1fd; | |
| --track: #d7e0ea; | |
| --code-bg: #f4f7fa; | |
| --shadow: 0 1px 2px rgba(23, 32, 42, 0.06); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0e141b; | |
| --card: #17202a; | |
| --ink: #e8eef5; | |
| --muted: #9aabbb; | |
| --line: #2c3a4a; | |
| --accent: #79b8ff; | |
| --green: #3ddc97; | |
| --green-bg: #123528; | |
| --red: #ff8b80; | |
| --red-bg: #3d1a18; | |
| --amber: #f5c16c; | |
| --amber-bg: #3a2c12; | |
| --blue: #9ecbff; | |
| --blue-bg: #15283f; | |
| --track: #243140; | |
| --code-bg: #101820; | |
| --shadow: 0 1px 2px rgba(0, 0, 0, 0.35); | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| max-width: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 12px; | |
| max-width: 100%; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: "Segoe UI", system-ui, -apple-system, sans-serif; | |
| font-size: 16px; | |
| line-height: 1.45; | |
| overflow-wrap: anywhere; | |
| } | |
| main { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| } | |
| h1, h2, h3, p { | |
| margin: 0; | |
| } | |
| h1, h2, h3, p, ul, pre, div, header, section, article { | |
| max-width: 100%; | |
| min-width: 0; | |
| } | |
| h1 { | |
| font-size: 1.35rem; | |
| line-height: 1.25; | |
| } | |
| h3 { | |
| font-size: 1.15rem; | |
| line-height: 1.3; | |
| } | |
| .loading, | |
| .muted, | |
| .legend, | |
| .live, | |
| .source, | |
| .next-width { | |
| color: var(--muted); | |
| } | |
| .legend, | |
| .live, | |
| .source { | |
| font-size: 0.9rem; | |
| } | |
| .live { | |
| margin-top: 16px; | |
| } | |
| .banner { | |
| margin-bottom: 12px; | |
| padding: 10px 12px; | |
| border-radius: 10px; | |
| background: var(--red-bg); | |
| color: var(--red); | |
| font-weight: 600; | |
| } | |
| .run-header, | |
| .wave, | |
| .lane { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 12px; | |
| box-shadow: var(--shadow); | |
| } | |
| .run-header, | |
| .lane, | |
| .wave, | |
| .waves, | |
| .lanes { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .waves, | |
| .lanes { | |
| margin-top: 16px; | |
| } | |
| .brand { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| } | |
| .title-row, | |
| .lane-top, | |
| .wave-caption, | |
| .chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .title-row, | |
| .lane-top { | |
| justify-content: space-between; | |
| } | |
| .objective, | |
| .why, | |
| .result, | |
| .mono, | |
| pre, | |
| .wave-sentence { | |
| white-space: pre-wrap; | |
| } | |
| .objective { | |
| font-size: 1.05rem; | |
| } | |
| .badge, | |
| .pill, | |
| .chip { | |
| border-radius: 999px; | |
| font-weight: 700; | |
| } | |
| .badge { | |
| padding: 4px 10px; | |
| background: var(--code-bg); | |
| color: var(--ink); | |
| } | |
| .badge.status-green, | |
| .chip[data-outcome="green"], | |
| .pill.decision-ramp { | |
| background: var(--green-bg); | |
| color: var(--green); | |
| } | |
| .badge.status-red, | |
| .badge.status-failed, | |
| .chip[data-outcome="red"], | |
| .pill.decision-halve { | |
| background: var(--red-bg); | |
| color: var(--red); | |
| } | |
| .badge.status-running, | |
| .chip[data-outcome="running"], | |
| .pill.decision-hold { | |
| background: var(--blue-bg); | |
| color: var(--blue); | |
| } | |
| .badge.status-cancelled, | |
| .badge.status-skipped, | |
| .badge.status-pending, | |
| .badge.status-admitted, | |
| .chip[data-outcome="cancelled"], | |
| .chip[data-outcome="no-time"], | |
| .pill.decision-cancelled { | |
| background: var(--amber-bg); | |
| color: var(--amber); | |
| } | |
| .facts { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); | |
| gap: 8px; | |
| margin: 4px 0 0; | |
| } | |
| .facts > div { | |
| min-width: 0; | |
| background: var(--bg); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| padding: 8px 10px; | |
| } | |
| .facts > div.fact-green { | |
| box-shadow: inset 4px 0 0 var(--green); | |
| } | |
| .facts > div.fact-red { | |
| box-shadow: inset 4px 0 0 var(--red); | |
| } | |
| .facts dt { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .facts dd { | |
| margin: 2px 0 0; | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| } | |
| .section-title { | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .wave-now { | |
| font-weight: 600; | |
| } | |
| .wave-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .wave { | |
| flex: 1 1 16rem; | |
| } | |
| .track-slot { | |
| width: 100%; | |
| } | |
| .track { | |
| height: 14px; | |
| background: var(--track); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .fill { | |
| height: 100%; | |
| background: var(--green); | |
| } | |
| .pill { | |
| font-size: 0.8125rem; | |
| padding: 2px 8px; | |
| background: var(--code-bg); | |
| } | |
| .wave-sentence { | |
| min-width: 0; | |
| } | |
| .lane { | |
| border-left-width: 8px; | |
| border-left-color: var(--muted); | |
| } | |
| .lane[data-status="green"] { | |
| border-left-color: var(--green); | |
| } | |
| .lane[data-status="red"] { | |
| border-left-color: var(--red); | |
| } | |
| .lane[data-status="running"] { | |
| border-left-color: var(--blue); | |
| } | |
| .lane[data-status="cancelled"], | |
| .lane[data-status="skipped"], | |
| .lane[data-status="pending"] { | |
| border-left-color: var(--amber); | |
| } | |
| .attempts-label, | |
| .meta dt, | |
| .tail-label { | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| } | |
| .chips { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .chip { | |
| padding: 4px 8px; | |
| background: var(--code-bg); | |
| color: var(--ink); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| } | |
| .why { | |
| padding: 10px 12px; | |
| border-radius: 8px; | |
| background: var(--red-bg); | |
| color: var(--red); | |
| font-weight: 600; | |
| } | |
| .meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin: 0; | |
| } | |
| .meta > div { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .meta dd { | |
| margin: 0; | |
| } | |
| .mono { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 0.9rem; | |
| } | |
| .tails { | |
| border-top: 1px solid var(--line); | |
| padding-top: 4px; | |
| } | |
| summary { | |
| cursor: pointer; | |
| font-weight: 700; | |
| padding: 8px 0; | |
| } | |
| .tail-block + .tail-block { | |
| margin-top: 8px; | |
| padding-top: 8px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .tail-title { | |
| font-weight: 700; | |
| } | |
| .tail-label { | |
| margin-top: 6px; | |
| } | |
| pre { | |
| margin: 0; | |
| padding: 8px; | |
| max-width: 100%; | |
| border-radius: 8px; | |
| background: var(--code-bg); | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 0.8125rem; | |
| } | |
| /* Width steps stand in for inline widths: the viewer CSP disallows style attributes. */ | |
| .w-0 { width: 0%; } | |
| .w-5 { width: 5%; } | |
| .w-10 { width: 10%; } | |
| .w-15 { width: 15%; } | |
| .w-20 { width: 20%; } | |
| .w-25 { width: 25%; } | |
| .w-30 { width: 30%; } | |
| .w-35 { width: 35%; } | |
| .w-40 { width: 40%; } | |
| .w-45 { width: 45%; } | |
| .w-50 { width: 50%; } | |
| .w-55 { width: 55%; } | |
| .w-60 { width: 60%; } | |
| .w-65 { width: 65%; } | |
| .w-70 { width: 70%; } | |
| .w-75 { width: 75%; } | |
| .w-80 { width: 80%; } | |
| .w-85 { width: 85%; } | |
| .w-90 { width: 90%; } | |
| .w-95 { width: 95%; } | |
| .w-100 { width: 100%; } | |
| @media (min-width: 800px) { | |
| body { | |
| padding: 24px; | |
| } | |
| } | |
| @media (min-width: 521px) { | |
| .meta > div { | |
| display: grid; | |
| grid-template-columns: 6.5rem minmax(0, 1fr); | |
| column-gap: 10px; | |
| align-items: baseline; | |
| } | |
| } | |
| @media (max-width: 420px) { | |
| body { | |
| padding: 10px; | |
| } | |
| .run-header, | |
| .wave, | |
| .lane { | |
| padding: 10px; | |
| } | |
| } | |