Merge pull request #145 from ReflectsLight/ar_layout

Improve Arabic layout

src/css/pages/surah/index.scss

@@ -47,19 +47,23 @@ ul.body.index {
   }
 }
 
-.root .content .row.surah.choose-random {
+body .root .content .row.surah.choose-random {
   display: flex;
   place-content: center;
 }
 
-.root .content.theme.en {
+body .root .content.theme.en {
   ul.body.index a .surah.id {
     margin-right: 5px;
   }
 }
 
-.root .content.theme.ar {
-  ul.body.index a .surah.id {
-    margin-left: 8px;
+body .root .content.theme.ar {
+  ul.body.index {
+    a .surah.id {
+      width: 35px;
+      padding: 1px;
+      margin-left: 8px;
+    }
   }
 }

src/css/pages/surah/stream.scss

@@ -53,11 +53,6 @@
   top: 4px;
 }
 
-.content.ar .row .timer {
-  position: relative;
-  top: 2px;
-}
-
 .content .row svg {
   width: 30px;
   height: 30px;
@@ -73,5 +68,23 @@
   justify-content: flex-end !important;
 }
 
+body .root .content.theme.ar {
+  .row.details  {
+    place-content: flex-end;
+    span[lang="en"] {
+      display: none;
+    }
+  }
+
+  ul.body.stream .ayah p {
+    margin-top: 10px;
+  }
+
+  .row .timer {
+    position: relative;
+    top: 2px;
+  }
+}
+
 @import "themes/moon";
 @import "themes/leaf";