Refine input modality to prevent hover/focus highlight conflicts

This commit is contained in:
2026-05-23 18:58:53 +00:00
parent 075f6a50cc
commit 0f404e5e53
8 changed files with 187 additions and 44 deletions
+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));