mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-08-19 04:49:36 -07:00
Touch up current activity status bar hover effect
This commit is contained in:
parent
cf081ee291
commit
0620ebebcf
2 changed files with 29 additions and 17 deletions
|
@ -737,20 +737,20 @@ a:hover .dashboard-activity-poster {
|
||||||
transition: all 0s;
|
transition: all 0s;
|
||||||
}
|
}
|
||||||
.dashboard-activity-progress .bufferbar {
|
.dashboard-activity-progress .bufferbar {
|
||||||
padding-right: 2px;
|
padding-right: 3px;
|
||||||
font-size: x-small;
|
font-size: x-small;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-top: 6px;
|
color: rgba(255, 255, 255, 0);
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.dashboard-activity-progress .bar {
|
.dashboard-activity-progress .bar {
|
||||||
padding-right: 2px;
|
padding-right: 3px;
|
||||||
font-size: x-small;
|
font-size: x-small;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-top: 6px;
|
color: rgba(255, 255, 255, 0);
|
||||||
background-color: #faa732;
|
background-color: #faa732;
|
||||||
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
|
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
|
||||||
|
@ -763,29 +763,34 @@ a:hover .dashboard-activity-poster {
|
||||||
height: 6px;
|
height: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.dashboard-activity-progress:hover .bar {
|
.dashboard-instance.hover .dashboard-activity-progress-bar {
|
||||||
height: 14px;
|
|
||||||
padding-top: 0px;
|
|
||||||
transform-origin: top;
|
|
||||||
transition: all .2s ease;
|
|
||||||
border-radius: 0px 0px 3px 3px;
|
|
||||||
}
|
|
||||||
.dashboard-activity-progress:hover .dashboard-activity-progress-bar {
|
|
||||||
height: 14px;
|
height: 14px;
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
border-radius: 0px 0px 3px 3px;
|
border-radius: 0px 0px 3px 3px;
|
||||||
}
|
}
|
||||||
.dashboard-activity-progress:hover .bufferbar {
|
.dashboard-instance.hover .bar {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
padding-top: 0px;
|
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
border-radius: 0px 0px 3px 3px;
|
border-radius: 0px 0px 3px 3px;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
|
||||||
|
background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
|
||||||
|
background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
|
||||||
}
|
}
|
||||||
|
.dashboard-instance.hover .bufferbar {
|
||||||
.dashboard-activity-progress:hover+.dashboard-activity-metadata-wrapper {
|
height: 14px;
|
||||||
margin-top: 8px;
|
transform-origin: top;
|
||||||
|
transition: all .2s ease;
|
||||||
|
border-radius: 0px 0px 3px 3px;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
|
||||||
|
background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
|
||||||
|
background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
|
||||||
|
}
|
||||||
|
.dashboard-instance.hover .dashboard-activity-metadata-wrapper {
|
||||||
|
margin-top: 11px;
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
}
|
}
|
||||||
|
|
|
@ -280,6 +280,13 @@ DOCUMENTATION :: END
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$($(this).attr('data-target')).toggle();
|
$($(this).attr('data-target')).toggle();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add hover class to dashboard-instance
|
||||||
|
$('.dashboard-activity-poster').hover(function() {
|
||||||
|
$(this).closest('.dashboard-instance').addClass('hover');
|
||||||
|
}, function() {
|
||||||
|
$(this).closest('.dashboard-instance').removeClass('hover');
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
% else:
|
% else:
|
||||||
<div class="text-muted">Nothing is currently being watched.</div><br>
|
<div class="text-muted">Nothing is currently being watched.</div><br>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue