transparent outline for high contrast windows

WordPress · May 22, 2024 · 5519af0 · 5519af0
1 parent feb79df
commit 5519af0
Showing 1 changed file with 3 additions and 0 deletions.
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
@@ -130,6 +130,7 @@ html.interface-interface-skeleton__html-container {
 
 	@include break-medium() {
 		box-shadow: -$border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
@@ -139,6 +140,7 @@ html.interface-interface-skeleton__html-container {
 
 	@include break-medium() {
 		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
@@ -148,6 +150,7 @@ html.interface-interface-skeleton__html-container {
 	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	z-index: z-index(".interface-interface-skeleton__header");
 	color: $gray-900;
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 }
 
 .interface-interface-skeleton__footer {