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