LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix hover bug on iPad requiring double click (1545)

Browse source
This commit is contained in:
Anthony 2022-05-25 09:21:12 +08:00 committed by infinite-persistence
commit 58270ab758
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 55 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
ui/scss/component/_claim-list.scss
View file

@ -250,9 +250,11 @@
}
}
&:hover {
.claim__menu-button {
opacity: 1;
@media (any-pointer: fine) {
&:hover {
.claim__menu-button {
opacity: 1;
}
}
}
@ -410,31 +412,34 @@
@include handleChannelGif(6rem);
}
// show watch later button and duration divs when hovered
&:hover {
.media__thumb {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
}
.claim-preview__title {
color: var(--color-link);
}
.claim-preview__hover-actions {
display: block;
}
.claim-preview__file-property-overlay {
opacity: 1;
}
.button--file-action {
.icon {
stroke: #f3f4f6;
// any-pointer media query prevents double click hover bug on ipad
@media (any-pointer: fine) {
// show watch later button and duration divs when hovered
&:hover {
.media__thumb {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
}
.claim-preview__title {
color: var(--color-link);
}
.claim-preview__hover-actions {
display: block;
}
.claim-preview__file-property-overlay {
opacity: 1;
}
.button--file-action {
.icon {
stroke: #f3f4f6;
}
}
.ff-canvas {
opacity: 0 !important;
transition: opacity 1s !important;
}
.ff-image {
opacity: 1 !important;
}
}
.ff-canvas {
opacity: 0 !important;
transition: opacity 1s !important;
}
.ff-image {
opacity: 1 !important;
}
}
@ -970,24 +975,26 @@
}
}
&:hover {
cursor: pointer;
@media (any-pointer: fine) {
&:hover {
cursor: pointer;
.media__thumb {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
background-size: 108%;
}
.media__thumb {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
background-size: 108%;
}
.claim-tile__title {
color: var(--color-link);
}
.claim-tile__title {
color: var(--color-link);
}
.claim__menu-button {
opacity: 1;
}
.collection-preview__overlay-thumbs {
opacity: 1;
transition: 0.3s;
.claim__menu-button {
opacity: 1;
}
.collection-preview__overlay-thumbs {
opacity: 1;
transition: 0.3s;
}
}
}
@ -1476,10 +1483,12 @@ $claim-preview-progress-bar-height: 5px;
}
@media (min-width: $breakpoint-small) {
.claim-preview--tile:not(:hover),
.claim-preview__wrapper:not(:hover) {
.claim__menu-button:not(:focus):not([aria-expanded='true']) {
opacity: 0;
@media (any-pointer: fine) {
.claim-preview--tile:not(:hover),
.claim-preview__wrapper:not(:hover) {
.claim__menu-button:not(:focus):not([aria-expanded='true']) {
opacity: 0;
}
}
}
}