Commit 09709b76 authored by Laura Kalbag's avatar Laura Kalbag

Change order of volume buttons and tighten styling

Now the volume buttons are in the same order as they are visually, so the tab order makes more sense
parent c19758f7
......@@ -317,7 +317,7 @@
/* captions button */
.px-video-captions-btn-container {
float: right;
float: left;
}
@media only screen and (min-width: 540px) {
......@@ -332,11 +332,17 @@
display: inline-block;
width: 25px;
height: 20px;
margin-top: 5px; /* line up with big buttons */
margin-top: 3px; /* line up with big buttons */
background: no-repeat url('../images/px-video-sprite.svg');
background-position: -6px -835px;
}
@media only screen and (min-width: 540px) {
.px-video-captions-btn-container label {
margin-top: 5px; /* line up with big buttons */
}
}
/* use with Modernizr to provide a no-svg class on <html> to support browsers that don't support SVG */
.no-svg .px-video-captions-btn-container label {
background: no-repeat url('../images/px-video-sprite.png');
......@@ -363,7 +369,6 @@
float: right;
overflow: hidden;
min-width: 133px; /* width of mute button and width of volume slider */
width: 50%; /* half width of player */
}
@media only screen and (min-width: 540px) {
......@@ -372,14 +377,8 @@
}
}
@media only screen and (min-width: 620px) {
.px-video-volume-controls {
width: 35%;
}
}
.px-video-mute-btn-container {
float: right;
float: left;
width: 26px; /* width of mute button */
}
......@@ -387,11 +386,17 @@
display: inline-block;
width: 25px;
height: 20px;
margin-top: 6px; /* line up with big buttons */
margin-top: 3px; /* line up with big buttons */
background: no-repeat url('../images/px-video-sprite.svg');
background-position: -6px -476px;
}
@media only screen and (min-width: 540px) {
.px-video-mute-btn-container label {
margin-top: 6px; /* line up with big buttons */
}
}
/* use with Modernizr to provide a no-svg class on <html> to support browsers that don't support SVG */
.no-svg .px-video-mute-btn-container label {
background: no-repeat url('../images/px-video-sprite.png');
......@@ -420,7 +425,7 @@
/* volume range input */
.px-video-volume-slider {
float: right;
float: left;
width: 95px; /* width of volume slider */
}
......@@ -432,12 +437,19 @@
-webkit-appearance: none;
height: 6px;
width: 85px;
margin-top: 12px;
margin-top: 9px;
margin-right: 0;
margin-left: 5px;
background-color: #E6E6E6;
outline:none;
}
@media only screen and (min-width: 540px) {
.px-video-controls input[type='range'] {
margin-top: 12px;
}
}
.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
outline: 1px #999 dotted;
}
......
......@@ -184,16 +184,16 @@ function InitPxVideo(options) {
'<button class="px-video-forward"><span class="sr-only">forward <span class="px-seconds">10</span> seconds</span></button>' +
'</div>' +
'<div class="px-video-volume-controls">' +
'<div class="px-video-captions-btn-container hide">' +
'<input class="px-video-btnCaptions sr-only" id="btnCaptions'+obj.randomNum+'" type="checkbox" />' +
'<label for="btnCaptions'+obj.randomNum+'"><span class="sr-only">Captions</span></label>' +
'<div class="px-video-mute-btn-container">' +
'<input class="px-video-mute sr-only" id="btnMute'+obj.randomNum+'" type="checkbox" />' +
'<label id="labelMute'+obj.randomNum+'" for="btnMute'+obj.randomNum+'"><span class="sr-only">Mute</span></label>' +
'</div>' +
'<div class="px-video-volume-slider">' +
'<label for="volume'+obj.randomNum+'" class="sr-only">Volume:</label><input id="volume'+obj.randomNum+'" class="px-video-volume" type="range" min="0" max="10" value="5" />' +
'</div>' +
'<div class="px-video-mute-btn-container">' +
'<input class="px-video-mute sr-only" id="btnMute'+obj.randomNum+'" type="checkbox" />' +
'<label id="labelMute'+obj.randomNum+'" for="btnMute'+obj.randomNum+'"><span class="sr-only">Mute</span></label>' +
'<div class="px-video-captions-btn-container hide">' +
'<input class="px-video-btnCaptions sr-only" id="btnCaptions'+obj.randomNum+'" type="checkbox" />' +
'<label for="btnCaptions'+obj.randomNum+'"><span class="sr-only">Captions</span></label>' +
'</div>' +
'</div>' +
'</div>';
......
......@@ -245,14 +245,18 @@
display inline-block
width 25px
height 20px
margin-top 5px /* line up with big buttons */
margin-top 3px /* line up with big buttons */
background no-repeat url('../images/px-video-sprite.svg')
background-position -6px -835px
@media only screen and (min-width: 540px)
margin-top 4px /* line up with big buttons */
.no-svg &
/* use with Modernizr to provide a no-svg class on <html> to support browsers that don't support SVG */
background no-repeat url('../images/px-video-sprite.png')
.px-video-captions-btn-container
input[type="checkbox"]:focus+label
outline 1px #999 dotted
......@@ -272,29 +276,28 @@
/* mute button */
.px-video-volume-controls
float right
float left
overflow hidden
min-width 133px /* width of mute button and width of volume slider */
width 50% /* half width of player */
@media only screen and (min-width: 540px)
margin-top: 1px
@media only screen and (min-width: 620px)
width 35%
.px-video-mute-btn-container
float right
float left
width 26px /* width of mute button */
label
display inline-block
width 25px
height 20px
margin-top 6px /* line up with big buttons */
margin-top 3px /* line up with big buttons */
background no-repeat url('../images/px-video-sprite.svg')
background-position -6px -476px
@media only screen and (min-width: 540px)
margin-top 6px /* line up with big buttons */
.no-svg &
/* use with Modernizr to provide a no-svg class on <html> to support browsers that don't support SVG */
background no-repeat url('../images/px-video-sprite.png')
......@@ -323,7 +326,7 @@
/* volume range input */
.px-video-volume-slider
float right
float left
width 95px /* width of volume slider */
.px-video-controls .controls
......@@ -333,12 +336,15 @@
-webkit-appearance none
height 6px
width 85px
margin-top 12px
margin-top 9px
margin-right 0
margin-left 5px
background-color #E6E6E6
outlinenone
@media only screen and (min-width: 540px)
margin-top 12px
input[type='range']:focus::-webkit-slider-thumb
outline 1px #999 dotted
......
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