Tidy up _RoomView.pcss (#10744)

* Include: `mx_MainSplit` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include: `mx_RoomView_messagePanelSearchSpinner::before` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include: `mx_RoomView_timeline` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include: `mx_RoomView_MessageList li` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include: `mx_RoomView_inCall` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include: `mx_RoomView .mx_MessageComposer` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · May 2, 2023 · f342f4d · f342f4d
1 parent 0adf465
commit f342f4d
Showing 1 changed file with 45 additions and 43 deletions.
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
@@ -34,6 +34,16 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     position: relative;
+
+    .mx_MainSplit {
+        flex: 1 1 0;
+    }
+
+    .mx_MessageComposer {
+        width: 100%;
+        flex: 0 0 auto;
+        margin-right: 2px;
+    }
 }
 
 .mx_RoomView_auxPanel {
@@ -51,10 +61,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_RoomView .mx_MainSplit {
-    flex: 1 1 0;
-}
-
 .mx_RoomView_messagePanel {
     width: 100%;
     overflow-y: auto;
@@ -69,20 +75,20 @@ limitations under the License.
     background-size: 25px;
     background-repeat: no-repeat;
     position: relative;
-}
 
-.mx_RoomView_messagePanelSearchSpinner::before {
-    background-color: $info-plinth-fg-color;
-    mask: url("$(res)/img/feather-customised/search-input.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: 50px;
-    content: "";
-    position: absolute;
-    top: 286px;
-    left: 0;
-    right: 0;
-    height: 50px;
+    &::before {
+        background-color: $info-plinth-fg-color;
+        mask: url("$(res)/img/feather-customised/search-input.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 50px;
+        content: "";
+        position: absolute;
+        top: 286px;
+        left: 0;
+        right: 0;
+        height: 50px;
+    }
 }
 
 .mx_RoomView_body {
@@ -96,15 +102,15 @@ limitations under the License.
     .mx_RoomView_messagePanelSearchSpinner {
         order: 2;
     }
-}
 
-.mx_RoomView_body .mx_RoomView_timeline {
-    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    margin-right: calc($container-gap-width / 2);
+    .mx_RoomView_timeline {
+        /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-right: calc($container-gap-width / 2);
+    }
 }
 
 .mx_RoomView_statusArea {
@@ -171,16 +177,16 @@ limitations under the License.
     /* needed as min-height is set to clientHeight in ScrollPanel
     to prevent shrinking when WhoIsTypingTile is hidden */
     box-sizing: border-box;
+
+    li {
+        clear: both;
+    }
 }
 
 .mx_RoomView--local .mx_ScrollPanel .mx_RoomView_MessageList {
     justify-content: center;
 }
 
-.mx_RoomView_MessageList li {
-    clear: both;
-}
-
 li.mx_RoomView_myReadMarker_container {
     height: 0px;
     margin: 0px;
@@ -206,21 +212,17 @@ hr.mx_RoomView_myReadMarker {
     border: unset;
 }
 
-.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
-    margin-top: 2px;
-    border: none;
-    height: 0px;
-}
-
-.mx_RoomView_inCall .mx_MessageComposer_wrapper {
-    border-top: 2px hidden;
-    padding-top: 1px;
-}
+.mx_RoomView_inCall {
+    .mx_RoomView_statusAreaBox_line {
+        margin-top: 2px;
+        border: none;
+        height: 0px;
+    }
 
-.mx_RoomView .mx_MessageComposer {
-    width: 100%;
-    flex: 0 0 auto;
-    margin-right: 2px;
+    .mx_MessageComposer_wrapper {
+        border-top: 2px hidden;
+        padding-top: 1px;
+    }
 }
 
 .mx_MatrixChat_useCompactLayout {