From 42d48083ff046a861c8bd84a2ee2b40e76d5ca54 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Wed, 22 Nov 2023 16:47:17 +0100
Subject: [PATCH] Add hover glow to buttons in portrait example

---
 docs/examples/portrait.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/examples/portrait.css b/docs/examples/portrait.css
index 2553b2ac..7471865e 100644
--- a/docs/examples/portrait.css
+++ b/docs/examples/portrait.css
@@ -69,6 +69,13 @@ theoplayer-time-range {
     --theoplayer-range-padding: 5px;
 }
 
+/**
+ * Our custom buttons use an icon font, so apply a text shadow (instead of an SVG filter) for their hover glow.
+ */
+theoplayer-button:hover {
+    text-shadow: var(--theoplayer-button-hover-icon-shadow, 0 0 4px rgba(255, 255, 255, 0.5));
+}
+
 /*
  * Hide all controls before first play, except for the center play button
  */