Style site icon and its button

WordPress · Jun 6, 2024 · a858775 · a858775
1 parent 9a35208
commit a858775
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -160,24 +160,23 @@
 	}
 
 	&::before {
-		transition: box-shadow 0.1s ease;
+		opacity: 0;
+		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 		content: "";
 		display: block;
 		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
+		z-index: 1;
+		inset: 7px;
 		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: none;
 	}
 
-	// Lightened spot color focus.
-	&:focus::before {
+	&:focus-visible::before {
+		opacity: 1;
 		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),
+			inset 0 0 0 calc(var(--wp-admin-border-width-focus) + 0.5px) rgba($white, 0.5),
+			0 0 0 calc(var(--wp-admin-border-width-focus) - 1px) rgba($white, 0.5);
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {

diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
@@ -6,8 +6,8 @@
 .edit-site-site-icon__image {
 	width: 100%;
 	height: 100%;
+	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
-	background: #333;
 
 	.edit-site-layout.is-full-canvas & {
 		border-radius: 0;