seeseemelk/vivaplusdl
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance video thumbnail focus styles for improved accessibility and visual feedback

Browse Source
This commit is contained in:
Sebastiaan de Schaetzen
2025-06-17 14:36:03 +02:00
parent 111e0333f0
commit 1cfb023ff6
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
static/index.html
View File

@@ -48,11 +48,18 @@
.video-thumbnail { .video-thumbnail {
border-radius: 8px; border-radius: 8px;
transition: transform 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
background-color: #444; background-color: #444;
aspect-ratio: 16/9; aspect-ratio: 16/9;
object-fit: cover; 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 { .current-video {
@@ -165,12 +172,6 @@
box-shadow: 0 0 15px #3498db; /* A glow effect */ 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 { .nofocus:focus {
outline: none !important; /* Remove focus outline for elements with nofocus class */ outline: none !important; /* Remove focus outline for elements with nofocus class */
} }