From 1cfb023ff6f7ac7ef5fc2e5cef1418bcd7897d5a Mon Sep 17 00:00:00 2001 From: Sebastiaan de Schaetzen Date: Tue, 17 Jun 2025 14:36:03 +0200 Subject: [PATCH] Enhance video thumbnail focus styles for improved accessibility and visual feedback --- static/index.html | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/static/index.html b/static/index.html index 193e38a..96dc821 100644 --- a/static/index.html +++ b/static/index.html @@ -48,11 +48,18 @@ .video-thumbnail { border-radius: 8px; - transition: transform 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); background-color: #444; aspect-ratio: 16/9; object-fit: cover; + transition: transform 0.3s ease, box-shadow 0.3s ease; + } + + .video-thumbnail:focus { + outline: 3px solid #557; /* Existing focus outline */ + box-shadow: 0 0 400px -10px #446; /* Existing focus shadow */ + transform: scale(1.05); + z-index: 3; /* Ensure focused thumbnail is on top */ } .current-video { @@ -165,12 +172,6 @@ box-shadow: 0 0 15px #3498db; /* A glow effect */ } - .video-thumbnail:focus { - /*outline: 3px solid #444;*/ - outline: 3px solid #557; /* Remove focus outline for elements with nofocus class */ - box-shadow: 0 0 400px -10px #446 - } - .nofocus:focus { outline: none !important; /* Remove focus outline for elements with nofocus class */ }