aboutsummaryrefslogtreecommitdiffstats
path: root/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css85
1 files changed, 67 insertions, 18 deletions
diff --git a/src/style.css b/src/style.css
index 384b6d6..8a28377 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;
}
@@ -359,6 +359,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 +370,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 +851,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 +1035,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 +1048,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 */
@@ -1197,7 +1217,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 +1259,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 +1354,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 +1844,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 +1892,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 +1947,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 +2021,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 +2033,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 +2068,22 @@ 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); }
generated by cgit v1.2.3 (git 2.51.0) at 2026-11-04 01:28:11 +0000