Spaces:
Sleeping
Sleeping
| /* Tailwind (via CDN, see index.html) handles layout, spacing and color | |
| utilities. Everything here is stuff Tailwind's utility classes can't | |
| express: the Cytoscape canvas, custom tooltips, the active pipeline step, | |
| the range-slider thumb, the loading spinner and scrollbars. | |
| Light theme, tuned for projectors: near-black text on white/light-gray | |
| surfaces, every text pair at WCAG AA (4.5:1) or better. */ | |
| :root { | |
| color-scheme: light; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| /* ── Cytoscape canvas ─────────────────────────────────────────────────── */ | |
| #cy { | |
| width: 100%; | |
| min-height: 420px; | |
| background: #ffffff; | |
| } | |
| /* ── Custom tooltip ──────────────────────────────────────────────────── | |
| A single fixed-position element positioned and viewport-clamped by | |
| app.js (pseudo-element tooltips overflowed the page on narrow screens). | |
| Dark plate on a light page so it pops on a projector. */ | |
| [data-tip] { | |
| cursor: help; | |
| } | |
| #tooltip { | |
| position: fixed; | |
| z-index: 100; | |
| max-width: min(280px, calc(100vw - 16px)); | |
| background: #111827; | |
| color: #f9fafb; | |
| border-radius: 6px; | |
| padding: 7px 11px; | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| line-height: 1.4; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.12s ease; | |
| box-shadow: 0 6px 16px rgb(17 24 39 / 0.25); | |
| } | |
| #tooltip.is-visible { | |
| opacity: 1; | |
| } | |
| /* ── Pipeline step connector ───────────────────────────────────────────── */ | |
| .pipeline-step { | |
| transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, | |
| transform 0.2s ease; | |
| } | |
| .pipeline-step.is-active { | |
| border-color: #1d4ed8; | |
| background-color: #eff6ff; | |
| box-shadow: 0 0 0 2px rgb(29 78 216 / 0.25); | |
| transform: translateY(-1px); | |
| } | |
| .pipeline-step.is-active .pipeline-step-num { | |
| background-color: #1d4ed8; | |
| color: #ffffff; | |
| } | |
| .pipeline-arrow { | |
| color: #6b7280; | |
| } | |
| /* ── Loading spinner (sits inside the blue Simulate button) ───────────── */ | |
| .spinner { | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| border: 2px solid rgb(255 255 255 / 0.35); | |
| border-top-color: #ffffff; | |
| animation: spin 0.7s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ── Local-model consent dialog ───────────────────────────────────────── */ | |
| .fallback-dialog { | |
| width: min(30rem, calc(100vw - 2rem)); | |
| padding: 0; | |
| border: 1px solid #d1d5db; | |
| border-radius: 0.875rem; | |
| background: #ffffff; | |
| color: #374151; | |
| box-shadow: 0 24px 48px rgb(17 24 39 / 0.3); | |
| } | |
| .fallback-dialog[open] { | |
| animation: fade-in 0.18s ease; | |
| } | |
| .fallback-dialog::backdrop { | |
| background: rgb(17 24 39 / 0.55); | |
| backdrop-filter: blur(2px); | |
| } | |
| /* ── Severity slider ──────────────────────────────────────────────────── */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: linear-gradient(to right, #f59e0b, #ea580c, #b91c1c); | |
| outline: none; | |
| } | |
| input[type="range"]:disabled { | |
| opacity: 0.45; | |
| } | |
| input[type="range"]:focus-visible { | |
| outline: 2px solid #1d4ed8; | |
| outline-offset: 4px; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| background: #ffffff; | |
| border: 3px solid #1f2937; | |
| box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); | |
| cursor: pointer; | |
| margin-top: -7px; | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| background: #ffffff; | |
| border: 3px solid #1f2937; | |
| box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); | |
| cursor: pointer; | |
| } | |
| /* ── Misc ──────────────────────────────────────────────────────────────── */ | |
| pre { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .scroll-thin::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .scroll-thin::-webkit-scrollbar-thumb { | |
| background: #9ca3af; | |
| border-radius: 999px; | |
| } | |
| @keyframes fade-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(4px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fade-in 0.25s ease; | |
| } | |