--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -634,17 +634,17 @@ body[platform="win"] .share-service-drop
 .media-wrapper > .focus-stream {
   display: flex;
   /* We want this to be the width, minus 200px which is for the right-side text
      chat and video displays. */
   width: calc(100% - 200px);
   /* 100% height to fill up media-layout, thus forcing other elements into the
      second column that's 200px wide */
   height: 100%;
-  background-color: #D8D8D8;
+  background-color: #d8d8d8;
 }
 
 .media-wrapper > .local {
   flex: 0 1 auto;
   width: 200px;
   height: 150px;
 }
 
@@ -715,18 +715,16 @@ body[platform="win"] .share-service-drop
 
 .media-wrapper > .text-chat-disabled > .text-chat-entries {
   /* When text chat is disabled, the entries box should be 100% height. */
   height: 100%;
 }
 
 .media-wrapper.receiving-screen-share > .screen {
   order: 1;
-  /* Since there is grey stuff behind us, avoid obvious letterboxing */
-  background-color: black;
 }
 
 .media-wrapper.receiving-screen-share > .text-chat-view {
   order: 2;
 }
 
 .media-wrapper.receiving-screen-share > .remote {
   order: 3;
@@ -910,17 +908,16 @@ body[platform="win"] .share-service-drop
   .media-wrapper:not(.showing-remote-streams) > .focus-stream > .local {
     position: relative;
     margin: 0;
     right: auto;
     left: auto;
     bottom: auto;
     width: 100%;
     height: 100%;
-    background-color: black;
   }
 
   .media-wrapper:not(.showing-remote-streams) > .focus-stream > .local ~ .conversation-toolbar {
     max-width: 100%;
   }
 
   .media-wrapper > .focus-stream {
     flex: 1 1 auto;