From 7e286ceaf0edeb888a24aa0d91a8235c279c90f3 Mon Sep 17 00:00:00 2001
From: Hadi Charara <hadi.charara@protonmail.com>
Date: Fri, 23 Dec 2022 16:24:53 -0500
Subject: [PATCH] Some css reorganization

---
 src/assets/css/librarybrowser.scss | 94 ++++++++++++++----------------
 1 file changed, 45 insertions(+), 49 deletions(-)

diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss
index 68103114d..1fc4aeb48 100644
--- a/src/assets/css/librarybrowser.scss
+++ b/src/assets/css/librarybrowser.scss
@@ -619,11 +619,11 @@
         padding-right: 32.45vw;
         padding-left: 2%;
     }
-}
 
-.layout-mobile .detailPageContent {
-    padding-left: 5%;
-    padding-right: 5%;
+    .layout-mobile & {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
 }
 
 .detailSectionContent a {
@@ -747,31 +747,33 @@
     text-align: center !important;
 }
 
-.layout-mobile .mainDetailButtons {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-}
+.mainDetailButtons {
+    .layout-mobile [dir="ltr"] & {
+        margin-left: 0;
 
-.layout-mobile [dir="ltr"] .mainDetailButtons {
-    margin-left: 0;
+        @include header-poster-padding;
 
-    @include header-poster-padding;
-
-    // The buttons row is full width on small screens
-    @media all and (max-width: 32em) {
-        margin-bottom: 0;
-        padding-left: 0;
+        // The buttons row is full width on small screens
+        @media all and (max-width: 32em) {
+            margin-bottom: 0;
+            padding-left: 0;
+        }
     }
-}
 
-.layout-mobile [dir="rtl"] .mainDetailButtons {
-    margin-right: 0;
+    .layout-mobile [dir="rtl"] & {
+        margin-right: 0;
 
-    @include header-poster-padding-rtl;
+        @include header-poster-padding-rtl;
 
-    @media all and (max-width: 32em) {
-        margin-bottom: 0;
-        padding-right: 0;
+        @media all and (max-width: 32em) {
+            margin-bottom: 0;
+            padding-right: 0;
+        }
+    }
+
+    .layout-mobile & {
+        margin-top: 1em;
+        margin-bottom: 0.5em;
     }
 }
 
@@ -794,6 +796,16 @@
     align-content: center;
     z-index: 2;
 
+    .layout-desktop [dir="rtl"] &,
+    .layout-tv [dir="rtl"] & {
+        padding-right: 32.45vw;
+    }
+
+    .layout-desktop [dir="ltr"] &,
+    .layout-tv [dir="ltr"] & {
+        padding-left: 32.45vw;
+    }
+
     .layout-mobile & {
         display: block;
         position: relative;
@@ -809,22 +821,6 @@
     }
 }
 
-.layout-desktop [dir="rtl"] .detailPagePrimaryContainer {
-    padding-right: 32.45vw;
-}
-
-.layout-desktop [dir="ltr"] .detailPagePrimaryContainer {
-    padding-left: 32.45vw;
-}
-
-.layout-tv [dir="rtl"] .detailPagePrimaryContainer {
-    padding-right: 32.45vw;
-}
-
-.layout-tv [dir="ltr"] .detailPagePrimaryContainer {
-    padding-left: 32.45vw;
-}
-
 .layout-desktop .detailRibbon {
     margin-top: -7.2em;
     height: 7.2em;
@@ -839,20 +835,20 @@
     min-width: 0;
     max-width: 100%;
     flex: 1 0 0;
-}
 
-.layout-mobile .infoWrapper {
-    @media all and (max-width: 32em) {
-        position: relative;
+    .layout-mobile [dir="ltr"] & {
+        @include header-poster-padding;
     }
-}
 
-.layout-mobile [dir="ltr"] .infoWrapper {
-    @include header-poster-padding;
-}
+    .layout-mobile [dir="rtl"] & {
+        @include header-poster-padding-rtl;
+    }
 
-.layout-mobile [dir="rtl"] .infoWrapper {
-    @include header-poster-padding-rtl;
+    .layout-mobile & {
+        @media all and (max-width: 32em) {
+            position: relative;
+        }
+    }
 }
 
 .infoText {