improve app settings design

Signed-off-by: szaimen <szaimen@e.mail.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

core/css/apps.css

@@ -808,7 +808,6 @@ kbd {
   padding: calc(var(--default-grid-baseline) * 2);
   padding-top: 0;
 }
-
 #app-settings-header .settings-button {
   display: flex;
   align-items: center;
@@ -830,6 +829,7 @@ kbd {
 #app-settings-header .settings-button.opened {
   border-top: solid 1px var(--color-border);
   background-color: var(--color-main-background);
+  margin-top: 8px;
 }
 #app-settings-header .settings-button:hover, #app-settings-header .settings-button:focus {
   background-color: var(--color-background-hover);

core/css/apps.scss

@@ -814,52 +814,52 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	border-radius: calc(var(--default-clickable-area) / 2);
 	padding: calc(var(--default-grid-baseline) * 2);
 	padding-top: 0;
-}
-
-
-#app-settings-header .settings-button {
-	display: flex;
-	align-items: center;
-	height: 44px;
-	width: 100%;
-	padding: 0;
-	margin: 0;
-	background-color: var(--color-main-background);
-	box-shadow: none;
-	border: 0;
-	border-radius: calc(var(--default-clickable-area) / 2);
-	text-align: left;
-	font-weight: normal;
-	font-size: 100%;
-	opacity: 0.8;
-
-	/* like app-navigation a */
-	color: var(--color-main-text);
 
-	&.opened {
-		border-top: solid 1px var(--color-border);
+	.settings-button {
+		display: flex;
+		align-items: center;
+		height: 44px;
+		width: 100%;
+		padding: 0;
+		margin: 0;
 		background-color: var(--color-main-background);
-	}
-	&:hover,
-	&:focus {
-		background-color: var(--color-background-hover);
-	}
+		box-shadow: none;
+		border: 0;
+		border-radius: calc(var(--default-clickable-area) / 2);
+		text-align: left;
+		font-weight: normal;
+		font-size: 100%;
+		opacity: 0.8;
+
+		/* like app-navigation a */
+		color: var(--color-main-text);
+
+		&.opened {
+			border-top: solid 1px var(--color-border);
+			background-color: var(--color-main-background);
+			margin-top: 8px;
+		}
+		&:hover,
+		&:focus {
+			background-color: var(--color-background-hover);
+		}
 
-	&::before {
-		background-image: var(--icon-settings-dark);
-		background-position: 14px center;
-		background-repeat: no-repeat;
-		content: '';
-		width: 44px;
-		height: 44px;
-		top: 0;
-		left: 0;
-		display: block;
-	}
+		&::before {
+			background-image: var(--icon-settings-dark);
+			background-position: 14px center;
+			background-repeat: no-repeat;
+			content: '';
+			width: 44px;
+			height: 44px;
+			top: 0;
+			left: 0;
+			display: block;
+		}
 
-	&:focus-visible {
-		box-shadow: 0 0 0 2px inset var(--color-primary) !important;
-		background-position: 12px center;
+		&:focus-visible {
+			box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+			background-position: 12px center;
+		}
 	}
 }
 

core/css/server.css

@@ -3588,7 +3588,6 @@ kbd {
   padding: calc(var(--default-grid-baseline) * 2);
   padding-top: 0;
 }
-
 #app-settings-header .settings-button {
   display: flex;
   align-items: center;
@@ -3610,6 +3609,7 @@ kbd {
 #app-settings-header .settings-button.opened {
   border-top: solid 1px var(--color-border);
   background-color: var(--color-main-background);
+  margin-top: 8px;
 }
 #app-settings-header .settings-button:hover, #app-settings-header .settings-button:focus {
   background-color: var(--color-background-hover);