Tidy up _FilePanel.scss (#8953)

* Include in mx_FilePanel

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_RoomView_MessageList * and mx_EventTile *

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* &:not([data-layout=bubble])

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Variables, logical properties, etc.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Cancel the left stroke of the event tile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add comment to indicate that text-align of MessageTimestamp is not effective

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/structures/_FilePanel.scss

@@ -19,103 +19,114 @@ limitations under the License.
     flex: 1 1 0;
     overflow-y: auto;
     display: flex;
-}
 
-.mx_FilePanel .mx_RoomView_messageListWrapper {
+    .mx_RoomView_messageListWrapper {
-    flex-direction: row;
+        flex-direction: row;
-    align-items: center;
+        align-items: center;
-    justify-content: center;
+        justify-content: center;
-}
+    }
 
-.mx_FilePanel .mx_RoomView_MessageList {
+    .mx_RoomView_MessageList {
-    width: 100%;
+        width: 100%;
-}
 
-.mx_FilePanel .mx_RoomView_MessageList h2 {
+        h2 {
-    display: none;
+            display: none;
-}
+        }
+    }
 
-/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+    /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
    we should make EventTile a base CSS class and customise it specifically
    for usage in {Message,File,Notification}Panel. */
 
-.mx_FilePanel .mx_EventTile_avatar {
+    .mx_EventTile_avatar {
-    display: none;
+        display: none;
-}
+    }
 
-/* Overrides for the attachment body tiles */
+    .mx_EventTile {
+        /* Overrides for the attachment body tiles */
+        &:not([data-layout=bubble]) {
+            word-break: break-word;
+            margin-top: 10px;
+            padding-top: 0;
 
-.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
+            .mx_EventTile_line {
-    word-break: break-word;
+                padding-inline-start: 0;
-    margin-top: 10px;
+            }
-    padding-top: 0;
+
+            &:hover {
+                &.mx_EventTile_verified,
+                &.mx_EventTile_unverified,
+                &.mx_EventTile_unknown {
+                    .mx_EventTile_line {
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
+
+        .mx_MFileBody {
+            line-height: 2.4rem;
+        }
+
+        .mx_MFileBody_download {
+            padding-top: $spacing-8;
+            display: flex;
+            font-size: $font-14px;
+            color: $event-timestamp-color;
+        }
+
+        .mx_MFileBody_downloadLink {
+            flex: 1 1 auto;
+            color: $light-fg-color;
+        }
+
+        .mx_MImageBody_size {
+            flex: 1 0 0;
+            font-size: $font-14px;
+            text-align: right;
+            white-space: nowrap;
+        }
+
+        .mx_DisambiguatedProfile {
+            flex: 1 1 auto;
+            line-height: initial;
+            opacity: 1.0;
+            color: $event-timestamp-color;
+        }
+
+        .mx_MessageTimestamp {
+            flex: 1 0 0;
+            text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp
+            visibility: visible;
+            position: initial;
+            font-size: $font-14px;
+            opacity: 1.0;
+        }
+    }
+
+    /* Overides for the sender details line */
+
+    .mx_EventTile_senderDetails {
+        display: flex;
+        margin-top: -2px;
+    }
+
+    .mx_EventTile_senderDetailsLink {
+        text-decoration: none;
+    }
+
+    /* Overrides for the wrappers around the body tile */
 
     .mx_EventTile_line {
-        padding-left: 0;
+        margin-inline-end: 0;
+        padding-inline-start: 0;
+
+        .mx_EventTile_selected & {
+            padding-inline-start: 0;
+        }
     }
 }
 
-.mx_FilePanel .mx_EventTile .mx_MFileBody {
-    line-height: 2.4rem;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
-    padding-top: 8px;
-    display: flex;
-    font-size: $font-14px;
-    color: $event-timestamp-color;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
-    flex: 1 1 auto;
-    color: $light-fg-color;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
-    flex: 1 0 0;
-    font-size: $font-14px;
-    text-align: right;
-    white-space: nowrap;
-}
-
-/* Overides for the sender details line */
-
-.mx_FilePanel .mx_EventTile_senderDetails {
-    display: flex;
-    margin-top: -2px;
-}
-
-.mx_FilePanel .mx_EventTile_senderDetailsLink {
-    text-decoration: none;
-}
-
-.mx_FilePanel .mx_EventTile .mx_DisambiguatedProfile {
-    flex: 1 1 auto;
-    line-height: initial;
-    opacity: 1.0;
-    color: $event-timestamp-color;
-}
-
-.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
-    flex: 1 0 0;
-    text-align: right;
-    visibility: visible;
-    position: initial;
-    font-size: $font-14px;
-    opacity: 1.0;
-}
-
-/* Overrides for the wrappers around the body tile */
-
-.mx_FilePanel .mx_EventTile_line {
-    margin-right: 0px;
-    padding-left: 0px;
-}
-
-.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
-    padding-left: 0px;
-}
-
 .mx_FilePanel_empty::before {
     mask-image: url('$(res)/img/element-icons/room/files.svg');
 }