/* MMTV styling — Emby-inspired, with dark + light themes via CSS variables. Theme is set by [data-theme] on (dark | light | auto). 'auto' follows the OS via prefers-color-scheme. */ :root, [data-theme="dark"] { --bg: #101418; --bg2: #171d24; --card: #1c242d; --line: #2a3540; --text: #e7edf3; --muted: #9fb0c0; --accent: #52b54b; --accent-2: #43a047; --danger: #e5534b; --ok: #52b54b; --shadow: 0 6px 24px rgba(0,0,0,.45); } [data-theme="light"] { --bg: #f5f7fa; --bg2: #ffffff; --card: #ffffff; --line: #e2e8f0; --text: #1a2330; --muted: #5b6b7c; --accent: #2e8b3d; --accent-2: #277a34; --danger: #c0392b; --ok: #2e8b3d; --shadow: 0 6px 20px rgba(20,40,60,.12); } @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg: #f5f7fa; --bg2: #ffffff; --card: #ffffff; --line: #e2e8f0; --text: #1a2330; --muted: #5b6b7c; --accent: #2e8b3d; --accent-2: #277a34; --danger: #c0392b; --ok: #2e8b3d; --shadow: 0 6px 20px rgba(20,40,60,.12); } } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; } /* Links use the accent colour in EVERY state (incl. visited) so they're never the dark default purple. */ a, a:visited { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* top bar */ .mmtv-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--bg2); border-bottom: 1px solid var(--line); } .mmtv-brand { font-weight: 700; letter-spacing: .2px; color: var(--accent); } .mmtv-brand span { color: var(--text); } .mmtv-nav { display: flex; align-items: center; gap: 12px; } .mmtv-who { color: var(--muted); font-size: .9rem; } .mmtv-badge { background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 6px; font-size: .7rem; } .mmtv-inline { display: inline; margin: 0; } .mmtv-theme { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; width: 34px; height: 30px; cursor: pointer; font-size: 1rem; } .mmtv-theme:hover { border-color: var(--accent); } /* buttons */ .mmtv-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-size: .95rem; font-weight: 600; cursor: pointer; } .mmtv-btn:hover { background: var(--accent-2); } .mmtv-btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 7px 12px; font-weight: 500; } .mmtv-btn-ghost:hover { color: var(--text); border-color: var(--accent); } /* flash messages */ .mmtv-flash { max-width: 420px; margin: 14px auto 0; padding: 0 16px; } .mmtv-msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: .9rem; } .mmtv-msg-error { background: rgba(229,83,75,.15); color: var(--danger); border: 1px solid rgba(229,83,75,.4); } .mmtv-msg-ok { background: rgba(82,181,75,.15); color: var(--ok); border: 1px solid rgba(82,181,75,.4); } .mmtv-main { padding: 28px 20px 60px; } /* auth card */ .mmtv-auth { max-width: 380px; margin: 6vh auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; box-shadow: var(--shadow); } .mmtv-auth h1 { margin: 0 0 4px; font-size: 1.45rem; } .mmtv-sub { margin: 0 0 20px; color: var(--muted); font-size: .92rem; } .mmtv-form { display: flex; flex-direction: column; gap: 14px; } .mmtv-form label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); } .mmtv-form input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: .98rem; } .mmtv-form input:focus { outline: none; border-color: var(--accent); } .mmtv-form .mmtv-btn { margin-top: 6px; } .mmtv-opt { color: var(--muted); opacity: .7; } .mmtv-alt { margin-top: 18px; font-size: .88rem; color: var(--muted); text-align: center; } .mmtv-alt a, .mmtv-auth a { color: var(--accent); text-decoration: none; } .mmtv-alt a:hover { text-decoration: underline; } .mmtv-privacy { margin-top: 16px; font-size: .78rem; color: var(--muted); text-align: center; } /* home */ .mmtv-home { max-width: 760px; margin: 2vh auto 0; } .mmtv-home h1 { font-size: 1.6rem; margin: 0 0 4px; } .mmtv-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-top: 20px; box-shadow: var(--shadow); } .mmtv-card h2 { margin: 0 0 10px; font-size: 1.1rem; } .mmtv-coming { margin: 10px 0 0; padding-left: 4px; list-style: none; } .mmtv-coming li { padding: 6px 0; border-bottom: 1px solid var(--line); } .mmtv-coming li:last-child { border-bottom: none; } .mmtv-card-admin { border-color: var(--accent); } /* admin invites table */ .mmtv-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .85rem; } .mmtv-table th, .mmtv-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); } .mmtv-table th { color: var(--muted); font-weight: 600; } .mmtv-table code { color: var(--text); } .mmtv-link { color: var(--accent); word-break: break-all; } .mmtv-used { opacity: .55; } .mmtv-open { color: var(--accent); font-weight: 600; } /* ── browse / poster rails (Home) ─────────────────────────────────────────── */ .mmtv-browse { max-width: 1500px; margin: 0 auto; } .mmtv-browse h1 { font-size: 1.5rem; margin: 4px 0 18px; } .mmtv-rail { margin: 0 0 26px; } /* Per-user rails group (Continue Watching + Recently watched) — refined red-tinted block, no left accent. */ .mmtv-urails-group { background: rgba(229,9,20,0.06); border: 1px solid rgba(229,9,20,0.25); border-radius: 8px; padding: 10px 14px; margin: 0 0 26px; } .mmtv-urails-group .mmtv-rail-h { color: #c83232; } .mmtv-urails-group .mmtv-rail:last-child { margin-bottom: 0; } /* Sticky top (search + nav) wrapper; admin view-as dropdown + settings cog live right-aligned in mainnav. */ .mmtv-headwrap { position: sticky; top: 0; z-index: 100; background: var(--bg2); border-bottom: 1px solid var(--line); } .mmtv-mainnav { display: flex; align-items: center; gap: 10px; padding: 6px 20px; background: var(--bg2); } .mmtv-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .mmtv-viewas-sel { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 0.88rem; } .mmtv-viewas-sel:focus { outline: none; border-color: var(--accent); } .mmtv-cog { font-size: 1.2rem; color: var(--muted); text-decoration: none; line-height: 1; padding: 2px; } .mmtv-cog:hover { color: var(--text); } /* Dim/blurred full-page backdrop (per-page: home/movies/tv pull a recently-watched item's backdrop). */ /* Global page backdrop (per-page recently-watched item) on body::before at z-index:-1 — BEHIND everything, so it can never cover content. body goes transparent only when a backdrop is present; var(--bg) is the fallback otherwise. (Replaces the earlier .mmtv-bg div, whose overlay covered the content.) */ body.has-backdrop { background: transparent; } body.has-backdrop::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--bg-img); background-size: cover; background-position: center; filter: blur(12px) brightness(0.45) saturate(1.1); transform: scale(1.06); } /* Per-episode watch markers on show-detail episode lists (gold=downloaded-unwatched, green=streamed, white=downloaded+watched). */ .mmtv-ep-mark { font-size: 0.72rem; margin-right: 4px; } .mmtv-mark-gold { color: #d49a17; } .mmtv-mark-green { color: #52b54b; } .mmtv-mark-white { color: #9fb0c0; } .mmtv-rail-h { font-size: 1.05rem; margin: 0 0 10px; } .mmtv-rail-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; } .mmtv-rail-scroll::-webkit-scrollbar { height: 8px; } .mmtv-rail-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .mmtv-poster { flex: 0 0 150px; width: 150px; scroll-snap-align: start; cursor: pointer; } .mmtv-poster-img { width: 150px; height: 225px; border-radius: 10px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow); } .mmtv-poster-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } .mmtv-poster:hover .mmtv-poster-img { border-color: var(--accent); } .mmtv-poster-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; color: var(--muted); } .mmtv-poster-name { margin-top: 7px; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mmtv-poster-sub { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mmtv-adminline { margin-top: 30px; font-size: .82rem; color: var(--muted); } /* ── rails: hidden scrollbar + hover edge arrows ───────────────────────────── */ .mmtv-rail-h { display: flex; align-items: baseline; gap: 10px; } .mmtv-rail-sub { font-size: .72rem; color: var(--muted); font-weight: 400; } .mmtv-rail-wrap { position: relative; } .mmtv-rail-scroll { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .mmtv-rail-scroll::-webkit-scrollbar { display: none; } .mmtv-rail-arrow { position: absolute; top: 0; bottom: 34px; width: 52px; border: none; cursor: pointer; z-index: 3; font-size: 2rem; color: #fff; opacity: 0; transition: opacity .15s; display: flex; align-items: center; justify-content: center; } .mmtv-rail-arrow.left { left: 0; background: linear-gradient(to right, rgba(0,0,0,.6), transparent); border-radius: 10px 0 0 10px; } .mmtv-rail-arrow.right { right: 0; background: linear-gradient(to left, rgba(0,0,0,.6), transparent); border-radius: 0 10px 10px 0; } .mmtv-rail-wrap:hover .mmtv-rail-arrow:not(.hide) { opacity: 1; } .mmtv-rail-arrow.hide { display: none; } .mmtv-poster-img { position: relative; } .mmtv-poster-tag { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .5px; } /* nav search */ .mmtv-navsearch { margin: 0; } .mmtv-navsearch input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; color: var(--text); font-size: .88rem; width: 200px; } .mmtv-navsearch input:focus { outline: none; border-color: var(--accent); width: 260px; } a.mmtv-brand:hover { text-decoration: none; opacity: .85; } /* search page */ .mmtv-searchpage { display: flex; gap: 10px; margin: 6px 0 18px; max-width: 600px; } .mmtv-searchpage input { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 1rem; } .mmtv-searchpage input:focus { outline: none; border-color: var(--accent); } .mmtv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 12px; } .mmtv-grid .mmtv-poster, .mmtv-grid .mmtv-poster-img { width: 100%; } .mmtv-grid .mmtv-poster-img { height: 0; padding-bottom: 150%; } .mmtv-grid .mmtv-poster-img img, .mmtv-grid .mmtv-poster-ph { position: absolute; inset: 0; } /* detail page */ .mmtv-detail { max-width: 1100px; margin: 0 auto; position: relative; } .mmtv-backdrop { position: absolute; top: -28px; left: -20px; right: -20px; height: 360px; background-size: cover; background-position: center top; opacity: .18; filter: blur(2px); z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); } .mmtv-detail-top { position: relative; z-index: 1; display: flex; gap: 26px; align-items: flex-start; } .mmtv-detail-poster { flex: 0 0 240px; width: 240px; height: 360px; border-radius: 12px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--shadow); } .mmtv-detail-poster img { width: 100%; height: 100%; object-fit: cover; } .mmtv-detail-meta { flex: 1; min-width: 0; } .mmtv-detail-meta h1 { margin: 0 0 4px; font-size: 1.9rem; } .mmtv-detail-year { color: var(--muted); font-weight: 400; } .mmtv-detail-series { color: var(--muted); margin-bottom: 8px; } .mmtv-detail-facts { display: flex; gap: 14px; align-items: center; color: var(--muted); margin: 8px 0; flex-wrap: wrap; } .mmtv-pill { background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; font-size: .78rem; } .mmtv-detail-genres { margin: 8px 0 14px; } .mmtv-chip { display: inline-block; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 3px 11px; font-size: .78rem; margin: 0 6px 6px 0; color: var(--text); } .mmtv-detail-actions { margin: 6px 0 14px; } .mmtv-btn[disabled] { opacity: .55; cursor: default; } .mmtv-soon { font-weight: 400; font-size: .8rem; opacity: .8; } .mmtv-detail-overview { line-height: 1.6; max-width: 760px; color: var(--text); } .mmtv-detail-sec { position: relative; z-index: 1; margin-top: 30px; } .mmtv-detail-sec h2 { font-size: 1.15rem; margin: 0 0 12px; } .mmtv-cast { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .mmtv-cast::-webkit-scrollbar { display: none; } .mmtv-cast-m { flex: 0 0 96px; width: 96px; text-align: center; } .mmtv-cast-img { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); margin: 0 auto; } .mmtv-cast-img img { width: 100%; height: 100%; object-fit: cover; } .mmtv-cast-name { font-size: .78rem; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mmtv-cast-role { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mmtv-season { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; } .mmtv-season summary { cursor: pointer; font-weight: 600; } .mmtv-eplist { margin-top: 8px; } .mmtv-ep { display: flex; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); } .mmtv-ep:last-child { border-bottom: none; } .mmtv-ep-num { color: var(--muted); min-width: 38px; } .mmtv-ep-name { color: var(--text); } /* card file size + detail specs + expandable overview */ .mmtv-poster-size { font-size: .72rem; color: var(--accent); margin-top: 1px; } .mmtv-detail-line { margin: 4px 0; font-size: .9rem; color: var(--text); } .mmtv-detail-line b { color: var(--muted); font-weight: 600; margin-right: 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; } a.mmtv-chip:hover { border-color: var(--accent); text-decoration: none; } a.mmtv-cast-m { text-decoration: none; } a.mmtv-cast-m:hover .mmtv-cast-img { border-color: var(--accent); } a.mmtv-cast-m:hover { text-decoration: none; } .mmtv-ov-wrap { margin-top: 14px; max-width: 820px; } .mmtv-detail-overview { line-height: 1.6; margin: 0; } .mmtv-detail-overview.clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .mmtv-ov-toggle { background: none; border: none; color: var(--accent); cursor: pointer; padding: 4px 0; font-size: .85rem; } .mmtv-ep-size { margin-left: auto; color: var(--muted); font-size: .78rem; } /* breadcrumbs */ .mmtv-crumbs { max-width: 1100px; margin: 0 auto 14px; font-size: .85rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mmtv-crumbs a { color: var(--accent); } .mmtv-crumbs a:hover { text-decoration: underline; } .mmtv-crumbs .sep { color: var(--muted); } .mmtv-crumbs .cur { color: var(--muted); } /* backdrop hero — actually visible now (was opacity .18) */ .mmtv-backdrop { opacity: .42; filter: blur(1.5px); height: 420px; } /* app logo in the header + on the auth card */ .mmtv-brand { display: inline-flex; align-items: center; gap: 8px; } .mmtv-logo { width: 39px; height: 39px; border-radius: 7px; display: block; } .mmtv-auth-logo { width: 56px; height: 56px; border-radius: 12px; display: block; margin: 0 auto 14px; } /* ── full-page soft ambient backdrop (supersedes the earlier top-band version) ── */ :root, [data-theme="dark"] { --scrim-rgb: 16,20,24; } [data-theme="light"] { --scrim-rgb: 245,247,250; } @media (prefers-color-scheme: light) { [data-theme="auto"] { --scrim-rgb: 245,247,250; } } .mmtv-top { position: relative; z-index: 2; } /* header stays above the backdrop */ .mmtv-main { position: relative; z-index: 1; } /* page content sits above the backdrop */ .mmtv-backdrop { position: fixed; top: 0; left: 0; right: auto; bottom: 0; width: 100%; height: 100%; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: 1; filter: blur(8px); transform: scale(1.06); /* softer; scale hides blurred edges */ z-index: 0; pointer-events: none; -webkit-mask-image: none; mask-image: none; } .mmtv-backdrop::after { /* scrim so it never competes with content */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-rgb), .70) 0%, rgba(var(--scrim-rgb), .92) 78%); } /* breadcrumbs — more prominent */ .mmtv-crumbs { font-size: 1rem; margin-bottom: 20px; padding: 6px 0; font-weight: 500; gap: 9px; } .mmtv-crumbs a { font-weight: 600; } .mmtv-crumbs .cur { color: var(--text); font-weight: 600; } .mmtv-crumbs .sep { font-size: 1.15rem; color: var(--muted); opacity: .8; } /* primary top navigation */ .mmtv-mainnav { display: flex; gap: 2px; padding: 0 16px; background: var(--bg2); border-bottom: 1px solid var(--line); position: relative; z-index: 2; overflow-x: auto; scrollbar-width: none; } .mmtv-mainnav::-webkit-scrollbar { display: none; } .mmtv-mainnav a { padding: 11px 14px; font-size: .9rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; } .mmtv-mainnav a:hover { color: var(--text); text-decoration: none; } .mmtv-mainnav a.active { color: var(--accent); border-bottom-color: var(--accent); } /* browse pages (Movies / TV) — header, sort, pagination */ .mmtv-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .mmtv-sortform label { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .mmtv-sortform select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .9rem; } .mmtv-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 26px 0 8px; } .mmtv-pager-info { color: var(--muted); font-size: .9rem; } /* larger primary top-nav text */ .mmtv-mainnav a { font-size: 1.05rem; padding: 13px 16px; } /* browse: A-Z jump bar + filter bar */ .mmtv-browse-layout { display: flex; gap: 14px; align-items: flex-start; } .mmtv-browse-main { flex: 1; min-width: 0; } .mmtv-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mmtv-filterbar input[type=search] { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .92rem; min-width: 200px; } .mmtv-filter-count { color: var(--muted); font-size: .82rem; } .mmtv-azbar { position: sticky; top: 12px; flex: 0 0 24px; width: 24px; display: flex; flex-direction: column; gap: 1px; text-align: center; } .mmtv-azbar a { font-size: .72rem; font-weight: 600; color: var(--muted); padding: 1px 0; border-radius: 4px; line-height: 1.3; } .mmtv-azbar a:hover { color: var(--text); background: var(--card); text-decoration: none; } .mmtv-azbar a.active { color: #fff; background: var(--accent); } /* watch / player page */ .mmtv-watch { max-width: 1100px; margin: 0 auto; } .mmtv-watch-head h1 { margin: 0 0 12px; } .mmtv-watch-sub { color: var(--muted); font-size: .9rem; font-weight: 400; } .mmtv-video { width: 100%; max-height: 80vh; background: #000; border-radius: 10px; display: block; } .mmtv-watch-note { color: #e6b800; font-size: .9rem; margin-top: 12px; line-height: 1.5; } /* Continue Watching: progress bar + play glyph on poster cards */ .mmtv-poster-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.55); } .mmtv-poster-prog span { display: block; height: 100%; background: var(--accent); } .mmtv-poster-ago { font-size: .68rem; color: var(--muted); margin: 0 0 3px; line-height: 1; } .mmtv-poster-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; opacity: 0; transition: opacity .15s; } .mmtv-poster:hover .mmtv-poster-play { opacity: 1; } /* Unwatched-episode badge (Emby-style, top-right). Green = streaming; Gold = recently downloaded. */ .mmtv-poster-badge { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: help; } .mmtv-poster-badge.gold { background: #e8b23a; color: #1a1205; } /* ── local-origin viewing: state-aware Play + "Watch on your TV" disclosure (Slice A) ── Large hit targets + clear focus rings so a TV remote's D-pad + Select can drive these from the couch. */ .mmtv-btn-play { padding: 14px 26px; font-size: 1.08rem; border-radius: 10px; } .mmtv-btn-play:focus-visible, .mmtv-copy:focus-visible, .mmtv-watchon > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .mmtv-local-tag { display: inline-block; margin-left: 12px; font-size: .82rem; font-weight: 600; vertical-align: middle; } .mmtv-local-tag.is-local { color: #5ec27a; } .mmtv-local-tag.is-stream { color: var(--muted); } .mmtv-watchon { margin: 4px 0 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; } .mmtv-watchon > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: .95rem; color: var(--text); } .mmtv-watchon > summary::-webkit-details-marker { display: none; } .mmtv-watchon[open] > summary { border-bottom: 1px solid var(--line); } .mmtv-watchon-body { padding: 12px 16px 14px; } .mmtv-watchon-lead { margin: 0 0 10px; font-size: .9rem; color: var(--text); } .mmtv-watchon-url { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .mmtv-watchon-url code { font-size: 1rem; background: var(--bg2); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--accent); } .mmtv-copy { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer; } .mmtv-copy:hover { border-color: var(--accent); color: var(--accent); } .mmtv-watchon-sub { margin: 0 0 12px; font-size: .82rem; color: var(--muted); } .mmtv-watchon-sub code { font-size: .82rem; } .mmtv-watchon-list { margin: 0; padding-left: 18px; } .mmtv-watchon-list li { font-size: .88rem; line-height: 1.6; color: var(--text); margin-bottom: 6px; } /* Settings: local-viewing / LAN info card */ .mmtv-set-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; } .mmtv-set-card h3 { margin: 0 0 6px; font-size: 1rem; } .mmtv-set-card p { margin: 4px 0; font-size: .88rem; color: var(--muted); line-height: 1.5; } .mmtv-set-card code { font-size: .9rem; color: var(--accent); } .mmtv-set-tag { display: inline-block; margin-left: 8px; font-size: .72rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; vertical-align: middle; } /* Featured (per-user) rail tint — replaces the old .mmtv-urails-group box so rails can reorder freely. */ .mmtv-rail-featured { background: rgba(82,181,75,0.05); border-left: 3px solid var(--accent); padding: 6px 10px; border-radius: 6px; } /* Home 'Edit layout' rail reordering (↑/↓). Mover hidden until edit mode is toggled on. */ .mmtv-railedit-bar { margin: 0 0 16px; } .mmtv-rail-mover { display: none; margin-right: 6px; } .mmtv-rail-mover button { background: var(--bg2); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: .7rem; line-height: 1.4; cursor: pointer; margin-right: 2px; } .mmtv-rail-mover button:hover { color: var(--text); border-color: var(--accent); } body.editing-rails .mmtv-rail-mover { display: inline; } /* Transient toast ("Layout saved"). */ .mmtv-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 18px; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s, transform .3s; z-index: 1000; font-size: .92rem; } .mmtv-toast.show { opacity: 1; transform: translate(-50%, 0); } /* ── Slice 1: portable / mobile responsive layer (additive — only ≤760px) ───── Grids, poster rails, and the main nav already reflow on narrow screens. This fixes the two real mobile breakages — the detail page's fixed 240px poster sitting beside ~100px of text, and the header's 200px inline search overflowing a phone — and drops the fiddly sticky A–Z sidebar on touch (the name-filter and genre dropdown already cover it). No desktop rule is touched. */ @media (max-width: 760px) { .mmtv-top { flex-wrap: wrap; padding: 9px 14px; gap: 8px; } .mmtv-nav { flex-wrap: wrap; gap: 8px; } .mmtv-navsearch { order: 5; flex: 1 1 100%; } /* search wraps to its own full-width row */ .mmtv-navsearch input, .mmtv-navsearch input:focus { width: 100%; } .mmtv-main { padding: 16px 14px 64px; } /* detail: stack the poster above the meta instead of cramming side-by-side */ .mmtv-detail-top { flex-direction: column; gap: 16px; } .mmtv-detail-poster { flex: 0 0 auto; width: 150px; height: 225px; align-self: center; } .mmtv-detail-meta { width: 100%; } .mmtv-detail-meta h1 { font-size: 1.45rem; } .mmtv-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mmtv-backdrop { height: 280px; } /* browse: drop the A–Z sidebar column on touch */ .mmtv-browse-layout { display: block; } .mmtv-azbar { display: none; } .mmtv-browse-head { flex-direction: column; align-items: stretch; gap: 10px; } }