Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #8886 from rexboy7/hd-camera
Browse files Browse the repository at this point in the history 
Bug 830644 - [Camera][Hidpi] Support high resolution devices
  • Loading branch information
@daleharvey
daleharvey committed Apr 5, 2013
2 parents b134957 + f778cbc commit a268ae3
Show file tree
Hide file tree
Showing 38 changed files with 103 additions and 95 deletions.
1 change: 1 addition & 0 deletions apps/camera/index.html
View file
Expand Up @@ -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
Expand Down
86 changes: 43 additions & 43 deletions apps/camera/style/VideoPlayer.css
View file
Expand Up @@ -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 {
Expand All @@ -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);
Expand All @@ -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 {
Expand All @@ -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%;
}

Expand All @@ -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 {
Expand All @@ -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;
}

64 changes: 34 additions & 30 deletions apps/camera/style/camera.css
View file
Expand Up @@ -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;
Expand All @@ -30,7 +30,7 @@ html, body {
}

#switch-button, #misc-button {
height: 45px;
height: 4.5rem;
width: 33%;
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -314,7 +318,7 @@ html, body {
}

#filmstrip.hidden {
transform: translateY(-50px);
transform: translateY(-5rem);
}

#preview.offscreen {
Expand Down

0 comments on commit a268ae3

Please sign in to comment.