[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: var(--wp-admin-theme-color);
  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  .widefat.health-check-table th {
 170      font-size: 13px;
 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      content: "\f147" / '';
 194      color: #00a32a;
 195  }
 196  
 197  .health-check-body .warning::before {
 198      content: "\f460";
 199      content: "\f460" / '';
 200      color: #dba617;
 201  }
 202  
 203  .health-check-body .info::before {
 204      content: "\f348";
 205      content: "\f348" / '';
 206      color: #72aee6;
 207  }
 208  
 209  .health-check-body .fail::before,
 210  .health-check-body .error::before {
 211      content: "\f335";
 212      content: "\f335" / '';
 213      color: #d63638;
 214  }
 215  
 216  .site-health-copy-buttons {
 217      margin: 1rem 0;
 218  }
 219  
 220  .site-health-copy-buttons .copy-button-wrapper {
 221      display: inline-flex;
 222      align-items: center;
 223      margin: 0.5rem 0 1rem;
 224  }
 225  
 226  .site-health-copy-buttons .success {
 227      color: #007017;
 228      margin-left: 0.5rem;
 229  }
 230  
 231  .site-status-has-issues.hide {
 232      display: none;
 233  }
 234  
 235  .site-health-view-more {
 236      text-align: center;
 237  }
 238  
 239  .site-health-issues-wrapper:first-of-type {
 240      margin-top: 3rem;
 241  }
 242  
 243  .site-health-issues-wrapper {
 244      margin-bottom: 3rem;
 245      margin-top: 2rem;
 246  }
 247  
 248  .site-status-all-clear {
 249      display: flex;
 250      flex-direction: column;
 251      align-items: center;
 252      justify-content: center;
 253      text-align: center;
 254      height: 100%;
 255      width: 100%;
 256      margin: 0 0 3rem;
 257  }
 258  
 259  @media all and (min-width: 784px) {
 260      .site-status-all-clear {
 261          margin: 2rem 0 5rem;
 262      }
 263  }
 264  
 265  .site-status-all-clear.hide {
 266      display: none;
 267  }
 268  
 269  .site-status-all-clear .dashicons {
 270      font-size: 150px;
 271      height: 150px;
 272      margin-bottom: 2rem;
 273      width: 150px;
 274  }
 275  
 276  .site-status-all-clear .encouragement {
 277      font-size: 1.5rem;
 278      font-weight: 600;
 279  }
 280  
 281  .site-status-all-clear p {
 282      margin: 0;
 283  }
 284  
 285  .wp-core-ui .button.site-health-view-passed {
 286      position: relative;
 287      padding-right: 40px;
 288      padding-left: 20px;
 289  }
 290  
 291  .health-check-wp-paths-sizes.spinner {
 292      visibility: visible;
 293      float: none;
 294      margin: 0 4px;
 295      flex-shrink: 0;
 296  }
 297  
 298  /* Styling unique to the dashboard widget. */
 299  #dashboard_site_health .site-health-details {
 300      padding-left: 16px;
 301  }
 302  
 303  #dashboard_site_health .site-health-details p:first-child {
 304      margin-top: 0;
 305  }
 306  
 307  #dashboard_site_health .site-health-details p:last-child {
 308      margin-bottom: 0;
 309  }
 310  
 311  #dashboard_site_health .health-check-widget {
 312      display: grid;
 313      grid-template-columns: 1fr 2fr;
 314      grid-auto-rows: minmax(64px, auto);
 315      column-gap: 16px;
 316      align-items: center;
 317  }
 318  #dashboard_site_health .site-health-progress-label {
 319      margin-left: 0;
 320  }
 321  
 322  .health-check-widget-title-section {
 323      margin-bottom: 0;
 324      text-align: center;
 325  }
 326  
 327  @media screen and (max-width: 480px) {
 328      #dashboard_site_health .health-check-widget {
 329          grid-template-columns: 100%;
 330      }
 331  }
 332  
 333  @media screen and (max-width: 782px) {
 334  
 335      .site-health-issues-wrapper .health-check-accordion-trigger {
 336          flex-direction: column;
 337          align-items: flex-start;
 338      }
 339  
 340      .health-check-accordion-trigger .badge {
 341          margin: 1em 0 0;
 342      }
 343  
 344      .health-check-table {
 345          table-layout: fixed;
 346      }
 347  
 348      .health-check-table th,
 349      .health-check-table td {
 350          box-sizing: border-box;
 351          display: block;
 352          width: 100%;
 353          word-wrap: break-word;
 354      }
 355  
 356      .widefat.health-check-table th,
 357      .health-check-table td:first-child {
 358          width: 100%;
 359          padding-bottom: 0;
 360          font-weight: 600;
 361      }
 362  
 363      .wp-core-ui .site-health-copy-buttons .copy-button {
 364          margin-bottom: 0;
 365      }
 366  }
 367