/* ホームビデオ風の表示（homevideo.js）。動画の上に重ねる飾りと、ごく薄い暖色のフィルター。 のとき（アカウントの設定）は、すべて隠す。飾りは動画の色に関係なく読めるよう、白と暖色に影をつける。 */ .hv-stage, .hv-frame { position: relative; } :root:not([data-homevideo="off"]) .hv-on video, :root:not([data-homevideo="off"]) .hv-on img.hv-tone { filter: saturate(1.08) contrast(1.04) sepia(0.14); } :root[data-homevideo="off"] .hv { display: none; } .hv { position: absolute; inset: 0; pointer-events: none; overflow: hidden; container-type: size; z-index: 3; } /* 四隅を少し落とす + 走査線 */ .hv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.3) 100%); } .hv::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px); } .hv > * { position: absolute; z-index: 1; font-size: clamp(9px, 3.4cqw, 15px); line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); font-family: var(--font-body, sans-serif); } .hv-rec { top: 0.8em; left: 0.9em; display: flex; align-items: center; gap: 0.4em; font-weight: 700; letter-spacing: 0.08em; } .hv-dot { display: block; width: 0.75em; height: 0.75em; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 6px rgba(255, 59, 48, 0.8); } @media (prefers-reduced-motion: no-preference) { .hv-dot { animation: hv-blink 1.6s steps(1, end) infinite; } } @keyframes hv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hv-world { top: 0.8em; right: 0.9em; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(8px, 3cqw, 13px); opacity: 0.9; } .hv-date { bottom: 0.8em; right: 0.9em; } .hv-stamp { display: block; height: 1.35em; width: auto; fill: #ffb347; filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.55)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); overflow: visible; } /* タイル・小さな枠: 点だけ */ .hv-compact::before, .hv-compact::after { opacity: 0.8; } .hv-compact .hv-rec { top: 12px; left: auto; right: 46px; font-size: 9px; } .hv-compact .hv-dot { width: 8px; height: 8px; } .tile .hv { z-index: 1; } /* プレイヤー: 自撮りの小窓が日時にかぶらないよう、少し上げる */ :root:not([data-homevideo="off"]) .pip-wrap.hv-on .pv.inset { bottom: 14%; right: 3%; } /* 「今夜の 15 秒」（reel.js）のダイアログ */ .reel-dialog { max-width: 420px; } .reel-stage { display: grid; place-items: center; background: #000; border-radius: 12px; overflow: hidden; min-height: 80px; } .reel-stage:empty { display: none; } .reel-canvas, .reel-result { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; } .reel-progress { width: 100%; height: 8px; accent-color: var(--accent); } .reel-options { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; align-items: center; } .reel-options legend { float: left; padding: 0 8px 0 0; } /* 「みんなの同じ瞬間」（nowgrid.js） */ .now-grid-modal { z-index: 60; } .ng-body { max-width: 720px; background: #14100e; color: #faf5ec; border-color: #3b332e; } .ng-body .muted { color: #b5a99f; } .ng-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .ng-head h2 { margin: 0; font-size: 18px; } .now-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 6px; } .ng-name { display: block; padding: 4px 8px 6px; text-align: left; font-weight: 700; font-size: 13px; color: #faf5ec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ng-cell { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #221c19; cursor: pointer; display: block; width: 100%; } .ng-stage { aspect-ratio: 16 / 9; width: 100%; container-type: inline-size; } .ng-stage video { width: 100%; height: 100%; object-fit: cover; display: block; } .ng-cell.failed::after { content: "読み込めませんでした"; position: absolute; inset: 0; display: grid; place-items: center; background: #221c19; color: #b5a99f; font-size: 12px; } .ng-toggle { color: #faf5ec; border-color: #5a4f48; } .now-grid-link { display: inline-flex; align-items: center; gap: 6px; } .now-grid-modal .hv-rec { font-size: 9px; } .ng-stage .hv-stamp { height: 1em; } .ng-stage .hv-date { bottom: 0.6em; right: 0.7em; } .ng-stage .hv-world { display: none; } .reel-dialog p, .ng-body p { margin: 0; } .now-line .now-grid-link { border: 0; background: none; padding: 2px 0; min-height: 0; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .now-line:has(.now-grid-link) { border-radius: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; } .ng-body h2, .ng-body strong { color: #faf5ec; } .ng-body .ghost { color: #faf5ec; border-color: #5a4f48; background: transparent; }