wp/wp-admin/css/site-health.css
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
--- a/wp/wp-admin/css/site-health.css	Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-admin/css/site-health.css	Tue Dec 15 13:49:49 2020 +0100
@@ -7,7 +7,7 @@
 .health-check-header h1 {
 	display: inline-block;
 	font-weight: 600;
-	margin: 1rem 0.8rem;
+	margin: 0 0.8rem 1rem;
 	font-size: 23px;
 	padding: 9px 0 4px 0;
 	line-height: 1.3;
@@ -37,10 +37,14 @@
 	clear: both;
 }
 
+.site-health-progress-wrapper {
+	margin-bottom: 1rem;
+}
+
 .site-health-progress {
 	display: inline-block;
-	height: 40px;
-	width: 40px;
+	height: 20px;
+	width: 20px;
 	margin: 0;
 	border-radius: 100%;
 	position: relative;
@@ -62,15 +66,7 @@
 	font-size: 2em;
 }
 
-.site-health-progress-count::after {
-	content: "";
-}
-
-.site-health-progress.loading .site-health-progress-count::after {
-	content: "ยทยทยท";
-}
-
-.site-health-progress.loading svg #bar {
+.loading .site-health-progress svg #bar {
 	stroke-dashoffset: 0;
 	stroke: #adc5d2;
 	animation: loadingPulse 3s infinite ease-in-out;
@@ -88,13 +84,25 @@
 	stroke: #dc3232;
 }
 
-.site-health-progress svg #bar.green {
+.green .site-health-progress #bar {
 	stroke: #46b450;
 }
+.green .site-health-progress .site-health-progress-label {
+	color: #46b450;
+}
 
-.site-health-progress svg #bar.orange {
+.orange .site-health-progress #bar {
 	stroke: #ffb900;
 }
+.orange .site-health-progress .site-health-progress-label {
+	color: #ffb900;
+}
+
+.site-health-progress-label {
+	font-weight: 600;
+	line-height: 20px;
+	margin-left: 0.3rem;
+}
 
 @keyframes loadingPulse {
 	0% {
@@ -195,22 +203,16 @@
 }
 
 .site-health-copy-buttons .copy-button-wrapper {
+	display: inline-flex;
+	align-items: center;
 	margin: 0.5rem 0 1rem;
 }
 
 .site-health-copy-buttons .success {
-	display: none;
 	color: #40860a;
-	line-height: 1.8;
 	margin-left: 0.5rem;
 }
 
-.site-health-copy-buttons .success.visible {
-	display: inline-block;
-	height: 28px;
-	line-height: 2.2;
-}
-
 .site-status-has-issues.hide {
 	display: none;
 }
@@ -265,12 +267,12 @@
 }
 
 .health-check-accordion {
-	border: 1px solid #e2e4e7;
+	border: 1px solid #ccd0d4;
 }
 
 .health-check-accordion-heading {
 	margin: 0;
-	border-top: 1px solid #e2e4e7;
+	border-top: 1px solid #ccd0d4;
 	font-size: inherit;
 	line-height: inherit;
 	font-weight: 600;
@@ -296,6 +298,10 @@
 	width: 100%;
 	align-items: center;
 	justify-content: space-between;
+	-webkit-user-select: auto;
+	-moz-user-select: auto;
+	-ms-user-select: auto;
+	user-select: auto;
 }
 
 .wp-core-ui .button.site-health-view-passed {
@@ -313,8 +319,9 @@
 	color: #191e23;
 	border: none;
 	box-shadow: none;
-	outline-offset: -2px;
-	outline: 1px dotted #555d66;
+	outline-offset: -1px;
+	outline: 2px solid #0071a1;
+	background-color: #f8f9f9;
 }
 
 .health-check-accordion-trigger .title {
@@ -443,6 +450,10 @@
 		padding-bottom: 0;
 		font-weight: 600;
 	}
+
+	.wp-core-ui .site-health-copy-buttons .copy-button {
+		margin-bottom: 0;
+	}
 }
 
 /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */