Commit 858488ac authored by David Loiret's avatar David Loiret

remote playback: improve volume styles

parent bdf517da
...@@ -57,9 +57,7 @@ ...@@ -57,9 +57,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="volume-icon v-change-0"> <div class="volume-icon v-change-0"></div>
<span> </span>
</div>
</div> </div>
</div> </div>
......
.player-control { .player-control {
position: relative; position: relative;
margin: auto; margin: auto;
width: 70%; width: 65%;
background: #2a2a2a; background: #2a2a2a;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
...@@ -22,14 +22,15 @@ ...@@ -22,14 +22,15 @@
} }
.player-control .progress { .player-control .progress {
width: 76%; width: 80%;
height: 8px; height: 8px;
border-radius: 5px; border-radius: 5px;
background: #676767; background: #676767;
box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1);
float: left; float: left;
cursor: pointer; cursor: pointer;
margin: 40px 0 0 0; top: 50%;
margin-top: -4px;
padding: 0; padding: 0;
position: relative; position: relative;
} }
...@@ -78,7 +79,7 @@ ...@@ -78,7 +79,7 @@
text-shadow: 0 0 0 #fff; text-shadow: 0 0 0 #fff;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
width: 10%; width: 10%;
padding: 32px 0 0 3%; padding: 29px 0 0 3%;
cursor: pointer; cursor: pointer;
font-variant: small-caps; font-variant: small-caps;
} }
...@@ -141,21 +142,12 @@ ...@@ -141,21 +142,12 @@
.player-control .volume { .player-control .volume {
position: relative; position: relative;
float: left; float: right;
width: 5%; width: 48px;
margin: 0 0 0 4%; margin-right: 16px;
height: 100%; height: 100%;
} }
.player-control .volume-icon {
padding: 1.5%;
height: 100%;
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.15s linear;
}
.player-control .volume-holder { .player-control .volume-holder {
height: 100px; height: 100px;
width: 100%; width: 100%;
...@@ -204,114 +196,72 @@ ...@@ -204,114 +196,72 @@
bottom: 0; bottom: 0;
} }
.player-control .volume-icon span { .player-control .v-mute:before, .player-control .v-mute:after {
width: 20%; width: 10px;
height: 13%; box-shadow: inset 0 0 0 32px;
background-color: #fff;
display: block;
position: relative;
z-index: 1;
font-weight: bold;
top: 50%;
color: #fff;
left: 22%;
}
.player-control .volume-icon span:before,
.player-control .volume-icon span:after {
content: '';
position: absolute; position: absolute;
-webkit-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
} }
.player-control .volume-icon span:before { .player-control .v-mute:before {
width: 0; left: 17px;
height: 0px; height: 2px;
border: 1em solid transparent; width: 10px;
border-left: none;
border-right-color: #fff;
z-index: 2;
top: -6px;
left: 10%;
margin-top: -31%;
}
.player-control .volume-icon span:after {
width: 2%;
height: 2%;
border: 1px solid #fff;
left: 200%;
border-width: 0px 0px 0 0;
top: 5px;
border-radius: 0 50px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
font-variant: small-caps;
}
.player-control .v-change-10 span:after {
border-width: 10px 10px 0 0;
top: 0;
}
.player-control .v-change-9 span:after {
border-width: 9px 9px 0 0;
top: 1px;
} }
.player-control .v-change-8 span:after { .player-control .v-mute:after {
border-width: 8px 8px 0 0; height: 10px;
top: 1px; width: 2px;
left: 21px;
} }
.player-control .v-change-7 span:after { .player-control .v-low:before,
border-width: 7px 7px 0 0; .player-control .v-medium:before,
top: 2px; .player-control .v-high:before,
} .player-control .v-high:after,
.player-control .v-very-high:before,
.player-control .v-change-6 span:after { .player-control .v-very-high:after {
border-width: 6px 6px 0 0; width: 15px;
top: 2px; height: 15px;
} position: absolute;
border-radius: 50%;
.player-control .v-change-5 span:after { border-top-color: transparent;
border-width: 5px 5px 0 0; border-bottom-color: transparent;
top: 3px; border-left-color: transparent;
} left: 2px;
-webkit-transform: translateY(-50%);
.player-control .v-change-4 span:after { -ms-transform: translateY(-50%);
border-width: 4px 4px 0 0; transform: translateY(-50%);
top: 3px;
}
.player-control .v-change-3 span:after {
border-width: 3px 3px 0 0;
top: 4px;
} }
.player-control .v-change-2 span:after { .player-control .v-high:before,
border-width: 2px 2px 0 0; .player-control .v-medium:before {
top: 4px; border-style: double;
border-width: 6px;
left: -2px;
} }
.player-control .v-change-1 span:after { .player-control .v-very-high:before {
border-width: 1px 1px 0 0; border-style: inset;
top: 5px; border-width: 6px;
left: -2px;
} }
.player-control .v-change-0 span:after { .player-control .v-high:after,
border-width: 0px 0px 0 0; .player-control .v-very-high:after {
top: 5px; width: 32px;
height: 32px;
left: -7px;
} }
.player-control .v-change-0 span:after { .v-low:before,
content: '+'; .v-high:before,
-webkit-transform: rotate(45deg); .v-high:after,
font-size: 20px; .v-very-high:before,
top: -7px; .v-very-high:after {
left: 28px; border: 2px solid;
} }
.player-control .title { .player-control .title {
...@@ -328,3 +278,36 @@ ...@@ -328,3 +278,36 @@
.player-control .volume:hover .volume-holder { .player-control .volume:hover .volume-holder {
display: block !important; display: block !important;
} }
[class*=-icon], [class*=-icon] * {
box-sizing: border-box;
}
[class*=-icon] {
display: inline-block;
vertical-align: middle;
position: relative;
font-style: normal;
color: #fff;
text-align: left;
text-indent: -9999px;
direction: ltr;
}
[class*=-icon]:after, [class*=-icon]:before {
content: '';
pointer-events: none;
}
.volume-icon {
width: 0;
height: 0;
border: 7px solid;
border-left: none;
border-top-color: transparent;
border-bottom-color: transparent;
padding: 6px 3px;
box-shadow: inset 4px 0;
margin: -20px 10px 4px 11px;
top: 50%
}
...@@ -125,6 +125,19 @@ $(function() { ...@@ -125,6 +125,19 @@ $(function() {
this._previousVolume = 1; this._previousVolume = 1;
this.timeInterval = null; this.timeInterval = null;
this.enableInterval = false; this.enableInterval = false;
this.volumeStyleMap = {
0: 'mute',
1: 'very-low',
2: 'very-low',
3: 'low',
4: 'low',
5: 'medium',
6: 'medium',
7: 'high',
8: 'high',
9: 'very-high',
10: 'very-high'
};
}; };
/** /**
...@@ -262,7 +275,7 @@ $(function() { ...@@ -262,7 +275,7 @@ $(function() {
*/ */
PlayerControl.prototype.animateVolume = function() { PlayerControl.prototype.animateVolume = function() {
var volumeIcon = this.element.find('.volume-icon'); var volumeIcon = this.element.find('.volume-icon');
volumeIcon.removeClass().addClass('volume-icon v-change-' + parseInt(this.volume * 10)); volumeIcon.removeClass().addClass('volume-icon v-' + this.volumeStyleMap[parseInt(this.volume * 10)]);
}; };
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment