Permalink
Browse files

Bug 830644 - [Camera][Hidpi] Support high resolution devices

  • Loading branch information...
1 parent bf0089f commit f778cbca2f61ff549c03bfa9b17159ae78e3f553 @rexboy7 rexboy7 committed Mar 20, 2013
Showing with 103 additions and 95 deletions.
  1. +1 −0 apps/camera/index.html
  2. +43 −43 apps/camera/style/VideoPlayer.css
  3. +34 −30 apps/camera/style/camera.css
  4. +25 −22 apps/camera/style/filmstrip.css
  5. BIN apps/camera/style/icons/60/Camera@2x.png
  6. BIN apps/camera/style/icons/Camera@2x.png
  7. BIN apps/camera/style/images/actionicon_cancel.png
  8. BIN apps/camera/style/images/actionicon_cancel@2x.png
  9. BIN apps/camera/style/images/camera@2x.png
  10. BIN apps/camera/style/images/delete.png
  11. BIN apps/camera/style/images/delete@2x.png
  12. BIN apps/camera/style/images/flash_auto@2x.png
  13. BIN apps/camera/style/images/flash_off@2x.png
  14. BIN apps/camera/style/images/flash_on@2x.png
  15. BIN apps/camera/style/images/flash_torch@2x.png
  16. BIN apps/camera/style/images/grid@2x.png
  17. BIN apps/camera/style/images/hud_button_underlay.png
  18. BIN apps/camera/style/images/hud_button_underlay@2x.png
  19. BIN apps/camera/style/images/hud_button_underlay_focus@2x.png
  20. BIN apps/camera/style/images/play_overlay.png
  21. BIN apps/camera/style/images/play_overlay@2x.png
  22. BIN apps/camera/style/images/share.png
  23. BIN apps/camera/style/images/share@2x.png
  24. BIN apps/camera/style/images/stop.png
  25. BIN apps/camera/style/images/stop@2x.png
  26. BIN apps/camera/style/images/toggle_back@2x.png
  27. BIN apps/camera/style/images/toggle_front@2x.png
  28. BIN apps/camera/style/images/video.png
  29. BIN apps/camera/style/images/video@2x.png
  30. BIN apps/camera/style/images/video_pause_button.png
  31. BIN apps/camera/style/images/video_pause_button@2x.png
  32. BIN apps/camera/style/images/video_play_button.png
  33. BIN apps/camera/style/images/video_play_button@2x.png
  34. BIN apps/camera/style/images/video_play_focus.png
  35. BIN apps/camera/style/images/video_play_focus@2x.png
  36. BIN apps/camera/style/images/video_play_normal.png
  37. BIN apps/camera/style/images/video_play_normal@2.png
  38. BIN apps/camera/style/images/video_play_normal@2x.png
@@ -7,6 +7,7 @@
<link rel="resource" type="application/l10n" href="locales/locales.ini" />
<link rel="resource" type="application/l10n" href="/shared/locales/date.ini" />
<link type="text/css" rel="stylesheet" href="style/camera.css"/>
+ <link type="text/css" rel="stylesheet" href="shared/style/responsive.css"/>
<script defer src="/shared/js/l10n.js"></script>
<!-- The following scripts are lazy loaded but left here to ensure
@@ -9,28 +9,28 @@
/* video player controls */
.videoPlayerControls {
position: absolute;
- left: 0px;
- right: 0px;
- top: 0px;
- bottom: 0px;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
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;
+ width: 10.6rem;
+ height: 10.6rem;
+ left: calc(50% - 5.3rem);
+ top: calc(50% - 5.3rem);
+ background: url("images/video_play_button.png")no-repeat center center / 10.6rem,
+ url("images/video_play_normal.png")no-repeat center center / 10.6rem;
border-width: 0;
}
.videoPlayerPlayButton:active {
- background: url("images/video_play_button.png") center no-repeat,
- url("images/video_play_focus.png") center no-repeat
+ background: url("images/video_play_button.png")no-repeat center center / 10.6rem,
+ url("images/video_play_focus.png")no-repeat center center / 10.6rem
}
.videoPlayerPlayButton.hidden {
@@ -39,10 +39,10 @@
.videoPlayerFooter {
position: absolute;
- left: 0px;
- right: 0px;
- bottom: 0px;
- height: 50px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 5rem;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.3);
@@ -60,21 +60,21 @@
.videoPlayerPauseButton {
position: absolute;
- width: 100px;
- height: 100px;
+ width: 10rem;
+ height: 10rem;
padding: 0;
margin: 0;
- background: url("images/video_pause_button.png") center no-repeat,
+ background: url("images/video_pause_button.png") no-repeat center center / 9.6rem,
rgba(0,0,0,.5);
- border-radius: 53px;
- border: solid #ccc 3px;
- top: -25px;
- left: 10px;
+ border-radius: 5.3rem;
+ border: solid #ccc 0.3rem;
+ top: -2.5rem;
+ left: 1rem;
}
.videoPlayerPauseButton:active {
- background: url("images/video_pause_button.png") center no-repeat,
- url("images/video_play_focus.png") center no-repeat
+ background: url("images/video_pause_button.png") no-repeat center center / 9.6rem,
+ url("images/video_play_focus.png") no-repeat center center / 10.6rem
}
button::-moz-focus-inner {
@@ -85,36 +85,36 @@ button::-moz-focus-inner {
/* time slider */
.videoPlayerSlider {
position: absolute;
- left: 110px;
- top: 0px;
- right: 0px;
+ left: 11rem;
+ top: 0;
+ right: 0;
height: 100%;
}
.videoPlayerSlider > span {
display: block;
- width: 45px;
+ width: 4.5rem;
position: absolute;
color: white;
height: 100%;
- line-height: 50px;
+ line-height: 5rem;
text-align: center;
- font-size: 15px;
+ font-size: 1.5rem;
}
.videoPlayerElapsedText {
- left: 10px;
+ left: 1rem;
}
.videoPlayerDurationText {
- right: 10px;
+ right: 1rem;
}
.videoPlayerProgress {
position: absolute;
- top: 0px;
- left: 70px;
- right: 70px;
+ top: 0;
+ left: 7rem;
+ right: 7rem;
height: 100%;
}
@@ -124,11 +124,11 @@ button::-moz-focus-inner {
}
.videoPlayerElapsedBar, .videoPlayerBackgroundBar {
- height: 4px;
+ height: 0.4rem;
width: 0%;
top: 50%;
- margin-top: -2px;
- border-radius: 6px;
+ margin-top: -0.2rem;
+ border-radius: 0.6rem;
}
.videoPlayerElapsedBar {
@@ -142,11 +142,11 @@ button::-moz-focus-inner {
.videoPlayerPlayHead {
display: block;
- height: 20px;
- width: 25px;
- border-radius: 25px;
+ height: 2rem;
+ width: 2.5rem;
+ border-radius: 2.5rem;
background-color: white;
top: 50%;
- margin: -10px 0 0 -12px;
+ margin: -1rem 0 0 -1.2rem;
}
@@ -19,7 +19,7 @@ html, body {
bottom: 0;
right: 0;
left: 0;
- height: 45px;
+ height: 4.5rem;
z-index: 50;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
@@ -30,7 +30,7 @@ html, body {
}
#switch-button, #misc-button {
- height: 45px;
+ height: 4.5rem;
width: 33%;
}
@@ -43,14 +43,15 @@ html, body {
pointer-events: none;
background-position: center center;
background-repeat: no-repeat;
+ background-size: 3rem;
display: block;
position: absolute;
top: 50%;
left: 50%;
- margin-left: -15px;
- margin-top: -15px;
- width: 30px;
- height: 30px;
+ margin-left: -1.5rem;
+ margin-top: -1.5rem;
+ width: 3rem;
+ height: 3rem;
}
#switch-button {
@@ -110,16 +111,17 @@ html, body {
#capture-button {
background-color: #03a2b4;
- border-radius: 100px;
+ border-radius: 10rem;
left: 33%;
- height: 100px;
+ height: 10rem;
width: 33%;
- top: -28px;
+ top: -2.8rem;
}
#video-timer {
display: none;
color: white;
+ font-size: 1.8rem;
}
/* Specific to when we are capturing video */
@@ -160,27 +162,27 @@ html, body {
position: absolute;
z-index: 100;
display: none;
- width: 50px;
- height: 50px;
- border-radius: 50px;
+ width: 5rem;
+ height: 5rem;
+ border-radius: 5rem;
top: 50%;
left: 50%;
- margin-top: -30px;
- margin-left: -30px;
+ margin-top: -3rem;
+ margin-left: -3rem;
}
#focus-ring[data-state=focused] {
- border: 4px solid rgba(0, 255, 0, 0.3);
+ border: 0.4rem solid rgba(0, 255, 0, 0.3);
display: block;
}
#focus-ring[data-state=focusing] {
- border: 4px solid rgba(0, 0, 0, 0.8);
+ border: 0.4rem solid rgba(0, 0, 0, 0.8);
display: block;
}
#focus-ring[data-state=fail] {
- border: 4px solid rgba(255, 0, 0, 0.3);
+ border: 0.4rem solid rgba(255, 0, 0, 0.3);
display: block;
}
@@ -227,19 +229,19 @@ html, body {
/* 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;
+ padding: 11rem 2.5rem 0 2.5rem;
}
#overlay-title {
font-weight: normal;
font-size: 1.9rem;
color: #fff;
- margin: 0 5px -10px 5px;
+ margin: 0 0.5rem -1rem 0.5rem;
}
#overlay-text {
- padding: 10px 5px 0 5px;
- border-top: 1px solid #686868;
+ padding: 1rem 0.5rem 0 0.5rem;
+ border-top: 0.1rem solid #686868;
font-weight: 300;
font-size: 2.5rem;
color: #ebebeb;
@@ -251,8 +253,8 @@ html, body {
#hud {
position: absolute;
- top: 20px;
- height: 75px;
+ top: 2rem;
+ height: 7.5rem;
left: 0;
right: 0;
z-index: 50;
@@ -261,36 +263,38 @@ html, body {
#hud a {
position: absolute;
z-index: 50;
- height: 75px;
- width: 75px;
+ height: 7.5rem;
+ width: 7.5rem;
border: 0;
background-position: center center;
background-repeat: no-repeat;
background-image: url(images/hud_button_underlay.png);
+ background-size: 4.5rem;
}
#hud a:after {
content: " ";
display: block;
position: relative;
z-index: 60;
- height: 75px;
- width: 75px;
+ height: 7.5rem;
+ width: 7.5rem;
background: transparent;
background-position: center center;
background-repeat: no-repeat;
+ background-size: 3rem;
}
#hud a:active {
background-image: url(images/hud_button_underlay_focus.png);
}
#toggle-camera {
- right: 20px;
+ right: 2rem;
}
#toggle-flash {
- left: 20px;
+ left: 2rem;
}
#toggle-camera[data-mode=back]:after {
@@ -314,7 +318,7 @@ html, body {
}
#filmstrip.hidden {
- transform: translateY(-50px);
+ transform: translateY(-5rem);
}
#preview.offscreen {
Oops, something went wrong. Retry.

0 comments on commit f778cbc

Please sign in to comment.