1 .site-health #wpcontent, |
1 /* Note: Any Site Health selectors that use |
2 .site-health.auto-fold #wpcontent { |
2 duplicate styling from the Privacy settings screen |
3 padding-left: 0; |
3 are styled in the Privacy section of edit.css */ |
4 } |
|
5 |
|
6 /* Emulates .wrap h1 styling */ |
|
7 .health-check-header h1 { |
|
8 display: inline-block; |
|
9 font-weight: 600; |
|
10 margin: 0 0.8rem 1rem; |
|
11 font-size: 23px; |
|
12 padding: 9px 0 4px 0; |
|
13 line-height: 1.3; |
|
14 } |
|
15 |
4 |
16 .health-check-body h2 { |
5 .health-check-body h2 { |
17 padding: 1rem 0; |
|
18 line-height: 1.4; |
6 line-height: 1.4; |
19 } |
7 } |
20 |
8 |
21 .health-check-body h3 { |
9 .health-check-body h3 { |
22 padding: 0; |
10 padding: 0; |
23 font-weight: 400; |
11 font-weight: 400; |
24 } |
12 } |
25 |
13 |
26 .health-check-header { |
14 .health-check-widget-title-section { |
27 text-align: center; |
15 text-align: center; |
28 margin: 0 0 1rem; |
|
29 background: #fff; |
|
30 border-bottom: 1px solid #e2e4e7; |
|
31 } |
|
32 |
|
33 .health-check-title-section { |
|
34 display: flex; |
|
35 align-items: center; |
|
36 justify-content: center; |
|
37 clear: both; |
|
38 } |
16 } |
39 |
17 |
40 .site-health-progress-wrapper { |
18 .site-health-progress-wrapper { |
41 margin-bottom: 1rem; |
19 margin-bottom: 1rem; |
42 } |
20 } |
66 font-size: 2em; |
44 font-size: 2em; |
67 } |
45 } |
68 |
46 |
69 .loading .site-health-progress svg #bar { |
47 .loading .site-health-progress svg #bar { |
70 stroke-dashoffset: 0; |
48 stroke-dashoffset: 0; |
71 stroke: #adc5d2; |
49 stroke: #c3c4c7; |
72 animation: loadingPulse 3s infinite ease-in-out; |
50 animation: loadingPulse 3s infinite ease-in-out; |
73 } |
51 } |
74 |
52 |
75 .site-health-progress svg circle { |
53 .site-health-progress svg circle { |
76 stroke-dashoffset: 0; |
54 stroke-dashoffset: 0; |
77 transition: stroke-dashoffset 1s linear; |
55 transition: stroke-dashoffset 1s linear; |
78 stroke: #ccc; |
56 stroke: #c3c4c7; |
79 stroke-width: 2em; |
57 stroke-width: 2em; |
80 } |
58 } |
81 |
59 |
82 .site-health-progress svg #bar { |
60 .site-health-progress svg #bar { |
83 stroke-dashoffset: 565; |
61 stroke-dashoffset: 565; |
84 stroke: #dc3232; |
62 stroke: #d63638; |
85 } |
63 } |
86 |
64 |
87 .green .site-health-progress #bar { |
65 .green .site-health-progress #bar { |
88 stroke: #46b450; |
66 stroke: #00a32a; |
89 } |
67 } |
90 .green .site-health-progress .site-health-progress-label { |
68 .green .site-health-progress .site-health-progress-label { |
91 color: #46b450; |
69 color: #00a32a; |
92 } |
70 } |
93 |
71 |
94 .orange .site-health-progress #bar { |
72 .orange .site-health-progress #bar { |
95 stroke: #ffb900; |
73 stroke: #dba617; |
96 } |
74 } |
97 .orange .site-health-progress .site-health-progress-label { |
75 .orange .site-health-progress .site-health-progress-label { |
98 color: #ffb900; |
76 color: #dba617; |
99 } |
77 } |
100 |
78 |
101 .site-health-progress-label { |
79 .site-health-progress-label { |
102 font-weight: 600; |
80 font-weight: 600; |
103 line-height: 20px; |
81 line-height: 20px; |
104 margin-left: 0.3rem; |
82 margin-left: 0.3rem; |
105 } |
83 } |
106 |
84 |
107 @keyframes loadingPulse { |
85 @keyframes loadingPulse { |
108 0% { |
86 0% { |
109 stroke: #adc5d2; |
87 stroke: #c3c4c7; |
110 } |
88 } |
111 50% { |
89 50% { |
112 stroke: #00a0d2; |
90 stroke: #72aee6; |
113 } |
91 } |
114 100% { |
92 100% { |
115 stroke: #adc5d2; |
93 stroke: #c3c4c7; |
116 } |
94 } |
117 } |
95 } |
118 |
96 |
119 .health-check-tabs-wrapper { |
97 .health-check-tabs-wrapper { |
120 /* IE 11 */ |
98 /* IE 11 */ |
121 display: -ms-inline-grid; |
99 display: -ms-inline-grid; |
122 -ms-grid-columns: 1fr 1fr; |
100 -ms-grid-columns: 1fr 1fr 1fr 1fr; |
123 vertical-align: top; |
101 vertical-align: top; |
124 /* modern browsers */ |
102 /* modern browsers */ |
125 display: inline-grid; |
103 display: inline-grid; |
|
104 grid-template-columns: 1fr 1fr 1fr 1fr; |
|
105 } |
|
106 |
|
107 .health-check-tabs-wrapper.tab-count-1 { |
|
108 grid-template-columns: 1fr; |
|
109 } |
|
110 .health-check-tabs-wrapper.tab-count-2 { |
126 grid-template-columns: 1fr 1fr; |
111 grid-template-columns: 1fr 1fr; |
|
112 } |
|
113 .health-check-tabs-wrapper.tab-count-3 { |
|
114 grid-template-columns: 1fr 1fr 1fr; |
127 } |
115 } |
128 |
116 |
129 .health-check-tab { |
117 .health-check-tab { |
130 display: block; /* IE 11 */ |
118 display: block; /* IE 11 */ |
131 text-decoration: none; |
119 text-decoration: none; |
133 padding: 0.5rem 1rem 1rem; |
121 padding: 0.5rem 1rem 1rem; |
134 margin: 0 1rem; |
122 margin: 0 1rem; |
135 transition: box-shadow 0.5s ease-in-out; |
123 transition: box-shadow 0.5s ease-in-out; |
136 } |
124 } |
137 |
125 |
138 .health-check-tab:nth-child(1) { |
126 .health-check-offscreen-nav-wrapper { |
139 -ms-grid-column: 1; /* IE 11 */ |
127 position: relative; |
140 } |
128 background: transparent; |
141 |
129 border: none; |
142 .health-check-tab:nth-child(2) { |
130 } |
143 -ms-grid-column: 2; /* IE 11 */ |
131 .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { |
144 } |
132 left: initial; |
145 |
133 } |
146 .health-check-tab:focus { |
134 |
147 color: #191e23; |
135 .health-check-offscreen-nav { |
148 outline: 1px solid #6c7781; |
136 display: none; |
149 box-shadow: none; |
137 position: absolute; |
150 } |
138 padding-top: 10px; |
151 |
139 right: 0; |
152 .health-check-tab.active { |
140 top: 100%; |
153 box-shadow: inset 0 -3px #007cba; |
141 width: 13rem; |
|
142 } |
|
143 .health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { |
|
144 display: inline-block; |
|
145 } |
|
146 .health-check-offscreen-nav:before { |
|
147 position: absolute; |
|
148 content: ""; |
|
149 width: 0; |
|
150 height: 0; |
|
151 border-style: solid; |
|
152 border-width: 0 10px 5px 10px; |
|
153 border-color: transparent transparent #ffffff transparent; |
|
154 right: 20px; |
|
155 top: 5px; |
|
156 } |
|
157 |
|
158 .health-check-offscreen-nav .health-check-tab { |
|
159 background: #fff; |
|
160 box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); |
|
161 } |
|
162 |
|
163 .health-check-offscreen-nav .health-check-tab.active { |
|
164 box-shadow: inset 3px 0 #3582c4; |
154 font-weight: 600; |
165 font-weight: 600; |
155 } |
166 } |
156 |
167 |
157 .health-check-body { |
168 .health-check-body { |
158 max-width: 800px; |
169 max-width: 800px; |
177 } |
188 } |
178 |
189 |
179 .health-check-body .pass::before, |
190 .health-check-body .pass::before, |
180 .health-check-body .good::before { |
191 .health-check-body .good::before { |
181 content: "\f147"; |
192 content: "\f147"; |
182 color: #46b450; |
193 color: #00a32a; |
183 } |
194 } |
184 |
195 |
185 .health-check-body .warning::before { |
196 .health-check-body .warning::before { |
186 content: "\f460"; |
197 content: "\f460"; |
187 color: #ffb900; |
198 color: #dba617; |
188 } |
199 } |
189 |
200 |
190 .health-check-body .info::before { |
201 .health-check-body .info::before { |
191 content: "\f348"; |
202 content: "\f348"; |
192 color: #00a0d2; |
203 color: #72aee6; |
193 } |
204 } |
194 |
205 |
195 .health-check-body .fail::before, |
206 .health-check-body .fail::before, |
196 .health-check-body .error::before { |
207 .health-check-body .error::before { |
197 content: "\f335"; |
208 content: "\f335"; |
198 color: #dc3232; |
209 color: #d63638; |
199 } |
210 } |
200 |
211 |
201 .site-health-copy-buttons { |
212 .site-health-copy-buttons { |
202 margin: 1rem 0; |
213 margin: 1rem 0; |
203 } |
214 } |
264 |
275 |
265 .site-status-all-clear p { |
276 .site-status-all-clear p { |
266 margin: 0; |
277 margin: 0; |
267 } |
278 } |
268 |
279 |
269 .health-check-accordion { |
|
270 border: 1px solid #ccd0d4; |
|
271 } |
|
272 |
|
273 .health-check-accordion-heading { |
|
274 margin: 0; |
|
275 border-top: 1px solid #ccd0d4; |
|
276 font-size: inherit; |
|
277 line-height: inherit; |
|
278 font-weight: 600; |
|
279 color: inherit; |
|
280 } |
|
281 |
|
282 .health-check-accordion-heading:first-child { |
|
283 border-top: none; |
|
284 } |
|
285 |
|
286 .health-check-accordion-trigger { |
|
287 background: #fff; |
|
288 border: 0; |
|
289 color: #32373c; |
|
290 cursor: pointer; |
|
291 display: flex; |
|
292 font-weight: 400; |
|
293 margin: 0; |
|
294 padding: 1em 3.5em 1em 1.5em; |
|
295 min-height: 46px; |
|
296 position: relative; |
|
297 text-align: left; |
|
298 width: 100%; |
|
299 align-items: center; |
|
300 justify-content: space-between; |
|
301 -webkit-user-select: auto; |
|
302 -moz-user-select: auto; |
|
303 -ms-user-select: auto; |
|
304 user-select: auto; |
|
305 } |
|
306 |
|
307 .wp-core-ui .button.site-health-view-passed { |
280 .wp-core-ui .button.site-health-view-passed { |
308 position: relative; |
281 position: relative; |
309 padding-right: 40px; |
282 padding-right: 40px; |
310 padding-left: 20px; |
283 padding-left: 20px; |
311 } |
284 } |
312 |
285 |
313 .health-check-accordion-trigger:hover, |
|
314 .health-check-accordion-trigger:active { |
|
315 background: #f8f9f9; |
|
316 } |
|
317 |
|
318 .health-check-accordion-trigger:focus { |
|
319 color: #191e23; |
|
320 border: none; |
|
321 box-shadow: none; |
|
322 outline-offset: -1px; |
|
323 outline: 2px solid #0071a1; |
|
324 background-color: #f8f9f9; |
|
325 } |
|
326 |
|
327 .health-check-accordion-trigger .title { |
|
328 pointer-events: none; |
|
329 font-weight: 600; |
|
330 flex-grow: 1; |
|
331 } |
|
332 |
|
333 .health-check-accordion-trigger .icon, |
|
334 .site-health-view-passed .icon { |
|
335 border: solid #555d66; |
|
336 border-width: 0 2px 2px 0; |
|
337 height: 0.5rem; |
|
338 pointer-events: none; |
|
339 position: absolute; |
|
340 right: 1.5em; |
|
341 top: 50%; |
|
342 transform: translateY(-70%) rotate(45deg); |
|
343 width: 0.5rem; |
|
344 } |
|
345 |
|
346 .health-check-accordion-trigger .badge { |
|
347 padding: 0.1rem 0.5rem 0.15rem; |
|
348 color: #32373c; |
|
349 font-weight: 600; |
|
350 margin-left: 0.5rem; |
|
351 } |
|
352 |
|
353 .health-check-accordion-trigger .badge.blue { |
|
354 border: 1px solid #bfe7f3; |
|
355 } |
|
356 |
|
357 .health-check-accordion-trigger .badge.orange { |
|
358 border: 1px solid #ffb900; |
|
359 } |
|
360 |
|
361 .health-check-accordion-trigger .badge.red { |
|
362 border: 1px solid #dc3232; |
|
363 } |
|
364 |
|
365 .health-check-accordion-trigger .badge.green { |
|
366 border: 1px solid #46b450; |
|
367 } |
|
368 |
|
369 .health-check-accordion-trigger .badge.purple { |
|
370 border: 1px solid #826eb4; |
|
371 } |
|
372 |
|
373 .health-check-accordion-trigger .badge.gray { |
|
374 border: 1px solid #ccd0d4; |
|
375 } |
|
376 |
|
377 .health-check-accordion-trigger[aria-expanded="true"] .icon, |
|
378 .site-health-view-passed[aria-expanded="true"] .icon { |
|
379 transform: translateY(-30%) rotate(-135deg) |
|
380 } |
|
381 |
|
382 .health-check-accordion-panel { |
|
383 margin: 0; |
|
384 padding: 1em 1.5em; |
|
385 background: #fff; |
|
386 } |
|
387 |
|
388 .health-check-accordion-panel[hidden] { |
|
389 display: none; |
|
390 } |
|
391 |
|
392 .health-check-accordion-panel a .dashicons { |
|
393 text-decoration: none; |
|
394 } |
|
395 |
286 |
396 /* Better position for the WordPress admin notices and update nag. */ |
287 /* Better position for the WordPress admin notices and update nag. */ |
397 .site-health .notice { |
288 .site-health .notice { |
398 margin: 5px 20px 15px 22px; |
289 margin: 5px 20px 15px 22px; |
399 } |
290 } |
408 float: none; |
299 float: none; |
409 margin: 0 4px; |
300 margin: 0 4px; |
410 flex-shrink: 0; |
301 flex-shrink: 0; |
411 } |
302 } |
412 |
303 |
|
304 /* Styling unique to the dashboard widget. */ |
|
305 #dashboard_site_health .site-health-details { |
|
306 padding-left: 16px; |
|
307 } |
|
308 |
|
309 #dashboard_site_health .health-check-widget { |
|
310 display: grid; |
|
311 grid-template-columns: 1fr 2fr; |
|
312 grid-auto-rows: minmax(64px, auto); |
|
313 column-gap: 16px; |
|
314 align-items: center; |
|
315 } |
|
316 #dashboard_site_health .site-health-progress-label { |
|
317 margin-left: 0; |
|
318 } |
|
319 |
|
320 @media screen and (max-width: 480px) { |
|
321 #dashboard_site_health .health-check-widget { |
|
322 grid-template-columns: 100%; |
|
323 } |
|
324 } |
|
325 |
413 @media screen and (max-width: 782px) { |
326 @media screen and (max-width: 782px) { |
414 .health-check-body { |
|
415 margin: 0 12px; |
|
416 width: auto; |
|
417 } |
|
418 |
|
419 .site-health .notice { |
|
420 margin: 5px 10px 15px; |
|
421 } |
|
422 |
|
423 .site-health .update-nag { |
|
424 margin-right: 10px; |
|
425 margin-left: 10px; |
|
426 } |
|
427 |
327 |
428 .site-health-issues-wrapper .health-check-accordion-trigger { |
328 .site-health-issues-wrapper .health-check-accordion-trigger { |
429 flex-direction: column; |
329 flex-direction: column; |
430 align-items: flex-start; |
330 align-items: flex-start; |
431 } |
331 } |