1 files changed, 44 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css
index f908a05..4a9b191 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1505,8 +1505,14 @@ body::after {
 .mp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .38); box-shadow: 0 0 3px rgba(0, 0, 0, .5); transition: background .15s, transform .15s; }
 .mp-dots i.on { background: #fff; transform: scale(1.15); }
 .mp-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; }
-/* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe */
-.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; will-change: transform; }
+/* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe.
+   Only the slide at rest gets its own layer for that: one on every picture
+   kept a full-size texture per slide, and a flight past them stuttered. */
+.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; }
+.mp-slide.mp-cur img.mp-media { will-change: transform; }
+.mp-slide.mp-gone img.mp-media { display: none; }
+.mp-missing { display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 255, 255, .55); font-size: 15px; text-align: center; padding: 20px; }
+.mp-missing-ico { font-size: 44px; opacity: .5; }
 /* nothing but the picture until a tap */
 .mp-meta, .mp-top { opacity: 0; pointer-events: none; transition: opacity .18s; }
 .media-pager.show .mp-meta, .media-pager.show .mp-top { opacity: 1; pointer-events: auto; }
@@ -1535,6 +1541,9 @@ 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; }
+.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; }
 .mp-zap.on .i { color: #f7b500; }
 .mp-top {
   position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px;
@@ -1546,6 +1555,26 @@ body::after {
 }
 .mp-sound { font-size: 15px; }
 .mp-sound .off { display: none; }
+/* A mouse's way through the pager: arrows, where there is a pointer to
+   hover with (a phone swipes). Faint until the pointer is over the pager;
+   the sideways pair only when the post has a picture that way. */
+.mp-arrows { display: none; }
+@media (hover: hover) and (pointer: fine) {
+  .mp-arrows { display: contents; }
+  .mp-arrow {
+    position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center; cursor: pointer;
+    color: #fff; background: rgba(255, 255, 255, .14); opacity: .4; transition: opacity .15s, background .15s;
+  }
+  .mp-arrow svg { width: 26px; height: 26px; }
+  .media-pager:hover .mp-arrow { opacity: .8; }
+  .mp-arrow:hover { opacity: 1; background: rgba(255, 255, 255, .28); }
+  .mp-up { right: 14px; top: calc(50% - 50px); }
+  .mp-down { right: 14px; top: calc(50% + 6px); }
+  .mp-ar-left { left: 14px; top: calc(50% - 22px); }
+  .mp-ar-right { right: 72px; top: calc(50% - 22px); }
+  .media-pager:not(.has-left) .mp-ar-left, .media-pager:not(.has-right) .mp-ar-right { display: none; }
+}
 .media-pager.quiet .mp-sound .on { display: none; }
 .media-pager.quiet .mp-sound .off { display: inline; }
 /* muted against our will: the button stays up so the way to sound is plain */
@@ -1632,6 +1661,16 @@ body::after {
 .mp-seek.drag .mp-seek-time { opacity: 1; }
 /* the details sit clear of the seek bar */
 .media-pager.videos .mp-meta { padding-bottom: calc(var(--mp-seek-lift) + 36px); }
+/* A wide window: the caption ran the whole width of the screen and the
+   counts sat in the far corner (Adam, 1920px across). The words, the
+   counts and the seek bar keep to a column under the middle of the screen;
+   the gradient behind them still spans it. */
+@media (min-width: 900px) {
+  .media-pager { --mp-col: 760px; }
+  .mp-meta { padding-left: max(14px, calc(50% - var(--mp-col) / 2)); padding-right: max(14px, calc(50% - var(--mp-col) / 2)); }
+  .mp-seek { left: max(16px, calc(50% - var(--mp-col) / 2)); right: max(16px, calc(50% - var(--mp-col) / 2)); }
+  .mp-caption { font-size: 15px; }
+}
 
 /* a clip that waits for a tap: what it costs, over its (blank or still) box */
 .vid-heavy {
@@ -1774,3 +1813,6 @@ body::after {
 .chat-compose .chat-box > coinos-text:has(+ .compose-tools > :only-child) { padding-right: 48px; }
 .chat-compose .chat-box .compose-tools { bottom: 6px; right: 5px; }
 .compose-tool.chat-clip { width: 34px; }
+
+/* Always visible, including when the media controls are tucked away. */
+.mp-position { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 20px; background: #0009; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 5; }