Bug 1095826 - [RTL][Video] Thumbnail images do not appear

apps/video/style/video.css

@@ -48,15 +48,22 @@ ul {
 
 li .inner {
   height: 12rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
-.unwatched {
+
+li .inner .unwatched {
   background: url(images/unwatched.png) no-repeat center / 100%;
   position: absolute;
   bottom: 0;
   width: 0.4rem;
   top: 0;
+  order: 1;
 }
-li .img {
+
+li .inner .img {
   /* background image will be configure in video.js, and it is croped with
    * 210 * devicePixelRatio, 120 * devicePixelRatio. So, we just need to make
    * it be fullsize in this container.
@@ -68,6 +75,7 @@ li .img {
   left: 0;
   margin: 0;
   padding: 0;
+  order: 2;
 }
 
 li .img.default {
@@ -77,7 +85,7 @@ li .img.default {
   background-color: #333333;
 }
 
-li .details {
+li .inner .details {
   line-height: 1.6rem;
   position: absolute;
   margin: 1.6rem 0;
@@ -88,7 +96,10 @@ li .details {
   top: 0;
   right: 0;
   overflow: hidden;
+  order: 3;
+  -moz-margin-start: 22rem;
 }
+
 li .details[data-visible] {
   visibility: visible;
 }
@@ -316,13 +327,6 @@ body.pick-activity > #in-use-overlay {
 body.hidden *[data-l10n-id] {
   visibility: hidden;
 }
-*[dir=rtl] li {
-  padding: 0 14.4rem 0 2rem;
-}
-*[dir=rtl] li img {
-  left: auto;
-  right: 0;
-}
 
 #close {
   outline: none;