pub const PLAYER_CSS: &str = "/* beecast-player chrome + terminal palette (see the crate README).\n Clean-room, MIT like the rest of beecast. Every color is a variable so embedding pages can theme it. */\n.beecast-player {\n --sp-bg: #121417;\n --sp-fg: #cdd3dc;\n /* ANSI 0\u{2013}7 */\n --sp-c0: #1c1f24; --sp-c1: #e05f65; --sp-c2: #78bd65; --sp-c3: #d5b45e;\n --sp-c4: #6a9ded; --sp-c5: #bd7bd8; --sp-c6: #55b8c2; --sp-c7: #b8bfc9;\n /* ANSI 8\u{2013}15 (bright) */\n --sp-c8: #596273; --sp-c9: #ff8188; --sp-c10: #98d989; --sp-c11: #f0d182;\n --sp-c12: #8fb7ff; --sp-c13: #d99df0; --sp-c14: #7fd6df; --sp-c15: #eef1f5;\n display: block;\n background: var(--sp-bg);\n color: var(--sp-fg);\n border-radius: 4px;\n outline: none;\n overflow: hidden;\n}\n.beecast-player:focus-visible { box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.5); }\n/* A fullscreened player centers the terminal block (screen + bar) in the viewport;\n layout() sizes the screen box to the viewport minus the bar. */\n.beecast-player:fullscreen {\n width: 100%; height: 100%; border-radius: 0;\n display: flex; flex-direction: column; justify-content: center;\n}\n/* Some embedding pages reset [hidden]; the player\'s own chrome must still honor it. */\n.beecast-player [hidden] { display: none !important; }\n/* Positioning context for the center play overlay and the chapters panel. */\n.sp-screen-box { overflow: hidden; position: relative; }\n/* The big center play button: shown only while the recording sits at its very start,\n dimming the screen behind it. Block characters \u{2014} this is a terminal player. */\n.sp-overlay {\n position: absolute; inset: 0; z-index: 3;\n display: flex; align-items: center; justify-content: center;\n background: rgba(0, 0, 0, 0.45);\n cursor: pointer;\n}\n.sp-bigplay {\n margin: 0;\n font: 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n color: #fff; opacity: 0.85;\n text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);\n transition: opacity 0.15s, transform 0.15s;\n}\n.sp-overlay:hover .sp-bigplay { opacity: 1; transform: scale(1.08); }\n/* The chapters panel: a fixed, scrollable frame over the screen\'s right edge. */\n.sp-chapters {\n position: absolute; top: 0; right: 0; bottom: 0; z-index: 4;\n width: min(320px, 60%);\n overflow-y: auto;\n background: rgba(9, 11, 15, 0.92);\n border-left: 1px solid rgba(255, 255, 255, 0.14);\n font: 12px/1.45 ui-sans-serif, system-ui, sans-serif;\n padding: 4px 0;\n}\n.sp-chap {\n display: block; width: 100%; text-align: left;\n font: inherit; color: var(--sp-fg);\n background: transparent; border: none; cursor: pointer;\n padding: 5px 12px;\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.sp-chap:hover { background: rgba(106, 157, 237, 0.18); color: #fff; }\n.sp-chap-t { color: var(--sp-c4); margin-right: 8px; font-variant-numeric: tabular-nums; }\n.sp-screen {\n margin: 0;\n padding: 4px 6px;\n font: 13px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n transform-origin: top left;\n width: max-content;\n}\n/* Styled runs render as inline-blocks so a run\'s background paints the FULL 1.25 line box.\n A plain inline span\'s background only covers the font\'s content area (ascent + descent,\n less than the line box), which left unpainted gaps between the rows of a multi-row\n colored panel \u{2014} visible as dark lines cutting through what a TUI drew as one solid\n block. Runs never span rows (rows are separate lines in the <pre>), so inline-block\n cannot change any line breaking. */\n.sp-screen span { display: inline-block; }\n.sp-probe { visibility: hidden; position: absolute; }\n.sp-b { font-weight: 700; }\n.sp-d { opacity: 0.6; }\n.sp-i { font-style: italic; }\n.sp-u { text-decoration: underline; }\n.sp-s { text-decoration: line-through; }\n.sp-u.sp-s { text-decoration: underline line-through; }\n.sp-cur { outline: 1px solid var(--sp-fg); outline-offset: -1px; }\n\n/* control bar */\n.sp-bar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n background: rgba(255, 255, 255, 0.04);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font: 12px/1 ui-sans-serif, system-ui, sans-serif;\n user-select: none;\n}\n.sp-bar button {\n font: inherit;\n color: var(--sp-fg);\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 2px 6px;\n}\n.sp-bar button:hover { color: #fff; }\n/* The bar\'s play/pause is the primary control \u{2014} a size up from its neighbors. */\n.sp-play { font-size: 16px; padding: 1px 7px; }\n/* The speed menu grows UP from its bar button. */\n.sp-speedwrap { position: relative; display: inline-flex; }\n.sp-speedmenu {\n position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 5;\n display: flex; flex-direction: column;\n min-width: 3.6em; padding: 3px;\n background: #161a20;\n border: 1px solid rgba(255, 255, 255, 0.16);\n border-radius: 4px;\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);\n}\n.sp-speedopt { text-align: center; border-radius: 3px; }\n.sp-speedopt.sp-on { color: var(--sp-c12); font-weight: 700; }\n.sp-speedopt:hover { background: rgba(106, 157, 237, 0.18); }\n.sp-time, .sp-dur { color: var(--sp-fg); opacity: 0.8; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }\n.sp-seek {\n position: relative;\n flex: 1;\n height: 6px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.12);\n cursor: pointer;\n}\n.sp-fill {\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 0;\n border-radius: 3px;\n background: var(--sp-c4);\n pointer-events: none;\n}\n.sp-markers { position: absolute; inset: 0; pointer-events: none; }\n.sp-marker {\n position: absolute; top: -2px; bottom: -2px; width: 2px;\n background: var(--sp-c3);\n pointer-events: auto;\n}\n";Expand description
The player chrome and terminal palette. All colors are CSS variables, so the embedding page can theme them; nothing is fetched (no fonts, no images).