bozon_ynh/sources/templates/default/css/music_player.css

/* music player */
     .audiojs audio {
         position: absolute;
         left: -1px;
     }
     .audiojs {
     	cursor:default;
         width: 100%;
         height: 36px;
         /*background-color:#405bff;border-color:#05E;box-shadow: 0 1px 1px #04d;*/
         overflow: hidden;
         border-top:1px solid rgba(0,0,0,0.2);
         border-bottom:1px solid rgba(0,0,0,0.2);
         font-family: monospace;
         font-size: 12px;
         margin-bottom:20px;
             display: inline-flex;
    x-justify-content: space-around;
    x-align-items: stretch;
     }
     .audiojs .play-pause:hover {background-color:rgba(0,100,255,0.2);}
     .audiojs .play-pause {
     	flex: 0 0 40px;
         width: 40px;
         height: 40px;
         padding: 4px 6px;
         margin: 0px;
         
         overflow: hidden;
         cursor:pointer;
         background-color:rgba(0,0,0,0.1);
     }
     .audiojs p {
         display: none;
         width: 25px;
         height: 40px;
         margin: 0px;
         cursor: pointer;
     }
     .audiojs .play {
         display: block;
     }
     .audiojs .scrubber {
     	cursor:pointer;
         position: relative;
         width:100%;
         background: rgba(0,0,0,0.1);
         height: 14px;
         margin: 10px;
         border-top: 1px solid rgba(0,0,0,0.3);
         border-left: 0px;
         border-bottom: 0px;
         overflow: hidden;
         border-radius:3px;
     }
     .audiojs .progress {
         position: absolute;
         top: 0px;
         left: 0px;
         height: 13px;
         width: 0px;
         background: rgba(0,0,0,0.1);
             border-radius: 0 4px 4px 0;
             box-shadow:inset 0 0 2px 2px rgba(255,255,255,0.1);
         z-index: 1;
         
     }
     .audiojs .loaded {
         position: absolute;border-radius: 0 4px 4px 0;
         top: 0px;
         left: 0px;
         height: 13px;
         width: 0px;
         background: rgba(0,0,0,0.1);box-shadow:inset 0 0 2px 2px rgba(255,255,255,0.1);
         
     }
     .audiojs .time {
     	text-shadow:0 1px 1px rgba(255,255,255,0.5);
		width:100px;
		flex: 0 0 100px;
		height: 36px;
		line-height: 36px;
		margin: 0px 0px 0px 6px;
		padding: 0px 6px 0px 12px;
		color: #333;
     }
     .audiojs .time em {
         padding: 0px 2px 0px 0px;
         color: #444;
         font-style: normal;
     }
     .audiojs .time strong {
         padding: 0px 0px 0px 2px;
         font-weight: normal;
     }
     .audiojs .error-message {
         float: left;
         display: none;
         margin: 0px 10px;
         height: 36px;
         width: 400px;
         overflow: hidden;
         line-height: 36px;
         white-space: nowrap;
         color: #fff;
         text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
         -icab-text-overflow: ellipsis;
         -khtml-text-overflow: ellipsis;
         -moz-text-overflow: ellipsis;
         -webkit-text-overflow: ellipsis;
     }
     .audiojs .error-message a {
         color: #eee;
         text-decoration: none;
         padding-bottom: 1px;
         border-bottom: 1px solid #999;
         white-space: wrap;
     }
     .audiojs .play {
         background: url("../img/player-graphics.png") -2px -1px no-repeat ;
     }
     .audiojs .loading {
         background: url("../img/player-graphics.png") -2px -31px no-repeat;
     }
     .audiojs .error {
         background: url("../img/player-graphics.png") -2px -61px no-repeat;
     }
     .audiojs .pause {
         background: url("../img/player-graphics.png") -2px -91px no-repeat;
     }
     .playing .play,
     .playing .loading,
     .playing .error {
         display: none;
         background-color:rgba(0,0,0,0.1);
     }
     .playing .pause {
         display: block;
     }
     .loading .play,
     .loading .pause,
     .loading .error {
         display: none;
     }
     .loading .loading {
         display: block;
     }
     .error .time,
     .error .play,
     .error .pause,
     .error .scrubber,
     .error .loading {
         display: none;
     }
     .error .error {
         display: block;
     }
     .error .play-pause p {
         cursor: auto;
     }
     .error .error-message {
         display: block;
     }
#share section.music_player{padding:10px;display:block;}
.music_player a {
	display:block;
	padding:5px;
	margin-bottom:5px;
	margin-top:5px;
	border-bottom:1px solid rgba(0,0,0,0.1);
	text-shadow:0 1px 1px rgba(255,255,255,0.5);
}
.music_player .audiojs {}

.music_player .audiojs p{margin:0;}

.music_player a.playing{color:white;text-shadow:0 1px 1px rgba(0,0,0,0.3);background-color:rgba(0,0,0,0.4);border-radius:3px;padding:10px;}
.music_player a.playing:hover{color:#cef;}

.music_player table {border-collapse: collapse;}
.music_player table td:first-of-type{width:100%;vertical-align: middle;}
.music_player table td:last-of-type{width:40px;}
.music_player #volume{
    padding:3px;
    
    background:rgba(0,0,0,0.2);
    display:inline-block;
    text-align:center;
    border-top:1px solid rgba(0,0,0,0.1);
    border-bottom:1px solid rgba(0,0,0,0.1);
}
.music_player .volume:hover{background-image:url(../img/barw.png);}
.music_player .volume{
    border-radius: 1px 1px 0 0;
    vertical-align:bottom;
    display:inline-block;
    width:3px;
    height:30px;
    background:url(../img/barb.png) no-repeat rgba(255,255,255,0.1);
    cursor: pointer;

}
.music_player .volume.active{ background:url(../img/barw.png) no-repeat transparent;}
.music_player a:hover{ color:rgba(0,0,0,0.5);}