Spaces:
Sleeping
Sleeping
| head { z-index: 100; } | |
| body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 0; padding-top: 80px; transition: 0.3s; } | |
| /* ヘッダー */ | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 60px; | |
| background-color: #121212; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.3); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| box-sizing: border-box; | |
| } | |
| .header h1 { font-size: 1.5em; margin: 0; color: #ffffff; margin-right: auto; } | |
| /* コントロールバー */ | |
| #controls { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| #controls form { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| #controls input[type="text"] { | |
| padding: 8px 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| width: 300px; | |
| } | |
| #controls button { | |
| padding: 8px 14px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| color: #fff; | |
| white-space: nowrap; | |
| } | |
| #startBtn { background: #03dac6; color: #121212; } | |
| #stopBtn { background: #cf6679; color: #121212; } | |
| #theaterToggle { background: #bb86fc; color: #121212; } | |
| /* ハンバーガー */ | |
| .hamburger { position: fixed; top: 10px; right: 10px; width: 48px; height: 48px; z-index: 5000; border: none; background: transparent; cursor: pointer; } | |
| .hamburger__line { z-index: 5001; display: block; position: absolute; right: 11px; width: 26px; height: 2px; background-color: #e0e0e0; transition: 0.4s; } | |
| .hamburger__line:nth-of-type(1) { top: 14px; } | |
| .hamburger__line:nth-of-type(2) { top: 23px; } | |
| .hamburger__line:nth-of-type(3) { top: 32px; } | |
| .hamburger.active .hamburger__line:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); } | |
| .hamburger.active .hamburger__line:nth-of-type(2) { opacity: 0; } | |
| .hamburger.active .hamburger__line:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); } | |
| /* メニュー */ | |
| .nav { | |
| position: fixed; top: 0; right: -340px; width: 320px; | |
| height: 100vh; background-color: #fff; box-shadow: -2px 0 5px rgba(0,0,0,0.5); | |
| transition: 0.4s; z-index: 999; | |
| padding-top: 60px; overflow-y: auto; | |
| } | |
| .nav.active { transform: translateX(-340px); } | |
| .nav__list { margin: 0; padding: 20px 0 60px 0; list-style: none; } | |
| .nav__item { padding: 15px 20px; border-bottom: 1px solid #eee; } | |
| .nav__item label { display: block; margin-bottom: 8px; font-weight: bold; color: #000; } | |
| .nav__item select, .nav__item input[type="text"], .nav__item input[type="number"], .nav__item input[type="range"] { | |
| width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| /* 話者設定UI */ | |
| .speaker-setting-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } | |
| .speaker-name-input { flex-grow: 1; padding: 6px; border: 1px solid #ccc; border-radius: 4px; min-width: 0; } | |
| .color-preview-box { width: 40px; height: 30px; flex-shrink: 0; border: 1px solid #999; border-radius: 4px; background-color: #fff; cursor: pointer; position: relative; overflow: hidden; } | |
| .color-picker-hidden { opacity: 0; width: 100%; height: 100%; cursor: pointer; position: absolute; top: 0; left: 0; padding: 0; border: none; } | |
| .reset-btn { width: 100%; padding: 8px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-top: 5px; } | |
| .reset-btn:hover { background-color: #ddd; } | |
| /* コンテンツエリア */ | |
| #container { | |
| width: 95vw; | |
| margin: 0 auto; | |
| display: flex; | |
| gap: 20px; | |
| padding: 20px; | |
| height: calc(100vh - 80px); | |
| box-sizing: border-box; | |
| } | |
| #video-container { | |
| flex: 3; | |
| position: relative; | |
| background: #000; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| height: 100%; | |
| } | |
| #history-container { | |
| flex: 1; | |
| background: #fff; | |
| padding: 15px; | |
| border-radius: 8px; | |
| overflow-y: auto; | |
| border: 1px solid #ddd; | |
| margin-top: 0; | |
| height: 100%; | |
| box-sizing: border-box; | |
| } | |
| /* シアターモードスタイル (全体制御) */ | |
| body.theater-active { | |
| overflow: hidden; | |
| padding: 0 ; | |
| } | |
| /* シアター中はヘッダーと履歴を非表示 */ | |
| body.theater-active .header { display: none ; } | |
| body.theater-active #history-container { display: none ; } | |
| /* シアター中はコンテナの余白解除 */ | |
| body.theater-active #container { | |
| padding: 0 ; | |
| margin: 0 ; | |
| width: 100vw ; | |
| height: 100vh ; | |
| max-width: none ; | |
| } | |
| /* 動画エリア全画面化 */ | |
| body.theater-active #video-container.theater-mode { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100vw; height: 100vh; | |
| background: #000; | |
| z-index: 2000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| border-radius: 0; | |
| } | |
| body.theater-active #video-container.theater-mode iframe { width: 100%; height: 100%; object-fit: contain; } | |
| /* 閉じるボタン */ | |
| .close-theater-btn { display: none; position: absolute; top: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(255,255,255,0.5); padding: 10px 20px; border-radius: 30px; cursor: pointer; font-weight: bold; z-index: 2500; font-size: 1rem; } | |
| .close-theater-btn:hover { background-color: rgba(255, 255, 255, 0.2); } | |
| .theater-mode .close-theater-btn { display: block; } | |
| /* 字幕コンテナ */ | |
| #subtitle-container { | |
| position: absolute; | |
| bottom: 5%; | |
| left: 0; | |
| width: 100%; | |
| text-align: center; | |
| pointer-events: none; | |
| z-index: 1500; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 5px; | |
| } | |
| /* プレビュー四角 */ | |
| .color-preview { | |
| width: 30px; | |
| height: 30px; | |
| border: 2px solid #666; /* ← 背景と同化しない */ | |
| border-radius: 4px; | |
| cursor: pointer; | |
| position: relative; | |
| background: #ffffff; | |
| } | |
| /* color input を完全に覆う */ | |
| .color-preview input[type="color"] { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0; /* 見えない */ | |
| cursor: pointer; | |
| } | |
| #textFgPreview { | |
| position: relative; | |
| width: 30px; | |
| height: 30px; | |
| } | |
| .subtitle-line { display: inline-block; margin: 2px; padding: 2px 6px; border-radius: 4px; text-shadow: 1px 1px 3px #000; transition: 0.3s; } | |
| #video-frame { width: 100%; height: 100%; border: none; } | |
| #history-list { list-style: none; padding: 0; margin: 0; } | |
| #history-list li { padding: 8px; border-bottom: 1px solid #eee; color: #333; } | |
| /* ダークモード */ | |
| body.dark-mode { background-color: #121212; color: #e0e0e0; } | |
| body.dark-mode .nav { background-color: #2c2c2c; } | |
| body.dark-mode .nav__item { border-bottom: 1px solid #444; } | |
| body.dark-mode .nav__item label { color: #ccc; } | |
| body.dark-mode input[type="text"], body.dark-mode select, body.dark-mode input[type="number"] { background-color: #333; color: #fff; border: 1px solid #555; } | |
| body.dark-mode .reset-btn { background-color: #444; color: #fff; border-color: #555; } | |
| body.dark-mode .reset-btn:hover { background-color: #555; } | |
| body.dark-mode #history-container { background-color: #1e1e1e; border-color: #333; } | |
| body.dark-mode #history-list li { border-bottom: 1px solid #333; color: #e0e0e0; } |