diff options
Diffstat (limited to 'apps/system/camera/style/camera.css')
| -rw-r--r-- | apps/system/camera/style/camera.css | 314 |
1 files changed, 314 insertions, 0 deletions
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); +} |