[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-admin/css/ -> site-health.css (source)

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


Generated : Thu Apr 3 08:20:01 2025 Cross-referenced by PHPXref