.site-health #wpcontent, .site-health.auto-fold #wpcontent { padding-left: 0; } /* Emulates .wrap h1 styling */ .health-check-header h1 { display: inline-block; font-weight: 600; margin: 0 0.8rem 1rem; font-size: 23px; padding: 9px 0 4px 0; line-height: 1.3; } .health-check-body h2 { line-height: 1.4; } .health-check-body h3 { padding: 0; font-weight: 400; } .health-check-header { text-align: center; margin: 0 0 1rem; background: #fff; border-bottom: 1px solid #dcdcde; } .health-check-title-section { display: flex; align-items: center; justify-content: center; clear: both; } .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; vertical-align: top; /* modern browsers */ display: inline-grid; grid-template-columns: 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-tab:nth-child(1) { -ms-grid-column: 1; /* IE 11 */ } .health-check-tab:nth-child(2) { -ms-grid-column: 2; /* IE 11 */ } .health-check-tab:focus { color: #1d2327; outline: 1px solid #787c82; box-shadow: none; } .health-check-tab.active { box-shadow: inset 0 -3px #3582c4; font-weight: 600; } .health-check-body { max-width: 800px; margin: 0 auto; } .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: #008a20; 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-top: 0; } @media all and (min-width: 784px) { .site-status-all-clear { margin: 5rem 0; } } .site-status-all-clear.hide { display: none; } .site-status-all-clear .dashicons { font-size: 150px; height: 130px; width: 150px; } .site-status-all-clear .encouragement { font-size: 1.5rem; font-weight: 600; } .site-status-all-clear p { margin: 0; } .health-check-accordion { border: 1px solid #c3c4c7; } .health-check-accordion-heading { margin: 0; border-top: 1px solid #c3c4c7; font-size: inherit; line-height: inherit; font-weight: 600; color: inherit; } .health-check-accordion-heading:first-child { border-top: none; } .health-check-accordion-trigger { background: #fff; border: 0; color: #2c3338; cursor: pointer; display: flex; font-weight: 400; margin: 0; padding: 1em 3.5em 1em 1.5em; min-height: 46px; position: relative; text-align: left; width: 100%; align-items: center; justify-content: space-between; -webkit-user-select: auto; -ms-user-select: auto; user-select: auto; } .wp-core-ui .button.site-health-view-passed { position: relative; padding-right: 40px; padding-left: 20px; } .health-check-accordion-trigger:hover, .health-check-accordion-trigger:active { background: #f6f7f7; } .health-check-accordion-trigger:focus { color: #1d2327; border: none; box-shadow: none; outline-offset: -1px; outline: 2px solid #2271b1; background-color: #f6f7f7; } .health-check-accordion-trigger .title { pointer-events: none; font-weight: 600; flex-grow: 1; } .health-check-accordion-trigger .icon, .site-health-view-passed .icon { border: solid #50575e; border-width: 0 2px 2px 0; height: 0.5rem; pointer-events: none; position: absolute; right: 1.5em; top: 50%; transform: translateY(-70%) rotate(45deg); width: 0.5rem; } .health-check-accordion-trigger .badge { padding: 0.1rem 0.5rem 0.15rem; color: #2c3338; font-weight: 600; margin-left: 0.5rem; } .health-check-accordion-trigger .badge.blue { border: 1px solid #72aee6; } .health-check-accordion-trigger .badge.orange { border: 1px solid #dba617; } .health-check-accordion-trigger .badge.red { border: 1px solid #e65054; } .health-check-accordion-trigger .badge.green { border: 1px solid #00ba37; } .health-check-accordion-trigger .badge.purple { border: 1px solid #2271b1; } .health-check-accordion-trigger .badge.gray { border: 1px solid #c3c4c7; } .health-check-accordion-trigger[aria-expanded="true"] .icon, .site-health-view-passed[aria-expanded="true"] .icon { transform: translateY(-30%) rotate(-135deg) } .health-check-accordion-panel { margin: 0; padding: 1em 1.5em; background: #fff; } .health-check-accordion-panel[hidden] { display: none; } .health-check-accordion-panel a .dashicons { text-decoration: none; } /* Better position for the WordPress admin notices and update nag. */ .site-health .notice { margin: 5px 20px 15px 22px; } .site-health .update-nag { margin-bottom: 20px; margin-left: 22px; } .health-check-wp-paths-sizes.spinner { visibility: visible; float: none; margin: 0 4px; flex-shrink: 0; } @media screen and (max-width: 782px) { .health-check-body { margin: 0 12px; width: auto; } .site-health .notice { margin: 5px 10px 15px; } .site-health .update-nag { margin-right: 10px; margin-left: 10px; } .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 td { box-sizing: border-box; display: block; width: 100%; word-wrap: break-word; } .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; } } /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */ @media only screen and (max-width: 1004px) { .health-check-body { margin: 0 22px; width: auto; } }