diff --git a/server/public/home.html b/server/public/home.html index a4b7b2b..cf8cfa3 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -173,7 +173,7 @@ .chatlist:hover::-webkit-scrollbar-thumb{background:#c7d0dd;} /* Pull-to-refresh indicator (mobile) */ /* Lives on the list's NON-scrolling parent, so it stays pinned at the top and is actually seen (#6). */ - .ptr-ind{position:absolute;top:8px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:var(--card);box-shadow:0 3px 12px rgba(20,30,60,.22);display:grid;place-items:center;color:var(--blue);z-index:40;opacity:0;transform:translateY(-44px);transition:opacity .12s;pointer-events:none;} + .ptr-ind{position:absolute;top:calc(var(--sat) + 8px);left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:var(--card);box-shadow:0 3px 12px rgba(20,30,60,.22);display:grid;place-items:center;color:var(--blue);z-index:40;opacity:0;transform:translateY(-44px);transition:opacity .12s;pointer-events:none;} /* top offset clears the notch/Dynamic Island (var(--sat)) so the spinner isn't hidden behind it */ .ptr-ind .ptr-g{font-size:1.15rem;font-weight:700;line-height:1;display:inline-block;} .ptr-ind.spin .ptr-g{animation:ptrspin .7s linear infinite;} .ptr-ind img{display:block;} .ptr-ind.spin img{animation:ptrspin .8s linear infinite;} @@ -661,6 +661,16 @@ .convo-msgs img,.bubble img{max-height:340px;max-width:100%;height:auto;} .att-file{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.06);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;color:inherit;text-decoration:none;font-size:.85rem;margin:.15rem 0;max-width:240px;} .att-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} + /* In-chat video: a masked poster with a centre button that is DOWNLOAD until loaded, then PLAY (loads once, + then plays inline). Avoids the old "download link re-downloads on every tap" behaviour. */ + .att-vid{position:relative;width:min(240px,72vw);aspect-ratio:16/11;border-radius:10px;overflow:hidden;background:#12182a;margin:.15rem 0;display:block;cursor:pointer;} + .att-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block;} + .att-vid.playing video{object-fit:contain;} + .att-vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 2px 12px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);} + .att-vid.loading .att-vid-play{animation:ptrspin .8s linear infinite;} + .att-vid-meta{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;color:#fff;font-size:.72rem;line-height:1.1;background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;align-items:center;gap:5px;z-index:2;pointer-events:none;} + .att-vid-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} + .att-vid.playing .att-vid-play,.att-vid.playing .att-vid-meta{display:none;} .bubble.mine .att-file{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);} .att-file .att-sz{opacity:.65;font-size:.75rem;flex:0 0 auto;} /* groups */ @@ -1158,7 +1168,7 @@
-