Fixed multiselect and header

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 25 insertions, 16 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 82c244cff0c..5f7c998c51c 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -172,7 +172,7 @@ table th, table th a {
 	color: var(--color-text-maxcontrast);
 }
 table.multiselect th a {
-	color: #000;
+	color: var(--color-main-text);
 }
 table th .columntitle {
 	display: block;
@@ -262,8 +262,7 @@ table.multiselect thead {
 }
 
 table.multiselect thead th {
-	background-color: rgba(255, 255, 255, 0.95); /* like controls bar */
-	color: #000;
+	background-color: var(--color-main-background);
 	font-weight: bold;
 	border-bottom: 0;
 }
@@ -732,10 +731,20 @@ table.dragshadow td.size {
 	display: flex;
 	flex-direction: column;
 
+	/* HEADER and MULTISELECT */
 	thead {
-		display: none;
+		tr {
+			display: block;
+			border-bottom: 1px solid var(--color-border);
+			background-color: var(--color-main-background);
+			th {
+				width: auto;
+				border: none;
+			}
+		}
 	}
 
+	/* MAIN FILE LIST */
 	tbody {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, 180px);
@@ -823,6 +832,18 @@ table.dragshadow td.size {
 					display: inline-block;
 				}
 			}
+
+			/* Position actions menu below file */
+			.popovermenu {
+				left: 0;
+				width: 169px;
+
+				/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
+				.menuitem span:not(.icon) {
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
 		}
 	}
 
@@ -831,18 +852,6 @@ table.dragshadow td.size {
 		display: none;
 	}
 
-	/* Position actions menu below file */
-	.popovermenu {
-		left: 0;
-		width: 169px;
-
-		/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
-		.menuitem span:not(.icon) {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
 	/* Center align the footer file number & size summary */
 	tfoot {
 		display: grid;