diff --git a/zebra-report/host-your-own.html b/zebra-report/host-your-own.html index 5cd5496..15af14a 100644 --- a/zebra-report/host-your-own.html +++ b/zebra-report/host-your-own.html @@ -68,9 +68,76 @@ /* long URLs / hashes wrap instead of pushing the page wider */ p, li { overflow-wrap: anywhere; } } + + /* ---- shared dark mode: pure black canvas, dim text, low light ---- */ + html.theme-dark { background: #000; } + html.theme-dark body { background: #000; color: #ccc; } + html.theme-dark a { color: #9cf; } + html.theme-dark .sub, html.theme-dark .sub a, html.theme-dark .note, + html.theme-dark .foot, html.theme-dark label, + html.theme-dark .status-line { color: #888; } + html.theme-dark h2 { border-bottom-color: #333; } + html.theme-dark code, html.theme-dark .key-display { + background: #1a1a1a; border-color: #333; color: #ccc; + } + html.theme-dark .key-display:hover { background: #222; } + html.theme-dark button { + background: #000; color: #ccc; border-color: #444; + } + html.theme-dark button:hover:not(:disabled) { background: #1a1a1a; } + html.theme-dark button.invert, html.theme-dark .cta { + background: #ccc; color: #000; border-color: #ccc; + } + html.theme-dark button.invert:hover:not(:disabled), + html.theme-dark .cta:hover { background: #999; } + html.theme-dark input[type=text], html.theme-dark input[type=password], + html.theme-dark textarea, html.theme-dark select { + background: #0a0a0a; color: #ccc; border-color: #333; + } + html.theme-dark .dot { background: #000; border-color: #444; } + html.theme-dark .dot.on { background: #ccc; border-color: #ccc; } + html.theme-dark .dot.ok { background: #0a0; border-color: #0a0; } + html.theme-dark .meter { background: #000; border-color: #444; } + html.theme-dark .meter-fill { background: #ccc; } + html.theme-dark .status-line.ok { color: #6c6; } + html.theme-dark .status-line.err { color: #f66; } + html.theme-dark .log, html.theme-dark .diagram { + background: #050505; border-color: #333; color: #ccc; + } + html.theme-dark .log-line .ts { color: #666; } + html.theme-dark .log-line.sys { color: #888; font-style: italic; } + html.theme-dark .log-line.err { color: #f66; } + html.theme-dark hr { border-top-color: #222; } + html.theme-dark footer { color: #555 !important; } + html.theme-dark footer span { color: #555 !important; } + html.theme-dark footer a { color: #777 !important; } + .theme-toggle { + position: fixed; top: 0.6rem; right: 0.8rem; z-index: 9999; + background: #fff; color: #000; border: 1px solid #000; + padding: 0.2rem 0.55rem; font-family: monospace; font-size: 0.7rem; + cursor: pointer; line-height: 1; + } + .theme-toggle:hover { background: #f0f0f0; } + html.theme-dark .theme-toggle { background: #000; color: #ccc; border-color: #444; } + html.theme-dark .theme-toggle:hover { background: #1a1a1a; } + + + +

host your own

run your own zebra community  ·  self-hosted TURN + rendezvous on one edge box  ·  @@ -441,10 +508,28 @@ handle /zebra-spaces-sfu* { reverse_proxy localhost:8092 { flush_interval -1

+ + diff --git a/zebra-report/how-it-works.html b/zebra-report/how-it-works.html index 5cd4aaa..b3ba742 100644 --- a/zebra-report/how-it-works.html +++ b/zebra-report/how-it-works.html @@ -61,9 +61,76 @@ .lead { font-size: 0.95rem; } p, li { overflow-wrap: anywhere; } } + + /* ---- shared dark mode: pure black canvas, dim text, low light ---- */ + html.theme-dark { background: #000; } + html.theme-dark body { background: #000; color: #ccc; } + html.theme-dark a { color: #9cf; } + html.theme-dark .sub, html.theme-dark .sub a, html.theme-dark .note, + html.theme-dark .foot, html.theme-dark label, + html.theme-dark .status-line { color: #888; } + html.theme-dark h2 { border-bottom-color: #333; } + html.theme-dark code, html.theme-dark .key-display { + background: #1a1a1a; border-color: #333; color: #ccc; + } + html.theme-dark .key-display:hover { background: #222; } + html.theme-dark button { + background: #000; color: #ccc; border-color: #444; + } + html.theme-dark button:hover:not(:disabled) { background: #1a1a1a; } + html.theme-dark button.invert, html.theme-dark .cta { + background: #ccc; color: #000; border-color: #ccc; + } + html.theme-dark button.invert:hover:not(:disabled), + html.theme-dark .cta:hover { background: #999; } + html.theme-dark input[type=text], html.theme-dark input[type=password], + html.theme-dark textarea, html.theme-dark select { + background: #0a0a0a; color: #ccc; border-color: #333; + } + html.theme-dark .dot { background: #000; border-color: #444; } + html.theme-dark .dot.on { background: #ccc; border-color: #ccc; } + html.theme-dark .dot.ok { background: #0a0; border-color: #0a0; } + html.theme-dark .meter { background: #000; border-color: #444; } + html.theme-dark .meter-fill { background: #ccc; } + html.theme-dark .status-line.ok { color: #6c6; } + html.theme-dark .status-line.err { color: #f66; } + html.theme-dark .log, html.theme-dark .diagram { + background: #050505; border-color: #333; color: #ccc; + } + html.theme-dark .log-line .ts { color: #666; } + html.theme-dark .log-line.sys { color: #888; font-style: italic; } + html.theme-dark .log-line.err { color: #f66; } + html.theme-dark hr { border-top-color: #222; } + html.theme-dark footer { color: #555 !important; } + html.theme-dark footer span { color: #555 !important; } + html.theme-dark footer a { color: #777 !important; } + .theme-toggle { + position: fixed; top: 0.6rem; right: 0.8rem; z-index: 9999; + background: #fff; color: #000; border: 1px solid #000; + padding: 0.2rem 0.55rem; font-family: monospace; font-size: 0.7rem; + cursor: pointer; line-height: 1; + } + .theme-toggle:hover { background: #f0f0f0; } + html.theme-dark .theme-toggle { background: #000; color: #ccc; border-color: #444; } + html.theme-dark .theme-toggle:hover { background: #1a1a1a; } + + + +

zebra report

how it works  ·  a volume-modem chatroom over webrtc  ·  @@ -275,10 +342,28 @@

+ + diff --git a/zebra-report/index.html b/zebra-report/index.html index 7cb772b..dd3666e 100644 --- a/zebra-report/index.html +++ b/zebra-report/index.html @@ -165,9 +165,76 @@ .share-box .qr-canvas { justify-self: center; max-width: 100%; } h1 { font-size: 2.2rem; } } + + /* ---- shared dark mode: pure black canvas, dim text, low light ---- */ + html.theme-dark { background: #000; } + html.theme-dark body { background: #000; color: #ccc; } + html.theme-dark a { color: #9cf; } + html.theme-dark .sub, html.theme-dark .sub a, html.theme-dark .note, + html.theme-dark .foot, html.theme-dark label, + html.theme-dark .status-line { color: #888; } + html.theme-dark h2 { border-bottom-color: #333; } + html.theme-dark code, html.theme-dark .key-display { + background: #1a1a1a; border-color: #333; color: #ccc; + } + html.theme-dark .key-display:hover { background: #222; } + html.theme-dark button { + background: #000; color: #ccc; border-color: #444; + } + html.theme-dark button:hover:not(:disabled) { background: #1a1a1a; } + html.theme-dark button.invert, html.theme-dark .cta { + background: #ccc; color: #000; border-color: #ccc; + } + html.theme-dark button.invert:hover:not(:disabled), + html.theme-dark .cta:hover { background: #999; } + html.theme-dark input[type=text], html.theme-dark input[type=password], + html.theme-dark textarea, html.theme-dark select { + background: #0a0a0a; color: #ccc; border-color: #333; + } + html.theme-dark .dot { background: #000; border-color: #444; } + html.theme-dark .dot.on { background: #ccc; border-color: #ccc; } + html.theme-dark .dot.ok { background: #0a0; border-color: #0a0; } + html.theme-dark .meter { background: #000; border-color: #444; } + html.theme-dark .meter-fill { background: #ccc; } + html.theme-dark .status-line.ok { color: #6c6; } + html.theme-dark .status-line.err { color: #f66; } + html.theme-dark .log, html.theme-dark .diagram { + background: #050505; border-color: #333; color: #ccc; + } + html.theme-dark .log-line .ts { color: #666; } + html.theme-dark .log-line.sys { color: #888; font-style: italic; } + html.theme-dark .log-line.err { color: #f66; } + html.theme-dark hr { border-top-color: #222; } + html.theme-dark footer { color: #555 !important; } + html.theme-dark footer span { color: #555 !important; } + html.theme-dark footer a { color: #777 !important; } + .theme-toggle { + position: fixed; top: 0.6rem; right: 0.8rem; z-index: 9999; + background: #fff; color: #000; border: 1px solid #000; + padding: 0.2rem 0.55rem; font-family: monospace; font-size: 0.7rem; + cursor: pointer; line-height: 1; + } + .theme-toggle:hover { background: #f0f0f0; } + html.theme-dark .theme-toggle { background: #000; color: #ccc; border-color: #444; } + html.theme-dark .theme-toggle:hover { background: #1a1a1a; } + + + +

zebra report

volume modem chatroom  ·  e2e encrypted  ·  webrtc carrier  ·  @@ -1653,10 +1720,28 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry

+ + diff --git a/zebra-report/zebra-audio.html b/zebra-report/zebra-audio.html index 212784c..f2d64da 100644 --- a/zebra-report/zebra-audio.html +++ b/zebra-report/zebra-audio.html @@ -75,9 +75,76 @@ /* drop the fixed mute-button width on phones so the row fits */ #btn-mute { width: auto; padding: 0.45rem 0.9rem; } } + + /* ---- shared dark mode: pure black canvas, dim text, low light ---- */ + html.theme-dark { background: #000; } + html.theme-dark body { background: #000; color: #ccc; } + html.theme-dark a { color: #9cf; } + html.theme-dark .sub, html.theme-dark .sub a, html.theme-dark .note, + html.theme-dark .foot, html.theme-dark label, + html.theme-dark .status-line { color: #888; } + html.theme-dark h2 { border-bottom-color: #333; } + html.theme-dark code, html.theme-dark .key-display { + background: #1a1a1a; border-color: #333; color: #ccc; + } + html.theme-dark .key-display:hover { background: #222; } + html.theme-dark button { + background: #000; color: #ccc; border-color: #444; + } + html.theme-dark button:hover:not(:disabled) { background: #1a1a1a; } + html.theme-dark button.invert, html.theme-dark .cta { + background: #ccc; color: #000; border-color: #ccc; + } + html.theme-dark button.invert:hover:not(:disabled), + html.theme-dark .cta:hover { background: #999; } + html.theme-dark input[type=text], html.theme-dark input[type=password], + html.theme-dark textarea, html.theme-dark select { + background: #0a0a0a; color: #ccc; border-color: #333; + } + html.theme-dark .dot { background: #000; border-color: #444; } + html.theme-dark .dot.on { background: #ccc; border-color: #ccc; } + html.theme-dark .dot.ok { background: #0a0; border-color: #0a0; } + html.theme-dark .meter { background: #000; border-color: #444; } + html.theme-dark .meter-fill { background: #ccc; } + html.theme-dark .status-line.ok { color: #6c6; } + html.theme-dark .status-line.err { color: #f66; } + html.theme-dark .log, html.theme-dark .diagram { + background: #050505; border-color: #333; color: #ccc; + } + html.theme-dark .log-line .ts { color: #666; } + html.theme-dark .log-line.sys { color: #888; font-style: italic; } + html.theme-dark .log-line.err { color: #f66; } + html.theme-dark hr { border-top-color: #222; } + html.theme-dark footer { color: #555 !important; } + html.theme-dark footer span { color: #555 !important; } + html.theme-dark footer a { color: #777 !important; } + .theme-toggle { + position: fixed; top: 0.6rem; right: 0.8rem; z-index: 9999; + background: #fff; color: #000; border: 1px solid #000; + padding: 0.2rem 0.55rem; font-family: monospace; font-size: 0.7rem; + cursor: pointer; line-height: 1; + } + .theme-toggle:hover { background: #f0f0f0; } + html.theme-dark .theme-toggle { background: #000; color: #ccc; border-color: #444; } + html.theme-dark .theme-toggle:hover { background: #1a1a1a; } + + + +

zebra audio

encrypted voice  ·  webrtc  ·  rendezvous  ·  @@ -660,10 +727,28 @@ else wirePuppet();

+ + diff --git a/zebra-report/zebra-spaces.html b/zebra-report/zebra-spaces.html index 9e317ce..6a5da35 100644 --- a/zebra-report/zebra-spaces.html +++ b/zebra-report/zebra-spaces.html @@ -308,13 +308,17 @@ } @@ -517,7 +521,7 @@ const HANDLE_KEY = 'zebra-spaces-handle-v1'; const MUSIC_MODE_KEY = 'zebra-spaces-music-mode-v1'; const MIC_DEV_KEY = 'zebra-spaces-mic-device-v1'; const CAM_DEV_KEY = 'zebra-spaces-cam-device-v1'; -const THEME_KEY = 'zebra-spaces-theme-v1'; +const THEME_KEY = 'zebra-theme-v1'; /* theme toggle. The class is already applied pre-paint by the head * script, so this just wires the click + keeps the button label in @@ -2179,8 +2183,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');