diff options
| author | Adam Soltys <[email protected]> | 2026-10-23 11:39:52 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-10-23 11:39:52 -0700 |
| commit | 79c12aee939c17702cb3ad17c64eb7394176ec66 (patch) | |
| tree | a2ba95f14d8a56f6482a46379eea4ae7d8cd836b /src/style.css | |
| parent | b4b5eab2a4928573b9241f0d38aa1c56694d101c (diff) | |
| download | coinosv3-79c12aee939c17702cb3ad17c64eb7394176ec66.tar.gz coinosv3-79c12aee939c17702cb3ad17c64eb7394176ec66.zip | |
On a phone a live stream is laid out the way Nostrich does it: the picture edge to edge, the chat a plain full-width list under it
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01QjVvE4YAcK3AGwV7kZXeN4
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 17 |
1 files changed, 17 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 275bb59..384b6d6 100644 --- a/src/style.css +++ b/src/style.css @@ -929,6 +929,23 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .live-line-body { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.35; } .live-zap .live-line-body b { color: var(--accent); } .live-chat .chat-row { padding-right: 2px; } +/* on phones the stream is the page, the way Nostrich lays one out: the + picture runs edge to edge and the chat under it is a plain full-width + list of lines, no bubbles — the card walls step outside #app's padding */ +@media (max-width: 520px) { + .live-page > .card { + margin-left: -16px; margin-right: -16px; padding: 10px 0 12px; + border-left: none; border-right: none; border-radius: 0; box-shadow: none; + } + .live-page > .live-chat-card { margin-top: 0; padding-top: 6px; border-top: none; } + .live-page > .card > :not(.live-player, .live-chat) { margin-left: 14px; margin-right: 14px; } + .live-page .live-player { border-radius: 0; } + .live-page .live-chat { padding: 10px 14px 0; max-height: 60vh; } + .live-page .live-title { font-size: 17px; } + .live-chat .chat-row { gap: 10px; } + .live-chat .chat-bubble { display: block; background: transparent; border: 0; border-radius: 0; padding: 0; font-size: 15px; } + .live-chat .chat-quote { margin-bottom: 2px; } +} .bc-preview.mirror { transform: scaleX(-1); } .bc-bar .bc-clock { font-variant-numeric: tabular-nums; font-weight: 650; } .go-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e0245e; box-shadow: 0 0 0 3px rgba(224, 36, 94, .25); } |