/* ========================================================= Site-wide settings (theme / font scale / NTL language) ========================================================= */ /* We separate scales: --textScale affects transcript readability only --chaptersScale affects chapter buttons --controlsScale affects buttons/controls sizing only --playerScale affects player sizing only */ html{ --textScale: 1; --chaptersScale: 1; --controlsScale: 1; --playerScale: 1; } /*================================= Disclaimer box =================================*/ /* Disclaimer box styling (red theme) */ .disclaimer-box { background-color: rgba(255, 200, 200, 0.7); /* 淡い赤の背景 */ border-left: 4px solid #ff4444; /* 左に赤のボーダー */ padding: 12px 16px; margin-bottom: 20px; border-radius: 0 4px 4px 0; font-size: 0.95em; line-height: 1.5; } .disclaimer-box p { margin: 0 0 10px 0; } html[data-theme="dark"] .disclaimer-box { background-color: rgba(80, 30, 30, 0.7); /* ダークモード用の暗い赤背景 */ border-left-color: #cc3333; color: #f0f0f0; } /* ========================================================= Layering / z-index plan (tidy & predictable) ========================================================= We keep a small set of layers to avoid fights: - Top-right UI (gear/hamburger/downloads): 2000 - Bottom fixed controls (player/toggles/chapters): 1500 - Media sidebar overlay: 3000 (already uses 9998; we keep it) */ :root{ --zTopUi: 2000; --zBottomUi: 1500; --topUiTop: 8px; --topUiRight: 8px; --topUiGap: 8px; /* approximate button slot width (tap-friendly 44px+padding) */ --topUiSlot: 56px; } /* ========================================================= Transcript readability ========================================================= */ /* transcript only */ .transcript-section{ font-size: calc(1rem * var(--textScale)); } /* transcript bottom padding so fixed UI doesn't cover text */ .transcript-section { padding-bottom: 220px; } span.zw { scroll-margin-top: 70px; scroll-margin-bottom: 180px; } /* ========================================================= UI blocks scaling ========================================================= */ .ui-chapters{ font-size: calc(1rem * var(--chaptersScale)); } .ui-controls{ font-size: calc(1rem * var(--controlsScale)); } .ui-player{ font-size: calc(1rem * var(--playerScale)); } /* Controls scaling: apply to BOTH placeholders and actual generated containers */ .ui-controls, #playback-controls, #transcript-toggle-container, #ui-playback-controls, #ui-transcript-toggle, #ui-hamburger { font-size: calc(1rem * var(--controlsScale)); } /* Player scaling */ .ui-player, #floating-player, #ui-player { font-size: calc(1rem * var(--playerScale)); } /* Chapters scaling */ .ui-chapters, #chapters-float, #ui-chapters, #chapter-buttons, #chapters { font-size: calc(1rem * var(--chaptersScale)); } /* ========================================================= Theme ========================================================= */ /* Theme: JS sets data-theme="dark" on */ html[data-theme="dark"] { background: #111; color: #eee; } html[data-theme="dark"] a { color: #9ecbff; } /* ========================================================= Common settings (gear) — fixed, collapsed panel ========================================================= */ #site-settings { position: fixed; top: var(--topUiTop); right: var(--topUiRight); z-index: var(--zTopUi); display: flex; gap: 8px; align-items: flex-start; } /* gear button */ #btn-settings { cursor: pointer; line-height: 1; padding: 8px 10px; border-radius: 10px; } /* panel */ #site-settings-panel { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px; border-radius: 12px; } /* collapsed */ #site-settings.settings-collapsed #site-settings-panel { display: none; } /* settings bar should NOT scale with controls (prevents jumpiness) */ #site-settings button{ font-size: 1.05rem; padding: 10px 16px; min-width: 44px; min-height: 44px; } /* ========================================================= Downloads (dropdown UI) ========================================================= */ /* dropdown container */ .downloads-wrap { position: relative; display: inline-block; } #downloads-btn { cursor: pointer; line-height: 1; padding: 8px 10px; border-radius: 10px; } .downloads-menu { position: absolute; top: calc(100% + 6px); right: 0; padding: 8px; border-radius: 12px; min-width: 160px; display: none; /* match your UI surfaces */ border: 1px solid var(--uiBorder, #ccc); background: var(--uiBg, #ffffffee); backdrop-filter: blur(6px); } html[data-theme="dark"] .downloads-menu { background: #111111ee; border: 1px solid #333; } .downloads-item { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; } /* ========================================================= Legacy downloads card styles (kept for compatibility) If you no longer use them anywhere, you may delete later. ========================================================= */ .ui-downloads .downloads-card{ margin: 0.75rem 0; padding: 0.75rem; border: 1px solid var(--uiBorder, #ccc); border-radius: 12px; background: var(--uiBg, transparent); } .ui-downloads .downloads-title{ font-weight: 700; margin-bottom: 0.5rem; } .ui-downloads .downloads-buttons{ display: flex; flex-wrap: wrap; gap: 0.5rem; } .ui-downloads .downloads-btn{ display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.75rem; border: 1px solid var(--uiBorder, #ccc); border-radius: 999px; text-decoration: none; cursor: pointer; user-select: none; } .ui-downloads .downloads-btn:active{ transform: translateY(1px); } .ui-downloads .downloads-subtitle{ flex-basis: 100%; margin-top: 0.5rem; font-weight: 700; opacity: 0.9; } /* ========================================================= Tap-friendly buttons (general) ========================================================= */ button { padding: 10px 16px; font-size: 1.05rem; min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid #aaa; background: #fff; cursor: pointer; } /* ========================================================= UI button scaling (so UI size can change independently) ========================================================= */ /* playback + transcript toggle etc */ .ui-controls button, #playback-controls button, #transcript-toggle-container button { font-size: calc(1.05rem * var(--controlsScale)); padding: calc(10px * var(--controlsScale)) calc(16px * var(--controlsScale)); min-width: calc(44px * var(--controlsScale)); min-height: calc(44px * var(--controlsScale)); } /* chapters */ .ui-chapters button, #chapters-float button { font-size: calc(1.05rem * var(--chaptersScale)); padding: calc(10px * var(--chaptersScale)) calc(16px * var(--chaptersScale)); min-width: calc(44px * var(--chaptersScale)); min-height: calc(44px * var(--chaptersScale)); } /* player controls (if it has buttons/sliders you want bigger) */ .ui-player button, #floating-player button { font-size: calc(1.05rem * var(--playerScale)); padding: calc(10px * var(--playerScale)) calc(16px * var(--playerScale)); min-width: calc(44px * var(--playerScale)); min-height: calc(44px * var(--playerScale)); } /* Optional: scale input sliders too */ .ui-player input[type="range"], #floating-player input[type="range"] { height: calc(15px * var(--playerScale)); } /* ========================================================= Title spacing (so it doesn't hide under top-right UI) ========================================================= */ #episode-title { margin-top: 80px; } /* ========================================================= NTL rendering: show only the selected language ========================================================= */ .ntl .ntl-item { display: none; } html[data-ntl-lang="ja"] .ntl .ntl-item[data-lang="ja"] { display: inline; } html[data-ntl-lang="en"] .ntl .ntl-item[data-lang="en"] { display: inline; } html[data-ntl-lang="ko"] .ntl .ntl-item[data-lang="ko"] { display: inline; } html[data-ntl-lang="kr"] .ntl .ntl-item[data-lang="kr"] { display: inline; } html[data-ntl-lang="zh"] .ntl .ntl-item[data-lang="zh"] { display: inline; } html[data-ntl-lang="ryu"] .ntl .ntl-item[data-lang="ryu"] { display: inline; } /* USAGE NOTE: 将来言語を増やしたら、html[data-ntl-lang="xx"] ... を1行足すだけでOK */ /* Optional: visually mark NTL with brackets using CSS (learner sees [ ... ]) */ .ntl::before { content: "["; opacity: 0.65; } .ntl::after { content: "]"; opacity: 0.65; } /* If the NTL tag was malformed, show it clearly so author notices */ .ntl-bad { color: #c9302c; font-style: italic; } /* ========================================================= HYQ speaker styles ========================================================= */ .spk-tian { color: #d9534f; font-weight: 400; } .spk-lan { color: #0275d8; font-weight: 400; } /* guest slots (reserve up to 3 guests) */ .spk-guest1{ color: #6f42c1; font-weight: 400; } /* purple */ .spk-guest2{ color: #2f9e44; font-weight: 400; } /* green */ .spk-guest3{ color: #d97706; font-weight: 400; } /* orange (dark) */ /* default speaker - fallback */ .spk-default { color: inherit; opacity: 0.95; } /* speaker label only */ .speaker-name{ font-weight: 800 !important; margin-right: 0.15em; display: inline-block; font-family: "Noto Sans CJK JP", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", system-ui, sans-serif; } /* ========================================================= Chapter marker & transcript mini-markup ========================================================= */ .chapter-line { text-align: center; margin: 1.4em 0 1em; line-height: 1.6; } .chapter-ornament { opacity: 0.4; margin: 0 0.2em; } .chapter-time { font-weight: 700; margin: 0 0.35em; } .chapter-title { font-weight: 700; margin-right: 0.4em; } /* translation notes */ .transcript-section .tr-note{ font-style: italic; opacity: 0.95; } /* optional: make JP notes slightly muted */ .transcript-section .tr-note.tr-jp{ opacity: 0.85; } /* editor notes */ .transcript-section .editor-note{ font-style: italic; opacity: 0.75; } /* sfx */ .transcript-section .sfx{ font-style: italic; letter-spacing: 0.03em; opacity: 0.85; } /* non-natural Mandarin underline */ .transcript-section .non-natural{ text-decoration-line: underline; text-decoration-thickness: 0.18em; text-decoration-color: rgba(201, 48, 44, 0.8); text-underline-offset: 0.12em; } /* self-correction */ .transcript-section .corr{ font-weight: 500; opacity: 0.9; } /* translation notes (foreign language -> Mandarin) */ .transcript-section .tra { background-color: rgba(255, 255, 128, 0.3); /* soft yellow highlight */ padding: 0 0.2em; border-radius: 0.2em; font-style: italic; opacity: 0.95; } /* Episode-level new vocabulary highlight */ .zw[data-new="1"] { background: rgba(110, 185, 255, 0.35); border-radius: 4px; padding: 0 2px; } /* User toggle: hide new-word highlight site-wide */ html[data-highlight-new="off"] .zw[data-new="1"] { background: transparent; padding: 0; } /* ========================================================= Bottom UI: Floating audio player + toggles + chapters ========================================================= */ #floating-player { position: fixed; bottom: 60px; left: 0; right: 0; display: flex; align-items: center; gap: 10px; background: #ffffffee; padding: 6px 14px; border-top: 1px solid #ccc; backdrop-filter: blur(8px); z-index: var(--zBottomUi); } html[data-theme="dark"] #floating-player { background: #111111ee; border-top: 1px solid #333; } #seekbar { flex: 1; height: 15px; } /* Bottom-left transcript toggle */ #transcript-toggle-container { position: fixed; bottom: 10px; left: 10px; background: #ffffffdd; padding: 8px 10px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.2); backdrop-filter: blur(5px); z-index: var(--zBottomUi); } html[data-theme="dark"] #transcript-toggle-container { background: #111111dd; border: 1px solid #333; } /* Bottom-right playback controls */ #playback-controls { position: fixed; bottom: 10px; right: 10px; display: flex; gap: 6px; background: #ffffffdd; padding: 8px 10px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.2); backdrop-filter: blur(5px); z-index: var(--zBottomUi); } html[data-theme="dark"] #playback-controls { background: #111111dd; border: 1px solid #333; } /* Floating chapters bar */ #chapters-float { position: fixed; left: 10px; right: 10px; bottom: 110px; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; align-items: stretch; padding: 8px 10px; background: #ffffffdd; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); backdrop-filter: blur(5px); z-index: var(--zBottomUi); } html[data-theme="dark"] #chapters-float { background: #111111dd; border: 1px solid #333; } #chapters-float button, .chapter-nav-btn { flex: 0 0 6.5em; min-width: 6.5em; max-width: 6.5em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; word-break: break-word; padding: 0.4em 0.35em; margin-bottom: 0; border-radius: 0.5em; } #chapters-float button .chapter-time, .chapter-nav-btn .chapter-time { display: block; font-size: 0.72em; font-weight: 700; margin: 0 0 0.18em 0; opacity: 0.75; } #chapters-float button .chapter-title, .chapter-nav-btn .chapter-title { display: block; font-size: 0.88em; font-weight: 500; line-height: 1.1; margin: 0; } /* Active chapter button */ #chapters-float button.active { background: #0275d8; color: #fff; border-color: #0275d8; } /* disabled look */ #chapters-float button:disabled { opacity: 0.6; cursor: not-allowed; } /* transcript active chapter highlight */ .transcript-section .active-chapter { background: rgba(255, 235, 150, 0.35); transition: background 0.25s ease; } /* ========================================================= Print ========================================================= */ @media print { /* 印刷時はUIを消す */ #site-settings, .ui-controls, .ui-chapters, #ui-player, #ui-hamburger, #chapters-float, #ui-downloads { display: none !important; } /* 辞書ボタンを含むコンテナのスタイルを無効化 */ #bottom-controls-bar { display: none !important; } /* バウンディングボックス（トレイ）も非表示にする */ #bottom-ui-tray { display: none !important; } } /* 印刷はライト固定（念のため） */ :root { color-scheme: light; } body { background: #fff !important; padding-bottom: 220px; } /* 改ページの事故防止 */ p, li, blockquote { break-inside: avoid; page-break-inside: avoid; } } /* ========================= Picture sidebar (desktop) ========================= */ #media-sidebar { display: none; position: fixed; top: 12px; right: 12px; width: min(420px, 34vw); height: calc(100vh - 24px); z-index: 9998; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.88); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } #media-sidebar .media-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 8px; } #media-sidebar .media-title { color: #fff; font-size: 13px; opacity: 0.9; } #media-sidebar .media-close { appearance: none; border: 0; background: rgba(255,255,255,0.18); color: #fff; width: 34px; height: 34px; border-radius: 17px; font-size: 20px; line-height: 1; cursor: pointer; } #media-sidebar img { width: 100%; height: calc(100% - 84px); object-fit: contain; display: block; background: rgba(0,0,0,0.25); } #media-sidebar .media-caption { padding: 10px 12px 12px; color: #fff; font-size: 13px; line-height: 1.35; opacity: 0.95; } /* When sidebar is visible, give the main content some breathing room on the right. (We set the actual margin via JS so it matches the real sidebar width.) */ html[data-media-sidebar="1"] .transcript-section, html[data-media-sidebar="1"] #ui-downloads, html[data-media-sidebar="1"] #chapters-float { /* margin-right is set inline by JS for robustness */ } /* Collapsed state */ #media-sidebar.collapsed { width: auto; height: auto; background: transparent; box-shadow: none; } #media-sidebar.collapsed .media-title { display: none; } #media-sidebar.collapsed img, #media-sidebar.collapsed .media-caption { display: none; } #media-sidebar.collapsed .media-head { padding: 0; } /* ===== Top-right buttons row: download | hamburger | gear ===== */ #site-settings { position: fixed; top: 8px; right: 8px; z-index: 2000; } #ui-hamburger { position: fixed; top: 8px; right: 72px; /* gearの左 */ z-index: 2000; } #ui-downloads { position: fixed; top: 8px; right: 136px; /* hamburgerの左 */ z-index: 2000; } /* Make the three buttons visually consistent */ #btn-settings, #hamburger-btn, #downloads-btn { line-height: 1; padding: 10px 16px; min-width: 44px; min-height: 44px; border-radius: 10px; } /* ===== Settings (gear) ===== */ #site-settings { position: fixed; top: 8px; right: 8px; left: auto; /* 念のため“左に飛ぶ”のを封じる */ z-index: 2000; /* ここが重要：flexで横に伸びないようにする */ display: block; } /* 歯車ボタン */ #btn-settings { cursor: pointer; line-height: 1; padding: 10px 16px; min-width: 44px; min-height: 44px; border-radius: 10px; } /* パネル本体：歯車から“生やす” */ #site-settings-panel { position: absolute; top: calc(100% + 6px); /* 歯車の下に出す（横に出したいなら後述） */ right: 0; display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--uiBorder, #ccc); background: var(--uiBg, #ffffffee); backdrop-filter: blur(6px); } html[data-theme="dark"] #site-settings-panel { background: #111111ee; border: 1px solid #333; } /* 初期状態：閉じる */ #site-settings.settings-collapsed #site-settings-panel { display: none; } /* ========================================================= Bottom unified controls bar (transcript + dict + media + playback) ========================================================= */ #bottom-controls-bar{ position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: var(--zBottomUi); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; background: #ffffffdd; padding: 8px 10px; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.2); backdrop-filter: blur(5px); } html[data-theme="dark"] #bottom-controls-bar{ background: #111111dd; border: 1px solid #333; } /* Make existing containers "inline" when moved into the bar */ #bottom-controls-bar #transcript-toggle-container, #bottom-controls-bar #playback-controls{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; display: flex; gap: 6px; align-items: center; } /* keep buttons compact and aligned */ #bottom-controls-bar button{ white-space: nowrap; } /* optional: when a button is disabled, make it obvious */ #bottom-controls-bar button:disabled{ opacity: 0.5; cursor: not-allowed; } /* 3 groups inside bottom bar */ #bottom-controls-bar{ justify-content: space-between; } #bottom-controls-bar .bc-left, #bottom-controls-bar .bc-mid, #bottom-controls-bar .bc-right{ display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } /* left and right can shrink a bit, mid stays centered */ #bottom-controls-bar .bc-left{ justify-content: flex-start; } #bottom-controls-bar .bc-mid{ justify-content: center; flex: 1; } #bottom-controls-bar .bc-right{ justify-content: flex-end; } /* ========================================================= Bottom UI tray: keeps player visible + removes clutter below controls ========================================================= */ /* Base sizes (tweakable) */ :root{ /* default tray height when controlsScale=1 */ --bottomTrayBase: 150px; /* how much tray height grows per controlsScale step */ --bottomTrayGrow: 70px; /* computed tray height */ --bottomTrayH: calc(var(--bottomTrayBase) + (var(--controlsScale) - 1) * var(--bottomTrayGrow)); /* internal spacing */ --bottomGap: 10px; } /* The tray is a fixed background panel behind player + controls */ #bottom-ui-tray{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottomTrayH); z-index: calc(var(--zBottomUi) - 1); background: #ffffffdd; border-top: 1px solid #ccc; backdrop-filter: blur(8px); } html[data-theme="dark"] #bottom-ui-tray{ background: #111111dd; border-top: 1px solid #333; } /* Make transcript never peek under the tray */ .transcript-section{ padding-bottom: calc(var(--bottomTrayH) + 40px); } /* Place bottom controls bar at the bottom, above tray */ #bottom-controls-bar{ bottom: var(--bottomGap); } /* Place floating player above bottom controls bar, dynamically */ #floating-player{ bottom: calc(var(--bottomGap) + 56px + 12px); /* 56px ~ button height slot; 12px extra breathing room */ }