fix: tooltips can show if one button is focused & another is hovered

src/components/Container.tsx

@@ -292,9 +292,15 @@ const Container: React.FC<{
 
 					${end ? "rotate: 180deg;" : ""}
 
-					&:hover * {
+					&:hover, &:focus {
+						/* disable some browser defaults */
+						-webkit-tap-highlight-color: transparent;
+						outline: none;
+						touch-action: manipulation;
+						* {
 							fill: var(--primary-colour);
 						}
+					}
 				`}>
 				<Right
 					className={css`

src/components/FlickerList.tsx

@@ -2,21 +2,32 @@ import React from "react";
 import { css, cx } from "@emotion/css";
 import { intersperse, sleep } from "../util";
 
+// && is used to increase specificity to override global styles
+
+// prettier-ignore
+const opaque = css`&& { opacity: 1 }`;
+
+// prettier-ignore
+const halfVisible = css`&&& {opacity: 0.5}`;
+
+// prettier-ignore
+const opacities = [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45].map(each => css`&&& { opacity: ${0.5 + each} }`);
+
 const tripleBlink = async (el: HTMLElement) => {
 	const delay = 150;
 
 	await sleep(1000);
-	el.style.opacity = "0.5";
+	el.classList.add(halfVisible);
 	await sleep(delay);
-	el.style.opacity = "1";
+	el.classList.remove(halfVisible);
 	await sleep(delay);
-	el.style.opacity = "0.5";
+	el.classList.add(halfVisible);
 	await sleep(delay);
-	el.style.opacity = "1";
+	el.classList.remove(halfVisible);
 	await sleep(delay);
-	el.style.opacity = "0.5";
+	el.classList.add(halfVisible);
 	await sleep(delay * 2);
-	el.style.opacity = "1";
+	el.classList.remove(halfVisible);
 };
 
 const Flicker: React.FC<{
@@ -31,14 +42,14 @@ const Flicker: React.FC<{
 			className={css`
 				position: relative;
 
-				& button:focus ~ .tooltip,
-				& button:hover ~ .tooltip {
+				&&& button:focus ~ .tooltip,
+				&&& button:hover ~ .tooltip {
 					opacity: 1;
 				}
 
-				& button:focus,
-				& button:hover {
-					opacity: 1 !important;
+				&&& button:focus,
+				&&& button:hover {
+					opacity: 1;
 				}
 			`}>
 			<button
@@ -56,15 +67,18 @@ const Flicker: React.FC<{
 
 					await sleep(500);
 					await sleep(300 * index);
-					el.style.opacity = "1";
+					el.classList.add(opaque);
 
 					await sleep(1000 + Math.random() * 1000);
 					tripleBlink(el);
 
 					while (true) {
 						await sleep(5000 + Math.random() * 10000);
-						el.style.opacity = String(0.5 + Math.random() * 0.5);
+						const chosen =
+							opacities[Math.floor(Math.random() * opacities.length)];
+						el.classList.add(chosen);
 						await sleep(2000);
+						el.classList.remove(chosen);
 						tripleBlink(el);
 					}
 				}}>
@@ -122,10 +136,16 @@ const FlickerList: React.FC<{
 				padding: 0;
 				list-style: none;
 
-				&:has(> li > span > button:focus) li > span > button:not(:focus),
-				&:has(> li > span > button:hover) li > span > button:not(:hover)
-					/*  */ {
-					opacity: 0.5 !important;
+				&:has(> li button:focus) li button:not(:focus),
+				&:has(> li button:hover) li button:not(:hover) {
+					opacity: 0.5;
+				}
+
+				/* any button that has a subsequent button focused, hide its tooltip */
+				&&&& li:has(~ li button:focus) .tooltip,
+				/* any button that has a previous button focused, hide its tooltip */
+				&&&& li:has(button:focus) ~ li .tooltip {
+					opacity: 0;
 				}
 			`}>
 			{[

src/index.css

@@ -4,7 +4,7 @@
 	--card-tags: rgb(34, 34, 34);
 	--card-tags-hover: rgb(25, 25, 25);
 	--primary-colour: rgb(255, 85, 85);
-	--text-colour: rgb(211, 207, 201);
+	--text-colour: rgb(210, 210, 210);
 	--text-subdued: rgb(150, 150, 150);
 	--card-active: rgb(45, 45, 45);
 	--card-active-border: rgb(60, 60, 60);