| * { |
| box-sizing: border-box; |
| } |
|
|
| :root { |
| --nav-height: 66px; |
| --body-bg: #101010; |
| --panel-bg: #181818; |
| --panel-bg-2: #141414; |
| --panel-border: #2a2a2a; |
| --accent: #74c7ff; |
| --divider: #3a3a3a; |
| --divider-hover: #74c7ff; |
| --script-width: 28%; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| background: var(--body-bg); |
| color: #ffffff; |
| font-family: Arial, Helvetica, sans-serif; |
| } |
|
|
| body.dragging { |
| cursor: col-resize; |
| user-select: none; |
| } |
|
|
| #workspace { |
| width: 100vw; |
| height: calc(100dvh - var(--nav-height)); |
| display: flex; |
| flex-direction: row; |
| overflow: hidden; |
| background: var(--body-bg); |
| } |
|
|
| .pane { |
| min-height: 0; |
| overflow: hidden; |
| } |
|
|
| .slide-pane { |
| flex: 1 1 auto; |
| min-width: 360px; |
| height: 100%; |
| min-height: 0; |
| padding: 8px 6px 8px 10px; |
| display: flex; |
| flex-direction: column; |
| background: var(--body-bg); |
| overflow: hidden; |
| } |
|
|
| .script-pane { |
| flex: 0 0 var(--script-width); |
| min-width: 270px; |
| max-width: 58vw; |
| height: 100%; |
| min-height: 0; |
| padding: 8px 10px 8px 6px; |
| background: var(--body-bg); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| #resizer { |
| flex: 0 0 8px; |
| width: 8px; |
| height: 100%; |
| cursor: col-resize; |
| background: var(--divider); |
| border-left: 1px solid #202020; |
| border-right: 1px solid #202020; |
| transition: background 0.12s ease; |
| } |
|
|
| #resizer:hover, |
| body.dragging #resizer { |
| background: var(--divider-hover); |
| } |
|
|
| .pane-header { |
| flex: 0 0 auto; |
| min-height: 24px; |
| padding: 0 2px 5px 2px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| color: #b8dfff; |
| font-size: 12px; |
| line-height: 1.25; |
| } |
|
|
| #status { |
| text-align: right; |
| color: #8fd3ff; |
| white-space: nowrap; |
| } |
|
|
| .slide-frame { |
| position: relative; |
| flex: 1 1 0; |
| min-height: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: var(--panel-bg); |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
| overflow: hidden; |
| } |
|
|
| #slideImage { |
| display: block; |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| } |
|
|
| .image-fallback { |
| position: absolute; |
| inset: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #ffb4b4; |
| font-size: 15px; |
| } |
|
|
| .script-inner { |
| width: 100%; |
| height: 100%; |
| min-height: 0; |
| max-height: 100%; |
| padding: 14px; |
| background: var(--panel-bg); |
| border: 1px solid var(--panel-border); |
| border-radius: 10px; |
|
|
| display: grid; |
| grid-template-rows: auto minmax(0, 1fr); |
|
|
| overflow: hidden; |
| } |
|
|
| .slide-title { |
| flex: 0 0 auto; |
| margin: 0 0 9px 0; |
| color: var(--accent); |
| font-size: clamp(12px, 1vw, 14px); |
| line-height: 1.35; |
| font-weight: 400; |
| } |
|
|
| .slide-script { |
| min-height: 0; |
| height: 100%; |
| margin: 0; |
| color: #eeeeee; |
| font-size: clamp(13px, 1.05vw, 15px); |
| line-height: 1.55; |
| font-weight: 400; |
| white-space: pre-wrap; |
|
|
| overflow-y: auto; |
| overflow-x: hidden; |
|
|
| overscroll-behavior: contain; |
| -webkit-overflow-scrolling: touch; |
|
|
| padding-right: 8px; |
| } |
| .slide-script::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| .slide-script::-webkit-scrollbar-track { |
| background: #1b1b1b; |
| } |
|
|
| .slide-script::-webkit-scrollbar-thumb { |
| background: #666; |
| border-radius: 4px; |
| } |
|
|
| .slide-script::-webkit-scrollbar-thumb:hover { |
| background: #888; |
| } |
|
|
| .bottom-nav { |
| position: fixed; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| height: var(--nav-height); |
| padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) 8px; |
| display: grid; |
| grid-template-columns: 1fr 1fr 1fr 1fr; |
| gap: 7px; |
| background: #1d1d1d; |
| border-top: 1px solid #333333; |
| z-index: 1000; |
| } |
|
|
| .nav-btn { |
| width: 100%; |
| min-width: 0; |
| border: none; |
| border-radius: 9px; |
| padding: 8px 5px; |
| background: #efefef; |
| color: #111111; |
| font-size: 13px; |
| line-height: 1.15; |
| cursor: pointer; |
| } |
|
|
| .nav-btn.primary { |
| background: var(--accent); |
| color: #06121a; |
| } |
|
|
| .nav-btn:disabled { |
| opacity: 0.45; |
| cursor: not-allowed; |
| } |
|
|
| @media (min-width: 1200px) { |
| :root { |
| --script-width: 30%; |
| } |
|
|
| .slide-script { |
| font-size: clamp(13px, 0.95vw, 15px); |
| line-height: 1.5; |
| } |
| } |
|
|
| @media (min-width: 1600px) { |
| :root { |
| --script-width: 28%; |
| } |
|
|
| .slide-script { |
| font-size: 15px; |
| line-height: 1.5; |
| } |
| } |
|
|
| @media (max-width: 900px) { |
| :root { |
| --nav-height: 64px; |
| } |
|
|
| body.dragging { |
| cursor: default; |
| } |
|
|
| #workspace { |
| flex-direction: column; |
| } |
|
|
| .slide-pane { |
| order: 1; |
| width: 100% !important; |
| flex: 1 1 0; |
| min-width: 0; |
| height: auto; |
| min-height: 0; |
| padding: 6px 6px 4px 6px; |
| overflow: hidden; |
| } |
|
|
| #resizer { |
| display: none; |
| } |
|
|
| .script-pane { |
| order: 2; |
| width: 100% !important; |
| flex: 0 0 clamp(120px, 30dvh, 210px); |
| min-width: 0; |
| max-width: none; |
| height: auto; |
| min-height: 0; |
| padding: 4px 6px 6px 6px; |
| overflow: hidden; |
| } |
|
|
| .script-inner { |
| height: 100%; |
| min-height: 0; |
| max-height: 100%; |
| padding: 8px 10px; |
| border-radius: 8px; |
| overflow: hidden; |
| } |
|
|
| .slide-frame { |
| flex: 1 1 0; |
| min-height: 0; |
| border-radius: 8px; |
| } |
|
|
| .slide-title { |
| font-size: 12px; |
| margin-bottom: 5px; |
| } |
|
|
| .slide-script { |
| min-height: 0; |
| height: 100%; |
| font-size: 14px; |
| line-height: 1.42; |
| |
| overflow-y: auto; |
| overflow-x: hidden; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| .bottom-nav { |
| gap: 5px; |
| padding-left: 6px; |
| padding-right: 6px; |
| } |
|
|
| .nav-btn { |
| font-size: 12px; |
| padding: 8px 4px; |
| } |
| } |
|
|
| @media (orientation: landscape) and (max-height: 520px) { |
| :root { |
| --nav-height: 54px; |
| } |
|
|
| .pane-header { |
| min-height: 20px; |
| font-size: 11px; |
| padding-bottom: 3px; |
| } |
|
|
| .script-pane { |
| flex-basis: clamp(82px, 32dvh, 120px); |
| padding: 3px 6px 5px 6px; |
| overflow: hidden; |
| } |
|
|
| .script-inner { |
| height: 100%; |
| min-height: 0; |
| max-height: 100%; |
| padding: 5px 8px; |
| overflow: hidden; |
| } |
|
|
| .slide-title { |
| font-size: 11px; |
| margin-bottom: 2px; |
| } |
|
|
| .slide-script { |
| min-height: 0; |
| height: 100%; |
| font-size: 12px; |
| line-height: 1.32; |
| overflow-y: auto; |
| overflow-x: hidden; |
| } |
|
|
| .bottom-nav { |
| height: var(--nav-height); |
| padding-top: 5px; |
| padding-bottom: calc(5px + env(safe-area-inset-bottom)); |
| } |
| } |
