1/* Note: Any Site Health selectors that use
  2duplicate styling from the Privacy settings screen
  3are styled in the Privacy section of edit.css */
  4
  5.health-check-body h2 {
  6	line-height: 1.4;
  7}
  8
  9.health-check-body h3 {
 10	padding: 0;
 11	font-weight: 400;
 12}
 13
 14.site-health-progress-wrapper {
 15	margin-bottom: 1rem;
 16}
 17
 18.site-health-progress {
 19	display: inline-block;
 20	height: 20px;
 21	width: 20px;
 22	margin: 0;
 23	border-radius: 100%;
 24	position: relative;
 25	font-weight: 600;
 26	font-size: 0.4rem;
 27}
 28
 29.site-health-progress-count {
 30	position: absolute;
 31	display: block;
 32	height: 80px;
 33	width: 80px;
 34	left: 50%;
 35	top: 50%;
 36	margin-top: -40px;
 37	margin-left: -40px;
 38	border-radius: 100%;
 39	line-height: 6.3;
 40	font-size: 2em;
 41}
 42
 43.loading .site-health-progress svg #bar {
 44	stroke-dashoffset: 0;
 45	stroke: #c3c4c7;
 46	animation: loadingPulse 3s infinite ease-in-out;
 47}
 48
 49.site-health-progress svg circle {
 50	stroke-dashoffset: 0;
 51	transition: stroke-dashoffset 1s linear;
 52	stroke: #c3c4c7;
 53	stroke-width: 2em;
 54}
 55
 56.site-health-progress svg #bar {
 57	stroke-dashoffset: 565;
 58	stroke: #d63638;
 59}
 60
 61.green .site-health-progress #bar {
 62	stroke: #00a32a;
 63}
 64.green .site-health-progress .site-health-progress-label {
 65	color: #00a32a;
 66}
 67
 68.orange .site-health-progress #bar {
 69	stroke: #dba617;
 70}
 71.orange .site-health-progress .site-health-progress-label {
 72	color: #dba617;
 73}
 74
 75.site-health-progress-label {
 76	font-weight: 600;
 77	line-height: 20px;
 78	margin-left: 0.3rem;
 79}
 80
 81@keyframes loadingPulse {
 82	0% {
 83		stroke: #c3c4c7;
 84	}
 85	50% {
 86		stroke: #72aee6;
 87	}
 88	100% {
 89		stroke: #c3c4c7;
 90	}
 91}
 92
 93.health-check-tabs-wrapper {
 94	/* IE 11 */
 95	display: -ms-inline-grid;
 96	-ms-grid-columns: 1fr 1fr 1fr 1fr;
 97	vertical-align: top;
 98	/* modern browsers */
 99	display: inline-grid;
100	grid-template-columns: 1fr 1fr 1fr 1fr;
101}
102
103.health-check-tabs-wrapper.tab-count-1 {
104	grid-template-columns: 1fr;
105}
106.health-check-tabs-wrapper.tab-count-2 {
107	grid-template-columns: 1fr 1fr;
108}
109.health-check-tabs-wrapper.tab-count-3 {
110	grid-template-columns: 1fr 1fr 1fr;
111}
112
113.health-check-tab {
114	display: block; /* IE 11 */
115	text-decoration: none;
116	color: inherit;
117	padding: 0.5rem 1rem 1rem;
118	margin: 0 1rem;
119	transition: box-shadow 0.5s ease-in-out;
120}
121
122.health-check-offscreen-nav-wrapper {
123	position: relative;
124	background: transparent;
125	border: none;
126}
127.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
128	left: initial;
129}
130
131.health-check-offscreen-nav {
132	display: none;
133	position: absolute;
134	padding-top: 10px;
135	right: 0;
136	top: 100%;
137	width: 13rem;
138}
139.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
140	display: inline-block;
141}
142.health-check-offscreen-nav:before {
143	position: absolute;
144	content: "";
145	width: 0;
146	height: 0;
147	border-style: solid;
148	border-width: 0 10px 5px;
149	border-color: transparent transparent #ffffff;
150	right: 20px;
151	top: 5px;
152}
153
154.health-check-offscreen-nav .health-check-tab {
155	background: #fff;
156	box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
157}
158
159.health-check-offscreen-nav .health-check-tab.active {
160	box-shadow: inset 3px 0 #3582c4;
161	font-weight: 600;
162}
163
164.health-check-body {
165	max-width: 800px;
166	margin: 0 auto;
167}
168
169.widefat.health-check-table th {
170	font-size: 13px;
171}
172
173.health-check-table td:first-child {
174	width: 30%;
175}
176
177.health-check-table td {
178	width: 70%;
179}
180
181.health-check-table ul,
182.health-check-table ol {
183	margin: 0;
184}
185
186.health-check-body li {
187	line-height: 1.5;
188}
189
190.health-check-body .pass::before,
191.health-check-body .good::before {
192	content: "\f147";
193	content: "\f147" / '';
194	color: #00a32a;
195}
196
197.health-check-body .warning::before {
198	content: "\f460";
199	content: "\f460" / '';
200	color: #dba617;
201}
202
203.health-check-body .info::before {
204	content: "\f348";
205	content: "\f348" / '';
206	color: #72aee6;
207}
208
209.health-check-body .fail::before,
210.health-check-body .error::before {
211	content: "\f335";
212	content: "\f335" / '';
213	color: #d63638;
214}
215
216.site-health-copy-buttons {
217	margin: 1rem 0;
218}
219
220.site-health-copy-buttons .copy-button-wrapper {
221	display: inline-flex;
222	align-items: center;
223	margin: 0.5rem 0 1rem;
224}
225
226.site-health-copy-buttons .success {
227	color: #007017;
228	margin-left: 0.5rem;
229}
230
231.site-status-has-issues.hide {
232	display: none;
233}
234
235.site-health-view-more {
236	text-align: center;
237}
238
239.site-health-issues-wrapper:first-of-type {
240	margin-top: 3rem;
241}
242
243.site-health-issues-wrapper {
244	margin-bottom: 3rem;
245	margin-top: 2rem;
246}
247
248.site-status-all-clear {
249	display: flex;
250	flex-direction: column;
251	align-items: center;
252	justify-content: center;
253	text-align: center;
254	height: 100%;
255	width: 100%;
256	margin: 0 0 3rem;
257}
258
259@media all and (min-width: 784px) {
260	.site-status-all-clear {
261		margin: 2rem 0 5rem;
262	}
263}
264
265.site-status-all-clear.hide {
266	display: none;
267}
268
269.site-status-all-clear .dashicons {
270	font-size: 150px;
271	height: 150px;
272	margin-bottom: 2rem;
273	width: 150px;
274}
275
276.site-status-all-clear .encouragement {
277	font-size: 1.5rem;
278	font-weight: 600;
279}
280
281.site-status-all-clear p {
282	margin: 0;
283}
284
285.wp-core-ui .button.site-health-view-passed {
286	position: relative;
287	padding-right: 40px;
288	padding-left: 20px;
289}
290
291.health-check-wp-paths-sizes.spinner {
292	visibility: visible;
293	float: none;
294	margin: 0 4px;
295	flex-shrink: 0;
296}
297
298/* Styling unique to the dashboard widget. */
299#dashboard_site_health .site-health-details {
300	padding-left: 16px;
301}
302
303#dashboard_site_health .site-health-details p:first-child {
304	margin-top: 0;
305}
306
307#dashboard_site_health .site-health-details p:last-child {
308	margin-bottom: 0;
309}
310
311#dashboard_site_health .health-check-widget {
312	display: grid;
313	grid-template-columns: 1fr 2fr;
314	grid-auto-rows: minmax(64px, auto);
315	column-gap: 16px;
316	align-items: center;
317}
318#dashboard_site_health .site-health-progress-label {
319	margin-left: 0;
320}
321
322.health-check-widget-title-section {
323	margin-bottom: 0;
324	text-align: center;
325}
326
327@media screen and (max-width: 480px) {
328	#dashboard_site_health .health-check-widget {
329		grid-template-columns: 100%;
330	}
331}
332
333@media screen and (max-width: 782px) {
334
335	.site-health-issues-wrapper .health-check-accordion-trigger {
336		flex-direction: column;
337		align-items: flex-start;
338	}
339
340	.health-check-accordion-trigger .badge {
341		margin: 1em 0 0;
342	}
343
344	.health-check-table {
345		table-layout: fixed;
346	}
347
348	.health-check-table th,
349	.health-check-table td {
350		box-sizing: border-box;
351		display: block;
352		width: 100%;
353		word-wrap: break-word;
354	}
355
356	.widefat.health-check-table th,
357	.health-check-table td:first-child {
358		width: 100%;
359		padding-bottom: 0;
360		font-weight: 600;
361	}
362
363	.wp-core-ui .site-health-copy-buttons .copy-button {
364		margin-bottom: 0;
365	}
366}
367
368