Fix some styling issues with the new containers

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

3 files changed, 16 insertions, 46 deletions

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,