Файл: design/player/style.css
Строк: 318
div.jp-audio,
div.jp-audio-stream {
font-size:1.25em; /* 1.25em for
testing in site pages */ /* No parent CSS that can effect the size in the
demos ZIP */
font-family:Verdana, Arial, sans-serif;
line-height:1.6;
color: #666;
}
div.jp-audio-stream {
width:182px;
}
div.jp-interface {
position: relative;
background-color: #F0F1F2;
width:100%;
border-top-left-radius:
6px;
border-top-right-radius: 6px;
}
div.jp-audio div.jp-type-single
div.jp-interface {
height:80px;
}
div.jp-audio div.jp-type-playlist
div.jp-interface {
height: 50px;
}
div.jp-audio-stream
div.jp-type-single div.jp-interface {
height:80px;
}
/* @group
CONTROLS */
div.jp-controls-holder {
clear: both;
width:440px;
margin:0 auto;
position: relative;
overflow:hidden;
top:-8px; /* This negative value depends on the size
of the text in jp-currentTime and jp-duration */
}
div.jp-interface
ul.jp-controls {
list-style-type:none;
margin:0;
padding:
0;
float: left;
overflow:hidden;
}
div.jp-audio
ul.jp-controls {
}
div.jp-audio-stream ul.jp-controls {
width:
142px;
padding:20px 20px 0 20px;
}
div.jp-interface ul.jp-controls
li {
display:inline;
float: left;
}
div.jp-interface
ul.jp-controls a {
display:block;
overflow:hidden;
text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
width: 24px;
height: 24px;
margin-left: 12px;
margin-top:
12px;
}
a.jp-play {
background:
url("play.png");
}
a.jp-pause {
background:
url("pause.png");
display: none;
}
a.jp-stop {
width: 28px;
height: 28px;
margin-top: 6px;
}
a.jp-previous,
a.jp-next {
width:16px;
height:16px;
margin-top:17px;
margin-left: 12px;
}
a.jp-stop {
margin-left:10px;
}
a.jp-previous {
background:
url("prev.png");
}
a.jp-previous:hover {
opacity:
0.9;
}
a.jp-next {
background:
url("next.png");
}
a.jp-next:hover {
opacity:
0.9;
}
/* @end */
/* @group progress bar */
div.jp-progress {
overflow:hidden;
background-color: #E2EFF7;
border-bottom: 1px
solid #FFFFFF;
}
div.jp-audio div.jp-progress {
position:
absolute;
bottom: 50px;
height: 9px;
}
div.jp-audio
div.jp-type-single div.jp-progress {
left: 0;
width:
100%;
}
div.jp-audio div.jp-type-playlist div.jp-progress {
left:
0;
width: 100%;
}
div.jp-seek-bar {
width:0px;
height:100%;
cursor: pointer;
}
div.jp-play-bar {
background:
#0277BD;
width:0px;
height:100%;
}
/* The seeking class is
added/removed inside jPlayer */
div.jp-seeking-bg {
background:
url("/design/img/ajaxloading.gif");
}
/* @end */
/* @group
volume controls */
a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
width:18px;
height:15px;
margin-top:12px;
}
div.jp-audio
div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute
{
margin-left: 210px;
}
div.jp-audio div.jp-type-playlist
a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
margin-left: 154px;
}
div.jp-audio-stream div.jp-type-single
a.jp-mute,
div.jp-audio-stream div.jp-type-single a.jp-unmute {
margin-left:10px;
}
div.jp-audio a.jp-volume-max,
div.jp-audio-stream
a.jp-volume-max {
margin-left: 56px;
}
a.jp-mute {
background: url("audio_icons.png") 0 -170px
no-repeat;
}
a.jp-mute:hover {
background:
url("audio_icons.png") -19px -170px no-repeat;
}
a.jp-unmute
{
background: url("audio_icons.png") -60px -170px
no-repeat;
display: none;
}
a.jp-unmute:hover {
background:
url("audio_icons.png") -79px -170px
no-repeat;
}
a.jp-volume-max {
background:
url("vkontakte.jpg") 0 -186px
no-repeat;
}
a.jp-volume-max:hover {
background:
url("vkontakte.jpg") -19px -186px
no-repeat;
}
div.jp-volume-bar {
position: absolute;
overflow:hidden;
background: #DDDDDD;
width:55px;
height:9px;
cursor: pointer;
border-radius: 3px;
}
div.jp-audio
div.jp-volume-bar {
top: 20px;
right:120px;
}
div.jp-audio-stream div.jp-volume-bar {
top:37px;
left:92px;
}
div.jp-volume-bar-value {
background: #0277BD;
width:0px;
height: 9px;
border-radius: 3px;
}
/* @end */
/*
@group current time and duration */
div.jp-audio div.jp-time-holder {
position:absolute;
top: 12px;
font-size: 15px;
}
div.jp-audio
div.jp-type-single div.jp-time-holder {
left:110px;
width:186px;
}
div.jp-audio div.jp-type-playlist div.jp-time-holder {
left: 429px;
width:40px;
}
div.jp-current-time,
div.jp-duration
{
width:60px;
font-size:.64em;
font-style:oblique;
}
div.jp-current-time {
float: left;
display:inline;
}
div.jp-duration {
float: right;
display:inline;
text-align: right;
}
/* @end */
/* @group
playlist */
.playlist {background: url(playlist.png) no-repeat center
center #F0F1F2; position: absolute; right: 0; width: 24px; height: 24px;
cursor: pointer; padding: 12px;}
.myplaylist {background:
url(/design/img/icons/user.png); width: 16px; height: 16px; margin: 6px;
float: right; cursor: pointer;}
div.jp-details {
font-weight:bold;
text-align:center;
}
div.jp-details,
div.jp-playlist {
background:
#FFFFFF;
position: absolute;
left: 0;
right: 0;
bottom:
58px;
z-index: -1;
overflow: auto;
box-shadow: 0 0 2px 3px
rgba(0,0,0,0.1);
}
div.jp-type-single
div.jp-details,
div.jp-type-playlist div.jp-details,
div.jp-type-single
div.jp-playlist {
border-top:none;
}
div.jp-details
ul,
div.jp-playlist ul {
list-style-type:none;
padding-top:
16px;
margin:0;
padding:0;
font-size:.72em;
background-color: #fff;
}
div.jp-details li {
padding:5px 0;
font-weight:bold;
}
div.jp-playlist p {
font-size:
10px;
padding: 0;
margin: 0;
margin-left: 6px;
display:
inline-block;
}
div.jp-playlist li {
padding: 8px;
margin:
3px;
border-radius: 6px;
}
div.jp-playlist li .jp-playlist-item:after
{
background: url("/design/img/icons/audio.png") no-repeat
center center;
content: "";
position: absolute;
left:
-28px;
width: 22px;
height: 22px;
display: block;
top:
-3px;
}
div.jp-playlist li.jp-playlist-current .jp-playlist-item:after
{
width: 22px;
height: 22px;
top: -3px;
}
div.jp-playlist
li div {
display:block;
}
/* Note that the first-child (IE6) and
last-child (IE6/7/8) selectors do not work on IE */
div.jp-type-playlist
div.jp-playlist li:last-child {
padding:5px 0 5px 8px;
border-bottom:none;
}
div.jp-type-playlist div.jp-playlist
li.jp-playlist-current {
/*list-style-type:square;*/
/*list-style-position:inside;*/
/*padding-left:7px;*/
background-color: #F0F0F0;
}
div.jp-type-playlist div.jp-playlist a {
color: #333;
text-decoration: none;
margin-left: 30px;
position: relative;
}
div.jp-type-playlist div.jp-playlist a:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist
a.jp-playlist-item-remove {
float:right;
display:inline;
text-align:right;
margin-right:10px;
font-weight:bold;
color:#665;
}
div.jp-type-playlist div.jp-playlist
a.jp-playlist-item-remove:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media
{
float:right;
display:inline;
text-align:right;
margin-right:10px;
}
div.jp-type-playlist div.jp-playlist
span.jp-free-media a{
color:#666;
}
div.jp-type-playlist
div.jp-playlist span.jp-free-media a:hover{
color:#0d88c1;
}
span.jp-artist {
font-size:.8em;
color:#666;
}
/* @end */
div.jp-jplayer
audio,
div.jp-jplayer {
width:0px;
height:0px;
}
div.jp-jplayer {
background-color:
#000000;
}
/* @group TOGGLES */
/* The audio toggles are
nested inside jp-time-holder */
ul.jp-toggles {
background:
#F0F1F2;
position: absolute;
list-style-type:none;
padding:10px
0px 0px 10px;
margin: 0;
overflow:hidden;
loat: right;
width:
60px;
height: 50px;
top: -10px;
right: 35px;
}
div.jp-audio
.jp-type-playlist ul.jp-toggles {
margin: 12px;
}
ul.jp-toggles li
{
display:block;
float: right;
}
ul.jp-toggles li a {
display:block;
width:24px;
height:24px;
text-indent:-9999px;
line-height:100%; /* need this for IE6
*/
}
a.jp-repeat {
background: url("repeat.png")
no-repeat center center;
opacity: 0.5;
}
a.jp-repeat:hover {
background: url("repeat.png") no-repeat center center;
opacity: 1;
}
a.jp-repeat-off {
background:
url("repeat.png") no-repeat center center;
opacity:
0.9;
}
a.jp-repeat-off:hover {
background:
url("repeat.png") no-repeat center center;
opacity:
1;
}
a.jp-shuffle {
background: url("shuffle.png")
no-repeat center center;
margin-right: 8px;
opacity:
0.5;
}
a.jp-shuffle:hover {
background:
url("shuffle.png") no-repeat center center;
opacity:
1;
}
a.jp-shuffle-off {
background: url("shuffle.png")
no-repeat center center;
margin-right: 8px;
opacity:
0.9;
}
a.jp-shuffle-off:hover {
background:
url("shuffle.png") no-repeat center center;
opacity:
1;
}
#name-of-the-song-that-plays {
position: absolute;
left:
105px;
top: 6px;
font-size:
12px;
}
#name-of-the-song-that-plays b, #name-of-the-song-that-plays
strong {display: block;}
/* @end */
/* @group NO SOLUTION error
feedback */
.jp-no-solution {
padding:5px;
font-size:.8em;
background-color:#eee;
border:2px solid #009be3;
color:#000;
display:none;
}
.jp-no-solution a {
color:#000;
}
.jp-no-solution span {
font-size:1em;
display:block;
text-align:center;
font-weight:bold;
}
.discription {opacity: 0;}
/* @end */
@media
(max-width: 800px) {
div.jp-volume-bar {width:
0px;}
#name-of-the-song-that-plays {font-size: 10px; top: 8;}
}