diff options
Diffstat (limited to 'apps/system/camera/style')
27 files changed, 653 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; +} + 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 Binary files differnew file mode 100644 index 0000000..f27f506 --- /dev/null +++ b/apps/system/camera/style/icons/60/Camera.png diff --git a/apps/system/camera/style/icons/Camera.png b/apps/system/camera/style/icons/Camera.png Binary files differnew file mode 100644 index 0000000..f27f506 --- /dev/null +++ b/apps/system/camera/style/icons/Camera.png diff --git a/apps/system/camera/style/images/actionicon_cancel.png b/apps/system/camera/style/images/actionicon_cancel.png Binary files differnew file mode 100644 index 0000000..5e73322 --- /dev/null +++ b/apps/system/camera/style/images/actionicon_cancel.png diff --git a/apps/system/camera/style/images/camera.png b/apps/system/camera/style/images/camera.png Binary files differnew file mode 100644 index 0000000..85a80f5 --- /dev/null +++ b/apps/system/camera/style/images/camera.png diff --git a/apps/system/camera/style/images/delete.png b/apps/system/camera/style/images/delete.png Binary files differnew file mode 100644 index 0000000..0f2450e --- /dev/null +++ b/apps/system/camera/style/images/delete.png diff --git a/apps/system/camera/style/images/flash_auto.png b/apps/system/camera/style/images/flash_auto.png Binary files differnew file mode 100644 index 0000000..3018d8d --- /dev/null +++ b/apps/system/camera/style/images/flash_auto.png diff --git a/apps/system/camera/style/images/flash_off.png b/apps/system/camera/style/images/flash_off.png Binary files differnew file mode 100644 index 0000000..0fc7112 --- /dev/null +++ b/apps/system/camera/style/images/flash_off.png diff --git a/apps/system/camera/style/images/flash_on.png b/apps/system/camera/style/images/flash_on.png Binary files differnew file mode 100644 index 0000000..c7983d1 --- /dev/null +++ b/apps/system/camera/style/images/flash_on.png diff --git a/apps/system/camera/style/images/flash_torch.png b/apps/system/camera/style/images/flash_torch.png Binary files differnew file mode 100644 index 0000000..3018d8d --- /dev/null +++ b/apps/system/camera/style/images/flash_torch.png diff --git a/apps/system/camera/style/images/grid.png b/apps/system/camera/style/images/grid.png Binary files differnew file mode 100644 index 0000000..b53bcf2 --- /dev/null +++ b/apps/system/camera/style/images/grid.png diff --git a/apps/system/camera/style/images/hud_button_underlay.png b/apps/system/camera/style/images/hud_button_underlay.png Binary files differnew file mode 100644 index 0000000..5853adb --- /dev/null +++ b/apps/system/camera/style/images/hud_button_underlay.png diff --git a/apps/system/camera/style/images/hud_button_underlay_focus.png b/apps/system/camera/style/images/hud_button_underlay_focus.png Binary files differnew file mode 100644 index 0000000..c3542bc --- /dev/null +++ b/apps/system/camera/style/images/hud_button_underlay_focus.png diff --git a/apps/system/camera/style/images/play_overlay.png b/apps/system/camera/style/images/play_overlay.png Binary files differnew file mode 100644 index 0000000..2a56d04 --- /dev/null +++ b/apps/system/camera/style/images/play_overlay.png diff --git a/apps/system/camera/style/images/share.png b/apps/system/camera/style/images/share.png Binary files differnew file mode 100644 index 0000000..6a56f19 --- /dev/null +++ b/apps/system/camera/style/images/share.png diff --git a/apps/system/camera/style/images/stop.png b/apps/system/camera/style/images/stop.png Binary files differnew file mode 100644 index 0000000..b358cc5 --- /dev/null +++ b/apps/system/camera/style/images/stop.png diff --git a/apps/system/camera/style/images/toggle_back.png b/apps/system/camera/style/images/toggle_back.png Binary files differnew file mode 100644 index 0000000..5e767b4 --- /dev/null +++ b/apps/system/camera/style/images/toggle_back.png diff --git a/apps/system/camera/style/images/toggle_front.png b/apps/system/camera/style/images/toggle_front.png Binary files differnew file mode 100644 index 0000000..b67507f --- /dev/null +++ b/apps/system/camera/style/images/toggle_front.png diff --git a/apps/system/camera/style/images/ui/gradient.png b/apps/system/camera/style/images/ui/gradient.png Binary files differnew file mode 100644 index 0000000..b288545 --- /dev/null +++ b/apps/system/camera/style/images/ui/gradient.png diff --git a/apps/system/camera/style/images/ui/pattern.png b/apps/system/camera/style/images/ui/pattern.png Binary files differnew file mode 100644 index 0000000..af03f56 --- /dev/null +++ b/apps/system/camera/style/images/ui/pattern.png diff --git a/apps/system/camera/style/images/video.png b/apps/system/camera/style/images/video.png Binary files differnew file mode 100644 index 0000000..5c41986 --- /dev/null +++ b/apps/system/camera/style/images/video.png diff --git a/apps/system/camera/style/images/video_pause_button.png b/apps/system/camera/style/images/video_pause_button.png Binary files differnew file mode 100644 index 0000000..b0224f8 --- /dev/null +++ b/apps/system/camera/style/images/video_pause_button.png diff --git a/apps/system/camera/style/images/video_play_button.png b/apps/system/camera/style/images/video_play_button.png Binary files differnew file mode 100644 index 0000000..56dba6b --- /dev/null +++ b/apps/system/camera/style/images/video_play_button.png diff --git a/apps/system/camera/style/images/video_play_focus.png b/apps/system/camera/style/images/video_play_focus.png Binary files differnew file mode 100644 index 0000000..1bb0537 --- /dev/null +++ b/apps/system/camera/style/images/video_play_focus.png diff --git a/apps/system/camera/style/images/video_play_normal.png b/apps/system/camera/style/images/video_play_normal.png Binary files differnew file mode 100644 index 0000000..0cabf3d --- /dev/null +++ b/apps/system/camera/style/images/video_play_normal.png |
