From 036bbdb7ff48d23233ce16ba64cff58a0cbf8116 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Thu, 5 Jan 2023 07:35:32 +0530 Subject: [PATCH] E-book viewer: When Read aloud is speaking, make the control bar translucent so that words under the bar are visible --- src/pyj/read_book/read_aloud.pyj | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pyj/read_book/read_aloud.pyj b/src/pyj/read_book/read_aloud.pyj index 37fbe7d341..6c5ede5a41 100644 --- a/src/pyj/read_book/read_aloud.pyj +++ b/src/pyj/read_book/read_aloud.pyj @@ -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")