Playback history
This commit is contained in:
James Barnsley
@ -1,154 +1,164 @@
|
||||
|
||||
.list-item {
|
||||
.list-wrapper {
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
.list-item {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 9px 10px 9px 20px;
|
||||
border-top: 1px solid $faint_grey;
|
||||
border-bottom: 1px solid $faint_grey;
|
||||
margin-bottom: -1px;
|
||||
@include clearfix;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
.source {
|
||||
color: $mid_grey;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $yellow !important;
|
||||
}
|
||||
|
||||
&:not(.header):hover {
|
||||
background: $faint_grey;
|
||||
cursor: pointer;
|
||||
border-color: $faint_grey;
|
||||
}
|
||||
|
||||
&.header {
|
||||
font-size: 10px;
|
||||
color: #CCCCCC;
|
||||
text-transform: uppercase;
|
||||
border-top: 0;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
&.track {
|
||||
padding-left: 40px;
|
||||
|
||||
.col {
|
||||
&.name { width: 40%; }
|
||||
&.artists,
|
||||
&.album { width: 26%; }
|
||||
}
|
||||
|
||||
.select-state {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.play-state {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&.playing {
|
||||
font-weight: 600;
|
||||
.play-state {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.playing.selected {
|
||||
.play-state {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:root .dragging &:hover {
|
||||
border-top: 3px solid $blue;
|
||||
margin-top: -3px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
padding: 7px 10px 7px 20px;
|
||||
|
||||
.col {
|
||||
&.name { width: 50%; }
|
||||
&.artists { width: 50%; }
|
||||
&.album { width: 50%; padding-left: 50%; color: $mid_grey; }
|
||||
&.duration { display: none; }
|
||||
}
|
||||
|
||||
&.header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-state,
|
||||
.play-state {
|
||||
top: 11px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
&.playlist {
|
||||
|
||||
.col {
|
||||
&.name {
|
||||
width: 30%;
|
||||
}
|
||||
&.owner {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.artist-list {
|
||||
.artist {
|
||||
display: block;
|
||||
border: 0;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
padding: 9px 10px 9px 20px;
|
||||
border-top: 1px solid $faint_grey;
|
||||
border-bottom: 1px solid $faint_grey;
|
||||
margin-bottom: -1px;
|
||||
@include clearfix;
|
||||
|
||||
.thumbnail {
|
||||
@include animate();
|
||||
width: 50px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
border: 3px solid transparent;
|
||||
.source {
|
||||
color: $mid_grey;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
padding-top: 20px;
|
||||
&.selected {
|
||||
background: $yellow !important;
|
||||
}
|
||||
|
||||
&:not(.header):hover {
|
||||
background: $faint_grey;
|
||||
cursor: pointer;
|
||||
border-color: $faint_grey;
|
||||
}
|
||||
|
||||
&.header {
|
||||
font-size: 10px;
|
||||
color: #CCCCCC;
|
||||
text-transform: uppercase;
|
||||
border-top: 0;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
&.track {
|
||||
padding-left: 40px;
|
||||
|
||||
.col {
|
||||
&.name { width: 40%; }
|
||||
&.artists,
|
||||
&.album { width: 26%; }
|
||||
}
|
||||
|
||||
.select-state {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.play-state {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&.playing {
|
||||
font-weight: 600;
|
||||
.play-state {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.playing.selected {
|
||||
.play-state {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:root .dragging &:hover {
|
||||
border-top: 3px solid $blue;
|
||||
margin-top: -3px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@include responsive( $bp_medium ){
|
||||
padding: 7px 10px 7px 20px;
|
||||
|
||||
.col {
|
||||
&.name { width: 50%; }
|
||||
&.artists { width: 50%; }
|
||||
&.album { width: 50%; padding-left: 50%; color: $mid_grey; }
|
||||
&.duration { display: none; }
|
||||
}
|
||||
|
||||
&.header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-state,
|
||||
.play-state {
|
||||
top: 11px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
&.playlist {
|
||||
|
||||
.col {
|
||||
&.name {
|
||||
width: 30%;
|
||||
}
|
||||
&.owner {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.artist:hover {
|
||||
.thumbnail {
|
||||
border-color: $turquoise;
|
||||
opacity: 0.8;
|
||||
.artist-list {
|
||||
.artist {
|
||||
display: block;
|
||||
border: 0;
|
||||
margin-bottom: 5px;
|
||||
@include clearfix;
|
||||
|
||||
.thumbnail {
|
||||
@include animate();
|
||||
width: 50px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
a.artist:hover {
|
||||
.thumbnail {
|
||||
border-color: $turquoise;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history.track-list {
|
||||
.list-item {
|
||||
.col{
|
||||
&.name { width: 60%; }
|
||||
&.played_at { width: 20%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user