Merge pull request #35545 from nextcloud/enh/enh-fix-styles-for-33741…

…-Focused_item_overlaps_neighbor_elements_with_text_and_border Add styles for #33741. Remove boards and add underlines.
nextcloud · Dec 20, 2022 · 8aca99c · 8aca99c
2 parents 0af4e9d + 4432069
commit 8aca99c
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 8 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
@@ -21,10 +21,35 @@
 	-moz-user-select: none;
 	-ms-user-select: none;
 	a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
-		box-shadow: inset 0 0 0 2px var(--color-primary-text);
-		border-radius: var(--border-radius);
 		outline: 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-primary-text);
+		left: 50%;
+		opacity: 1;
+	}
+
+	a:not(.button):focus-visible::after, .button-vue:focus-visible::after {
+		bottom: 2px;
+	}
+
+	.header-right {
+		a:not(.button):focus-visible::after, div[role=button]:focus-visible::after {
+			bottom: 4px;
+		}
+
+		#expand.menutoggle:focus-visible::after {
+			left: 40%;
+		}
+	}
+
 }
 
 /* HEADERS ------------------------------------------------------------------ */

diff --git a/core/css/server.css b/core/css/server.css