Merge pull request #47641 from nextcloud/backport/47616/stable30

[stable30] fix(css): Adjust header styles to only add focus-visible styles to menu
nextcloud · Sep 2, 2024 · bf5d09c · bf5d09c
2 parents a52faa9 + 5351a7a
commit bf5d09c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 20 deletions.
diff --git a/core/css/header.css b/core/css/header.css
diff --git a/core/css/header.css.map b/core/css/header.css.map
diff --git a/core/css/header.scss b/core/css/header.scss
@@ -11,24 +11,25 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
-	a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
-		outline: none;
-	}
+	user-select: none;
 
-	a:not(.button):focus-visible::after, .button-vue:focus-visible::after, div[role=button]:focus-visible::after {
-		content: " ";
-		position: absolute;
-		transform: translateX(-50%);
-		width: 12px;
-		height: 2px;
-		border-radius: 3px;
-		background-color: var(--color-background-plain-text);
-		left: 50%;
-		opacity: 1;
-	}
+	#nextcloud:focus-visible,
+	.app-menu-entry a:focus-visible,
+	.header-menu button:first-of-type:focus-visible {
+		outline: none;
 
-	a:not(.button):focus-visible::after, .button-vue:focus-visible::after {
-		bottom: 2px;
+		&::after {
+			content: " ";
+			position: absolute;
+			inset-block-end: 2px;
+			transform: translateX(-50%);
+			width: 12px;
+			height: 2px;
+			border-radius: 3px;
+			background-color: var(--color-background-plain-text);
+			inset-inline-start: 50%;
+			opacity: 1;
+		}
 	}
 
 	.header-right {