E-book viewer: When Read aloud is speaking, make the control bar translucent so that words under the bar are visible

This commit is contained in:
Kovid Goyal 2023-01-05 07:35:32 +05:30
parent 89a5f2ffc4
commit 036bbdb7ff
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C

View File

@ -44,6 +44,10 @@ class ReadAloud:
style='border: solid 1px currentColor; border-radius: 5px;'
'display: flex; flex-direction: column; margin: 1rem;'
))
container.appendChild(E.style(
f'#{self.bar_id}.speaking '+'{ opacity: 0.5 }\n\n',
f'#{self.bar_id}.speaking:hover '+'{ opacity: 1.0 }\n\n',
))
container.addEventListener('keydown', self.on_keydown, {'passive': False})
container.addEventListener('click', self.container_clicked, {'passive': False})
container.addEventListener('contextmenu', self.toggle, {'passive': False})
@ -99,6 +103,10 @@ class ReadAloud:
return
self.container.style.alignItems = 'flex-end' if is_flow_mode() else 'flex-start'
bar_container = self.bar
if self.state is PLAYING:
bar_container.classList.add('speaking')
else:
bar_container.classList.remove('speaking')
clear(bar_container)
bar_container.style.maxWidth = 'min(40rem, 80vw)' if self.supports_css_min_max else '40rem'
bar_container.style.backgroundColor = get_color("window-background")