From 821413607a0718156f9d25d895e89b1c3d37aa8b Mon Sep 17 00:00:00 2001
From: Daniel Narvaez <dwnarvaez@gmail.com>
Date: Wed, 06 Feb 2013 13:49:14 +0000
Subject: Copy various bits from gaia

---
(limited to 'apps/system/camera/style')

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;
+}
+
diff --git a/apps/system/camera/style/camera.css b/apps/system/camera/style/camera.css
new file mode 100644
index 0000000..6a1ca02
--- /dev/null
+++ b/apps/system/camera/style/camera.css
@@ -0,0 +1,314 @@
+html, body {
+  font-family: "MozTT", sans-serif;
+  font-size: 10px;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  background-color: black;
+}
+
+#viewfinder {
+  position: absolute;
+  z-index: 25;
+}
+
+#controls {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 45px;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+}
+
+#switch-button, #capture-button, #misc-button {
+  position: absolute;
+}
+
+#switch-button, #misc-button {
+  height: 45px;
+  width: 33%;
+}
+
+#switch-button span,
+#capture-button span,
+#gallery-button span,
+#cancel-pick span
+{
+  -moz-transition: 0.2s ease-in-out;
+  pointer-events: none;
+  background-position: center center;
+  background-repeat: no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -15px;
+  margin-top: -15px;
+  width: 30px;
+  height: 30px;
+}
+
+#switch-button {
+  left: 66%;
+}
+
+#misc-button {
+  text-align: center;
+  left: 0;
+}
+
+#video-timer {
+  position:relative;
+  top:50%;
+  margin-top:-0.5em;
+}
+
+#gallery-button {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+#gallery-button.hidden {
+  display:none;
+}
+
+#gallery-button span {
+  background-image: url(images/grid.png);
+}
+
+#gallery-button[disabled=disabled] {
+  display: none;
+}
+
+#cancel-pick {
+  display:block;
+  width: 100%;
+  height: 100%;
+}
+
+#cancel-pick.hidden {
+  display:none
+}
+
+#cancel-pick span {
+  background-image: url(images/actionicon_cancel.png);
+}
+
+#capture-button[disabled=disabled] {
+  opacity: 0.5;
+}
+
+#switch-button[disabled=disabled] {
+  opacity: 0.5;
+}
+
+#capture-button {
+  background-color: #03a2b4;
+  border-radius: 100px;
+  left: 33%;
+  height: 100px;
+  width: 33%;
+  top: -28px;
+}
+
+#video-timer {
+  display: none;
+  color: white;
+}
+
+/* Specific to when we are capturing video */
+.capturing #video-timer {
+  display: block;
+}
+
+.capturing #gallery-button {
+  display: none;
+}
+
+.capturing #capture-button {
+  background-color: #d3361c;
+}
+
+.video.capturing #capture-button span {
+  background-image: url(images/stop.png);
+}
+
+/* Swap the camera and video icons depending on mode */
+.video #switch-button span {
+  background-image: url(images/camera.png);
+}
+
+.camera #switch-button span {
+  background-image: url(images/video.png);
+}
+
+.camera #capture-button span {
+  background-image: url(images/camera.png);
+}
+
+.video #capture-button span {
+  background-image: url(images/video.png);
+}
+
+#focus-ring {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+  top: 50%;
+  left: 50%;
+  margin-top: -30px;
+  margin-left: -30px;
+}
+
+#focus-ring[data-state=focused] {
+  border: 4px solid rgba(0, 255, 0, 0.3);
+  display: block;
+}
+
+#focus-ring[data-state=focusing] {
+  border: 4px solid rgba(0, 0, 0, 0.8);
+  display: block;
+}
+
+#focus-ring[data-state=fail] {
+  border: 4px solid rgba(255, 0, 0, 0.3);
+  display: block;
+}
+
+/*
+ * The overlay is where we display messages like Scanning, No Videos,
+ * No SD card and SD Card in Use along with instructions for resolving
+ * the issue.  The user can't interact with the app while the overlay
+ * is displayed.
+ */
+#overlay {
+  /* it takes up the whole screen */
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  /* almost transparent gray */
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 100;
+}
+
+/*
+ * The overlay content area holds the text of the overlay.
+ * It has borders and a less transparent background so that
+ * the overlay text shows up more clearly
+ */
+#overlay-content {
+  background:
+  url(images/ui/pattern.png) repeat left top,
+  url(images/ui/gradient.png) no-repeat left top;
+  background-size: auto auto, 100% 100%;
+  /* We can't use shortand with background size because is not implemented yet:
+  https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-family: "MozTT", Sans-serif;
+  font-size: 0;
+  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+  created by white-spaces and break lines in the code betewen inline-block elements */
+  color: #fff;
+  padding: 110px 25px 0px 25px;
+}
+
+#overlay-title {
+  font-weight: normal;
+  font-size: 1.9rem;
+  color: #fff;
+  margin: 0 5px -10px 5px;
+}
+
+#overlay-text {
+  padding: 10px 5px 0 5px;
+  border-top: 1px solid #686868;	
+  font-weight: 300;
+  font-size: 2.5rem;
+  color: #ebebeb;
+}
+
+.hidden {
+  display: none;
+}
+
+#hud {
+  position: absolute;
+  top: 20px;
+  height: 75px;
+  left: 0;
+  right: 0;
+  z-index: 50;
+}
+
+#hud a {
+  position: absolute;
+  z-index: 50;
+  height: 75px;
+  width: 75px;
+  border: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url(images/hud_button_underlay.png);
+}
+
+#hud a:after {
+  content: " ";
+  display: block;
+  position: relative;
+  z-index: 60;
+  height: 75px;
+  width: 75px;
+  background: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+#hud a:active {
+  background-image: url(images/hud_button_underlay_focus.png);
+}
+
+#toggle-camera {
+  right: 20px;
+}
+
+#toggle-flash {
+  left: 20px;
+}
+
+#toggle-camera[data-mode=back]:after {
+  background-image: url(images/toggle_front.png);
+}
+#toggle-camera[data-mode=front]:after {
+  background-image: url(images/toggle_back.png);
+}
+
+#toggle-flash[data-mode=on]:after {
+  background-image: url(images/flash_on.png);
+}
+#toggle-flash[data-mode=off]:after {
+  background-image: url(images/flash_off.png);
+}
+#toggle-flash[data-mode=auto]:after {
+  background-image: url(images/flash_auto.png);
+}
+#toggle-flash[data-mode=torch]:after {
+  background-image: url(images/flash_torch.png);
+}
diff --git a/apps/system/camera/style/filmstrip.css b/apps/system/camera/style/filmstrip.css
new file mode 100644
index 0000000..fd32dc6
--- /dev/null
+++ b/apps/system/camera/style/filmstrip.css
@@ -0,0 +1,187 @@
+#filmstrip {
+  transition: 0.2s ease-in-out;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  height: 50px;
+  /*
+   * the background must be solid for preview mode because otherwise some
+   * of the frozen viewfinder shows through. If it really need to be translucent
+   * in camera mode, we'll have to change it with javascript
+   */
+  background: black;
+}
+
+#filmstrip.hidden {
+  transform: translateY(-50px);
+}
+
+img.thumbnail {
+  position: relative;
+  width: 46px;
+  height: 46px;
+  border: 2px solid white;
+  margin-right: 4px;
+  float: left; /* XXX: do we need this? */
+  -moz-user-select: none;
+  transition: 0.2s ease-in-out;
+}
+
+img.thumbnail.previewed {  /* if the thumbnail is being previewed */
+  border: 2px solid #0ac;
+}
+
+/*
+ * Make the thumbnails rotate with the phone
+ */
+#filmstrip[data-orientation="90"] img.thumbnail {
+  transform: rotate(-90deg);
+}
+#filmstrip[data-orientation="180"] img.thumbnail {
+  transform: rotate(-180deg);
+}
+#filmstrip[data-orientation="270"] img.thumbnail {
+  transform: rotate(-270deg);
+}
+
+/* this is where we display image and video previews */
+#preview {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: 50px;
+  bottom: 0px;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  background: #000; /* opaque */
+  z-index: 100;     /* on top of all the camera stuff */
+  transition: transform 0.5s linear;
+  overflow: hidden;
+  transform-origin: 0 0;
+}
+
+#preview.offscreen {
+  transform: translateY(-100%) scale(.125) translateX(50%);
+}
+
+#frame-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  bottom: 40px;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+  -moz-user-select: none;
+}
+
+#media-frame {
+  position: absolute;
+  /* size, position, and rotation are set based on the phone orientation */
+}
+
+#media-frame > img {
+  top: 0px;  /* javascript modifies this position with a transform */
+  left: 0px;
+  position: absolute;
+  border-width: 0px;
+  padding: 0px;
+  margin: 0px;
+  transform-origin: 0px 0px;
+  pointer-events: none;
+  -moz-user-select: none;
+}
+
+/*
+ * these styes apply when we're swapping out a preview image to replace
+ * it with a full-resolution image, but the full image isn't ready yet.
+ * This happens when the user starts to zoom in on the image. We need
+ * some sort of simple visual effect to fill ~500ms of dead time so the
+ * user doesn't think the app has frozen up
+ */
+#media-frame > img.swapping {
+  opacity: 0.8;
+  outline: dashed #0ac 4px;
+  outline-offset: -4px;
+}
+
+#media-frame > video {
+  transform-origin: 0px 0px;
+}
+
+#preview-controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0px;
+  height: 40px;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 100; /* above the dynamically inserted frame elements */
+}
+
+a.button {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  transition: 0.2s ease-in-out;
+}
+
+a.button:active, a.button:focus {
+  outline: none;
+}
+
+a.button.hidden {
+  display: none;
+}
+
+#camera-button {
+ position: absolute;
+ left: 0;
+ width: 33%;
+ height: 100%;
+ background-image: url(images/camera.png);
+}
+
+#share-button {
+ position: absolute;
+ left: 33%;
+ width: 33%;
+ height: 100%;
+ background-image: url(images/share.png);
+}
+
+#delete-button {
+ position: absolute;
+ left: 67%;
+ width: 33%;
+ height: 100%;
+ background-image: url(images/delete.png);
+}
+
+#filmstrip-gallery-button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 50px;
+ height: 50px;
+ background-image: url(images/grid.png);
+}
+
+/*
+ * Make the button icons rotate with the phone
+ */
+#preview[data-orientation="90"] a.button {
+  transform: rotate(-90deg);
+}
+#preview[data-orientation="180"] a.button {
+  transform: rotate(-180deg);
+}
+#preview[data-orientation="270"] a.button {
+  transform: rotate(-270deg);
+}
diff --git a/apps/system/camera/style/icons/60/Camera.png b/apps/system/camera/style/icons/60/Camera.png
new file mode 100644
index 0000000..f27f506
--- /dev/null
+++ b/apps/system/camera/style/icons/60/Camera.png
Binary files differ
diff --git a/apps/system/camera/style/icons/Camera.png b/apps/system/camera/style/icons/Camera.png
new file mode 100644
index 0000000..f27f506
--- /dev/null
+++ b/apps/system/camera/style/icons/Camera.png
Binary files differ
diff --git a/apps/system/camera/style/images/actionicon_cancel.png b/apps/system/camera/style/images/actionicon_cancel.png
new file mode 100644
index 0000000..5e73322
--- /dev/null
+++ b/apps/system/camera/style/images/actionicon_cancel.png
Binary files differ
diff --git a/apps/system/camera/style/images/camera.png b/apps/system/camera/style/images/camera.png
new file mode 100644
index 0000000..85a80f5
--- /dev/null
+++ b/apps/system/camera/style/images/camera.png
Binary files differ
diff --git a/apps/system/camera/style/images/delete.png b/apps/system/camera/style/images/delete.png
new file mode 100644
index 0000000..0f2450e
--- /dev/null
+++ b/apps/system/camera/style/images/delete.png
Binary files differ
diff --git a/apps/system/camera/style/images/flash_auto.png b/apps/system/camera/style/images/flash_auto.png
new file mode 100644
index 0000000..3018d8d
--- /dev/null
+++ b/apps/system/camera/style/images/flash_auto.png
Binary files differ
diff --git a/apps/system/camera/style/images/flash_off.png b/apps/system/camera/style/images/flash_off.png
new file mode 100644
index 0000000..0fc7112
--- /dev/null
+++ b/apps/system/camera/style/images/flash_off.png
Binary files differ
diff --git a/apps/system/camera/style/images/flash_on.png b/apps/system/camera/style/images/flash_on.png
new file mode 100644
index 0000000..c7983d1
--- /dev/null
+++ b/apps/system/camera/style/images/flash_on.png
Binary files differ
diff --git a/apps/system/camera/style/images/flash_torch.png b/apps/system/camera/style/images/flash_torch.png
new file mode 100644
index 0000000..3018d8d
--- /dev/null
+++ b/apps/system/camera/style/images/flash_torch.png
Binary files differ
diff --git a/apps/system/camera/style/images/grid.png b/apps/system/camera/style/images/grid.png
new file mode 100644
index 0000000..b53bcf2
--- /dev/null
+++ b/apps/system/camera/style/images/grid.png
Binary files differ
diff --git a/apps/system/camera/style/images/hud_button_underlay.png b/apps/system/camera/style/images/hud_button_underlay.png
new file mode 100644
index 0000000..5853adb
--- /dev/null
+++ b/apps/system/camera/style/images/hud_button_underlay.png
Binary files differ
diff --git a/apps/system/camera/style/images/hud_button_underlay_focus.png b/apps/system/camera/style/images/hud_button_underlay_focus.png
new file mode 100644
index 0000000..c3542bc
--- /dev/null
+++ b/apps/system/camera/style/images/hud_button_underlay_focus.png
Binary files differ
diff --git a/apps/system/camera/style/images/play_overlay.png b/apps/system/camera/style/images/play_overlay.png
new file mode 100644
index 0000000..2a56d04
--- /dev/null
+++ b/apps/system/camera/style/images/play_overlay.png
Binary files differ
diff --git a/apps/system/camera/style/images/share.png b/apps/system/camera/style/images/share.png
new file mode 100644
index 0000000..6a56f19
--- /dev/null
+++ b/apps/system/camera/style/images/share.png
Binary files differ
diff --git a/apps/system/camera/style/images/stop.png b/apps/system/camera/style/images/stop.png
new file mode 100644
index 0000000..b358cc5
--- /dev/null
+++ b/apps/system/camera/style/images/stop.png
Binary files differ
diff --git a/apps/system/camera/style/images/toggle_back.png b/apps/system/camera/style/images/toggle_back.png
new file mode 100644
index 0000000..5e767b4
--- /dev/null
+++ b/apps/system/camera/style/images/toggle_back.png
Binary files differ
diff --git a/apps/system/camera/style/images/toggle_front.png b/apps/system/camera/style/images/toggle_front.png
new file mode 100644
index 0000000..b67507f
--- /dev/null
+++ b/apps/system/camera/style/images/toggle_front.png
Binary files differ
diff --git a/apps/system/camera/style/images/ui/gradient.png b/apps/system/camera/style/images/ui/gradient.png
new file mode 100644
index 0000000..b288545
--- /dev/null
+++ b/apps/system/camera/style/images/ui/gradient.png
Binary files differ
diff --git a/apps/system/camera/style/images/ui/pattern.png b/apps/system/camera/style/images/ui/pattern.png
new file mode 100644
index 0000000..af03f56
--- /dev/null
+++ b/apps/system/camera/style/images/ui/pattern.png
Binary files differ
diff --git a/apps/system/camera/style/images/video.png b/apps/system/camera/style/images/video.png
new file mode 100644
index 0000000..5c41986
--- /dev/null
+++ b/apps/system/camera/style/images/video.png
Binary files differ
diff --git a/apps/system/camera/style/images/video_pause_button.png b/apps/system/camera/style/images/video_pause_button.png
new file mode 100644
index 0000000..b0224f8
--- /dev/null
+++ b/apps/system/camera/style/images/video_pause_button.png
Binary files differ
diff --git a/apps/system/camera/style/images/video_play_button.png b/apps/system/camera/style/images/video_play_button.png
new file mode 100644
index 0000000..56dba6b
--- /dev/null
+++ b/apps/system/camera/style/images/video_play_button.png
Binary files differ
diff --git a/apps/system/camera/style/images/video_play_focus.png b/apps/system/camera/style/images/video_play_focus.png
new file mode 100644
index 0000000..1bb0537
--- /dev/null
+++ b/apps/system/camera/style/images/video_play_focus.png
Binary files differ
diff --git a/apps/system/camera/style/images/video_play_normal.png b/apps/system/camera/style/images/video_play_normal.png
new file mode 100644
index 0000000..0cabf3d
--- /dev/null
+++ b/apps/system/camera/style/images/video_play_normal.png
Binary files differ
--
cgit v0.9.1