diff options
Diffstat (limited to 'apps/system/camera/style/camera.css')
| -rw-r--r-- | apps/system/camera/style/camera.css | 314 |
1 files changed, 0 insertions, 314 deletions
diff --git a/apps/system/camera/style/camera.css b/apps/system/camera/style/camera.css deleted file mode 100644 index 6a1ca02..0000000 --- a/apps/system/camera/style/camera.css +++ /dev/null @@ -1,314 +0,0 @@ -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); -} |