Skip to content

Commit

Permalink
Ensure video list buttons always show on devices without hover (e.g.,…
Browse files Browse the repository at this point in the history
… mobile)
  • Loading branch information
kommunarr committed Aug 27, 2023
1 parent dfaf498 commit ec538dd
Showing 1 changed file with 32 additions and 18 deletions.
50 changes: 32 additions & 18 deletions src/renderer/scss-partials/_ft-list-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,24 +71,6 @@ $watched-transition-duration: 0.5s;
}
}

&:hover .favoritesIcon,
&:hover .externalPlayerIcon,
&:hover .optionsButton,
&:focus-within .favoritesIcon,
&:focus-within .externalPlayerIcon,
&:focus-within .optionsButton {
visibility: visible;
opacity: 1;
}

.favoritesIcon,
.externalPlayerIcon,
.optionsButton {
visibility: none;
opacity: 0;
transition: visibility 0s, opacity 0.2s linear;
}

.videoThumbnail {
display: grid;

Expand Down Expand Up @@ -316,12 +298,44 @@ $watched-transition-duration: 0.5s;
margin-top: 8px;
}
}

.favoritesIcon,
.externalPlayerIcon {
opacity: $thumbnail-overlay-opacity;
}

@media (hover: hover) {
&:hover .favoritesIcon,
&:hover .externalPlayerIcon,
&:focus-within .favoritesIcon,
&:focus-within .externalPlayerIcon,
&:focus-within .optionsButton {
visibility: visible;
opacity: $thumbnail-overlay-opacity;
}

&:hover .optionsButton,
&:focus-within .optionsButton {
visibility: visible;
opacity: 1;
}

.favoritesIcon,
.externalPlayerIcon,
.optionsButton {
visibility: none;
opacity: 0;
transition: visibility 0s, opacity 0.2s linear;
}
}
}

.videoWatched,
.live,
.upcoming {
text-transform: uppercase;
user-select: none;
-webkit-user-select: none;
}

// we use h3 for semantic reasons but don't want to keep the h3 style
Expand Down

0 comments on commit ec538dd

Please sign in to comment.