` in app/views/client/index.html — neutralise the float and stretch full-width with column wrap so children stack. */ .span10 > div[style*="float:right"] { float: none !important; display: flex !important; flex-direction: column !important; width: 100% !important; gap: 8px; align-items: stretch; margin-top: 6px; } /* Form fills the wrapper width. */ #quick-add-url-form { float: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; } /* Bootstrap 2's `.input-append` is inline-block by default and puts input + button on one line. Switch to wrapping flex so the input takes the whole row (PMUX-B1 needs `width >= viewportW - 32`) and the `+` button drops onto the next line. */ #quick-add-url-form .input-append { display: flex !important; flex-wrap: wrap; width: 100% !important; box-sizing: border-box; margin: 0 !important; } #quick-add-url-input { /* PMUX-Q1: 16px disables iOS Safari focus-zoom. */ font-size: 16px !important; /* PMUX-B1: drop the inline 240px, fill the row. */ width: 100% !important; min-width: 0; margin: 0 !important; box-sizing: border-box; } #quick-add-url-btn { flex: 0 0 auto; margin: 4px 0 0 0 !important; font-size: 16px !important; align-self: flex-start; } } /* Trial banner on /client (evolution 37). Three severity variants share * the same flex skeleton; the alert-info/-warning/-danger color comes * from Bootstrap which is already loaded by main.html. The banner is * rendered as a sibling of #user-messages (NOT inside the loop) so the * AJAX-refresh that re-renders user-messages every cursor change does * not stomp the trial banner on every tick. */ .trial-banner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px 0; padding: 12px 16px; } .trial-banner .trial-cta { margin-left: auto; flex: 0 0 auto; } .trial-banner .close.trial-banner-dismiss { position: absolute; right: 10px; top: 6px; font-size: 20px; line-height: 1; text-decoration: none; color: inherit; opacity: 0.5; } .trial-banner .close.trial-banner-dismiss:hover { opacity: 1; } .trial-banner small { color: inherit; opacity: 0.8; font-size: 12px; } /* Mobile: stack the CTA below the copy. Avoids the affordance getting * pushed off-screen by long absolute-timestamp strings. */ @media (max-width: 767px) { .trial-banner { flex-direction: column; align-items: flex-start; } .trial-banner .trial-cta { margin-left: 0; margin-top: 8px; width: 100%; text-align: center; } .trial-banner small { /* Truncate the absolute timestamp on narrow screens — the user * still has the relative "N days left" inline. */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } } /* ========================================================= TORRENT THUMBS + DETAIL-PAGE HERO --------------------------------------------------------- Per-row 64x96 thumb on /client and the 120x180 poster hero on /client/torrent/. Markup lives in: - app/views/tags/torrent-thumb.html (the glyph + img + badge) - app/views/client/torrent-list.html (.torrent-row-thumb wrapper) - app/views/client/torrentPage.html (.torrent-hero block) Schema for posterUrl / metadataKind / metadataStatus is landing in a separate evolution; until it merges, every torrent renders the kind-placeholder. After the resolver lands, the same DOM auto-lights-up — no template change needed. Section deliberately placed at the END of the file so it never collides with the audiobook mobile bottom-bar block (lines ~460+) or the trial-banner block (lines ~750+). ========================================================= */ /* Per-kind accent — drives the SVG stroke colour via currentColor. Background stays a neutral cool-grey so the thumb does not visually compete with the row's progress bar. */ .torrent-thumb { position: relative; display: inline-block; width: 64px; height: 96px; flex: 0 0 auto; box-sizing: border-box; border-radius: 4px; background: #e7eaee; overflow: hidden; /* Default text colour — overridden per-kind below. */ color: #4a5560; /* Subtle inset border so the box reads as a card on white rows. */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); user-select: none; } .torrent-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #e7eaee; z-index: 2; } .torrent-thumb__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; } .torrent-thumb__glyph > svg { width: 56%; height: 56%; display: block; } /* Pulse-dot badge in the top-right corner while metadataStatus=pending and no posterUrl. Pure CSS animation — no JS. */ .torrent-thumb__fetching { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #2d6cdf; box-shadow: 0 0 0 2px #fff; z-index: 3; animation: torrent-thumb-pulse 1.6s ease-in-out infinite; } @keyframes torrent-thumb-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } } /* Kind palette — one accent per kind, neutral background shared. */ .torrent-thumb--kind-movie { color: #d9534f; background: #f6e4e3; } .torrent-thumb--kind-series { color: #2f8a83; background: #dceeec; } .torrent-thumb--kind-audiobook { color: #6a4cc4; background: #e7e0f5; } .torrent-thumb--kind-music { color: #c98e1e; background: #f7ebd5; } .torrent-thumb--kind-other { color: #5a6470; background: #e7eaee; } .torrent-thumb--kind-unknown { color: #6c7680; background: #ebedf0; } /* List-row thumb sits inside the .torrent-row-layout flex container. The wrapper enforces a fixed pixel slot so a flex-shrink torrent-title never steals horizontal space from the thumb. */ .torrent-row-thumb { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; min-width: 64px; } /* Hero on the per-torrent detail page. Side-by-side on desktop: the 120x180 poster sits left of the title + identify-button + stats block. Margin-top matches the .ti-back spacing so the hero reads as a single chunk under the back-link. */ .torrent-hero { display: flex; align-items: flex-start; gap: 18px; margin: 14px 0 22px 0; padding: 12px 0; border-bottom: 1px solid #edf0f3; } .torrent-hero__poster { flex: 0 0 auto; } .torrent-hero__poster .torrent-thumb--hero { width: 120px; height: 180px; border-radius: 6px; } .torrent-hero__poster .torrent-thumb--hero .torrent-thumb__glyph > svg { width: 50%; height: 50%; } .torrent-hero__poster .torrent-thumb__fetching { width: 10px; height: 10px; top: 9px; right: 9px; } .torrent-hero__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* Inside the hero, the existing .ti-title rule (in torrentPage.html inline