update functionality for watch later button on mobile
This commit is contained in:
parent
5c8139f326
commit
91f0ce637e
2 changed files with 19 additions and 3 deletions
|
@ -37,7 +37,7 @@ function FileWatchLaterLink(props: Props) {
|
|||
});
|
||||
}
|
||||
|
||||
// text that will show if you keep cursor over dic
|
||||
// text that will show if you keep cursor over button
|
||||
const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
|
||||
|
||||
// label that is shown after hover
|
||||
|
|
|
@ -605,8 +605,13 @@
|
|||
background-color: var(--color-black);
|
||||
padding: 0.3rem;
|
||||
border-radius: var(--border-radius);
|
||||
opacity: 0.7;
|
||||
z-index: 2;
|
||||
opacity: 0.7;
|
||||
|
||||
// show full opacity for touch devices
|
||||
@media (pointer: fine), (pointer: coarse) {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.file-properties {
|
||||
color: var(--color-white);
|
||||
|
@ -676,7 +681,17 @@
|
|||
|
||||
// div that displays watch later button
|
||||
.claim-preview__hover-actions {
|
||||
display: none;
|
||||
|
||||
// if the user is using a mouse
|
||||
@media (pointer: fine){
|
||||
display: none;
|
||||
}
|
||||
|
||||
// if the user doesn't have a pointer (mouse etc) hide watch later button
|
||||
@media (pointer: none), (pointer:coarse) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
float: right;
|
||||
top: var(--spacing-xxs);
|
||||
|
@ -700,6 +715,7 @@
|
|||
padding: var(--spacing-xxs) var(--spacing-xxs);
|
||||
height: unset;
|
||||
|
||||
// label (with 'Add' text) hidden by default
|
||||
.button__label {
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-small);
|
||||
|
|
Loading…
Reference in a new issue