diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 197 |
1 files changed, 175 insertions, 22 deletions
diff --git a/src/style.css b/src/style.css index fcef5a0..d753604 100644 --- a/src/style.css +++ b/src/style.css @@ -251,7 +251,7 @@ button:disabled { opacity: .5; cursor: not-allowed; } /* ---- inputs ---- */ label.field { display: block; } .field .lab { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; } -input[type=text], input[type=search], input[type=password], input[type=number], textarea, select { +input[type=text], input[type=search], input[type=password], input[type=number], input[type=datetime-local], textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px; } @@ -344,6 +344,10 @@ textarea.send-dest::placeholder { font-family: var(--sans); } eight-letter word ("resemble") pushed the third column out past the card's padding. The cells are a touch tighter so every BIP-39 word (eight letters at most) still fits whole in a third of a narrow card. */ +/* The one-word check after the phrase: four of its words, tap the right one. */ +.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } +.quiz-opt { font-family: var(--mono); font-size: 16px; padding: 14px 8px; } +.quiz-opt.wrong { border-color: var(--red); color: var(--red); background: var(--red-soft); } .words { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .words .w { display: flex; align-items: baseline; gap: 5px; background: var(--surface2); min-width: 0; @@ -359,6 +363,10 @@ textarea.send-dest::placeholder { font-family: var(--sans); } /* ---- lists (tx / utxo) ---- */ .list { display: flex; flex-direction: column; } .item { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); } +/* the middle column may shrink: a long name chip beside the label then + ellipsizes on one line instead of breaking mid-name and pushing the + amount about */ +.item > .grow { min-width: 0; } .item:first-child { border-top: 0; } .ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 16px; } .ico.in { background: var(--green-soft); color: var(--green); } @@ -366,7 +374,7 @@ textarea.send-dest::placeholder { font-family: var(--sans); } .amount-pos { color: var(--green); font-family: var(--mono); font-weight: 600; } .amount-neg { color: var(--red); font-family: var(--mono); font-weight: 600; } .amount { font-family: var(--mono); font-weight: 600; } -.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } +.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex: none; } .tag.pending { background: var(--accent-soft); color: var(--accent-ink); } .tag.conf { background: var(--green-soft); color: var(--green); } @@ -847,11 +855,29 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } } .lightbox-x:hover { background: rgba(255, 255, 255, .24); } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } -.note-video { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; } +.note-video { display: block; width: 100%; height: auto; max-height: var(--vid-cap); object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; } /* a video plays by itself, muted, while it is on screen; the corner button turns the sound on (see autoplay in messages.js) */ .note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; } .note-video-box .note-video { margin-top: 0; } +/* the height a feed clip may take: the whole screen on a phone, three + quarters of it on a computer (a portrait clip on a 1920 screen ran off it) */ +:root { --vid-cap: 100vh; } +@media (min-width: 900px) { :root { --vid-cap: 75vh; } } +/* with a mouse: the big play/pause in the middle, while the pointer is over the clip */ +.vid-pp { + position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; + border: 0; border-radius: 50%; background: rgba(18, 18, 18, .6); color: #fff; cursor: pointer; + display: none; align-items: center; justify-content: center; +} +.vid-pp:hover { background: rgba(18, 18, 18, .85); } +.vid-pp-i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; } +.vid-pp.playing .vid-pp-i { width: 20px; height: 24px; margin: 0; border-width: 0 7px; border-color: #fff; } +.has-mouse .note-video-box:hover .vid-pp, .vid-pp:focus-visible { display: flex; } +/* the moments bar is the clip's only seek bar: the middle button is its play + control on a touch screen too, up whenever the clip is paused */ +.note-video-box.own-bar .vid-pp:not(.playing) { display: flex; } +.note-video-box:has(.vid-heavy) .vid-pp { display: none; } .vid-sound { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(18, 18, 18, .7); color: #fff; font-size: 13px; line-height: 1.3; @@ -895,6 +921,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } padding: 0 4px; border-radius: 3px; font-size: 9px; font-weight: 700; line-height: 13px; letter-spacing: .04em; color: #fff; background: #e0245e; box-shadow: 0 0 0 2px var(--paper); text-transform: none; } .live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 10px; padding: 2px 0 4px; } +.live-past-title { margin: 6px 0 0; font-size: 15px; } .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e0245e; margin-right: 5px; vertical-align: 1px; } .live-tile { display: flex; flex-direction: column; gap: 5px; padding: 0; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; min-width: 0; } @@ -919,13 +946,32 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .live-player { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; } .live-frame { width: 100%; height: 100%; } .live-video { width: 100%; height: 100%; display: block; background: #000; } -.live-still { border-radius: 0; height: 100%; display: flex; align-items: center; justify-content: center; } +.live-still { border-radius: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; } +.live-rec-link { background: var(--paper); color: var(--ink); text-decoration: none; } .live-say { padding: 6px 12px; border-radius: 8px; color: #fff; background: rgba(0, 0, 0, .65); font-size: 14px; text-align: center; } -.live-chat { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; } +/* the top padding is headroom for a hat on the first line's face: a scroller clips what rises out of it */ +.live-chat { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-top: 12px; } .live-line { display: flex; gap: 8px; align-items: flex-start; min-width: 0; } .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-input { min-width: 0; } +.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); } @@ -993,17 +1039,11 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .feed-compose-icon { display: flex; flex-shrink: 0; } .feed-compose-icon .compose-pen { stroke: #14935a; } .feed-compose-icon .compose-pen-fill { fill: #14935a; opacity: .18; } -.feed-page .feed-new-pill { - bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); -} -/* a phone is too narrow for it beside the Post button: it rides above */ -@media (max-width: 480px) { - .feed-page .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); } -} .feed-new-pill { - /* Rides at the bottom of the window, where a thumb already is; the tap - takes the reader up to the new posts. */ - position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); + /* Rides at the bottom of the window, where a thumb already is, above the + nav; the tap takes the reader up to the new posts. (Painted beside the + page, not inside it: see page-floaters in app.js.) */ + position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); left: 50%; transform: translateX(-50%); z-index: 30; width: auto; padding: 12px 24px; border-radius: 999px; background: var(--fill); color: var(--fill-fg); border: none; @@ -1012,6 +1052,10 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } box-shadow: 0 3px 12px rgba(0, 0, 0, .28); animation: pill-in .18s ease-out; } +/* a phone is too narrow for it beside the Post button: it rides above */ +@media (max-width: 480px) { + .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); } +} /* the generic button hover (a light surface) and press (a 1px drop, which REPLACED the centring transform and threw the pill half its width to the right, out from under the pointer, so the tap never landed) stay off it */ @@ -1177,7 +1221,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .profile-banner + .row .profile-avatar { border: 3px solid var(--paper); box-sizing: content-box; } -.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; } +.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; min-width: 0; max-width: 100%; } +.zap-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-avatar.mini { width: 18px; height: 18px; font-size: 8px; flex-shrink: 0; } /* A feed row is the one place a face is the point, not a label on a line — Amethyst gives it 55dp; at our 30px it read as a bullet beside the post. @@ -1218,6 +1263,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .chat-avatar.header-ava { width: 30px; height: 30px; font-size: 11px; } .composer-options { margin-inline-start: auto; flex-shrink: 0; } .compose-preview-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); } +.post-actions button[aria-pressed="true"]:not(.compose-preview-toggle) { background: var(--accent-soft); color: var(--ink); } +.sched-pick input { min-width: 0; } /* the post composer: Preview and Cancel stand as tall as Post and the attach square beside them, in the same type */ .post-actions .composer-options > button { padding: 11px 16px; font-size: inherit; border-radius: 11px; min-height: 44px; } @@ -1311,7 +1358,7 @@ button, .btn { transition: filter .12s, background .15s, border-color .15s, box- .chat-avatar.clickable:hover { transform: scale(1.07); } .header-avatar .chat-avatar { transition: transform .15s ease; } .header-avatar:hover .chat-avatar { transform: scale(1.08); } -input[type=text], input[type=search], input[type=password], input[type=number], textarea, select { transition: border-color .15s, box-shadow .15s; } +input[type=text], input[type=search], input[type=password], input[type=number], input[type=datetime-local], textarea, select { transition: border-color .15s, box-shadow .15s; } .settings-nav::after { transition: transform .18s ease, color .18s; } .settings-nav:hover::after { transform: translateX(3px); color: var(--ink); } @@ -1535,6 +1582,20 @@ body::after { background: var(--surface2); overflow: hidden; cursor: pointer; } .media-tile.video { aspect-ratio: 9 / 16; } +/* only wide clips in it: one to a row, the poster whole */ +.media-grid.wide { grid-template-columns: 1fr; gap: 6px; } +.media-grid.wide .media-tile.video { aspect-ratio: 16 / 9; } +/* every shape in it: justified rows. A tile starts at its proportions at + the row height and grows in proportion to them, so a row's tiles share one + height and fill the width; the filler takes the last row's slack instead + of stretching its few tiles. */ +.media-grid.justified { display: flex; flex-wrap: wrap; --row-h: 140px; } +.media-grid.justified .media-tile { aspect-ratio: var(--ar); flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; } +.media-grid.justified::after { content: ''; flex: 1000 1 0; } +/* the picture fills the tile without sizing it: a frame-grab <video>'s own + 320px would widen its tile, and the row's height with it */ +.media-grid.justified .media-tile > img, .media-grid.justified .media-tile > video { position: absolute; inset: 0; } +@media (max-width: 600px) { .media-grid.justified { --row-h: 100px; } } .media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .media-tile.broken { display: none; } .media-tile-play { @@ -1611,7 +1672,8 @@ body::after { } .mp-counts .i { font-size: 24px; line-height: 1; display: flex; } .mp-counts .i svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } -.mp-like.on { color: #ff4d6d; } +/* yours: the heart goes red; the count stays white (a 🤣 of yours left only the number red) */ +.mp-like.on .i { color: #ff4d6d; } .mp-like .i .cemoji { width: 28px; height: 28px; } /* the emoji sheet over the media pager (z-index 200) */ .confirm-pop-backdrop.over-pager { z-index: 300; } @@ -1726,7 +1788,10 @@ body::after { position: absolute; left: 16px; right: 16px; bottom: var(--mp-seek-lift); z-index: 3; height: 28px; display: flex; align-items: flex-end; touch-action: none; cursor: pointer; visibility: hidden; opacity: 0; } -.mp-seek.ready { visibility: visible; opacity: 1; transition: opacity .18s; } +/* out of sight (and out of reach: a tap there must not jump the clip) while + it plays; up when paused (.show), after a tap near the foot (.reveal), or held */ +.mp-seek.ready { visibility: visible; opacity: 0; pointer-events: none; transition: opacity .18s; } +.media-pager.show .mp-seek.ready, .mp-seek.ready.reveal, .mp-seek.ready.drag { opacity: 1; pointer-events: auto; } /* only the clip on screen's bar, and not while the pager is in motion (a finger, a glide, a flight): it goes at once and fades back in on landing */ .mp-slide:not(.mp-cur) .mp-seek, .media-pager.moving .mp-seek { opacity: 0; transition: none; pointer-events: none; } @@ -1783,6 +1848,7 @@ body::after { color: #fff; font-size: 14px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .vid-nopic a { color: #fff; text-decoration: underline; pointer-events: auto; } +.note-video-box.gone .note-video { max-height: 160px !important; aspect-ratio: 16 / 9; } .media-tile-cost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 600; background: #16181d; @@ -1830,7 +1896,7 @@ body::after { min-height: 48px; padding: 8px 14px; font-size: 16px; } .feed-post-fab { right: calc(50% - var(--col-edge) + 16px); bottom: 24px; } - .feed-new-pill, .feed-page .feed-new-pill { left: calc(50% + var(--col-mid)); bottom: 24px; } + .feed-new-pill { left: calc(50% + var(--col-mid)); bottom: 24px; } .toast { left: calc(50% + var(--col-mid)); } } @media (min-width: 1220px) { @@ -1885,6 +1951,8 @@ body::after { /* a reply shown with the post it answers above it (Conversations, a profile's Replies) */ .note-context { margin-bottom: 6px; } .note-context-label { margin-bottom: 2px; } +.note-scope .note-context-label { display: inline-block; text-decoration: none; } +.note-scope .note-context-label:hover { text-decoration: underline; } .note-context .quote-card { margin-top: 0; } .note-context .quote-card .note-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* attach + GIF inside the composer's field, bottom right; the field keeps @@ -1918,7 +1986,11 @@ body::after { .call-overlay { position: fixed; inset: 0; z-index: 1000; background: #101318; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); } -.call-overlay .call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; } +/* the whole of their picture, whatever its shape and the window's: a phone's + portrait camera filled a laptop's wide window by cropping to a forehead */ +.call-overlay .call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; } +/* a call over the whole window: the page under it stays put */ +html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: auto; } .call-overlay.has-video .call-remote { display: block; } .call-overlay.has-video .call-who { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); } .call-overlay.has-video .call-who .call-avatar { display: none; } @@ -1929,6 +2001,7 @@ body::after { .call-local { position: absolute; right: 16px; bottom: 120px; width: 28vw; max-width: 180px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: #000; box-shadow: 0 2px 12px rgba(0, 0, 0, .5); z-index: 2; } .call-local.mirror { transform: scaleX(-1); } +.call-local.sharing { aspect-ratio: 16 / 10; object-fit: contain; background: #000; } .call-bar { display: flex; gap: 18px; z-index: 2; flex-wrap: wrap; justify-content: center; } .call-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; padding: 0; } @@ -1949,3 +2022,83 @@ body::after { .call-log-pill .chat-time { margin: 0; font-size: 11px; opacity: .7; } .call-log-pill svg { width: 16px; height: 16px; } .chat-row.call-log.missed .call-log-pill { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); } + +/* A post's audio/video timeline: the waveform (audio), and what was said, + reacted or zapped at a moment, sitting over the bar at that moment. */ +.media-timeline { padding: 8px 0; white-space: normal; color: var(--text); } +.note-video-box .media-timeline:not(.has-marks) { display: none; } +.media-time { font-variant-numeric: tabular-nums; } +.media-seek { position: relative; height: 42px; --played: 0%; } +.media-wave { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: 2px; + background: linear-gradient(to right, var(--accent) var(--played), var(--line) var(--played)); } +.media-wave:empty { height: 4px; top: 19px; } +.media-wave i { flex: 1; background: var(--accent); border-radius: 2px; min-width: 1px; } +.has-wave .media-wave { background: none; } +.has-wave .media-wave::after { content: ''; position: absolute; inset: 0 0 0 var(--played); background: var(--bg, #fff); opacity: .55; pointer-events: none; } +.media-seek input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .01; cursor: pointer; } +.media-seek:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } +/* the marks hang just under the line, at their moment (a plain bar: inside + its touch strip); under a waveform, below it */ +.media-marks { position: absolute; left: 0; right: 0; top: 24px; height: 18px; pointer-events: none; } +.has-wave .media-marks { top: 100%; height: 22px; } +.media-seek.has-wave:has(.media-mark) { margin-bottom: 22px; } +.media-mark { bottom: auto; top: 0; } +.media-mark, .mp-mark { + position: absolute; bottom: 0; transform: translateX(-50%); padding: 0 2px; margin: 0; border: 0; background: none; + font-size: 16px; line-height: 1; cursor: pointer; pointer-events: auto; +} +.media-mark .cemoji, .mp-mark .cemoji { width: 20px; height: 20px; vertical-align: bottom; } +.media-mark-face { display: block; width: 20px !important; height: 20px !important; min-width: 0; font-size: 8px; border-radius: 50%; } +.mp-mark .media-mark-face { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px #fff; } +.mp-pop .media-mark-face { width: 36px !important; height: 36px !important; box-shadow: 0 0 0 2px #fff; } +/* the pager's: above its seek bar, there when the bar is */ +.mp-marks { position: absolute; left: 0; right: 0; bottom: 10px; height: 26px; pointer-events: none; } +.mp-mark { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } +.mp-mark .cemoji { width: 24px; height: 24px; } +.mp-seek-time { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; } +.mp-seek.say .mp-seek-time { opacity: 1; } +.mp-marks:not(:empty) ~ .mp-seek-time { bottom: 42px; } +/* ...and a moment the clip plays through floats up off the bar */ +.mp-pop { + position: absolute; bottom: calc(var(--mp-seek-lift) + 12px); z-index: 4; transform: translateX(-50%); + font-size: 30px; line-height: 1; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); + animation: mp-pop 1.6s ease-out forwards; +} +.mp-pop .cemoji { width: 34px; height: 34px; } +@keyframes mp-pop { + 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } + 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } + 100% { opacity: 0; transform: translate(-50%, -90px) scale(1); } +} +@media (prefers-reduced-motion: reduce) { .mp-pop { animation: none; opacity: 0; } } + +/* a timed comment's time: a chip that plays the clip from there */ +.media-time-link { display: inline-flex; align-items: center; margin-right: 6px; padding: 1px 8px; border-radius: 999px; + background: var(--accent-soft); color: var(--accent); font-size: .85em; font-weight: 650; font-variant-numeric: tabular-nums; + text-decoration: none; vertical-align: 1px; white-space: nowrap; } +.media-time-link:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } +.media-moment-detail { overflow-wrap: anywhere; max-height: 72px; overflow-y: auto; margin-top: 5px; } +.media-moment-detail:empty { display: none; } +.live-watching.has-who { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } +.live-who { display: flex; flex-wrap: wrap; gap: 6px; } +.live-who-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--bg2, rgba(127,127,127,.12)); border: 0; color: inherit; cursor: pointer; } + +/* a gift's note: the sender's words above the amount, and the field for them */ +.gift-note { + margin: 0; padding: 8px 12px; max-width: 100%; + border-left: 3px solid var(--accent); border-radius: 4px; + background: color-mix(in srgb, var(--accent) 8%, transparent); + font-style: italic; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; +} +.gift-note-input { width: 100%; min-height: 0; font-family: var(--sans); } + +/* pull to refresh, where the browser has none (src/pull-refresh.js) */ +.ptr { + position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; z-index: 2147483000; + width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; + background: var(--paper); color: var(--muted); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); + transform: translate(-50%, -48px); opacity: 0; pointer-events: none; +} +.ptr.ready { color: var(--ink); } +.ptr.spin svg { animation: ptr-spin .8s linear infinite; } +@keyframes ptr-spin { to { transform: rotate(360deg); } } |