185 lines
7.8 KiB
CSS
185 lines
7.8 KiB
CSS
@charset "UTF-8";
|
|
.player-container .player .now-playing {
|
|
position: relative;
|
|
height: 30px;
|
|
color: #FFF;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
overflow: hidden; }
|
|
.player-container .player .now-playing .fade {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
width: 80px;
|
|
height: 30px;
|
|
z-index: 10;
|
|
background: -moz-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(32, 32, 32, 0)), color-stop(50%, #202020), color-stop(100%, #202020));
|
|
background: -webkit-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
background: -o-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
background: -ms-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00202020', endColorstr='#202020', GradientType=1);
|
|
background: linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); }
|
|
.player-container .player .progress {
|
|
width: 330px;
|
|
height: 5px;
|
|
background-color: #333;
|
|
margin: 0 10px;
|
|
cursor: pointer; }
|
|
.player-container .player .progress .loaded {
|
|
width: 0;
|
|
height: 5px;
|
|
background-color: #405050; }
|
|
.player-container .player .progress .played {
|
|
width: 0;
|
|
height: 5px;
|
|
background-color: #09A; }
|
|
.player-container .player .controls {
|
|
width: 290px;
|
|
margin: 20px 95px; }
|
|
.player-container .player .controls > * {
|
|
width: 40px;
|
|
height: 40px;
|
|
float: left;
|
|
margin-right: 20px;
|
|
cursor: pointer; }
|
|
.player-container .player .controls .prev {
|
|
background-image: url("/images/icns/prev.png"); }
|
|
.player-container .player .controls .play {
|
|
background-image: url("/images/icns/play.png"); }
|
|
.player-container .player .controls .pause {
|
|
background-image: url("/images/icns/pause.png");
|
|
display: none; }
|
|
.player-container .player .controls .next {
|
|
background-image: url("/images/icns/next.png"); }
|
|
.player-container .playlist .playlist-tracks {
|
|
width: 343px; }
|
|
.player-container .playlist .playlist-tracks li {
|
|
display: block;
|
|
height: 26px; }
|
|
.player-container .playlist .playlist-tracks li .item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 26px;
|
|
color: #FFF; }
|
|
.player-container .playlist .playlist-tracks li .item:hover {
|
|
background-color: #444;
|
|
cursor: default; }
|
|
.player-container .playlist .playlist-tracks li .item:hover .fade {
|
|
background: -moz-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(64, 64, 64, 0)), color-stop(50%, #404040), color-stop(100%, #404040));
|
|
background: -webkit-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%);
|
|
background: -o-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%);
|
|
background: -ms-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00404040', endColorstr='#404040', GradientType=1);
|
|
background: linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); }
|
|
.player-container .playlist .playlist-tracks li .item .dragbox {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 2px;
|
|
width: 15px;
|
|
height: 26px;
|
|
background-image: url("/images/drag.png");
|
|
cursor: move; }
|
|
.player-container .playlist .playlist-tracks li .item .title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 19px;
|
|
z-index: 10;
|
|
width: 316px;
|
|
height: 26px;
|
|
line-height: 26px;
|
|
display: block;
|
|
float: left;
|
|
overflow: hidden; }
|
|
.player-container .playlist .playlist-tracks li .item .title .data.artist, .player-container .playlist .playlist-tracks li .item .title .playtrack {
|
|
border-bottom: #555 1px dotted;
|
|
cursor: pointer; }
|
|
.player-container .playlist .playlist-tracks li .item .duration {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 5px;
|
|
z-index: 30;
|
|
height: 26px;
|
|
line-height: 26px; }
|
|
.player-container .playlist .playlist-tracks li .item .remove {
|
|
display: none;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 5px;
|
|
z-index: 30;
|
|
height: 15px;
|
|
font-size: 11px;
|
|
background-color: #622;
|
|
color: #FFF;
|
|
border: #822 1px solid;
|
|
padding: 1px 2px 0 2px;
|
|
border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
cursor: pointer; }
|
|
.player-container .playlist .playlist-tracks li .item .fade {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
width: 80px;
|
|
height: 26px;
|
|
background: -moz-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(32, 32, 32, 0)), color-stop(50%, #202020), color-stop(100%, #202020));
|
|
background: -webkit-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
background: -o-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
background: -ms-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00202020', endColorstr='#202020', GradientType=1);
|
|
background: linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%); }
|
|
.player-container .playlist .playlist-tracks li:nth-child(odd) .item {
|
|
background-color: #2A2A2A; }
|
|
.player-container .playlist .playlist-tracks li:nth-child(odd) .item .fade {
|
|
background: -moz-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(42, 42, 42, 0)), color-stop(50%, #2a2a2a), color-stop(100%, #2a2a2a));
|
|
background: -webkit-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%);
|
|
background: -o-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%);
|
|
background: -ms-linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002a2a2a', endColorstr='#2a2a2a', GradientType=1);
|
|
background: linear-gradient(left, rgba(42, 42, 42, 0) 0%, #2a2a2a 50%, #2a2a2a 100%); }
|
|
.player-container .playlist .playlist-tracks li.now .item {
|
|
color: #09A; }
|
|
.player-container .additional-controls {
|
|
width: 350px;
|
|
height: 27px;
|
|
background-color: #333;
|
|
border-top: #444 1px solid; }
|
|
.player-container .additional-controls .item {
|
|
float: left;
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
color: #FFF;
|
|
-moz-opacity: 0.3;
|
|
-ms-filter: ”alpha(opacity=30) ”;
|
|
filter: alpha(opacity=30);
|
|
opacity: 0.3; }
|
|
.player-container .additional-controls .item:hover {
|
|
-moz-opacity: 1;
|
|
-ms-filter: ”alpha(opacity=100) ”;
|
|
filter: alpha(opacity=100);
|
|
opacity: 1;
|
|
cursor: pointer; }
|
|
.player-container .additional-controls .item.active {
|
|
-moz-opacity: 0.8;
|
|
-ms-filter: ”alpha(opacity=80) ”;
|
|
filter: alpha(opacity=80);
|
|
opacity: 0.8; }
|
|
.player-container .additional-controls img {
|
|
float: left;
|
|
margin-top: 1px; }
|
|
.player-container .additional-controls .annotation {
|
|
float: left;
|
|
margin-left: 2px; }
|
|
.player-container .additional-controls#empty-playlist {
|
|
float: right;
|
|
margin-right: 10px; }
|
|
.player-container .additional-controls#empty-playlist img {
|
|
margin-top: 3px; }
|