josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add transparent OBS lyrics output through presenter pairing

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-03 14:58:20 +08:00
parent 05e05ebace
commit 7d84fdb3dc
7 changed files with 53 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/lower-third.css Normal file
View File

@@ -0,0 +1,10 @@
html.obs-overlay, .obs-overlay body, .obs-overlay #presenterView { background: transparent !important; }
.obs-overlay body > *:not(#presenterView):not(#obsLowerThird) { display: none !important; }
.obs-overlay #presenterView { pointer-events: none; }
.obs-overlay #presenterView > * { visibility: hidden; }
#obsLowerThird { position: fixed; inset: auto 6vw 7vh; z-index: 10000; text-align: center; color: white; font-family: system-ui, sans-serif; font-weight: 650; font-size: clamp(24px, 3.4vw, 70px); line-height: 1.15; text-shadow: 0 2px 4px #000, 0 0 14px #000, 0 0 3px #000; pointer-events: none; }
.obs-line { white-space: pre-line; animation: obs-cue-in 220ms ease-out; }
.obs-next { font-size: .7em; opacity: .8; margin-top: .3em; }
.obs-line small { display: block; font-size: .65em; opacity: .8; margin-top: .15em; }
@keyframes obs-cue-in { from { opacity: 0; transform: translateY(12px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .obs-line { animation: none; } }