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