Fix some styling issues with the new containers

Signed-off-by: Julius Härtl <jus@bitgrid.net>

4 files changed, 62 insertions, 48 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 715a404be07..d9fe8fd494d 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -307,7 +307,6 @@ table th.column-last, table td.column-last {
 	position: relative;
 	/* this can not be just width, both need to be set … table styling */
 	min-width: 130px;
-	max-width: 130px;
 }
 
 #app-content-recent,
@@ -318,7 +317,9 @@ table th.column-last, table td.column-last {
 #app-content-sharinglinks,
 #app-content-deletedshares,
 #app-content-pendingshares {
-	margin-top: 22px;
+	thead {
+		top: 0;
+	}
 }
 
 table.multiselect thead th {
@@ -809,6 +810,49 @@ table.dragshadow td.size {
 	}
 }
 
+
+.files-controls {
+	box-sizing: border-box;
+	position: -webkit-sticky;
+	position: sticky;
+	height: 54px;
+	padding: 0;
+	margin: 0;
+	background-color: var(--color-main-background-translucent);
+	z-index: 62; /* must be above the filelist sticky header and texteditor menubar */
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	display: flex;
+	top: 0;
+
+	.actions {
+		> div,
+		& {
+			> .button, button {
+				box-sizing: border-box;
+				display: inline-block;
+				display: flex;
+				height: 44px;
+				width: 44px;
+				padding: 9px; // width - border - icon width = 18px
+				align-items: center;
+				justify-content: center;
+			}
+			.button.hidden {
+				display: none;
+			}
+		}
+	}
+}
+
+/* position controls for apps with app-navigation */
+
+.viewer-mode #app-navigation + #app-content .files-controls {
+	left: 0;
+}
+
 .files-filestable .filename .action .icon,
 .files-filestable .selectedActions a .icon,
 .files-filestable .filename .favorite-mark .icon,
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 0bee1a7ba45..4cab3e49a36 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -117,6 +117,9 @@ kbd {
 /* APP-NAVIGATION ------------------------------------------------------------ */
 /* Navigation: folder like structure */
 #app-navigation:not(.vue) {
+	// We use fixed variable for the pill style as we have larger containers around nested list entries
+	--border-radius-pill: calc(var(--default-clickable-area) / 2);
+
 	width: variables.$navigation-width;
 	z-index: 500;
 	overflow-y: auto;
@@ -252,10 +255,14 @@ kbd {
 					display: inline-flex;
 					flex-wrap: wrap;
 					padding-left: 44px;
+					width: 100%;
+					margin-bottom: 3px;
+
 					&:hover,
 					&:focus {
 						&,
 						> a {
+							border-radius: var(--border-radius-pill);
 							background-color: var(--color-background-hover);
 						}
 					}
@@ -263,6 +270,7 @@ kbd {
 					a.selected {
 						&,
 						> a {
+							border-radius: var(--border-radius-pill);
 							background-color: var(--color-primary-light);
 						}
 					}
@@ -315,6 +323,7 @@ kbd {
 				box-sizing: border-box;
 				white-space: nowrap;
 				text-overflow: ellipsis;
+				border-radius: var(--border-radius-pill);
 				color: var(--color-main-text);
 				opacity: .8;
 				flex: 1 1 0px;
@@ -445,9 +454,10 @@ kbd {
 			-ms-transform: rotate(-90deg);
 			transform: rotate(-90deg);
 			z-index: 105; // above a, under button
-			background-color: var(--color-background-hover);
 			border-radius: 50%;
 			transition: opacity variables.$animation-quick ease-in-out;
+
+
 		}
 
 		/* force padding on link no matter if 'a' has an icon class */
@@ -459,6 +469,9 @@ kbd {
 			&:before {
 				opacity: 1;
 			}
+			> a {
+				background-image: none;
+			}
 			> .app-navigation-entry-bullet {
 				background: transparent !important;
 			}
@@ -805,7 +818,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	background-color: transparent;
 	box-shadow: none;
 	border: 0;
-	border-radius: 0;
+	border-radius: var(--border-radius-pill);
 	text-align: left;
 	font-weight: normal;
 	font-size: 100%;
@@ -837,7 +850,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 
 	&:focus-visible {
 		box-shadow: 0 0 0 2px inset var(--color-primary) !important;
-		border-radius: var(--border-radius);
 		background-position: 12px center;
 	}
 }
diff --git a/core/css/header.scss b/core/css/header.scss
index 55f797789c7..36047fbd032 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -72,7 +72,7 @@
 	.header-right > div > .menu {
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
+		border-radius: var(--border-radius-large);
 		box-sizing: border-box;
 		z-index: 2000;
 		position: absolute;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0ace61ccc5c..fde14141e43 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -189,52 +189,10 @@ body {
 
 /* CONTENT ------------------------------------------------------------------ */
 
-.files-controls {
-	box-sizing: border-box;
-	position: -webkit-sticky;
-	position: sticky;
-	height: 54px;
-	padding: 0;
-	margin: 0;
-	background-color: var(--color-main-background-translucent);
-	z-index: 62; /* must be above the filelist sticky header and texteditor menubar */
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	display: flex;
-	top: 0;
-}
-
-/* position controls for apps with app-navigation */
-
-.viewer-mode #app-navigation + #app-content .files-controls {
-	left: 0;
-}
-
 #app-navigation * {
 	box-sizing: border-box;
 }
 
-.files-controls .actions {
-	> div,
-	& {
-		> .button, button {
-			box-sizing: border-box;
-			display: inline-block;
-			display: flex;
-			height: 44px;
-			width: 44px;
-			padding: 9px; // width - border - icon width = 18px
-			align-items: center;
-			justify-content: center;
-		}
-		.button.hidden {
-			display: none;
-		}
-	}
-}
-
 /* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */
 
 #emptycontent,