@charset "UTF-8"; /* ============================================================ コントロールバー内トリガーボタン ============================================================ */ /* console.php の「🔎見たい馬で探す」使用許可=禁止のとき、🔎トリガーボタンを非表示にする。paddock-seeker.js がに paddock-seeker-disabled クラスを付与/除去する。 */ body.paddock-seeker-disabled .fvPaddockSeekerTrigger { display: none !important; } .fvPaddockSeekerTrigger { display: inline-flex; flex-direction: row !important; align-items: center !important; gap: 5px; height: 24px; min-height: 24px; box-sizing: border-box; vertical-align: top; margin: 8px 0 0 8px; padding: 0 10px; border: 0; outline: 0; border-radius: 4px; background: #737a80; color: #fff; font-size: 12px; line-height: 1; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap !important; overflow: hidden; transition: color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .fvPaddockSeekerTrigger:hover, .fvPaddockSeekerTrigger:focus { color: #fff; background: #858d94; } .fvPaddockSeekerTrigger.is-active { color: #fff; background: #5DCAA5; } .fvPaddockSeekerTrigger.is-active:hover, .fvPaddockSeekerTrigger.is-active:focus { background: #6ed4b2; } .fvPsIcon { display: inline-block; flex-shrink: 0; align-self: center; font-size: 12px; line-height: 1; vertical-align: middle; /* fa-search は字形が em-box の右端ぎりぎりまで及ぶため、ラベル文字との見た目の余白が小さくなる (特に iOS Safari の小サイズ描画時)。アイコン側に右マージンを足して補正する。 */ margin-right: 2px; } /* プレーヤー幅 < 580px のとき: ラベルを非表示にしてアイコンのみに短縮。 iPhone SE2 横向き URL バー非表示時 (player 583px) でラベル付きが収まることを実測した上での閾値。スマホ縦/横向きの URL バー有無による幅変化、 PC のウィンドウサイズ変更にいずれも追随する (index.php updatePcControlVisibilityByPlayerWidth)。 */ body.player-width-lt-580 .fvPsLabel { display: none; } body.player-width-lt-580 .fvPaddockSeekerTrigger { padding: 0 8px; min-width: 32px; flex-shrink: 0; justify-content: center; } body.player-width-lt-580 .fvPsIcon { font-size: 14px; } /* ============================================================ パネルコンテナ（パターン共通ベース） ============================================================ */ #paddock-seeker { display: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; } /* ============================================================ パターンB: 下部ストリップ（スマホ横・PC横長） #paddock-seeker は #fvPlayer (position:relative) の直下に配置 ============================================================ */ #paddock-seeker.ps-pattern-b { position: absolute; left: 0; right: 0; /* .fvControlView の高さぶん浮かせてバーの真上に置く想定の初期値。フルスクリーン時は #fvPlayer が画面いっぱいに伸び、16:9 映像が画面高を埋めないとバー下に余白ができてこの 47px ではバーに重なる。実際の「#fvPlayer 下端→バー上端」距離を paddock-seeker.js repositionStripB() がインライン style で上書きして追従する（ここはその前/非対応時のフォールバック）。 */ bottom: 47px; z-index: 1300; /* .fvClickPointWrapper>li の z-index:1200 より上 */ pointer-events: none; } /* ストリップ本体 */ .ps-strip { pointer-events: auto; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 100%); /* 下パディングは「馬番ボタン下端〜シークバー」の安全間隔を作る。 .fvControlView は上に padding-top:5px を持つため、ここ(4px)+馬番行(2px) +バー上(5px)=約11px となり、誤シーク防止の推奨 8px 以上を確保しつつ従来(約17px)より詰めて映像を露出させる。 */ padding: 6px 16px 4px; color: #e5e5e7; animation: ps-strip-in 200ms ease-out; } @keyframes ps-strip-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ps-strip { animation: none; } } /* ストリップヘッダー */ .ps-strip__hd { display: grid; align-items: center; gap: 8px; margin-bottom: 4px; } /* タイトル / モードタブ / インラインステータス(1fr) / × */ .ps-strip__hd--step1 { grid-template-columns: auto auto 1fr auto; } /* かんたん/くわしくの右に少し余白を空けて警告文を出す。下段に別行を作らず馬番行の押し下げを防ぐ。空のときは幅0で × を右端に保つ。 */ .ps-strip__status-inline { min-width: 0; /* 1fr 内で text-overflow:ellipsis を効かせる */ margin-left: 12px; align-self: center; font-size: 12px; line-height: 1.3; color: #f5c2c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-strip__hd--step2 { grid-template-columns: 1fr auto 1fr; } /* step1 タイトル */ .ps-strip__title { font-size: 12px; font-weight: 600; color: #e5e5e7; } /* 旧🔎絵文字はOS絵文字フォントが内蔵色(青ガラス)で描画され、フルスクリーンや GPU合成の差で色が不安定になるため、fa-search(モノクロ)に統一。色は .ps-strip__title を継承するので全プラットフォームで安定する。 */ .ps-strip__title-icon { margin-right: 2px; color: inherit; } /* ストリップ(Pattern B)の×は高さ縮小のため小さめに上書き。 Pattern A(ボトムシート)/C(レーン)共有の base .paddock-seeker__close には影響させないようストリップ内にスコープする。 */ .ps-strip .paddock-seeker__close { width: 24px; height: 24px; font-size: 16px; } /* ストリップ内コンパクトモードタブ */ .ps-strip__mode-tabs.paddock-seeker__mode-tabs { display: flex; flex-direction: row; margin-bottom: 0; /* 各タブを×ボタン/ボトムシート同様に「枠付きの個別ボタン」にするため、旧来の白い半透明ピル状コンテナ背景は廃止する。 */ background: transparent; border-radius: 0; padding: 0; gap: 6px; } /* 旧配色(白の半透明)は薄くて見づらかったため、×ボタン/ボトムシートの [かんたん][くわしく]とほぼ同じ緑系の配色（非透過寄り背景＋緑枠）に変更。サイズはストリップ用のコンパクトなまま。 */ .ps-strip__mode-tabs .paddock-seeker__mode-tab { min-height: 20px; padding: 1px 9px; font-size: 11px; border-radius: 999px; border: 1.5px solid rgba(62, 138, 85, 0.45); background: rgba(38, 67, 45, 0.45); color: rgba(255, 255, 255, 0.55); box-shadow: none; } .ps-strip__mode-tabs .paddock-seeker__mode-tab.is-active { background: #26432D; border-color: #3E8A55; color: #fff; box-shadow: none; } /* 馬番チップ横並び行 */ .ps-strip__horses { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .ps-strip__horses::-webkit-scrollbar { display: none; } /* パターンB: 馬番ボタン 44×44 */ .ps-pattern-b .paddock-seeker__horse-button { min-height: 44px; min-width: 44px; flex-shrink: 0; padding: 4px 6px; font-size: 14px; } /* シーンチップ: 横スクロール1行（馬番チップ .ps-strip__horses と同方式）。プレーヤー幅が URL バー有無で変動しても、件数によらずストリップ高さを一定（1行分）に保ち、映像を覆う範囲をコントロールバー＋最下段(1/4)程度に抑える。4列グリッドだと幅縮小時に折返して縦に膨らむため廃止。 */ .ps-strip__scenes { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .ps-strip__scenes::-webkit-scrollbar { display: none; } /* パターンB: シーンチップを「時間／カメラ名」の2段カードに。各行 nowrap・フォント縮小で固定高さにし、幅縮小時の折返しを防ぐ。 */ .ps-pattern-b .paddock-seeker__appearance-button { flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex-shrink: 0; width: auto; min-width: 64px; min-height: 0; padding: 7px 14px; } .ps-pattern-b .paddock-seeker__appearance-time { font-size: 13px; line-height: 1.2; white-space: nowrap; } .ps-pattern-b .paddock-seeker__appearance-camera { font-size: 10px; line-height: 1.2; } /* ============================================================ パターンA: ボトムシート（スマホ縦・縦長ブラウザ・iPad縦） ============================================================ */ #paddock-seeker.ps-pattern-a { position: fixed; inset: 0; z-index: 1300; /* .fvClickPointWrapper>li の z-index:1200 より上 (Pattern B と同値) */ pointer-events: none; } /* シート本体 */ .ps-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 44vh; background: #181818; border-top: 1px solid #2c6e3f; border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55); color: #e5e5e7; pointer-events: auto; animation: ps-slide-up 280ms ease-out; } @keyframes ps-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ps-sheet { animation: none; } } /* ドラッグハンドル */ .ps-sheet__handle-wrap { flex-shrink: 0; display: flex; justify-content: center; padding: 6px 0 4px; } .ps-sheet__handle { width: 42px; height: 4px; border-radius: 2px; background: #444; } /* シートヘッダー（3列グリッド: 戻る / タイトル / ×） */ .ps-sheet__header { flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 0 16px; margin-bottom: 8px; } /* シートボディ（スクロール可） */ .ps-sheet__body { flex: 1; overflow-y: auto; padding: 0 14px calc(12px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; } /* ============================================================ 共通リセット ============================================================ */ .paddock-seeker__horse-button, .paddock-seeker__appearance-button, .paddock-seeker__back, .paddock-seeker__close { border: 0; outline: 0; } /* ============================================================ ヘッダー共通パーツ（タイトル / 戻る / ×） ============================================================ */ .paddock-seeker__title { text-align: center; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .paddock-seeker__back, .paddock-seeker__back-placeholder { justify-self: start; } .paddock-seeker__back { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; background: transparent; color: #6FCB8B; font-size: 13px; font-weight: 600; cursor: pointer; } .paddock-seeker__back:hover, .paddock-seeker__back:focus { color: #fff; } .paddock-seeker__close { justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; /* 馬番ボタン (has-detections) と同じ意匠で UI に馴染ませる。背景 #26432D + 緑ボーダー、× は白太字。 */ background: #26432D; border: 1.5px solid #3E8A55; color: #fff; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; } .paddock-seeker__close:hover, .paddock-seeker__close:focus { background: #2e5e3a; color: #fff; } /* ============================================================ モード切り替えタブ（かんたん / くわしく） ============================================================ */ .paddock-seeker__mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; background: transparent; padding: 0; } /* かんたん/くわしくタブの基本意匠は馬番ボタン .has-detections と ×ボタンに合わせる (#26432D + 緑ボーダー + 白太字)。非選択時は薄め (透明度を下げる) で選択中との濃淡を出す。 */ .paddock-seeker__mode-tab { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 10px; border: 1.5px solid rgba(62, 138, 85, 0.45); outline: 0; border-radius: 999px; background: rgba(38, 67, 45, 0.45); color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; } .paddock-seeker__mode-tab.is-active { background: #26432D; border-color: #3E8A55; color: #fff; font-weight: 700; } .paddock-seeker__mode-tab:hover:not(.is-active), .paddock-seeker__mode-tab:focus:not(.is-active) { background: rgba(38, 67, 45, 0.7); border-color: rgba(62, 138, 85, 0.7); color: rgba(255, 255, 255, 0.85); } /* ============================================================ ステップ1: 馬番グリッド ============================================================ */ .paddock-seeker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .paddock-seeker__horse-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 6px; border-radius: 999px; background: #2a2a2a; color: #e5e5e7; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.12s, transform 0.12s; } /* パターンA: コンパクト */ .ps-pattern-a .paddock-seeker__horse-button { min-height: 48px; } .paddock-seeker__horse-button.has-detections { background: #26432D; border: 1.5px solid #3E8A55; } .paddock-seeker__horse-button:hover, .paddock-seeker__horse-button:focus { background: #2e5e3a; color: #fff; } .paddock-seeker__horse-button:active { transform: scale(0.95); } .paddock-seeker__horse-number { line-height: 1; } /* 直近映像ありドット */ .paddock-seeker__horse-dot { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 5px rgba(74, 222, 128, 0.7); } /* ============================================================ ステップ2: シーンリスト ============================================================ */ .paddock-seeker__appearances { display: flex; flex-direction: column; gap: 8px; } .paddock-seeker__appearance-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 8px; background: #2a2a2a; color: #e5e5e7; text-align: left; cursor: pointer; transition: background 0.12s; } /* パターンA */ .ps-pattern-a .paddock-seeker__appearance-button { min-height: 44px; } .paddock-seeker__appearance-button:hover, .paddock-seeker__appearance-button:focus { background: #26432D; color: #fff; } .paddock-seeker__appearance-time { font-size: 15px; font-weight: 700; } .paddock-seeker__appearance-camera { font-size: 11px; color: #8e8e93; white-space: nowrap; } /* ============================================================ 空・ステータス ============================================================ */ .paddock-seeker__empty, .paddock-seeker__status { padding: 8px 4px 2px; color: rgba(229, 229, 231, 0.92); font-size: 13px; line-height: 1.5; } .paddock-seeker__status { padding: 8px 16px 4px; color: #f5c2c7; } /* ============================================================ 管理サイト: 馬番修正UI（Pattern A のみ） ============================================================ */ /* シーン行 [時刻] [カメラ] [シーク] [修正] */ .paddock-seeker__appearance-row--admin { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px; background: #2a2a2a; color: #e5e5e7; } .paddock-seeker__appearance-row--admin .paddock-seeker__appearance-camera { flex: 1 1 auto; } /* 行内の [シーク] ボタンは行レイアウトに合わせて幅を詰める */ .paddock-seeker__appearance-row--admin .paddock-seeker__seek-btn { flex: 0 0 auto; width: auto; min-height: 36px; padding: 6px 14px; background: #2c6e3f; color: #fff; font-size: 13px; font-weight: 700; border-radius: 6px; } .paddock-seeker__appearance-row--admin .paddock-seeker__seek-btn:hover, .paddock-seeker__appearance-row--admin .paddock-seeker__seek-btn:focus { background: #35864c; } .paddock-seeker__fix-btn { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 6px; background: #4a3a16; color: #ffd479; border: 1px solid #6b5320; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.12s; } .paddock-seeker__fix-btn:hover, .paddock-seeker__fix-btn:focus { background: #5c4a1c; color: #ffe1a0; } /* 修正フォーム */ .paddock-seeker__fix { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px 2px; } .paddock-seeker__fix-row { display: flex; align-items: center; gap: 12px; } .paddock-seeker__fix-label { flex: 0 0 88px; font-size: 14px; font-weight: 700; color: #e5e5e7; } .paddock-seeker__fix-select { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border-radius: 8px; background: #1f1f1f; color: #fff; border: 1px solid #3a3a3a; font-size: 16px; /* iOS の自動ズーム抑止 */ } .paddock-seeker__fix-actions { display: flex; gap: 12px; margin-top: 6px; } .paddock-seeker__fix-cancel, .paddock-seeker__fix-submit { flex: 1 1 0; min-height: 46px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.12s; } .paddock-seeker__fix-cancel { background: #2a2a2a; color: #e5e5e7; border: 1px solid #3a3a3a; } .paddock-seeker__fix-cancel:hover, .paddock-seeker__fix-cancel:focus { background: #333; } .paddock-seeker__fix-submit { background: #2c6e3f; color: #fff; border: 1px solid #2c6e3f; } .paddock-seeker__fix-submit:hover, .paddock-seeker__fix-submit:focus { background: #35864c; } .paddock-seeker__fix-submit[disabled] { opacity: 0.6; cursor: default; } /* ============================================================ パターンC: 右レーン（PC横長・チャット無・幅≧1280px） ============================================================ */ #paddock-seeker-rail { display: none; width: 260px; flex: 0 0 260px; overflow-y: auto; background: #181818; border-left: 1px solid #2c6e3f; color: #e5e5e7; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; } .player-comments-container.ps-rail-open #paddock-seeker-rail { display: flex; flex-direction: column; } .ps-rail { display: flex; flex-direction: column; min-height: 100%; } /* レーンヘッダー */ .ps-rail__header { flex-shrink: 0; padding: 12px 14px 10px; border-bottom: 1px solid #2a2a2a; } .ps-rail__title { font-size: 13px; font-weight: 700; color: #e5e5e7; } .ps-rail__subtitle { font-size: 11px; color: #8e8e93; margin-top: 2px; } /* スクロール可能ボディ */ .ps-rail__body { flex: 1; overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; } /* ステップ2ヘッダー行 */ .ps-rail__step-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } /* 馬番グリッド: 3列 */ #paddock-seeker-rail .paddock-seeker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #paddock-seeker-rail .paddock-seeker__horse-button { min-height: 44px; } #paddock-seeker-rail .paddock-seeker__appearance-button { min-height: 48px; } /* レジェンド */ .ps-rail__legend { flex-shrink: 0; padding: 8px 14px 14px; font-size: 11px; color: #4ADE80; } /* トリガーボタン: パターンC時は非表示 */ .fvPaddockSeekerTrigger.ps-trigger-c-hide { display: none !important; }