Browse Source
fix: tooltips can show if one button is focused & another is hovered
master
Failed to extract signature
2 changed files with
14 additions and
7 deletions
-
src/components/FlickerList.tsx
-
src/index.css
|
|
|
@ -42,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 |
|
|
|
@ -138,7 +138,14 @@ const FlickerList: React.FC<{ |
|
|
|
|
|
|
|
&:has(> li button:focus) li button:not(:focus), |
|
|
|
&:has(> li button:hover) li button:not(:hover) { |
|
|
|
opacity: 0.5 !important; |
|
|
|
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; |
|
|
|
} |
|
|
|
`}>
|
|
|
|
{[ |
|
|
|
|
|
|
|
@ -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); |
|
|
|
|
