diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 106 |
1 files changed, 88 insertions, 18 deletions
diff --git a/src/style.css b/src/style.css index 384b6d6..803979f 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); } @@ -571,6 +579,9 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } border: none; background: none; padding: 11px 8px; font-weight: 550; border-radius: 10px; } .msg-sheet-item:hover { background: var(--surface2); } +.msg-sheet-item.danger, .msg-sheet-item.danger .msg-sheet-ico { color: var(--red); } +.msg-sheet-item.danger.armed { background: color-mix(in srgb, var(--red) 12%, transparent); } +.chat-removed-head { padding: 10px 4px 2px; } .msg-sheet-ico { width: 20px; text-align: center; color: var(--muted); flex-shrink: 0; } /* the quoted message a reply carries, and the composer's replying-to bar */ .chat-quote { @@ -847,11 +858,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; @@ -1013,17 +1042,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; @@ -1032,6 +1055,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 */ @@ -1097,6 +1124,9 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } /* over a playing clip: a tap takes it full screen; YouTube's control bar along the bottom is left uncovered, and full screen it all is */ .yt-shield { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; z-index: 1; cursor: pointer; } +/* a mouse reaches the player's own buttons (pause in the middle, full screen + in the corner): while one is over the box its clicks go to the player */ +.yt-embed.by-mouse .yt-shield { display: none; } .yt-embed:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; } .yt-embed:fullscreen .yt-shield { display: none; } .yt-embed:fullscreen iframe { object-fit: contain; } @@ -1197,7 +1227,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. @@ -1238,6 +1269,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; } @@ -1331,7 +1364,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); } @@ -1821,6 +1854,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; @@ -1868,7 +1902,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) { @@ -1923,6 +1957,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 @@ -1995,7 +2031,8 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut /* 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: 24px 0 8px; white-space: normal; color: var(--text); } +.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; @@ -2006,12 +2043,20 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut .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; } -.media-marks { position: absolute; left: 0; right: 0; top: -22px; height: 22px; pointer-events: none; } +/* 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)); } @@ -2033,8 +2078,33 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut } @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); } } |