Player

by chintsu

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="player clearfix 3-column-layout">
     <div class="column-wrapper">
        <div class="content-column">
            <div class="section track-section">
                <div class="track-info">
                    <span class="track-title">Artist - Title</span>
                </div>
                <div class="progress-bar">
                    <div class="progress"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="first-column">
        <div class="section play-section">
            <a href="#" class="play-button button"><i class="fa fa-play fa-fw -fa-pause -fa-stop"></i></a>
        </div>
    </div>
    <div class="second-column">
        <div class="section volume-section">
           <!--<a href="#" class="volume-button button"><i class="fa fa-volume-up fa-fw"></i></a>-->
            <div class="volume-control">
                <div class="volume-value"></div>
            </div>
        </div>
    </div>
</div>

CSS

.player {
    width: 400px;
    border: solid 1px #000;
    /*padding: 2px 0 2px 2px;*/
}

.section {
    /*border: solid 1px #111;*/
    height: 48px;
}

.column-wrapper {
    float: left;
    width: 100%;
}

.content-column {
    margin: 0 55px 0 40px;
}

.first-column {    
    float: left;
    width: 40px; 
    margin-left:-100%;
}

.second-column {    
    float: left;
    width: 55px;
    margin-left: -55px;
}

.track-info {
    border: solid 1px #555;
    padding: 1px 2px;
    margin-bottom: 3px;
    line-height: 1;
}

.button {
    color: #333;
    text-shadow: 0 0 3px #333, 0 0 1px #000;
}

.track-section {
    padding: 7px;
    height: 34px;
}

.progress-bar {
    height: 5px;
    border: solid 1px #333;
    background-color: #ddd;
}

.progress {
    height: 5px;
    background-color: #555;
    width: 75%;
}

.play-section,
.volume-section {
    line-height: 48px;
    text-align: center;    
}

/*.volume-section {
    line-height: 48px;
    text-align: center;
    vertical-align: middle;
}*/

.volume-section {
    position: relative
}

.volume-control {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    
    height: 38px;
    width: 15px;
    display: inline-block;
    border: solid 1px #333;
    background-color: #ddd;
}

.volume-value {
    background-color: #555;
    height: 75%;
    top: 0;
}

.play-button {
    font-size: 1.5em;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

.icon-caret-right:before {
    content: "\e118";
}