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.sp-screen-box { overflow: hidden; }\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.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).