:root { --name-w: 96px; --gutter: 12px; --radius: 12px; } @media (min-width: 640px) { :root { --name-w: 136px; --gutter: 20px; } } /* * テーマごとの色。data-theme は index.html の 内スクリプトで設定する。 * data-theme がない場合（スクリプトが動かない等）はダークになる。 */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1016; --surface: #161a23; --surface-2: #1e2330; --line: #2a3040; --line-strong: #3a4256; /* ホバー時の枠・スクロールバー */ --press: #262c3b; /* ボタン押下時の背景 */ --press-strong: #2e3547; --grid: rgba(255, 255, 255, 0.06); --text: #e8eaf0; --text-dim: #9aa3b5; --accent: #7aa2ff; --now: #ffd24a; /* 現在時刻の線・ラベル */ --now-text: #1a1400; --live: #ff453a; /* 配信中の赤 */ --error: #ff8a80; --header-bg: rgba(14, 16, 22, 0.92); --badge-line: #4a5268; --swatch-ring: transparent; /* 色見本の縁（ライトで白系の色を見えるようにする） */ --tooltip-bg: #232838; --tooltip-line: #3a4256; --tooltip-shadow: rgba(0, 0, 0, 0.5); --backdrop: rgba(0, 0, 0, 0.55); --yt: #e5332c; --tw: #8f4bff; --kick: #3fcf2a; --kick-text: #06210a; --bar-text: #fff; --bar-edge: rgba(255, 255, 255, 0.14); } :root[data-theme="light"] { color-scheme: light; /* 真っ白ではなく、ほんのりクリーム寄り */ --bg: #f7f5ef; --surface: #fffdf8; --surface-2: #f3f0e8; --line: #e0dbd0; --line-strong: #c4bdae; --press: #ebe6db; --press-strong: #e0dacd; --grid: rgba(0, 0, 0, 0.07); --text: #1f1d19; --text-dim: #625d52; --accent: #3a66d6; --now: #b45309; --now-text: #ffffff; --live: #d92b24; --error: #c62828; --header-bg: rgba(247, 245, 239, 0.92); --badge-line: #c4bdae; --swatch-ring: rgba(0, 0, 0, 0.25); --tooltip-bg: #fffdf8; --tooltip-line: #ddd7ca; --tooltip-shadow: rgba(50, 40, 20, 0.16); --backdrop: rgba(35, 30, 20, 0.35); /* 白文字が読めるよう少し暗めに。Kickは濃い文字のまま */ --yt: #d92b24; --tw: #7c3aed; --kick: #34c022; --kick-text: #06210a; --bar-text: #fff; --bar-edge: rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; font-size: 15px; line-height: 1.5; -webkit-tap-highlight-color: transparent; } body.modal-open { overflow: hidden; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, p { margin: 0; } /* ---- ヘッダー / フッター ---- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); } .header-inner, main, .site-footer { max-width: 1600px; /* 広い画面ではタイムラインをより長い時間範囲で表示する */ margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; } .brand { min-width: 0; } h1 { font-size: 18px; line-height: 1.3; } .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } /* テーマ切り替え（アイコンはテーマに合わせてCSSで切り替え、読み込み時のちらつきを防ぐ） */ .icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 18px; line-height: 1; touch-action: manipulation; } :root[data-theme="light"] .theme-icon-to-light, :root:not([data-theme="light"]) .theme-icon-to-dark { display: none; } /* 画面幅が狭いときは「表示メンバー：」を「メンバー：」に短縮 */ @media (max-width: 399px) { .header-inner { gap: 8px; } h1 { font-size: 16px; } .header-actions { gap: 6px; } .settings-open-prefix { display: none; } #settings-open { padding-left: 12px; padding-right: 12px; } } .unofficial-tag { font-size: 11px; color: var(--text-dim); } .site-footer { padding-top: 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: var(--text-dim); } /* ---- 共通パーツ ---- */ .btn { -webkit-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.2; padding: 8px 14px; min-height: 40px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--line-strong); } .btn:active { background: var(--press); } .btn-small { font-size: 13px; padding: 6px 12px; min-height: 34px; } main { display: grid; gap: 12px; padding-top: 12px; padding-bottom: 12px; } .card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } h2 { font-size: 15px; } h2 small { margin-left: 4px; font-size: 12px; font-weight: normal; color: var(--text-dim); } .count { margin-left: 4px; font-size: 13px; font-weight: normal; color: var(--live); } .hint, .status { font-size: 12px; color: var(--text-dim); } .status.is-error { color: var(--error); } .pf-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--bar-text); } .pf-youtube { background-color: var(--yt); } .pf-twitch { background-color: var(--tw); } .pf-kick { background-color: var(--kick); color: var(--kick-text); } /* ---- 現在配信中 ---- */ .live-empty { font-size: 14px; color: var(--text-dim); } .live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } @media (min-width: 640px) { .live-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } .live-item { min-width: 0; background: var(--surface-2); border-left: 4px solid var(--member-color); border-radius: 10px; padding: 10px 12px; } .live-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } .live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease-in-out infinite; } .live-name { font-weight: 700; } .live-duration { margin-left: auto; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .live-title { margin-top: 4px; font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- タイムライン ---- */ /* スマホでは横幅を最大限使うため、カードの左右余白をタイムライン部分だけなくす */ .timeline-card { padding-left: 0; padding-right: 0; overflow: hidden; } .timeline-card > .section-head, .timeline-card > .legend, .timeline-card > .hint { padding-left: 14px; padding-right: 14px; } .timeline-card > .hint { margin-top: 8px; } .legend { list-style: none; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-dim); } .legend li { display: flex; align-items: center; gap: 6px; } .legend-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; } .legend-now { width: 2px; height: 14px; background: var(--now); } .tl-scroll { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-color: var(--line-strong) transparent; } .tl-inner { position: relative; width: calc(var(--name-w) + var(--track-w)); } .tl-row { display: flex; border-bottom: 1px solid var(--line); } .tl-row:last-of-type { border-bottom: 0; } /* 名前の列（横スクロールしても左に固定） */ .tl-name { position: -webkit-sticky; position: sticky; left: 0; z-index: 3; flex: 0 0 var(--name-w); width: var(--name-w); display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 2px 4px; padding: 4px 6px 4px 10px; background: var(--surface); border-right: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--member-color, transparent); font-size: 12px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } /* 公式チャンネルの目印（控えめに） */ .official-badge { display: inline-block; flex: 0 0 auto; padding: 0 5px; border: 1px solid var(--badge-line); border-radius: 4px; font-size: 10px; font-weight: normal; line-height: 1.5; color: var(--text-dim); white-space: nowrap; } .tl-corner { font-weight: normal; color: var(--text-dim); font-size: 11px; } .tl-track { position: relative; flex: 0 0 var(--track-w); width: var(--track-w); height: calc(var(--lanes, 1) * var(--lane-h) + 4px); min-height: 38px; background-image: repeating-linear-gradient( 90deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent var(--hour-w) ); } .tl-axis { height: 28px; min-height: 0; background-image: none; } .tl-tick { position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 1px solid var(--line); font-size: 11px; line-height: 28px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .tl-tick.is-day { color: var(--text); font-weight: 700; border-left-color: var(--accent); } /* 配信の帯 */ .tl-bar { -webkit-appearance: none; appearance: none; position: absolute; top: calc(4px + var(--lane) * var(--lane-h)); height: calc(var(--lane-h) - 4px); z-index: 1; display: block; margin: 0; padding: 0 6px; border: 0; border-radius: 6px; color: var(--bar-text); font: inherit; font-size: 11px; text-align: left; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--bar-edge); } .tl-bar:hover { filter: brightness(1.12); } .tl-bar-label { display: block; line-height: calc(var(--lane-h) - 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-bar.is-clipped { border-top-left-radius: 0; border-bottom-left-radius: 0; } .tl-bar.is-live { border-top-right-radius: 0; border-bottom-right-radius: 0; background-image: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.22)); } .tl-bar.is-live::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: #fff; animation: pulse 1.6s ease-in-out infinite; } /* 現在時刻の縦線 */ .tl-now { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: var(--now); pointer-events: none; } .tl-now-label { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 4px; background: var(--now); color: var(--now-text); font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; } .tl-empty { padding: 24px 14px; font-size: 14px; color: var(--text-dim); text-align: center; } /* ---- ツールチップ ---- */ .tooltip { position: fixed; top: 0; left: 0; z-index: 50; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px; background: var(--tooltip-bg); border: 1px solid var(--tooltip-line); border-radius: 10px; box-shadow: 0 8px 24px var(--tooltip-shadow); color: var(--text); font-size: 13px; pointer-events: none; } .tt-title { font-weight: 700; overflow-wrap: anywhere; } .tt-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .tt-times { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-variant-numeric: tabular-nums; } .tt-times dt { color: var(--text-dim); } .tt-times dd { margin: 0; } .tt-times dd.is-live { color: var(--live); font-weight: 700; } /* ---- 表示設定（スマホは下から出るシート） ---- */ .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; } .modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--backdrop); } .modal-sheet { position: relative; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 0 0; } .modal-sheet:focus { outline: none; } @media (min-width: 640px) { .modal { align-items: center; } .modal-sheet { border-radius: 16px; } } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .settings-list { list-style: none; margin: 8px 0 12px; padding: 0; } .settings-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); } .settings-item { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; cursor: pointer; } .settings-name { min-width: 0; overflow-wrap: anywhere; } /* 並び替えボタン（iPhoneで押しやすいよう 44px 四方を確保） */ .reorder { flex: 0 0 auto; display: flex; gap: 4px; } .reorder-btn { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin: 2px 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; touch-action: manipulation; /* 連打してもダブルタップズームしない */ } .reorder-btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--press); } .reorder-btn:active:not(:disabled) { background: var(--press-strong); } .reorder-btn:disabled { opacity: 0.3; cursor: default; } .settings-item input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); } .swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background: var(--member-color); box-shadow: inset 0 0 0 1px var(--swatch-ring); } .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .live-dot, .tl-bar.is-live::after { animation: none; } }