JezK
Edit File: site-health.css
/* Note: Any Site Health selectors that use duplicate styling from the Privacy settings screen are styled in the Privacy section of edit.css */ .health-check-body h2 { line-height: 1.4; } .health-check-body h3 { padding: 0; font-weight: 400; } .site-health-progress-wrapper { margin-bottom: 1rem; } .site-health-progress { display: inline-block; height: 20px; width: 20px; margin: 0; border-radius: 100%; position: relative; font-weight: 600; font-size: 0.4rem; } .site-health-progress-count { position: absolute; display: block; height: 80px; width: 80px; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; border-radius: 100%; line-height: 6.3; font-size: 2em; } .loading .site-health-progress svg #bar { stroke-dashoffset: 0; stroke: #c3c4c7; animation: loadingPulse 3s infinite ease-in-out; } .site-health-progress svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; stroke: #c3c4c7; stroke-width: 2em; } .site-health-progress svg #bar { stroke-dashoffset: 565; stroke: #d63638; } .green .site-health-progress #bar { stroke: #00a32a; } .green .site-health-progress .site-health-progress-label { color: #00a32a; } .orange .site-health-progress #bar { stroke: #dba617; } .orange .site-health-progress .site-health-progress-label { color: #dba617; } .site-health-progress-label { font-weight: 600; line-height: 20px; margin-left: 0.3rem; } @keyframes loadingPulse { 0% { stroke: #c3c4c7; } 50% { stroke: #72aee6; } 100% { stroke: #c3c4c7; } } .health-check-tabs-wrapper { /* IE 11 */ display: -ms-inline-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; vertical-align: top; /* modern browsers */ display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .health-check-tabs-wrapper.tab-count-1 { grid-template-columns: 1fr; } .health-check-tabs-wrapper.tab-count-2 { grid-template-columns: 1fr 1fr; } .health-check-tabs-wrapper.tab-count-3 { grid-template-columns: 1fr 1fr 1fr; } .health-check-tab { display: block; /* IE 11 */ text-decoration: none; color: inherit; padding: 0.5rem 1rem 1rem; margin: 0 1rem; transition: box-shadow 0.5s ease-in-out; } .health-check-offscreen-nav-wrapper { position: relative; background: transparent; border: none; } .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { left: initial; } .health-check-offscreen-nav { display: none; position: absolute; padding-top: 10px; right: 0; top: 100%; width: 13rem; } .health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { display: inline-block; } .health-check-offscreen-nav:before { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 5px; border-color: transparent transparent #ffffff; right: 20px; top: 5px; } .health-check-offscreen-nav .health-check-tab { background: #fff; box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); } .health-check-offscreen-nav .health-check-tab.active { box-shadow: inset 3px 0 #3582c4; font-weight: 600; } .health-check-body { max-width: 800px; margin: 0 auto; } .widefat.health-check-table th { font-size: 13px; } .health-check-table td:first-child { width: 30%; } .health-check-table td { width: 70%; } .health-check-table ul, .health-check-table ol { margin: 0; } .health-check-body li { line-height: 1.5; } .health-check-body .pass::before, .health-check-body .good::before { content: "\f147"; color: #00a32a; } .health-check-body .warning::before { content: "\f460"; color: #dba617; } .health-check-body .info::before { content: "\f348"; color: #72aee6; } .health-check-body .fail::before, .health-check-body .error::before { content: "\f335"; color: #d63638; } .site-health-copy-buttons { margin: 1rem 0; } .site-health-copy-buttons .copy-button-wrapper { display: inline-flex; align-items: center; margin: 0.5rem 0 1rem; } .site-health-copy-buttons .success { color: #007017; margin-left: 0.5rem; } .site-status-has-issues.hide { display: none; } .site-health-view-more { text-align: center; } .site-health-issues-wrapper:first-of-type { margin-top: 3rem; } .site-health-issues-wrapper { margin-bottom: 3rem; margin-top: 2rem; } .site-status-all-clear { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; width: 100%; margin: 0 0 3rem; } @media all and (min-width: 784px) { .site-status-all-clear { margin: 2rem 0 5rem; } } .site-status-all-clear.hide { display: none; } .site-status-all-clear .dashicons { font-size: 150px; height: 150px; margin-bottom: 2rem; width: 150px; } .site-status-all-clear .encouragement { font-size: 1.5rem; font-weight: 600; } .site-status-all-clear p { margin: 0; } .wp-core-ui .button.site-health-view-passed { position: relative; padding-right: 40px; padding-left: 20px; } .health-check-wp-paths-sizes.spinner { visibility: visible; float: none; margin: 0 4px; flex-shrink: 0; } /* Styling unique to the dashboard widget. */ #dashboard_site_health .site-health-details { padding-left: 16px; } #dashboard_site_health .site-health-details p:first-child { margin-top: 0; } #dashboard_site_health .site-health-details p:last-child { margin-bottom: 0; } #dashboard_site_health .health-check-widget { display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows: minmax(64px, auto); column-gap: 16px; align-items: center; } #dashboard_site_health .site-health-progress-label { margin-left: 0; } .health-check-widget-title-section { margin-bottom: 0; text-align: center; } @media screen and (max-width: 480px) { #dashboard_site_health .health-check-widget { grid-template-columns: 100%; } } @media screen and (max-width: 782px) { .site-health-issues-wrapper .health-check-accordion-trigger { flex-direction: column; align-items: flex-start; } .health-check-accordion-trigger .badge { margin: 1em 0 0; } .health-check-table { table-layout: fixed; } .health-check-table th, .health-check-table td { box-sizing: border-box; display: block; width: 100%; word-wrap: break-word; } .widefat.health-check-table th, .health-check-table td:first-child { width: 100%; padding-bottom: 0; font-weight: 600; } .wp-core-ui .site-health-copy-buttons .copy-button { margin-bottom: 0; } }