site-health.css (6240B)
1 /* Note: Any Site Health selectors that use 2 duplicate styling from the Privacy settings screen 3 are 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 .health-check-widget-title-section { 15 text-align: center; 16 } 17 18 .site-health-progress-wrapper { 19 margin-bottom: 1rem; 20 } 21 22 .site-health-progress { 23 display: inline-block; 24 height: 20px; 25 width: 20px; 26 margin: 0; 27 border-radius: 100%; 28 position: relative; 29 font-weight: 600; 30 font-size: 0.4rem; 31 } 32 33 .site-health-progress-count { 34 position: absolute; 35 display: block; 36 height: 80px; 37 width: 80px; 38 left: 50%; 39 top: 50%; 40 margin-top: -40px; 41 margin-left: -40px; 42 border-radius: 100%; 43 line-height: 6.3; 44 font-size: 2em; 45 } 46 47 .loading .site-health-progress svg #bar { 48 stroke-dashoffset: 0; 49 stroke: #c3c4c7; 50 animation: loadingPulse 3s infinite ease-in-out; 51 } 52 53 .site-health-progress svg circle { 54 stroke-dashoffset: 0; 55 transition: stroke-dashoffset 1s linear; 56 stroke: #c3c4c7; 57 stroke-width: 2em; 58 } 59 60 .site-health-progress svg #bar { 61 stroke-dashoffset: 565; 62 stroke: #d63638; 63 } 64 65 .green .site-health-progress #bar { 66 stroke: #00a32a; 67 } 68 .green .site-health-progress .site-health-progress-label { 69 color: #00a32a; 70 } 71 72 .orange .site-health-progress #bar { 73 stroke: #dba617; 74 } 75 .orange .site-health-progress .site-health-progress-label { 76 color: #dba617; 77 } 78 79 .site-health-progress-label { 80 font-weight: 600; 81 line-height: 20px; 82 margin-left: 0.3rem; 83 } 84 85 @keyframes loadingPulse { 86 0% { 87 stroke: #c3c4c7; 88 } 89 50% { 90 stroke: #72aee6; 91 } 92 100% { 93 stroke: #c3c4c7; 94 } 95 } 96 97 .health-check-tabs-wrapper { 98 /* IE 11 */ 99 display: -ms-inline-grid; 100 -ms-grid-columns: 1fr 1fr 1fr 1fr; 101 vertical-align: top; 102 /* modern browsers */ 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 { 111 grid-template-columns: 1fr 1fr; 112 } 113 .health-check-tabs-wrapper.tab-count-3 { 114 grid-template-columns: 1fr 1fr 1fr; 115 } 116 117 .health-check-tab { 118 display: block; /* IE 11 */ 119 text-decoration: none; 120 color: inherit; 121 padding: 0.5rem 1rem 1rem; 122 margin: 0 1rem; 123 transition: box-shadow 0.5s ease-in-out; 124 } 125 126 .health-check-offscreen-nav-wrapper { 127 position: relative; 128 background: transparent; 129 border: none; 130 } 131 .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { 132 left: initial; 133 } 134 135 .health-check-offscreen-nav { 136 display: none; 137 position: absolute; 138 padding-top: 10px; 139 right: 0; 140 top: 100%; 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; 165 font-weight: 600; 166 } 167 168 .health-check-body { 169 max-width: 800px; 170 margin: 0 auto; 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 color: #00a32a; 194 } 195 196 .health-check-body .warning::before { 197 content: "\f460"; 198 color: #dba617; 199 } 200 201 .health-check-body .info::before { 202 content: "\f348"; 203 color: #72aee6; 204 } 205 206 .health-check-body .fail::before, 207 .health-check-body .error::before { 208 content: "\f335"; 209 color: #d63638; 210 } 211 212 .site-health-copy-buttons { 213 margin: 1rem 0; 214 } 215 216 .site-health-copy-buttons .copy-button-wrapper { 217 display: inline-flex; 218 align-items: center; 219 margin: 0.5rem 0 1rem; 220 } 221 222 .site-health-copy-buttons .success { 223 color: #008a20; 224 margin-left: 0.5rem; 225 } 226 227 .site-status-has-issues.hide { 228 display: none; 229 } 230 231 .site-health-view-more { 232 text-align: center; 233 } 234 235 .site-health-issues-wrapper:first-of-type { 236 margin-top: 3rem; 237 } 238 239 .site-health-issues-wrapper { 240 margin-bottom: 3rem; 241 margin-top: 2rem; 242 } 243 244 .site-status-all-clear { 245 display: flex; 246 flex-direction: column; 247 align-items: center; 248 justify-content: center; 249 text-align: center; 250 height: 100%; 251 width: 100%; 252 margin-top: 0; 253 } 254 255 @media all and (min-width: 784px) { 256 .site-status-all-clear { 257 margin: 5rem 0; 258 } 259 } 260 261 .site-status-all-clear.hide { 262 display: none; 263 } 264 265 .site-status-all-clear .dashicons { 266 font-size: 150px; 267 height: 130px; 268 width: 150px; 269 } 270 271 .site-status-all-clear .encouragement { 272 font-size: 1.5rem; 273 font-weight: 600; 274 } 275 276 .site-status-all-clear p { 277 margin: 0; 278 } 279 280 .wp-core-ui .button.site-health-view-passed { 281 position: relative; 282 padding-right: 40px; 283 padding-left: 20px; 284 } 285 286 287 /* Better position for the WordPress admin notices and update nag. */ 288 .site-health .notice { 289 margin: 5px 20px 15px 22px; 290 } 291 292 .site-health .update-nag { 293 margin-bottom: 20px; 294 margin-left: 22px; 295 } 296 297 .health-check-wp-paths-sizes.spinner { 298 visibility: visible; 299 float: none; 300 margin: 0 4px; 301 flex-shrink: 0; 302 } 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 326 @media screen and (max-width: 782px) { 327 328 .site-health-issues-wrapper .health-check-accordion-trigger { 329 flex-direction: column; 330 align-items: flex-start; 331 } 332 333 .health-check-accordion-trigger .badge { 334 margin: 1em 0 0; 335 } 336 337 .health-check-table { 338 table-layout: fixed; 339 } 340 341 .health-check-table td { 342 box-sizing: border-box; 343 display: block; 344 width: 100%; 345 word-wrap: break-word; 346 } 347 348 .health-check-table td:first-child { 349 width: 100%; 350 padding-bottom: 0; 351 font-weight: 600; 352 } 353 354 .wp-core-ui .site-health-copy-buttons .copy-button { 355 margin-bottom: 0; 356 } 357 } 358