mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-06 02:41:27 +01:00
e68db2692f
This aligns the spacing within the widget with other core widgets, and removes an unintended margin which was pushing the indicator slightly above the centered position it was intended to have. Props sabernhardt, costdev, mukesh27. Fixes #56369. Built from https://develop.svn.wordpress.org/trunk@54197 git-svn-id: http://core.svn.wordpress.org/trunk@53756 1a063a9b-81f0-0310-95a4-ce76da25c4cd
369 lines
6.3 KiB
CSS
369 lines
6.3 KiB
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;
|
|
}
|
|
|
|
.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: 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;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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 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;
|
|
}
|
|
}
|
|
|