[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  .site-health #wpcontent,
   3  .site-health.auto-fold #wpcontent {
   4      padding-right: 0;
   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  
  17  .health-check-body h2 {
  18      line-height: 1.4;
  19  }
  20  
  21  .health-check-body h3 {
  22      padding: 0;
  23      font-weight: 400;
  24  }
  25  
  26  .health-check-header {
  27      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  }
  39  
  40  .site-health-progress-wrapper {
  41      margin-bottom: 1rem;
  42  }
  43  
  44  .site-health-progress {
  45      display: inline-block;
  46      height: 20px;
  47      width: 20px;
  48      margin: 0;
  49      border-radius: 100%;
  50      position: relative;
  51      font-weight: 600;
  52      font-size: 0.4rem;
  53  }
  54  
  55  .site-health-progress-count {
  56      position: absolute;
  57      display: block;
  58      height: 80px;
  59      width: 80px;
  60      right: 50%;
  61      top: 50%;
  62      margin-top: -40px;
  63      margin-right: -40px;
  64      border-radius: 100%;
  65      line-height: 6.3;
  66      font-size: 2em;
  67  }
  68  
  69  .loading .site-health-progress svg #bar {
  70      stroke-dashoffset: 0;
  71      stroke: #adc5d2;
  72      animation: loadingPulse 3s infinite ease-in-out;
  73  }
  74  
  75  .site-health-progress svg circle {
  76      stroke-dashoffset: 0;
  77      transition: stroke-dashoffset 1s linear;
  78      stroke: #ccc;
  79      stroke-width: 2em;
  80  }
  81  
  82  .site-health-progress svg #bar {
  83      stroke-dashoffset: 565;
  84      stroke: #dc3232;
  85  }
  86  
  87  .green .site-health-progress #bar {
  88      stroke: #46b450;
  89  }
  90  .green .site-health-progress .site-health-progress-label {
  91      color: #46b450;
  92  }
  93  
  94  .orange .site-health-progress #bar {
  95      stroke: #ffb900;
  96  }
  97  .orange .site-health-progress .site-health-progress-label {
  98      color: #ffb900;
  99  }
 100  
 101  .site-health-progress-label {
 102      font-weight: 600;
 103      line-height: 20px;
 104      margin-right: 0.3rem;
 105  }
 106  
 107  @keyframes loadingPulse {
 108      0% {
 109          stroke: #adc5d2;
 110      }
 111      50% {
 112          stroke: #00a0d2;
 113      }
 114      100% {
 115          stroke: #adc5d2;
 116      }
 117  }
 118  
 119  .health-check-tabs-wrapper {
 120      /* IE 11 */
 121      display: -ms-inline-grid;
 122      -ms-grid-columns: 1fr 1fr;
 123      vertical-align: top;
 124      /* modern browsers */
 125      display: inline-grid;
 126      grid-template-columns: 1fr 1fr;
 127  }
 128  
 129  .health-check-tab {
 130      display: block; /* IE 11 */
 131      text-decoration: none;
 132      color: inherit;
 133      padding: 0.5rem 1rem 1rem;
 134      margin: 0 1rem;
 135      transition: box-shadow 0.5s ease-in-out;
 136  }
 137  
 138  .health-check-tab:nth-child(1) {
 139      -ms-grid-column: 1; /* IE 11 */
 140  }
 141  
 142  .health-check-tab:nth-child(2) {
 143      -ms-grid-column: 2; /* IE 11 */
 144  }
 145  
 146  .health-check-tab:focus {
 147      color: #191e23;
 148      outline: 1px solid #6c7781;
 149      box-shadow: none;
 150  }
 151  
 152  .health-check-tab.active {
 153      box-shadow: inset 0 -3px #007cba;
 154      font-weight: 600;
 155  }
 156  
 157  .health-check-body {
 158      max-width: 800px;
 159      margin: 0 auto;
 160  }
 161  
 162  .health-check-table td:first-child {
 163      width: 30%;
 164  }
 165  
 166  .health-check-table td {
 167      width: 70%;
 168  }
 169  
 170  .health-check-table ul,
 171  .health-check-table ol {
 172      margin: 0;
 173  }
 174  
 175  .health-check-body li {
 176      line-height: 1.5;
 177  }
 178  
 179  .health-check-body .pass::before,
 180  .health-check-body .good::before {
 181      content: "\f147";
 182      color: #46b450;
 183  }
 184  
 185  .health-check-body .warning::before {
 186      content: "\f460";
 187      color: #ffb900;
 188  }
 189  
 190  .health-check-body .info::before {
 191      content: "\f348";
 192      color: #00a0d2;
 193  }
 194  
 195  .health-check-body .fail::before,
 196  .health-check-body .error::before {
 197      content: "\f335";
 198      color: #dc3232;
 199  }
 200  
 201  .site-health-copy-buttons {
 202      margin: 1rem 0;
 203  }
 204  
 205  .site-health-copy-buttons .copy-button-wrapper {
 206      display: inline-flex;
 207      align-items: center;
 208      margin: 0.5rem 0 1rem;
 209  }
 210  
 211  .site-health-copy-buttons .success {
 212      color: #40860a;
 213      margin-right: 0.5rem;
 214  }
 215  
 216  .site-status-has-issues.hide {
 217      display: none;
 218  }
 219  
 220  .site-health-view-more {
 221      text-align: center;
 222  }
 223  
 224  .site-health-issues-wrapper:first-of-type {
 225      margin-top: 3rem;
 226  }
 227  
 228  .site-health-issues-wrapper {
 229      margin-bottom: 3rem;
 230      margin-top: 2rem;
 231  }
 232  
 233  .site-status-all-clear {
 234      display: flex;
 235      flex-direction: column;
 236      align-items: center;
 237      justify-content: center;
 238      text-align: center;
 239      height: 100%;
 240      width: 100%;
 241      margin-top: 0;
 242  }
 243  
 244  @media all and (min-width: 784px) {
 245      .site-status-all-clear {
 246          margin: 5rem 0;
 247      }
 248  }
 249  
 250  .site-status-all-clear.hide {
 251      display: none;
 252  }
 253  
 254  .site-status-all-clear .dashicons {
 255      font-size: 150px;
 256      height: 130px;
 257      width: 150px;
 258  }
 259  
 260  .site-status-all-clear .encouragement {
 261      font-size: 1.5rem;
 262      font-weight: 600;
 263  }
 264  
 265  .site-status-all-clear p {
 266      margin: 0;
 267  }
 268  
 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 1.5em 1em 3.5em;
 295      min-height: 46px;
 296      position: relative;
 297      text-align: right;
 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 {
 308      position: relative;
 309      padding-left: 40px;
 310      padding-right: 20px;
 311  }
 312  
 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 0 2px 2px;
 337      height: 0.5rem;
 338      pointer-events: none;
 339      position: absolute;
 340      left: 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-right: 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  
 396  /* Better position for the WordPress admin notices and update nag. */
 397  .site-health .notice {
 398      margin: 5px 22px 15px 20px;
 399  }
 400  
 401  .site-health .update-nag {
 402      margin-bottom: 20px;
 403      margin-right: 22px;
 404  }
 405  
 406  .health-check-wp-paths-sizes.spinner {
 407      visibility: visible;
 408      float: none;
 409      margin: 0 4px;
 410      flex-shrink: 0;
 411  }
 412  
 413  @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-left: 10px;
 425          margin-right: 10px;
 426      }
 427  
 428      .site-health-issues-wrapper .health-check-accordion-trigger {
 429          flex-direction: column;
 430          align-items: flex-start;
 431      }
 432  
 433      .health-check-accordion-trigger .badge {
 434          margin: 1em 0 0;
 435      }
 436  
 437      .health-check-table {
 438          table-layout: fixed;
 439      }
 440  
 441      .health-check-table td {
 442          box-sizing: border-box;
 443          display: block;
 444          width: 100%;
 445          word-wrap: break-word;
 446      }
 447  
 448      .health-check-table td:first-child {
 449          width: 100%;
 450          padding-bottom: 0;
 451          font-weight: 600;
 452      }
 453  
 454      .wp-core-ui .site-health-copy-buttons .copy-button {
 455          margin-bottom: 0;
 456      }
 457  }
 458  
 459  /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
 460  @media only screen and (max-width: 1004px) {
 461      .health-check-body {
 462          margin: 0 22px;
 463          width: auto;
 464      }
 465  }