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,101 +19,112 @@ limitations under the License.
     flex: 1 1 0;
     overflow-y: auto;
     display: flex;
-}
 
-.mx_FilePanel .mx_RoomView_messageListWrapper {
+    .mx_RoomView_messageListWrapper {
         flex-direction: row;
         align-items: center;
         justify-content: center;
     }
 
-.mx_FilePanel .mx_RoomView_MessageList {
+    .mx_RoomView_MessageList {
         width: 100%;
-}
 
-.mx_FilePanel .mx_RoomView_MessageList h2 {
+        h2 {
             display: none;
         }
+    }
 
     /* 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;
     }
 
+    .mx_EventTile {
         /* Overrides for the attachment body tiles */
-
-.mx_FilePanel .mx_EventTile:not([data-layout=bubble]) {
+        &:not([data-layout=bubble]) {
             word-break: break-word;
             margin-top: 10px;
             padding-top: 0;
 
             .mx_EventTile_line {
-        padding-left: 0;
+                padding-inline-start: 0;
+            }
+
+            &:hover {
+                &.mx_EventTile_verified,
+                &.mx_EventTile_unverified,
+                &.mx_EventTile_unknown {
+                    .mx_EventTile_line {
+                        box-shadow: none;
+                    }
+                }
             }
         }
 
-.mx_FilePanel .mx_EventTile .mx_MFileBody {
+        .mx_MFileBody {
             line-height: 2.4rem;
         }
 
-.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
-    padding-top: 8px;
+        .mx_MFileBody_download {
+            padding-top: $spacing-8;
             display: flex;
             font-size: $font-14px;
             color: $event-timestamp-color;
         }
 
-.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
+        .mx_MFileBody_downloadLink {
             flex: 1 1 auto;
             color: $light-fg-color;
         }
 
-.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+        .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 {
+        .mx_DisambiguatedProfile {
             flex: 1 1 auto;
             line-height: initial;
             opacity: 1.0;
             color: $event-timestamp-color;
         }
 
-.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+        .mx_MessageTimestamp {
             flex: 1 0 0;
-    text-align: right;
+            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_FilePanel .mx_EventTile_line {
-    margin-right: 0px;
-    padding-left: 0px;
-}
+    .mx_EventTile_line {
+        margin-inline-end: 0;
+        padding-inline-start: 0;
 
-.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
-    padding-left: 0px;
+        .mx_EventTile_selected & {
+            padding-inline-start: 0;
+        }
+    }
 }
 
 .mx_FilePanel_empty::before {