Merge pull request #339 from nextmcloud/nmc/v28-restyle-settings-left…

…-panel-menu Restyle v28 settings menu panel
nextmcloud · May 15, 2024 · ae9e839 · ae9e839
2 parents a13417e + b6ab121
commit ae9e839
Showing 1 changed file with 110 additions and 95 deletions.
diff --git a/css/v25/ncappnavigation.scss b/css/v25/ncappnavigation.scss
@@ -6,125 +6,140 @@
 */
 
 #app-navigation:not(.vue) {
-	// hide scrollbar which appears due to incorrect container height
-	overflow: hidden;
-	backdrop-filter: none;
-	border-top-left-radius: 0;
-	// add vertical line to demarcate app navigation
-	border-right: 1px solid var(--telekom-color-ui-faint);
-
-	& > ul {
-		padding: 4rem 1.5rem 1.5rem;
-	}
-	@media screen and (max-height: 768px) {
-		& > ul {
-			padding: 1.5rem;
-		}
+	#app-navigation-caption-personal, #app-navigation-caption-administration {
+		padding: 0 4rem;
 	}
 
-	& > ul > li {
-		// remove already hidden from DOM so they won't take up space
-		&.hidden-visually{
-			display: none;
+
+	&>nav {
+		// hide scrollbar which appears due to incorrect container height
+		backdrop-filter: none;
+		border-top-left-radius: 0;
+		// add vertical line to demarcate app navigation
+		border-right: 1px solid var(--telekom-color-ui-faint);
+
+		&>ul {
+			padding: 0 1.5rem;
 		}
 
-		font: var(--telekom-text-style-ui-bold);
-		margin-bottom: var(--telekom-spacing-composition-space-03);
+		&>ul>li {
 
-		// nav links with icons
-		& > a {
-			border-radius: var(--telekom-radius-standard);
-			// increase sidebar link height
-			line-height: 52px;
-			min-height: 52px;
-			// hide all initial icons
-			background-image: none;
+			// remove already hidden from DOM so they won't take up space
+			&.hidden-visually {
+				display: none;
+			}
 
-			&:first-child {
+			font: var(--telekom-text-style-ui-bold);
+			margin-bottom: var(--telekom-spacing-composition-space-03);
+
+			// nav links with icons
+			&>a {
+				border-radius: var(--telekom-radius-standard);
+				// increase sidebar link height
+				line-height: 52px;
+				min-height: 52px;
+				// hide all initial icons
+				background-image: none;
+
+				&:first-child {
+
+					img {
+						width: 24px;
+						height: 24px;
+						filter: var(--background-invert-if-dark);
+					}
+				}
+			}
+
+			&>a:hover,
+			&>a.active,
+			&.active>a {
+				color: var(--telekom-color-text-and-icon-primary-standard);
+				background-color: var(--nmc-color-background-hover);
 
+				&::after,
 				img {
-					width: 24px;
-    				height: 24px;
-					filter: var(--background-invert-if-dark);
+					filter: var(--nmc-color-icon)
 				}
 			}
-		}
 
-		& > a:hover,  & > a.active, &.active > a {
-			color: var(--telekom-color-text-and-icon-primary-standard);
-			background-color: var(--nmc-color-background-hover);
+			// do not pin app navigation entries to the bottom
+			&.pinned.first-pinned {
+				margin-top: initial !important;
+			}
+
+			// icon styling
+			&>a.svg::after {
+				content: '';
+				display: block;
+				position: absolute;
+				top: 0px;
+				left: 2px;
+				height: 100%;
+				width: 44px;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 24px 24px;
+			}
 
-			&::after, img {
-				filter: var(--nmc-color-icon)
+			// hide all collapsible buttons
+			&.collapsible::before,
+			button.collapse {
+				display: none;
 			}
 		}
 
-		// do not pin app navigation entries to the bottom
-		&.pinned.first-pinned {
-			margin-top: initial !important;
+
+		// set telekom icons
+		.nav-icon-files::after {
+			background-image: var(--icon-folder-dark);
 		}
 
-		// icon styling
-		& > a.svg::after {
-			content: '';
-			display: block;
-			position: absolute;
-			top: 0px;
-			left: 2px;
-			height: 100%;
-			width: 44px;
-			background-repeat: no-repeat;
-			background-position: center;
-			background-size: 24px 24px;
+		.nav-icon-recent::after {
+			background-image: var(--icon-history-dark);
 		}
 
-		// hide all collapsible buttons
-		&.collapsible::before, button.collapse {
-			display: none;
+		.nav-icon-favorites::after {
+			background-image: var(--icon-star-dark);
 		}
-	}
 
+		.nav-icon-favorites-starred::after {
+			background-image: var(--icon-starred-yellow);
+		}
 
-	// set telekom icons
-	.nav-icon-files::after {
-		background-image: var(--icon-folder-dark);
-	}
-	.nav-icon-recent::after {
-		background-image: var(--icon-history-dark);
-	}
-	.nav-icon-favorites::after {
-		background-image: var(--icon-star-dark);
-	}
-	.nav-icon-favorites-starred::after {
-		background-image: var(--icon-starred-yellow);
-	}
-	.nav-icon-shareoverview::after {
-		background-image: var(--icon-share-dark);
-	}
-	.nav-icon-systemtagsfilter::after {
-		background-image: var(--icon-tag-dark);
-	}
-	.nav-icon-trashbin::after {
-		background-image: var(--icon-delete-dark);
-	}
-	.nav-icon-trashbin-starred::after {
-		background-image: var(--icon-delete-starred-warning);
-	}
-	.nav-icon-sharingout::after {
-		background-image: var(--icon-share-dark);
-	}
-	.nav-icon-sharingin::after {
-		background-image: var(--icon-attachment-dark);
-	}
+		.nav-icon-shareoverview::after {
+			background-image: var(--icon-share-dark);
+		}
 
-	// hide nextcloud Storage quota element
-	#quota {
-		display: none;
+		.nav-icon-systemtagsfilter::after {
+			background-image: var(--icon-tag-dark);
+		}
+
+		.nav-icon-trashbin::after {
+			background-image: var(--icon-delete-dark);
+		}
+
+		.nav-icon-trashbin-starred::after {
+			background-image: var(--icon-delete-starred-warning);
+		}
+
+		.nav-icon-sharingout::after {
+			background-image: var(--icon-share-dark);
+		}
+
+		.nav-icon-sharingin::after {
+			background-image: var(--icon-attachment-dark);
+		}
+
+		// hide nextcloud Storage quota element
+		#quota {
+			display: none;
+		}
 	}
 }
 
 @media screen and (max-width: 1023px) {
-	
+
 	#app-navigation:not(.vue) {
 		border-radius: 0;
 		transform: translateX(-316px);
@@ -150,10 +165,10 @@
 }
 
 .app-settings {
-	
+
 	#app-navigation:not(.vue) {
-	
-		& > ul > li {
+
+		&>ul>li {
 			display: none;
 		}
 	}