/* for-streamers.css — the overlay builder page. =========================================================================== Scoped to `body.page-for-streamers` throughout, so nothing here can reach another page. That matters more than usual on this project: three global class collisions that paint page CONTENT are still live site-wide, and a loose `.fs-opt` or `.fs-seg` would be a fourth. Colours come from the theme tokens, never literals, so the page follows light / dark / high-contrast like everything else. Where a fallback is given it is the light-theme value — `--theme-surface-text` is undefined in the light default, which is exactly how a pair of half-declared tokens once produced a 1.22:1 reading elsewhere on the site. =========================================================================== */ .page-for-streamers .fs-str-badges{ list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center; } .page-for-streamers .fs-str-badges li{ font-size:.82rem;font-weight:600;padding:.3rem .75rem;border-radius:100px; background:var(--theme-surface,#eef0f6); color:var(--theme-surface-text,#2a3040); border:1px solid var(--theme-border,rgba(0,0,0,.08)); } .page-for-streamers .fs-builder{ display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1fr);gap:1.5rem;align-items:start; } @media (max-width:900px){ .page-for-streamers .fs-builder{grid-template-columns:1fr;} } /* ⚠️ `position:sticky` is inert site-wide on this project because sets `overflow-x:hidden`, which makes every ancestor a scroll container. Kept as a progressive nicety only — the page is fully usable without it, and nothing below depends on it working. */ .page-for-streamers .fs-sticky{position:static;} @media (min-width:901px){ .page-for-streamers .fs-sticky{position:sticky;top:1.5rem;} } .page-for-streamers .fs-step{ display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%; background:var(--theme-accent,#5b53d6);color:#fff;font-size:.82rem;font-weight:700; margin-right:.45rem;vertical-align:.05em; } .page-for-streamers .fs-seg{ display:inline-flex;flex-wrap:wrap;border:1px solid var(--theme-border,#dfe2e9); border-radius:9px;overflow:hidden; } .page-for-streamers .fs-seg button{ appearance:none;border:0;background:transparent;color:var(--theme-text,#414a5a);cursor:pointer; font-size:.86rem;font-weight:600;padding:.42rem .8rem;transition:background .14s,color .14s; } .page-for-streamers .fs-seg button + button{border-left:1px solid var(--theme-border,#dfe2e9);} .page-for-streamers .fs-seg button[aria-pressed="true"]{background:var(--theme-accent,#5b53d6);color:#fff;} .page-for-streamers .fs-seg button:hover:not([aria-pressed="true"]){background:rgba(127,127,127,.14);} .page-for-streamers .fs-seg button:focus-visible{outline:2px solid var(--theme-accent,#5b53d6);outline-offset:-2px;} .page-for-streamers .fs-opt{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.65rem 0;border-bottom:1px solid var(--theme-border,#eceef3); } .page-for-streamers .fs-opt:last-child{border-bottom:0;} .page-for-streamers .fs-opt > span:first-child{font-size:.94rem;} .page-for-streamers .fs-opt small{ display:block;color:var(--theme-muted,#6f7889);font-size:.8rem;line-height:1.35; } /* [hidden] loses to `display:flex` on specificity alone, so it is restated. */ .page-for-streamers .fs-opt[hidden]{display:none;} .page-for-streamers .fs-swatch{ display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--theme-border,#dfe2e9); border-radius:8px;padding:.24rem .55rem .24rem .3rem;cursor:pointer; } .page-for-streamers .fs-swatch input[type="color"]{ appearance:none;-webkit-appearance:none;border:0;background:none;width:26px;height:22px; padding:0;cursor:pointer;border-radius:5px; } .page-for-streamers .fs-swatch input[type="color"]::-webkit-color-swatch-wrapper{padding:0;} .page-for-streamers .fs-swatch input[type="color"]::-webkit-color-swatch{ border:1px solid var(--theme-border,rgba(0,0,0,.2));border-radius:4px; } .page-for-streamers .fs-swatch span{font-size:.85rem;font-weight:600;} /* The URL block keeps a fixed dark ground in every theme on purpose: it is read character by character and then pasted, and terminal-style contrast is what makes a long URL scannable. Its colours are a matched pair, not theme tokens, so they cannot half-apply. */ .page-for-streamers .fs-urlrow{display:flex;gap:.5rem;align-items:stretch;} .page-for-streamers .fs-urlrow code{ flex:1;min-width:0;background:#0d1117;color:#8fd6a8;border:1px solid #232b36;border-radius:8px; padding:.55rem .65rem;font-size:.78rem;overflow-x:auto;white-space:nowrap;display:block; } .page-for-streamers .fs-roombox{ border:1px dashed var(--theme-border,#dfe2e9);border-radius:10px;padding:.8rem; } .page-for-streamers .fs-roombox[hidden]{display:none;} .page-for-streamers .fs-steps{padding-left:1.1rem;margin:0;} .page-for-streamers .fs-steps li{margin-bottom:.45rem;font-size:.94rem;}