LeoVasanko/mediahive
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Refine input modality to prevent hover/focus highlight conflicts

Browse Source
This commit is contained in:
LeoVasanko committed 2026-05-23 18:58:53 +00:00
1 parent 075f6a50cc
commit 0f404e5e53
8 files changed
+187 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/CollageHero.vue
+9 -9
View File
@@ -605,8 +605,8 @@ function handleItemClick(item: MediaItem, index: number) {
pointer-events: none;
}
.collage-item:hover,
.collage-item.nav-focused {
:global(html[data-mouse-active="true"]) .collage-item:hover,
:global(html[data-mouse-active="false"]) .collage-item.nav-focused {
z-index: 10;
}
@@ -630,8 +630,8 @@ function handleItemClick(item: MediaItem, index: number) {
}
/* Show outline on hover and focus */
.collage-item:hover .hex-focus-outline,
.collage-item.nav-focused .hex-focus-outline {
:global(html[data-mouse-active="true"]) .collage-item:hover .hex-focus-outline,
:global(html[data-mouse-active="false"]) .collage-item.nav-focused .hex-focus-outline {
opacity: 1;
}
@@ -646,15 +646,15 @@ function handleItemClick(item: MediaItem, index: number) {
}
/* Brighter outline for keyboard focus */
.collage-item.nav-focused .hex-focus-outline polygon {
:global(html[data-mouse-active="false"]) .collage-item.nav-focused .hex-focus-outline polygon {
stroke: #ffffff;
stroke-width: 5;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
/* Blinking effect on hover/focus */
.collage-item:hover .hex-focus-outline,
.collage-item.nav-focused .hex-focus-outline {
:global(html[data-mouse-active="true"]) .collage-item:hover .hex-focus-outline,
:global(html[data-mouse-active="false"]) .collage-item.nav-focused .hex-focus-outline {
animation: hex-outline-blink 1s ease-in-out infinite;
}
@@ -1035,8 +1035,8 @@ function handleItemClick(item: MediaItem, index: number) {
white-space: nowrap;
}
.collage-item:not(.collage-featured):hover .collage-item-hover,
.collage-item:not(.collage-featured).nav-focused .collage-item-hover {
:global(html[data-mouse-active="true"]) .collage-item:not(.collage-featured):hover .collage-item-hover,
:global(html[data-mouse-active="false"]) .collage-item:not(.collage-featured).nav-focused .collage-item-hover {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
frontend/src/components/MediaCard.vue
+3 -3
View File
@@ -211,13 +211,13 @@ const matchedPeople = computed(() => {
object-fit: cover;
}
.media-card:hover .card-focus-outline,
.media-card.nav-focused .card-focus-outline {
:global(html[data-mouse-active="true"]) .media-card:hover .card-focus-outline,
:global(html[data-mouse-active="false"]) .media-card.nav-focused .card-focus-outline {
opacity: 1;
animation: card-outline-blink 1s ease-in-out infinite;
}
.media-card.nav-focused .card-focus-outline rect {
:global(html[data-mouse-active="false"]) .media-card.nav-focused .card-focus-outline rect {
stroke: #ffffff;
stroke-width: 5;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
frontend/src/components/MediaDetail.vue
+6 -6
View File
@@ -813,12 +813,12 @@ function handleCastSelect(castName: string) {
}
.cast-card:focus-visible,
.cast-card.nav-focused {
:global(html[data-mouse-active="false"]) .cast-card.nav-focused {
outline: none;
}
.cast-card:focus-visible::after,
.cast-card.nav-focused::after {
:global(html[data-mouse-active="false"]) .cast-card.nav-focused::after {
border-width: 2px;
}
@@ -943,7 +943,7 @@ function handleCastSelect(castName: string) {
cursor: pointer;
}
.showreel-image:hover {
:global(html[data-mouse-active="true"]) .showreel-image:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
@@ -978,7 +978,7 @@ function handleCastSelect(castName: string) {
transition: background 0.2s, border-color 0.2s;
}
.version-item:hover {
:global(html[data-mouse-active="true"]) .version-item:hover {
background: rgba(255, 255, 255, 0.08);
}
@@ -1176,7 +1176,7 @@ function handleCastSelect(castName: string) {
overflow: hidden;
}
.episode-item:hover {
:global(html[data-mouse-active="true"]) .episode-item:hover {
background: rgba(255, 255, 255, 0.08);
}
@@ -1291,7 +1291,7 @@ function handleCastSelect(castName: string) {
border: 1px solid transparent;
}
.release-item:hover {
:global(html[data-mouse-active="true"]) .release-item:hover {
background: rgba(255, 255, 255, 0.06);
}
frontend/src/components/ReleaseVersionCard.vue
+4 -4
View File
@@ -312,7 +312,7 @@ function handleActivate(event: MouseEvent | KeyboardEvent) {
grid-template-columns: minmax(0, 1fr) max-content max-content;
}
.version-row:hover {
:global(html[data-mouse-active="true"]) .version-row:hover {
background: rgba(10, 14, 22, 0.28);
border-color: rgba(255, 255, 255, 0.2);
}
@@ -322,7 +322,7 @@ function handleActivate(event: MouseEvent | KeyboardEvent) {
background: rgba(10, 14, 22, 0.2);
}
.version-row.version-best:hover {
:global(html[data-mouse-active="true"]) .version-row.version-best:hover {
background: rgba(10, 14, 22, 0.28);
border-color: rgba(255, 255, 255, 0.2);
}
@@ -533,8 +533,8 @@ function handleActivate(event: MouseEvent | KeyboardEvent) {
cursor: pointer;
}
.ctx-btn:hover:not(:disabled),
.ctx-btn.nav-focused:not(:disabled),
:global(html[data-mouse-active="true"]) .ctx-btn:hover:not(:disabled),
:global(html[data-mouse-active="false"]) .ctx-btn.nav-focused:not(:disabled),
.ctx-btn:focus-visible:not(:disabled) {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.35);
frontend/src/components/SeriesFullView.vue
+8 -8
View File
@@ -806,8 +806,8 @@ onUnmounted(() => {
outline: none;
}
.episode-tile:hover,
.episode-tile.nav-focused {
:global(html[data-mouse-active="true"]) .episode-tile:hover,
:global(html[data-mouse-active="false"]) .episode-tile.nav-focused {
z-index: 20;
transition: z-index 0s;
}
@@ -850,14 +850,14 @@ onUnmounted(() => {
}
/* Show outline on hover and focus */
.episode-tile:hover .tile-focus-outline,
.episode-tile.nav-focused .tile-focus-outline {
:global(html[data-mouse-active="true"]) .episode-tile:hover .tile-focus-outline,
:global(html[data-mouse-active="false"]) .episode-tile.nav-focused .tile-focus-outline {
opacity: 1;
animation: tile-outline-blink 1s ease-in-out infinite;
}
/* Brighter outline for keyboard focus */
.episode-tile.nav-focused .tile-focus-outline rect {
:global(html[data-mouse-active="false"]) .episode-tile.nav-focused .tile-focus-outline rect {
stroke: #ffffff;
stroke-width: 5;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
@@ -884,7 +884,7 @@ onUnmounted(() => {
display: none;
}
.episode-tile:hover .tile-overlay {
:global(html[data-mouse-active="true"]) .episode-tile:hover .tile-overlay {
opacity: 0.4;
}
@@ -945,7 +945,7 @@ onUnmounted(() => {
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}
.episode-tile:hover .tile-play {
:global(html[data-mouse-active="true"]) .episode-tile:hover .tile-play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
@@ -1081,7 +1081,7 @@ onUnmounted(() => {
cursor: pointer;
}
.version-action-item:hover:not(:disabled),
:global(html[data-mouse-active="true"]) .version-action-item:hover:not(:disabled),
.version-action-item:focus-visible:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
outline: none;