.progress-wrapper { width: 134px; } .ttw-music-player { width: 370px; margin: 60px auto; font-family: 'Lato', arial, sans-serif; } .ttw-music-player .player { width: 100%; } /** Album Cover **/ .ttw-music-player .album-cover { position: relative; float: left; background: #333 url(../img/player/album-cover-bg.jpg) no-repeat 0 0 scroll;; box-shadow: 0px 1px 4px rgba(0, 0, 0, .75); -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, .75); -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .75); } .ttw-music-player .album-cover .img { box-shadow: inset 0 0 1px rgba(255, 255, 255, .6); -moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, .6); -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, .6); background-position:center center; background-repeat:no-repeat; background-color:transparent; } .ttw-music-player .album-cover .highlight { background: transparent url(../img/player/album-cover-highlight.png) no-repeat 0 0 scroll; opacity: 1; } .ttw-music-player .album-cover:hover .highlight { opacity: 1; } .ttw-music-player .album-cover, .ttw-music-player .album-cover .img, .ttw-music-player .album-cover .highlight { display: block; height: 125px; width: 125px; } .ttw-music-player .album-cover img, .ttw-music-player .album-cover .img, .ttw-music-player .album-cover .highlight { position: absolute; top: 0; left: 0; height:125px; width:125px; } /** Track Info **/ .ttw-music-player .track-info { width: 215px; margin: 8px 0 0 30px; float: left; font-size: 12px; } .ttw-music-player .track-info p { margin: 0 0 8px 0; } .ttw-music-player .player .title { color: #444; text-shadow: 0 1px 1px rgba(0, 0, 0, .8); font-family: 'Lato Bold', arial, sans-serif; font-weight: bold; font-size: 14px; } .ttw-music-player .artist-outer { color: #727272; font-family: 'Lato Italic', arial, sans-serif; font-style: italic; } .ttw-music-player .artist { color: #999; font-family: 'Lato', arial, sans-serif; margin-left: 4px; } .ttw-music-player .rating { width: 75px; height: 16px; } .ttw-music-player .rating-star { width: 15px; height: 16px; display: block; float: left; background: transparent url(../img/player/rating-off.png) no-repeat center center scroll; cursor: pointer; } .ttw-music-player .rating-star:hover, .ttw-music-player .rating-star.on, .ttw-music-player .rating-star.hover { background: transparent url(../img/player/rating-on.png) no-repeat center center scroll; } /** Player **/ .ttw-music-player .player-controls { width: 215px; height: 30px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: transparent url(../img/player/player-bg.png) repeat 0 0 scroll; float: left; margin: 12px 0 0 30px; } .ttw-music-player .player-controls .main { width: 52px; height: 12px; margin: 9px 9px; float: left; } .ttw-music-player .player-controls div { float: left; cursor: pointer; } .ttw-music-player .previous, .ttw-music-player .next { height: 10px; width: 15px; margin: 1px 0; } .ttw-music-player .play, .ttw-music-player .pause { width: 8px; height: 12px; margin: 0 7px; } .ttw-music-player .previous { background: transparent url(../img/player/player-previous.png) no-repeat center center scroll; } .ttw-music-player .next { background: transparent url(../img/player/player-next.png) no-repeat center center scroll; } .ttw-music-player .play { background: transparent url(../img/player/player-play.png) no-repeat center center scroll; } .ttw-music-player .pause { background: transparent url(../img/player/player-pause.png) no-repeat center center scroll; } .ttw-music-player .progress-wrapper { height: 9px; width: 135px; float: left; background: transparent url(../img/player/player-progress.png) repeat-x 0 0 scroll; margin: 11px 10px 10px 0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .ttw-music-player .progress { height: 9px; width: 135px; cursor: pointer; } .ttw-music-player .elapsed { height: 6px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 1px; width: 60%; background: transparent url(../img/player/player-elapsed.png) repeat-x 0 0 scroll; } .ttw-music-player .unused-controls { display: none !important; } /** Description **/ .ttw-music-player .description { clear: both; margin: 30px 0 0 0; font-size: 12px; color: #999; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); } .ttw-music-player .description.showing{ margin:30px 0; } /** Track List **/ .ttw-music-player .tracklist { padding: 10px 20px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: transparent url(../img/player/tracklist-bg.png) repeat 0 0 scroll; color: #666; font-size: 12px; } .ttw-music-player .tracklist ol { margin: 0; padding: 0; overflow:hidden; } .ttw-music-player .tracklist li { text-shadow: 0 1px 1px rgba(0, 0, 0, .6); background: transparent url(../img/player/tracklist-item-bg.png) repeat-x bottom left scroll; padding: 10px 0 10px 0; list-style-position: inside; position: relative; } .ttw-music-player .tracklist li:hover { color: #222; } .ttw-music-player li:last-child{ background: none; } .ttw-music-player .show-more-button li:last-child{ background: transparent url(../img/player/tracklist-item-bg.png) repeat-x bottom left scroll; } .ttw-music-player .tracklist .title { width: 230px; display: inline-block; padding: 0 0 0 14px; cursor: pointer; } .ttw-music-player li:nth-child(1n + 10) .title{ padding-left:7px; } .ttw-music-player li.playing { color:#00ff00 !important; text-shadow: 0; } .ttw-music-player .tracklist .rating { margin-left: 10px; width: 30px; display: block; position: absolute; right: 14px; top: 12.5px; } .ttw-music-player .rating-bar { height: 10px; width: 3px; display: block; float: left; cursor: pointer; background: transparent url(../img/player/rating-bar.png) no-repeat 0 0 scroll; } .ttw-music-player .rating-bar.on, .ttw-music-player .rating-bar:hover, .ttw-music-player .rating-bar.hover { background: transparent url(../img/player/rating-bar-on.png) no-repeat 0 0 scroll; } .ttw-music-player .buy { width: 62px; height: 16px; display: inline-block; position: absolute; top: 9px; right: 0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background: transparent url(../img/player/buy-bg.png) repeat 0 0 scroll; margin: 0 0 0 10px; font-size: 10px; text-align: center; line-height: 16px; text-shadow: none; color: #999; text-decoration: none; } .ttw-music-player .buy:hover { color: #eee; } .ttw-music-player .buy.not-active{ display:none; } .ttw-music-player .more { display:none; font-family: 'Lato Italic', arial, sans-serif; font-style: italic; font-size: 11px; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); padding: 10px 0; margin: 10px 0; cursor: pointer; text-align: center; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: transparent url(../img/player/tracklist-more.png) repeat 0 0 scroll; } .ttw-music-player .more:hover { color: #eee; box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .2); -moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .2); -webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .2); } .ttw-music-player .show-more-button .more{ display:block; } /** Transitions **/ .ttw-music-player .more, .ttw-music-player .album-cover .highlight, .ttw-music-player .tracklist li, .ttw-music-player .buy { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } /* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */ .ttw-music-player .player:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }