Files app: Loading detailed information for single file.

ui/file_manager/file_manager/foreground/css/file_manager.css

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index c05be9d711921997d161c638ffa0d58d9d7b52c2..012b59415422f6831b216e8064e9fd7338eb09cf 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -151,7 +151,7 @@ a:focus {
 .details-container > #single-file-details {
   display: flex;
   flex: auto;
-  flex-direction: row;
+  flex-direction: column;
   width: 100%;
 }
 
@@ -160,6 +160,77 @@ a:focus {
   width: 100%;
 }
 
+/* Filename header of details panel for single file */
+
+#single-file-details > .filename-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 40px;
+  padding: 0 6px;
+  width: 100%;
+}
+
+.filename-container > .filename {
+  -webkit-padding-end: 6px;
+  flex: auto;
+  font-weight: 500;
+  overflow: hidden;
+}
+
+/* Filetype icon of details panel for single file */
+
+#single-file-details > .thumbnail-container {
+  box-sizing: border-box;
+  padding: 6px;
+  position: relative;
+  width: 100%;
+}
+
+#single-file-details > .thumbnail-container:before {
+  content: "";
+  display: block;
+  padding-top: 100%;
+}
+
+.thumbnail-container > .thumbnail {
+  background-color: rgb(230, 230, 230);
+  background-position: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.thumbnail-container > .thumbnail.loaded {
+  background-image: none;
+}
+
+.thumbnail > img {
+  height: 100%;
+  object-fit: contain;
+  width: 100%;
+}
+
+.thumbnail > video {
+  height: 100%;
+  object-fit: contain;
+  width: 100%;
+}
+
+.thumbnail > audio {
+  bottom: 0px;
+  left: 0px;
+  height: auto;
+  position: absolute;
+  width: 100%;
+}
+
+.details-list > li:not(.available) {
+  display: none;
+}
+
 /* Directory tree at the left. */
 .dialog-navigation-list {
   -webkit-border-end: 1px solid rgba(0, 0, 0, 0.15);