[Summary view] [Print] [Text view]

   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  .site-health-progress-wrapper {
  15      margin-bottom: 1rem;
  16  }
  17  
  18  .site-health-progress {
  19      display: inline-block;
  20      height: 20px;
  21      width: 20px;
  22      margin: 0;
  23      border-radius: 100%;
  24      position: relative;
  25      font-weight: 600;
  26      font-size: 0.4rem;
  27  }
  28  
  29  .site-health-progress-count {
  30      position: absolute;
  31      display: block;
  32      height: 80px;
  33      width: 80px;
  34      left: 50%;
  35      top: 50%;
  36      margin-top: -40px;
  37      margin-left: -40px;
  38      border-radius: 100%;
  39      line-height: 6.3;
  40      font-size: 2em;
  41  }
  42  
  43  .loading .site-health-progress svg #bar {
  44      stroke-dashoffset: 0;
  45      stroke: #c3c4c7;
  46      animation: loadingPulse 3s infinite ease-in-out;
  47  }
  48  
  49  .site-health-progress svg circle {
  50      stroke-dashoffset: 0;
  51      transition: stroke-dashoffset 1s linear;
  52      stroke: #c3c4c7;
  53      stroke-width: 2em;
  54  }
  55  
  56  .site-health-progress svg #bar {
  57      stroke-dashoffset: 565;
  58      stroke: #d63638;
  59  }
  60  
  61  .green .site-health-progress #bar {
  62      stroke: #00a32a;
  63  }
  64  .green .site-health-progress .site-health-progress-label {
  65      color: #00a32a;
  66  }
  67  
  68  .orange .site-health-progress #bar {
  69      stroke: #dba617;
  70  }
  71  .orange .site-health-progress .site-health-progress-label {
  72      color: #dba617;
  73  }
  74  
  75  .site-health-progress-label {
  76      font-weight: 600;
  77      line-height: 20px;
  78      margin-left: 0.3rem;
  79  }
  80  
  81  @keyframes loadingPulse {
  82      0% {
  83          stroke: #c3c4c7;
  84      }
  85      50% {
  86          stroke: #72aee6;
  87      }
  88      100% {
  89          stroke: #c3c4c7;
  90      }
  91  }
  92  
  93  .health-check-tabs-wrapper {
  94      /* IE 11 */
  95      display: -ms-inline-grid;
  96      -ms-grid-columns: 1fr 1fr 1fr 1fr;
  97      vertical-align: top;
  98      /* modern browsers */
  99      display: inline-grid;
 100      grid-template-columns: 1fr 1fr 1fr 1fr;
 101  }
 102  
 103  .health-check-tabs-wrapper.tab-count-1 {
 104      grid-template-columns: 1fr;
 105  }
 106  .health-check-tabs-wrapper.tab-count-2 {
 107      grid-template-columns: 1fr 1fr;
 108  }
 109  .health-check-tabs-wrapper.tab-count-3 {
 110      grid-template-columns: 1fr 1fr 1fr;
 111  }
 112  
 113  .health-check-tab {
 114      display: block; /* IE 11 */
 115      text-decoration: none;
 116      color: inherit;
 117      padding: 0.5rem 1rem 1rem;
 118      margin: 0 1rem;
 119      transition: box-shadow 0.5s ease-in-out;
 120  }
 121  
 122  .health-check-offscreen-nav-wrapper {
 123      position: relative;
 124      background: transparent;
 125      border: none;
 126  }
 127  .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
 128      left: initial;
 129  }
 130  
 131  .health-check-offscreen-nav {
 132      display: none;
 133      position: absolute;
 134      padding-top: 10px;
 135      right: 0;
 136      top: 100%;
 137      width: 13rem;
 138  }
 139  .health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
 140      display: inline-block;
 141  }
 142  .health-check-offscreen-nav:before {
 143      position: absolute;
 144      content: "";
 145      width: 0;
 146      height: 0;
 147      border-style: solid;
 148      border-width: 0 10px 5px;
 149      border-color: transparent transparent #ffffff;
 150      right: 20px;
 151      top: 5px;
 152  }
 153  
 154  .health-check-offscreen-nav .health-check-tab {
 155      background: #fff;
 156      box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
 157  }
 158  
 159  .health-check-offscreen-nav .health-check-tab.active {
 160      box-shadow: inset 3px 0 #3582c4;
 161      font-weight: 600;
 162  }
 163  
 164  .health-check-body {
 165      max-width: 800px;
 166      margin: 0 auto;
 167  }
 168  
 169  .health-check-table td:first-child {
 170      width: 30%;
 171  }
 172  
 173  .health-check-table td {
 174      width: 70%;
 175  }
 176  
 177  .health-check-table ul,
 178  .health-check-table ol {
 179      margin: 0;
 180  }
 181  
 182  .health-check-body li {
 183      line-height: 1.5;
 184  }
 185  
 186  .health-check-body .pass::before,
 187  .health-check-body .good::before {
 188      content: "\f147";
 189      color: #00a32a;
 190  }
 191  
 192  .health-check-body .warning::before {
 193      content: "\f460";
 194      color: #dba617;
 195  }
 196  
 197  .health-check-body .info::before {
 198      content: "\f348";
 199      color: #72aee6;
 200  }
 201  
 202  .health-check-body .fail::before,
 203  .health-check-body .error::before {
 204      content: "\f335";
 205      color: #d63638;
 206  }
 207  
 208  .site-health-copy-buttons {
 209      margin: 1rem 0;
 210  }
 211  
 212  .site-health-copy-buttons .copy-button-wrapper {
 213      display: inline-flex;
 214      align-items: center;
 215      margin: 0.5rem 0 1rem;
 216  }
 217  
 218  .site-health-copy-buttons .success {
 219      color: #007017;
 220      margin-left: 0.5rem;
 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: 0 0 3rem;
 249  }
 250  
 251  @media all and (min-width: 784px) {
 252      .site-status-all-clear {
 253          margin: 2rem 0 5rem;
 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: 150px;
 264      margin-bottom: 2rem;
 265      width: 150px;
 266  }
 267  
 268  .site-status-all-clear .encouragement {
 269      font-size: 1.5rem;
 270      font-weight: 600;
 271  }
 272  
 273  .site-status-all-clear p {
 274      margin: 0;
 275  }
 276  
 277  .wp-core-ui .button.site-health-view-passed {
 278      position: relative;
 279      padding-right: 40px;
 280      padding-left: 20px;
 281  }
 282  
 283  .health-check-wp-paths-sizes.spinner {
 284      visibility: visible;
 285      float: none;
 286      margin: 0 4px;
 287      flex-shrink: 0;
 288  }
 289  
 290  /* Styling unique to the dashboard widget. */
 291  #dashboard_site_health .site-health-details {
 292      padding-left: 16px;
 293  }
 294  
 295  #dashboard_site_health .site-health-details p:first-child {
 296      margin-top: 0;
 297  }
 298  
 299  #dashboard_site_health .site-health-details p:last-child {
 300      margin-bottom: 0;
 301  }
 302  
 303  #dashboard_site_health .health-check-widget {
 304      display: grid;
 305      grid-template-columns: 1fr 2fr;
 306      grid-auto-rows: minmax(64px, auto);
 307      column-gap: 16px;
 308      align-items: center;
 309  }
 310  #dashboard_site_health .site-health-progress-label {
 311      margin-left: 0;
 312  }
 313  
 314  .health-check-widget-title-section {
 315      margin-bottom: 0;
 316      text-align: center;
 317  }
 318  
 319  @media screen and (max-width: 480px) {
 320      #dashboard_site_health .health-check-widget {
 321          grid-template-columns: 100%;
 322      }
 323  }
 324  
 325  @media screen and (max-width: 782px) {
 326  
 327      .site-health-issues-wrapper .health-check-accordion-trigger {
 328          flex-direction: column;
 329          align-items: flex-start;
 330      }
 331  
 332      .health-check-accordion-trigger .badge {
 333          margin: 1em 0 0;
 334      }
 335  
 336      .health-check-table {
 337          table-layout: fixed;
 338      }
 339  
 340      .health-check-table td {
 341          box-sizing: border-box;
 342          display: block;
 343          width: 100%;
 344          word-wrap: break-word;
 345      }
 346  
 347      .health-check-table td:first-child {
 348          width: 100%;
 349          padding-bottom: 0;
 350          font-weight: 600;
 351      }
 352  
 353      .wp-core-ui .site-health-copy-buttons .copy-button {
 354          margin-bottom: 0;
 355      }
 356  }
 357