Merge pull request #3756 from nextcloud/fix/high-contrast

fix: High contrast mode optimization
nextcloud-libraries · Feb 27, 2023 · 82168c2 · 82168c2
2 parents 2c949c5 + ba20878
commit 82168c2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -185,6 +185,13 @@ export default {
 	}
 }
 
+// add extra border for high contrast mode
+[data-themes*="highcontrast"] {
+	.app-navigation {
+		border-right: 1px solid var(--color-border);
+	}
+}
+
 // When on mobile, we make the navigation slide over the appcontent
 @media only screen and (max-width: $breakpoint-mobile) {
 	.app-navigation:not(.app-navigation--close) {

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -950,4 +950,12 @@ export default {
 	}
 }
 
+// Add more contrast for active entry
+[data-themes*="highcontrast"] {
+	.app-navigation-entry {
+		&:active {
+			background-color: var(--color-primary-light-hover) !important;
+		}
+	}
+}
 </style>
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -664,6 +664,19 @@ export default {
 	}
 }
 
+// Add more contrast for active entry
+[data-themes*="highcontrast"] {
+	.list-item__wrapper {
+		&--active,
+		&:active,
+		&.active {
+			.list-item {
+				background-color: var(--color-primary-light-hover);
+			}
+		}
+	}
+}
+
 .line-one {
 	display: flex;
 	align-items: center;