[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  
  65  .green .site-health-progress .site-health-progress-label {
  66      color: #00a32a;
  67  }
  68  
  69  .orange .site-health-progress #bar {
  70      stroke: #dba617;
  71  }
  72  
  73  .orange .site-health-progress .site-health-progress-label {
  74      color: #dba617;
  75  }
  76  
  77  .site-health-progress-label {
  78      font-weight: 600;
  79      line-height: 1.5384;
  80      margin-left: 0.3rem;
  81  }
  82  
  83  @keyframes loadingPulse {
  84      0% {
  85          stroke: #c3c4c7;
  86      }
  87  
  88      50% {
  89          stroke: var(--wp-admin-theme-color);
  90      }
  91  
  92      100% {
  93          stroke: #c3c4c7;
  94      }
  95  }
  96  
  97  .health-check-tabs-wrapper {
  98      vertical-align: top;
  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  
 107  .health-check-tabs-wrapper.tab-count-2 {
 108      grid-template-columns: 1fr 1fr;
 109  }
 110  
 111  .health-check-tabs-wrapper.tab-count-3 {
 112      grid-template-columns: 1fr 1fr 1fr;
 113  }
 114  
 115  .health-check-tab {
 116      text-decoration: none;
 117      color: inherit;
 118      padding: 0.5rem 1rem 1rem;
 119      margin: 0 1rem;
 120      transition: box-shadow 0.5s ease-in-out;
 121  }
 122  
 123  .health-check-offscreen-nav-wrapper {
 124      position: relative;
 125      background: transparent;
 126      border: none;
 127  }
 128  
 129  .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
 130      left: initial;
 131  }
 132  
 133  .health-check-offscreen-nav {
 134      display: none;
 135      position: absolute;
 136      padding-top: 10px;
 137      right: 0;
 138      top: 100%;
 139      width: 13rem;
 140  }
 141  
 142  .health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
 143      display: inline-block;
 144  }
 145  
 146  .health-check-offscreen-nav::before {
 147      position: absolute;
 148      content: "";
 149      width: 0;
 150      height: 0;
 151      border-style: solid;
 152      border-width: 0 10px 5px;
 153      border-color: transparent transparent #fff;
 154      right: 20px;
 155      top: 5px;
 156  }
 157  
 158  .health-check-offscreen-nav .health-check-tab {
 159      background: #fff;
 160      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.75);
 161  }
 162  
 163  .health-check-offscreen-nav .health-check-tab.active {
 164      box-shadow: inset 3px 0 #3582c4;
 165      font-weight: 600;
 166  }
 167  
 168  .health-check-body {
 169      max-width: 800px;
 170      margin: 0 auto;
 171  }
 172  
 173  .widefat.health-check-table th {
 174      font-size: 13px;
 175  }
 176  
 177  .health-check-table td:first-child {
 178      width: 30%;
 179  }
 180  
 181  .health-check-table td {
 182      width: 70%;
 183  }
 184  
 185  .health-check-table ul,
 186  .health-check-table ol {
 187      margin: 0;
 188  }
 189  
 190  .health-check-body li {
 191      line-height: 1.5;
 192  }
 193  
 194  .health-check-body .pass::before,
 195  .health-check-body .good::before {
 196      content: "\f147";
 197      content: "\f147" / "";
 198      color: #00a32a;
 199  }
 200  
 201  .health-check-body .warning::before {
 202      content: "\f460";
 203      content: "\f460" / "";
 204      color: #dba617;
 205  }
 206  
 207  .health-check-body .info::before {
 208      content: "\f348";
 209      content: "\f348" / "";
 210      color: #72aee6;
 211  }
 212  
 213  .health-check-body .fail::before,
 214  .health-check-body .error::before {
 215      content: "\f335";
 216      content: "\f335" / "";
 217      color: #d63638;
 218  }
 219  
 220  .site-health-copy-buttons {
 221      margin: 1rem 0;
 222  }
 223  
 224  .site-health-copy-buttons .copy-button-wrapper {
 225      display: inline-flex;
 226      align-items: center;
 227      margin: 0.5rem 0 1rem;
 228  }
 229  
 230  .site-health-copy-buttons .success {
 231      color: #007017;
 232      margin-left: 0.5rem;
 233  }
 234  
 235  .site-status-has-issues.hide {
 236      display: none;
 237  }
 238  
 239  .site-health-view-more {
 240      text-align: center;
 241  }
 242  
 243  .site-health-issues-wrapper:first-of-type {
 244      margin-top: 3rem;
 245  }
 246  
 247  .site-health-issues-wrapper {
 248      margin-bottom: 3rem;
 249      margin-top: 2rem;
 250  }
 251  
 252  .site-status-all-clear {
 253      display: flex;
 254      flex-direction: column;
 255      align-items: center;
 256      justify-content: center;
 257      text-align: center;
 258      height: 100%;
 259      width: 100%;
 260      margin: 0 0 3rem;
 261  }
 262  
 263  @media all and (min-width: 784px) {
 264      .site-status-all-clear {
 265          margin: 2rem 0 5rem;
 266      }
 267  }
 268  
 269  .site-status-all-clear.hide {
 270      display: none;
 271  }
 272  
 273  .site-status-all-clear .dashicons {
 274      font-size: 150px;
 275      height: 150px;
 276      margin-bottom: 2rem;
 277      width: 150px;
 278  }
 279  
 280  .site-status-all-clear .encouragement {
 281      font-size: 1.5rem;
 282      font-weight: 600;
 283  }
 284  
 285  .site-status-all-clear p {
 286      margin: 0;
 287  }
 288  
 289  .wp-core-ui .button.site-health-view-passed {
 290      position: relative;
 291      padding-right: 40px;
 292      padding-left: 20px;
 293  }
 294  
 295  .health-check-wp-paths-sizes.spinner {
 296      visibility: visible;
 297      float: none;
 298      margin: 0 4px;
 299      flex-shrink: 0;
 300  }
 301  
 302  /* Styling unique to the dashboard widget. */
 303  /* stylelint-disable selector-id-pattern -- These ID selectors use a single underscore but cannot be changed because of backward compatibility reasons. */
 304  .no-js #dashboard_site_health {
 305      display: none;
 306  }
 307  
 308  #dashboard_site_health .site-health-details {
 309      padding-left: 16px;
 310  }
 311  
 312  #dashboard_site_health .site-health-details p:first-child {
 313      margin-top: 0;
 314  }
 315  
 316  #dashboard_site_health .site-health-details p:last-child {
 317      margin-bottom: 0;
 318  }
 319  
 320  #dashboard_site_health .health-check-widget {
 321      display: grid;
 322      grid-template-columns: 1fr 2fr;
 323      grid-auto-rows: minmax(64px, auto);
 324      column-gap: 16px;
 325      align-items: center;
 326  }
 327  
 328  #dashboard_site_health .site-health-progress-label {
 329      margin-left: 0;
 330  }
 331  
 332  @media screen and (max-width: 480px) {
 333      #dashboard_site_health .health-check-widget {
 334          grid-template-columns: 100%;
 335      }
 336  }
 337  /* stylelint-enable */
 338  
 339  .health-check-widget-title-section {
 340      margin-bottom: 0;
 341      text-align: center;
 342  }
 343  
 344  @media screen and (max-width: 782px) {
 345      .site-health-issues-wrapper .health-check-accordion-trigger {
 346          flex-direction: column;
 347          align-items: flex-start;
 348      }
 349  
 350      .health-check-accordion-trigger .badge {
 351          margin: 1em 0 0;
 352      }
 353  
 354      .health-check-table {
 355          table-layout: fixed;
 356      }
 357  
 358      .health-check-table th,
 359      .health-check-table td {
 360          box-sizing: border-box;
 361          display: block;
 362          width: 100%;
 363          word-wrap: break-word;
 364      }
 365  
 366      .widefat.health-check-table th,
 367      .health-check-table td:first-child {
 368          width: 100%;
 369          padding-bottom: 0;
 370          font-weight: 600;
 371      }
 372  
 373      .wp-core-ui .site-health-copy-buttons .copy-button {
 374          margin-bottom: 0;
 375      }
 376  }