[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      padding: 1rem 0;
  19      line-height: 1.4;
  20  }
  21  
  22  .health-check-body h3 {
  23      padding: 0;
  24      font-weight: 400;
  25  }
  26  
  27  .health-check-header {
  28      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  }
  40  
  41  .site-health-progress-wrapper {
  42      margin-bottom: 1rem;
  43  }
  44  
  45  .site-health-progress {
  46      display: inline-block;
  47      height: 20px;
  48      width: 20px;
  49      margin: 0;
  50      border-radius: 100%;
  51      position: relative;
  52      font-weight: 600;
  53      font-size: 0.4rem;
  54  }
  55  
  56  .site-health-progress-count {
  57      position: absolute;
  58      display: block;
  59      height: 80px;
  60      width: 80px;
  61      right: 50%;
  62      top: 50%;
  63      margin-top: -40px;
  64      margin-right: -40px;
  65      border-radius: 100%;
  66      line-height: 6.3;
  67      font-size: 2em;
  68  }
  69  
  70  .loading .site-health-progress svg #bar {
  71      stroke-dashoffset: 0;
  72      stroke: #adc5d2;
  73      animation: loadingPulse 3s infinite ease-in-out;
  74  }
  75  
  76  .site-health-progress svg circle {
  77      stroke-dashoffset: 0;
  78      transition: stroke-dashoffset 1s linear;
  79      stroke: #ccc;
  80      stroke-width: 2em;
  81  }
  82  
  83  .site-health-progress svg #bar {
  84      stroke-dashoffset: 565;
  85      stroke: #dc3232;
  86  }
  87  
  88  .green .site-health-progress #bar {
  89      stroke: #46b450;
  90  }
  91  .green .site-health-progress .site-health-progress-label {
  92      color: #46b450;
  93  }
  94  
  95  .orange .site-health-progress #bar {
  96      stroke: #ffb900;
  97  }
  98  .orange .site-health-progress .site-health-progress-label {
  99      color: #ffb900;
 100  }
 101  
 102  .site-health-progress-label {
 103      font-weight: 600;
 104      line-height: 20px;
 105      margin-right: 0.3rem;
 106  }
 107  
 108  @keyframes loadingPulse {
 109      0% {
 110          stroke: #adc5d2;
 111      }
 112      50% {
 113          stroke: #00a0d2;
 114      }
 115      100% {
 116          stroke: #adc5d2;
 117      }
 118  }
 119  
 120  .health-check-tabs-wrapper {
 121      /* IE 11 */
 122      display: -ms-inline-grid;
 123      -ms-grid-columns: 1fr 1fr;
 124      vertical-align: top;
 125      /* modern browsers */
 126      display: inline-grid;
 127      grid-template-columns: 1fr 1fr;
 128  }
 129  
 130  .health-check-tab {
 131      display: block; /* IE 11 */
 132      text-decoration: none;
 133      color: inherit;
 134      padding: 0.5rem 1rem 1rem;
 135      margin: 0 1rem;
 136      transition: box-shadow 0.5s ease-in-out;
 137  }
 138  
 139  .health-check-tab:nth-child(1) {
 140      -ms-grid-column: 1; /* IE 11 */
 141  }
 142  
 143  .health-check-tab:nth-child(2) {
 144      -ms-grid-column: 2; /* IE 11 */
 145  }
 146  
 147  .health-check-tab:focus {
 148      color: #191e23;
 149      outline: 1px solid #6c7781;
 150      box-shadow: none;
 151  }
 152  
 153  .health-check-tab.active {
 154      box-shadow: inset 0 -3px #007cba;
 155      font-weight: 600;
 156  }
 157  
 158  .health-check-body {
 159      max-width: 800px;
 160      margin: 0 auto;
 161  }
 162  
 163  .health-check-table td:first-child {
 164      width: 30%;
 165  }
 166  
 167  .health-check-table td {
 168      width: 70%;
 169  }
 170  
 171  .health-check-table ul,
 172  .health-check-table ol {
 173      margin: 0;
 174  }
 175  
 176  .health-check-body li {
 177      line-height: 1.5;
 178  }
 179  
 180  .health-check-body .pass::before,
 181  .health-check-body .good::before {
 182      content: "\f147";
 183      color: #46b450;
 184  }
 185  
 186  .health-check-body .warning::before {
 187      content: "\f460";
 188      color: #ffb900;
 189  }
 190  
 191  .health-check-body .info::before {
 192      content: "\f348";
 193      color: #00a0d2;
 194  }
 195  
 196  .health-check-body .fail::before,
 197  .health-check-body .error::before {
 198      content: "\f335";
 199      color: #dc3232;
 200  }
 201  
 202  .site-health-copy-buttons {
 203      margin: 1rem 0;
 204  }
 205  
 206  .site-health-copy-buttons .copy-button-wrapper {
 207      margin: 0.5rem 0 1rem;
 208  }
 209  
 210  .site-health-copy-buttons .success {
 211      display: none;
 212      color: #40860a;
 213      line-height: 1.8;
 214      margin-right: 0.5rem;
 215  }
 216  
 217  .site-health-copy-buttons .success.visible {
 218      display: inline-block;
 219      height: 28px;
 220      line-height: 2.2;
 221  }
 222  
 223  .site-status-has-issues.hide {
 224      display: none;
 225  }
 226  
 227  .site-health-view-more {
 228      text-align: center;
 229  }
 230  
 231  .site-health-issues-wrapper:first-of-type {
 232      margin-top: 3rem;
 233  }
 234  
 235  .site-health-issues-wrapper {
 236      margin-bottom: 3rem;
 237      margin-top: 2rem;
 238  }
 239  
 240  .site-status-all-clear {
 241      display: flex;
 242      flex-direction: column;
 243      align-items: center;
 244      justify-content: center;
 245      text-align: center;
 246      height: 100%;
 247      width: 100%;
 248      margin-top: 0;
 249  }
 250  
 251  @media all and (min-width: 784px) {
 252      .site-status-all-clear {
 253          margin: 5rem 0;
 254      }
 255  }
 256  
 257  .site-status-all-clear.hide {
 258      display: none;
 259  }
 260  
 261  .site-status-all-clear .dashicons {
 262      font-size: 150px;
 263      height: 130px;
 264      width: 150px;
 265  }
 266  
 267  .site-status-all-clear .encouragement {
 268      font-size: 1.5rem;
 269      font-weight: 600;
 270  }
 271  
 272  .site-status-all-clear p {
 273      margin: 0;
 274  }
 275  
 276  .health-check-accordion {
 277      border: 1px solid #ccd0d4;
 278  }
 279  
 280  .health-check-accordion-heading {
 281      margin: 0;
 282      border-top: 1px solid #ccd0d4;
 283      font-size: inherit;
 284      line-height: inherit;
 285      font-weight: 600;
 286      color: inherit;
 287  }
 288  
 289  .health-check-accordion-heading:first-child {
 290      border-top: none;
 291  }
 292  
 293  .health-check-accordion-trigger {
 294      background: #fff;
 295      border: 0;
 296      color: #32373c;
 297      cursor: pointer;
 298      display: flex;
 299      font-weight: 400;
 300      margin: 0;
 301      padding: 1em 1.5em 1em 3.5em;
 302      min-height: 46px;
 303      position: relative;
 304      text-align: right;
 305      width: 100%;
 306      align-items: center;
 307      justify-content: space-between;
 308  }
 309  
 310  .wp-core-ui .button.site-health-view-passed {
 311      position: relative;
 312      padding-left: 40px;
 313      padding-right: 20px;
 314  }
 315  
 316  .health-check-accordion-trigger:hover,
 317  .health-check-accordion-trigger:active {
 318      background: #f8f9f9;
 319  }
 320  
 321  .health-check-accordion-trigger:focus {
 322      color: #191e23;
 323      border: none;
 324      box-shadow: none;
 325      outline-offset: -2px;
 326      outline: 1px dotted #555d66;
 327  }
 328  
 329  .health-check-accordion-trigger .title {
 330      pointer-events: none;
 331      font-weight: 600;
 332      flex-grow: 1;
 333  }
 334  
 335  .health-check-accordion-trigger .icon,
 336  .site-health-view-passed .icon {
 337      border: solid #555d66;
 338      border-width: 0 0 2px 2px;
 339      height: 0.5rem;
 340      pointer-events: none;
 341      position: absolute;
 342      left: 1.5em;
 343      top: 50%;
 344      transform: translateY(-70%) rotate(-45deg);
 345      width: 0.5rem;
 346  }
 347  
 348  .health-check-accordion-trigger .badge {
 349      padding: 0.1rem 0.5rem 0.15rem;
 350      color: #32373c;
 351      font-weight: 600;
 352      margin-right: 0.5rem;
 353  }
 354  
 355  .health-check-accordion-trigger .badge.blue {
 356      border: 1px solid #bfe7f3;
 357  }
 358  
 359  .health-check-accordion-trigger .badge.orange {
 360      border: 1px solid #ffb900;
 361  }
 362  
 363  .health-check-accordion-trigger .badge.red {
 364      border: 1px solid #dc3232;
 365  }
 366  
 367  .health-check-accordion-trigger .badge.green {
 368      border: 1px solid #46b450;
 369  }
 370  
 371  .health-check-accordion-trigger .badge.purple {
 372      border: 1px solid #826eb4;
 373  }
 374  
 375  .health-check-accordion-trigger .badge.gray {
 376      border: 1px solid #ccd0d4;
 377  }
 378  
 379  .health-check-accordion-trigger[aria-expanded="true"] .icon,
 380  .site-health-view-passed[aria-expanded="true"] .icon {
 381      transform: translateY(-30%) rotate(135deg)
 382  }
 383  
 384  .health-check-accordion-panel {
 385      margin: 0;
 386      padding: 1em 1.5em;
 387      background: #fff;
 388  }
 389  
 390  .health-check-accordion-panel[hidden] {
 391      display: none;
 392  }
 393  
 394  .health-check-accordion-panel a .dashicons {
 395      text-decoration: none;
 396  }
 397  
 398  /* Better position for the WordPress admin notices and update nag. */
 399  .site-health .notice {
 400      margin: 5px 22px 15px 20px;
 401  }
 402  
 403  .site-health .update-nag {
 404      margin-bottom: 20px;
 405      margin-right: 22px;
 406  }
 407  
 408  .health-check-wp-paths-sizes.spinner {
 409      visibility: visible;
 410      float: none;
 411      margin: 0 4px;
 412      flex-shrink: 0;
 413  }
 414  
 415  @media screen and (max-width: 782px) {
 416      .health-check-body {
 417          margin: 0 12px;
 418          width: auto;
 419      }
 420  
 421      .site-health .notice {
 422          margin: 5px 10px 15px;
 423      }
 424  
 425      .site-health .update-nag {
 426          margin-left: 10px;
 427          margin-right: 10px;
 428      }
 429  
 430      .site-health-issues-wrapper .health-check-accordion-trigger {
 431          flex-direction: column;
 432          align-items: flex-start;
 433      }
 434  
 435      .health-check-accordion-trigger .badge {
 436          margin: 1em 0 0;
 437      }
 438  
 439      .health-check-table {
 440          table-layout: fixed;
 441      }
 442  
 443      .health-check-table td {
 444          box-sizing: border-box;
 445          display: block;
 446          width: 100%;
 447          word-wrap: break-word;
 448      }
 449  
 450      .health-check-table td:first-child {
 451          width: 100%;
 452          padding-bottom: 0;
 453          font-weight: 600;
 454      }
 455  }
 456  
 457  /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
 458  @media only screen and (max-width: 1004px) {
 459      .health-check-body {
 460          margin: 0 22px;
 461          width: auto;
 462      }
 463  }