1 files changed, 152 insertions, 0 deletions
diff --git a/apps/system/camera/style/VideoPlayer.css b/apps/system/camera/style/VideoPlayer.css
new file mode 100644
index 0000000..bc2b23c
--- /dev/null
+++ b/apps/system/camera/style/VideoPlayer.css
@@ -0,0 +1,152 @@
+/* styles for the video element itself */
+.videoPlayer {
+  position: absolute;
+  left: 0; /* we position it with a transform */
+  top:0;
+  transform-origin: 0 0;
+}
+
+/* video player controls */
+.videoPlayerControls {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.videoPlayerPlayButton {
+  position: absolute;
+  width: 106px;
+  height: 106px;
+  left: calc(50% - 53px);
+  top: calc(50% - 53px);
+  background: url("images/video_play_button.png") center no-repeat,
+              url("images/video_play_normal.png") center no-repeat;
+  border-width: 0;
+}
+
+.videoPlayerPlayButton:active {
+  background: url("images/video_play_button.png") center no-repeat,
+              url("images/video_play_focus.png") center no-repeat
+}
+
+.videoPlayerPlayButton.hidden {
+  opacity: 0;
+}
+
+.videoPlayerFooter {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  height: 50px;
+  margin: 0;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 0.5s;
+  font-family: "MozTT", sans-serif;
+  -moz-user-select: none;
+}
+
+.videoPlayerFooter.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.videoPlayerPauseButton {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  padding: 0;
+  margin: 0;
+  background: url("images/video_pause_button.png") center no-repeat,
+              rgba(0,0,0,.5);
+  border-radius: 53px;
+  border: solid #ccc 3px;
+  top: -25px;
+  left: 10px;
+}
+
+.videoPlayerPauseButton:active {
+  background: url("images/video_pause_button.png") center no-repeat,
+              url("images/video_play_focus.png") center no-repeat
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: none;
+}
+
+/* time slider */
+.videoPlayerSlider {
+  position: absolute;
+  left: 110px;
+  top: 0px;
+  right: 0px;
+  height: 100%;
+}
+
+.videoPlayerSlider > span {
+  display: block;
+  width: 45px;
+  position: absolute;
+  color: white;
+  height: 100%;
+  line-height: 50px;
+  text-align: center;
+  font-size: 15px;
+}
+
+.videoPlayerElapsedText {
+  left: 10px;
+}
+
+.videoPlayerDurationText {
+  right: 10px;
+}
+
+.videoPlayerProgress {
+  position: absolute;
+  top: 0px;
+  left: 70px;
+  right: 70px;
+  height: 100%;
+}
+
+.videoPlayerProgress > div {
+  position: absolute;
+  pointer-events: none;
+}
+
+.videoPlayerElapsedBar, .videoPlayerBackgroundBar {
+  height: 4px;
+  width: 0%;
+  top: 50%;
+  margin-top: -2px;
+  border-radius: 6px;
+}
+
+.videoPlayerElapsedBar {
+  background-color: #0ac;
+}
+
+.videoPlayerBackgroundBar {
+  background-color: #333;
+  width: 100%;
+}
+
+.videoPlayerPlayHead {
+  display: block;
+  height: 20px;
+  width: 25px;
+  border-radius: 25px;
+  background-color: white;
+  top: 50%;
+  margin: -10px 0 0 -12px;
+}
+