app/assets/stylesheets/components/_songlist.scss
.page-header {
overflow: hidden;
padding:15px 20px;
position:relative;
.info {
float:left;
}
.meta {
font-size:13px;
}
}
.grid-container {
background:#f1f1f1;
position:relative;
width:100%;
}
/* slickgrid */
#slickgrid {
background:#fff;
color:#222;
font-size:12px;
height:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:2px;
width:100%;
}
#slickgrid .slick-header {
background:#fafafa;
background: -webkit-linear-gradient(top, #fff, #fff 50%, #eee);
background: -moz-linear-gradient(top, #fff, #fff 50%, #eee);
background: -o-linear-gradient(top, #fff, #fff 50%, #eee);
background: -ms-linear-gradient(top, #fff, #fff 50%, #eee);
background:linear-gradient(top, #fff, #fff 50%, #eee);
border-top:1px solid #d1d1d1;
border-bottom:1px solid #bbb;
font-weight:700;
overflow:visible !important;
z-index:2;
-webkit-box-shadow:0 2px 2px rgba(0,0,0, 0.08);
-moz-box-shadow:0 2px 2px rgba(0,0,0, 0.08);
box-shadow:0 2px 2px rgba(0,0,0, 0.08);
}
#slickgrid .slick-header-column {
padding-left:10px;
}
.slick-header:before, .slick-header:after {
content:'';
display:table;
}
.slick-header:after {
clear:both;
}
#slickgrid .slick-row {
line-height:22px;
z-index:1;
}
#slickgrid .slick-cell {
border:0;
padding-left:10px;
}
#slickgrid .slick-cell.l0 {
padding-left:5px;
}
#slickgrid .selected {
background:$color-blue;
color:#fff;
}
#slickgrid .playing {
background-image:url('/assets/icons.png');
background-repeat: no-repeat;
background-position:-232px -194px;
}
#slickgrid .playing.selected {
background-position:-232px -151px;
}
.slick-cell.tracknum {
text-align:right;
padding-right:10px;
}
.slick-cell.duration {
}
#slickgrid .even {
background:#f7f7f7;
}
/* overlay */
.overlay {
background:rgba(0,0,0, 0.5);
height:100%;
width:100%;
overflow-x:hidden;
position:absolute;
top:0;
left:0;
z-index:9000;
}
.overlay .content {
background:#fff;
position:absolute;
top:50%;
left:50%;
padding:30px 40px;
margin:-30px 0 0 -200px;
overflow:hidden;
text-align:center;
width:400px;
z-index:9001;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.overlay h3 {
font-size:24px;
font-weight:700;
}