simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Contextually highlight related caption when hovering over image

Browse source 
For multiple-media figures
This commit is contained in:
Lim Chee Aun 2023-10-15 08:59:54 +08:00
parent f9299ac15c
commit e1ae89b00e
2 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/status.css
View file

@ -1027,6 +1027,22 @@ body:has(#modal-container .carousel) .status .media img:hover {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
} }
/* Only 4, for now. Would be better if this is a for loop */
&:has(.media[data-has-alt]:nth-child(1):is(:hover, :focus))
figcaption
> div[data-caption-index='1'],
&:has(.media[data-has-alt]:nth-child(2):is(:hover, :focus))
figcaption
> div[data-caption-index='2'],
&:has(.media[data-has-alt]:nth-child(3):is(:hover, :focus))
figcaption
> div[data-caption-index='3'],
&:has(.media[data-has-alt]:nth-child(4):is(:hover, :focus))
figcaption
> div[data-caption-index='4'] {
color: var(--text-color);
}
} }
.carousel-item { .carousel-item {

1
src/components/status.jsx
View file

@ -1283,6 +1283,7 @@ function Status({
!!media.description && ( !!media.description && (
<div <div
key={media.id} key={media.id}
data-caption-index={i + 1}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();