Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #88 from rainemak/updateTouchControls
[embedlite-components] Adapt touchcontrols.css to match Android FF 38 controls
  • Loading branch information
rojkov committed Oct 16, 2015
2 parents 054cb66 + 2a5c5da commit 2dd22eb
Showing 1 changed file with 49 additions and 26 deletions.
75 changes: 49 additions & 26 deletions overrides/touchcontrols.css
Expand Up @@ -13,6 +13,12 @@
-moz-box-orient: horizontal;
}

.controlsOverlay[scaled] {
/* scaled attribute in videocontrols.css causes conflict
due to different -moz-box-orient values */
-moz-box-align: end;
}

.controlBar {
-moz-box-flex: 1;
font-size: 16pt;
Expand All @@ -21,11 +27,6 @@
width: 100%;
}

.controlsSpacer {
display: none;
-moz-box-flex: 0;
}

.buttonsBar {
padding: 0px;
margin-top: 0px;
Expand All @@ -34,9 +35,15 @@
margin-right: 20px;
}

.fullscreenButton,
.controlsSpacer {
display: none;
-moz-box-flex: 0;
}

.playButton,
.muteButton {
.castingButton,
.muteButton,
.fullscreenButton {
-moz-appearance: none;
min-height: 72px;
min-width: 72px;
Expand All @@ -45,33 +52,31 @@
border: none !important;
}

.fullscreenButton {
background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
.playButton {
background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
background-size: 42px;
}

.fullscreenButton[fullscreened="true"] {
background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
.playButton[paused="true"] {
background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
background-size: 42px;
}

.playButton {
background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
.castingButton {
background: url("chrome://browser/skin/images/cast-ready-hdpi.png") no-repeat center;
background-size: 42px;
}

/*
* Normally the button bar has fullscreen spacer play spacer mute, but if
* this is an audio control rather than a video control, the fullscreen button
* is hidden by videocontrols.xml, and that alters the position of the
* play button. This workaround moves it back to center.
*/
.controlBar.audio-only .playButton {
transform: translateX(28px);
.castingButton[active="true"] {
background: url("chrome://browser/skin/images/cast-active-hdpi.png") no-repeat center;
background-size: 42px;
}

.playButton[paused="true"] {
background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
/* If the casting button is showing, there will be two buttons on the right side of the controls.
* This shifts the play button to be centered.
*/
.castingButton:not([hidden="true"]) + .fullscreenButton + spacer + .playButton {
transform: translateX(-21px);
background-size: 42px;
}

Expand All @@ -85,6 +90,21 @@
background-size: 42px;
}

.fullscreenButton {
background-color: transparent;
background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
background-size: 42px;
}

.fullscreenButton[fullscreened] {
background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
background-size: 42px;
}

.controlBar[fullscreen-unavailable] .fullscreenButton {
display: none;
}

/* bars */
.scrubberStack {
width: 100%;
Expand Down Expand Up @@ -178,11 +198,11 @@
}

.statusIcon[type="throbber"] {
background: url("chrome://browser/skin/images/throbber.png") no-repeat center;
background: url(chrome://browser/skin/media/throbber.png) no-repeat center;
}

.statusIcon[type="error"] {
background: url("chrome://browser/skin/images/error.png") no-repeat center;
background: url(chrome://browser/skin/media/error.png) no-repeat center;
}

/* CSS Transitions */
Expand All @@ -206,14 +226,17 @@
}

.volumeStack,
.controlBar[firstshow="true"] .fullscreenButton,
.controlBar[firstshow="true"] .muteButton,
.controlBar[firstshow="true"] .scrubberStack,
.controlBar[firstshow="true"] .durationBox,
.timeLabel {
display: none;
}

.controlBar[firstshow="true"] .playButton {
-moz-transform: none;
}

/* Error description formatting */
.errorLabel {
font-family: Helvetica, Arial, sans-serif;
Expand Down

0 comments on commit 2dd22eb

Please sign in to comment.