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