Bug 1153418 - Fix an issue on Loop's standalone where the remote and video alignment during screenshare is 10px out. r=dmose
authorMark Banner <standard8@mozilla.com>
Tue, 14 Apr 2015 08:30:57 +0100
changeset 270450 76c6f37dafe7b010a68281c4ca1804168b36211f
parent 270260 6690380e09e0190f284a8a9fcc7d809af0bf1b28
child 270451 3c249cba737c07e2d400e0c12786623bc1e6aedc
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdmose
bugs1153418
milestone40.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1153418 - Fix an issue on Loop's standalone where the remote and video alignment during screenshare is 10px out. r=dmose
browser/components/loop/content/shared/css/conversation.css
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -714,21 +714,24 @@ html, .fx-embedded, #main,
   }
 
   /* Nested video elements */
   .conversation .media.nested {
     position: relative;
     height: 100%;
   }
 
+  .standalone .media.nested {
+    margin-left: 10px;
+  }
+
   .standalone .remote_wrapper {
     position: relative;
-    width: calc(100% - 10px);
+    width: 100%;
     height: 100%;
-    margin-left: 10px;
   }
 
   .standalone {
     margin: 0 auto;
   }
 }
 
 @media screen and (max-width:640px) {
@@ -971,17 +974,17 @@ body[dir=rtl] .share-service-dropdown .s
   height: calc(100% - 50px - 60px);
 }
 
 .standalone .room-conversation-wrapper .room-inner-info-area {
   position: absolute;
   /* `top` is chosen to vertically position the area near the center
      of the media element. */
   top: calc(50% - 140px);
-  left: calc(25% + 62.5px + 10px);
+  left: 25%;
   z-index: 1000;
   /* `width` here is specified by the design spec. */
   width: 250px;
   color: #fff;
   box-sizing: content-box;
 }
 
 .standalone .prompt-media-message {
@@ -1044,17 +1047,17 @@ body[dir=rtl] .share-service-dropdown .s
 }
 
 .standalone .room-conversation .media {
   background: #000;
 }
 
 .standalone .room-conversation .video_wrapper.remote_wrapper {
   background-color: #4e4e4e;
-  width: calc(75% - 10px); /* Take the left margin into account. */
+  width: 75%;
 }
 
 .standalone .room-conversation .conversation-toolbar {
   background: #000;
   border: none;
 }
 
 .standalone .room-conversation .conversation-toolbar .btn-hangup-entry {
@@ -1074,16 +1077,17 @@ body[dir=rtl] .share-service-dropdown .s
   }
   .room-conversation-wrapper header {
     width: 100%;
   }
   .standalone .room-conversation-wrapper .room-inner-info-area {
     right: 0;
     margin: auto;
     width: 100%;
+    left: 0;
   }
   .standalone .room-conversation-wrapper .video-layout-wrapper {
     /* 50px: header's height; 25px: footer's height */
     height: calc(100% - 50px - 25px);
   }
   .standalone .room-conversation .video_wrapper.remote_wrapper {
     width: 100%;
   }