1 files changed, 255 insertions, 0 deletions
diff --git a/mobile/android/themes/core/touchcontrols.css b/mobile/android/themes/core/touchcontrols.css
new file mode 100644
index 000000000..8f43bf718
--- /dev/null
+++ b/mobile/android/themes/core/touchcontrols.css
@@ -0,0 +1,255 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
+
+/* video controls */
+.controlsOverlay {
+  -moz-box-pack: center;
+  -moz-box-align: end;
+  -moz-box-flex: 1;
+  -moz-box-orient: horizontal;
+}
+
+.controlsOverlay[scaled] {
+  /* scaled attribute in videocontrols.css causes conflict
+     due to different -moz-box-orient values */
+  -moz-box-align: end;
+}
+
+.controlsSpacer {
+  display: none;
+  -moz-box-flex: 0;
+}
+
+.controlBar {
+  -moz-box-flex: 1;
+  width: 100%;
+  background-color: rgba(50,50,50,0.8);
+}
+
+.buttonsBar {
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
+.playButton,
+.castingButton,
+.muteButton,
+.fullscreenButton {
+  -moz-appearance: none;
+  padding: 15px;
+  border: none !important;
+  width: 48px;
+  height: 48px;
+}
+
+.playButton {
+  background: url("chrome://browser/skin/images/pause.svg") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.playButton[paused="true"] {
+  background: url("chrome://browser/skin/images/play.svg") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.castingButton {
+  background: url("chrome://browser/skin/images/cast-ready.svg") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.castingButton[active="true"] {
+  background: url("chrome://browser/skin/images/cast-active.svg") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+/* 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);
+}
+
+.muteButton {
+  padding-left: 17.25px;
+  padding-right: 9.75px;
+  background: url("chrome://browser/skin/images/mute.svg") no-repeat left;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.muteButton[muted="true"] {
+  background: url("chrome://browser/skin/images/unmute.svg") no-repeat left;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.fullscreenButton {
+  background-color: transparent;
+  background: url("chrome://browser/skin/images/fullscreen.svg") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.fullscreenButton[fullscreened] {
+  background: url("chrome://browser/skin/images/exitfullscreen.svg") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
+}
+
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
+/* bars */
+.scrubberStack {
+  -moz-box-flex: 1;
+  padding: 0px 18px;
+}
+
+.flexibleBar,
+.flexibleBar .progress-bar,
+.bufferBar,
+.bufferBar .progress-bar,
+.progressBar,
+.progressBar .progress-bar,
+.scrubber,
+.scrubber .scale-slider,
+.scrubber .scale-thumb {
+  -moz-appearance: none;
+  border: none;
+  padding: 0px;
+  margin: 0px;
+  background-color: transparent;
+}
+
+.flexibleBar,
+.bufferBar,
+.progressBar {
+  height: 32px;
+  padding: 15px 0px;
+}
+
+.flexibleBar {
+  padding: 16px 0px;
+}
+
+.flexibleBar .progress-bar {
+  border: 1px #777777 solid;
+  border-radius: 1px;
+}
+
+.bufferBar .progress-bar {
+  border: 2px #AFB1B3 solid;
+  border-radius: 2px;
+}
+
+.progressBar .progress-bar {
+  border: 2px #FF9500 solid;
+  border-radius: 2px;
+}
+
+.scrubber {
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+.scrubber .scale-thumb {
+  display: -moz-box;
+  margin: 0px !important;
+  padding: 0px !important;
+  background: url("chrome://browser/skin/images/scrubber.svg") no-repeat center;
+  background-size: 12px 12px;
+  height: 32px;
+  width: 32px;
+}
+
+.positionLabel, .durationLabel {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  color: white;
+}
+
+.statusOverlay {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  background-color: rgb(50,50,50);
+}
+
+.statusIcon {
+  margin-bottom: 28px;
+  width: 36px;
+  height: 36px;
+}
+
+.statusIcon[type="throbber"] {
+  background: url(chrome://global/skin/media/throbber.png) no-repeat center;
+}
+
+.statusIcon[type="error"] {
+  background: url(chrome://global/skin/media/error.png) no-repeat center;
+}
+
+/* CSS Transitions */
+.controlBar:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: 200ms;
+}
+
+.controlBar[fadeout] {
+  opacity: 0;
+}
+
+.statusOverlay:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-delay: 750ms;
+}
+
+.statusOverlay[fadeout] {
+  opacity: 0;
+}
+
+.volumeStack,
+.timeLabel {
+  display: none;
+}
+
+.controlBar[firstshow="true"] .playButton {
+  -moz-transform: none;
+}
+
+/* Error description formatting */
+.errorLabel {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  color: #bbb;
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+  padding: 0 10px;
+  text-align: center;
+}
+
+/* Overlay Play button */
+.clickToPlay {
+  width: 64px;
+  height: 64px;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  opacity: 0.7;
+  background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
+                    url(chrome://global/skin/media/videoClickToPlayButton.svg);
+  background-repeat: repeat, no-repeat;
+  background-position: center, center;
+  background-size: auto, 64px 64px;
+  background-color: hsla(0,0%,10%,.5);
+}