Site Health, Privacy: Combine shared CSS for Site Health & Privacy Settings

The styles for the Privacy settings page were based on the Site Health section. These were duplicated into `edit.css` in #49264. This change merges the selectors from Site Health into the Privacy section, to reduce that duplicate code.

Props xkon, notlaura, clorith.
See #52429.


Built from https://develop.svn.wordpress.org/trunk@51025


git-svn-id: http://core.svn.wordpress.org/trunk@50634 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2021-05-26 01:53:57 +00:00
parent 59b2dbb855
commit 6e4b41c848
10 changed files with 170 additions and 442 deletions

View File

@ -702,15 +702,22 @@ form#tags-filter {
/** /**
* Privacy Settings section * Privacy Settings section
*
* Note: This section includes selectors from
* Site Health where duplicate styling is used.
*/ */
/* General */ /* General */
.privacy-settings #wpcontent, .privacy-settings #wpcontent,
.privacy-settings.auto-fold #wpcontent { .privacy-settings.auto-fold #wpcontent,
.site-health #wpcontent,
.site-health.auto-fold #wpcontent {
padding-right: 0; padding-right: 0;
} }
.privacy-settings-header h1 { /* Emulates .wrap h1 styling */
.privacy-settings-header h1,
.health-check-header h1 {
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
margin: 0 0.8rem 1rem; margin: 0 0.8rem 1rem;
@ -720,18 +727,21 @@ form#tags-filter {
} }
/* Header */ /* Header */
.privacy-settings-header { .privacy-settings-header,
.health-check-header {
text-align: center; text-align: center;
margin: 0 0 1rem; margin: 0 0 1rem;
background: #fff; background: #fff;
border-bottom: 1px solid #dcdcde; border-bottom: 1px solid #dcdcde;
} }
.privacy-settings-title-section { .privacy-settings-title-section,
.health-check-title-section {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
clear: both; clear: both;
padding-top: 8px;
} }
.privacy-settings-tabs-wrapper { .privacy-settings-tabs-wrapper {
@ -753,27 +763,32 @@ form#tags-filter {
transition: box-shadow 0.5s ease-in-out; transition: box-shadow 0.5s ease-in-out;
} }
.privacy-settings-tab:nth-child(1) { .privacy-settings-tab:nth-child(1),
.health-check-tab:nth-child(1) {
-ms-grid-column: 1; /* IE 11 */ -ms-grid-column: 1; /* IE 11 */
} }
.privacy-settings-tab:nth-child(2) { .privacy-settings-tab:nth-child(2),
.health-check-tab:nth-child(2) {
-ms-grid-column: 2; /* IE 11 */ -ms-grid-column: 2; /* IE 11 */
} }
.privacy-settings-tab:focus { .privacy-settings-tab:focus,
.health-check-tab:focus {
color: #1d2327; color: #1d2327;
outline: 1px solid #787c82; outline: 1px solid #787c82;
box-shadow: none; box-shadow: none;
} }
.privacy-settings-tab.active { .privacy-settings-tab.active,
.health-check-tab.active {
box-shadow: inset 0 -3px #3582c4; box-shadow: inset 0 -3px #3582c4;
font-weight: 600; font-weight: 600;
} }
/* Body */ /* Body */
.privacy-settings-body { .privacy-settings-body,
.health-check-body {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
} }
@ -788,11 +803,13 @@ form#tags-filter {
} }
/* Accordions */ /* Accordions */
.privacy-settings-accordion { .privacy-settings-accordion,
.health-check-accordion {
border: 1px solid #c3c4c7; border: 1px solid #c3c4c7;
} }
.privacy-settings-accordion-heading { .privacy-settings-accordion-heading,
.health-check-accordion-heading {
margin: 0; margin: 0;
border-top: 1px solid #c3c4c7; border-top: 1px solid #c3c4c7;
font-size: inherit; font-size: inherit;
@ -801,11 +818,13 @@ form#tags-filter {
color: inherit; color: inherit;
} }
.privacy-settings-accordion-heading:first-child { .privacy-settings-accordion-heading:first-child,
.health-check-accordion-heading:first-child {
border-top: none; border-top: none;
} }
.privacy-settings-accordion-trigger { .privacy-settings-accordion-trigger,
.health-check-accordion-trigger {
background: #fff; background: #fff;
border: 0; border: 0;
color: #2c3338; color: #2c3338;
@ -820,14 +839,19 @@ form#tags-filter {
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
-webkit-user-select: auto;
user-select: auto;
} }
.privacy-settings-accordion-trigger:hover, .privacy-settings-accordion-trigger:hover,
.privacy-settings-accordion-trigger:active { .privacy-settings-accordion-trigger:active,
.health-check-accordion-trigger:hover,
.health-check-accordion-trigger:active {
background: #f6f7f7; background: #f6f7f7;
} }
.privacy-settings-accordion-trigger:focus { .privacy-settings-accordion-trigger:focus,
.health-check-accordion-trigger:focus {
color: #1d2327; color: #1d2327;
border: none; border: none;
box-shadow: none; box-shadow: none;
@ -836,14 +860,17 @@ form#tags-filter {
background-color: #f6f7f7; background-color: #f6f7f7;
} }
.privacy-settings-accordion-trigger .title { .privacy-settings-accordion-trigger .title,
.health-check-accordion-trigger .title {
pointer-events: none; pointer-events: none;
font-weight: 600; font-weight: 600;
flex-grow: 1; flex-grow: 1;
} }
.privacy-settings-accordion-trigger .icon, .privacy-settings-accordion-trigger .icon,
.privacy-settings-view-read .icon { .privacy-settings-view-read .icon,
.health-check-accordion-trigger .icon,
.site-health-view-passed .icon {
border: solid #50575e; border: solid #50575e;
border-width: 0 0 2px 2px; border-width: 0 0 2px 2px;
height: 0.5rem; height: 0.5rem;
@ -855,53 +882,68 @@ form#tags-filter {
width: 0.5rem; width: 0.5rem;
} }
.privacy-settings-accordion-trigger .badge { .privacy-settings-accordion-trigger .badge,
.health-check-accordion-trigger .badge {
padding: 0.1rem 0.5rem 0.15rem; padding: 0.1rem 0.5rem 0.15rem;
color: #2c3338; color: #2c3338;
font-weight: 600; font-weight: 600;
}
.privacy-settings-accordion-trigger .badge {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.privacy-settings-accordion-trigger .badge.blue { .privacy-settings-accordion-trigger .badge.blue,
.health-check-accordion-trigger .badge.blue {
border: 1px solid #72aee6; border: 1px solid #72aee6;
} }
.privacy-settings-accordion-trigger .badge.orange { .privacy-settings-accordion-trigger .badge.orange,
.health-check-accordion-trigger .badge.orange {
border: 1px solid #dba617; border: 1px solid #dba617;
} }
.privacy-settings-accordion-trigger .badge.red { .privacy-settings-accordion-trigger .badge.red,
.health-check-accordion-trigger .badge.red {
border: 1px solid #e65054; border: 1px solid #e65054;
} }
.privacy-settings-accordion-trigger .badge.green { .privacy-settings-accordion-trigger .badge.green,
.health-check-accordion-trigger .badge.green {
border: 1px solid #00ba37; border: 1px solid #00ba37;
} }
.privacy-settings-accordion-trigger .badge.purple { .privacy-settings-accordion-trigger .badge.purple,
.health-check-accordion-trigger .badge.purple {
border: 1px solid #2271b1; border: 1px solid #2271b1;
} }
.privacy-settings-accordion-trigger .badge.gray { .privacy-settings-accordion-trigger .badge.gray,
.health-check-accordion-trigger .badge.gray {
border: 1px solid #c3c4c7; border: 1px solid #c3c4c7;
} }
.privacy-settings-accordion-trigger[aria-expanded="true"] .icon, .privacy-settings-accordion-trigger[aria-expanded="true"] .icon,
.privacy-settings-view-passed[aria-expanded="true"] .icon { .privacy-settings-view-passed[aria-expanded="true"] .icon,
.health-check-accordion-trigger[aria-expanded="true"] .icon,
.site-health-view-passed[aria-expanded="true"] .icon {
transform: translateY(-30%) rotate(135deg) transform: translateY(-30%) rotate(135deg)
} }
.privacy-settings-accordion-panel { .privacy-settings-accordion-panel,
.health-check-accordion-panel {
margin: 0; margin: 0;
padding: 1em 1.5em; padding: 1em 1.5em;
background: #fff; background: #fff;
} }
.privacy-settings-accordion-panel[hidden] { .privacy-settings-accordion-panel[hidden],
.health-check-accordion-panel[hidden] {
display: none; display: none;
} }
.privacy-settings-accordion-panel a .dashicons { .privacy-settings-accordion-panel a .dashicons,
.health-check-accordion-panel a .dashicons {
text-decoration: none; text-decoration: none;
} }
@ -946,16 +988,19 @@ form#tags-filter {
/* Media queries */ /* Media queries */
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
.privacy-settings-body { .privacy-settings-body,
.health-check-body {
margin: 0 12px; margin: 0 12px;
width: auto; width: auto;
} }
.privacy-settings .notice { .privacy-settings .notice,
.site-health .notice {
margin: 5px 10px 15px; margin: 5px 10px 15px;
} }
.privacy-settings .update-nag { .privacy-settings .update-nag,
.site-health .update-nag {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
@ -972,7 +1017,8 @@ form#tags-filter {
@media only screen and (max-width: 1004px) { @media only screen and (max-width: 1004px) {
.privacy-settings-body { .privacy-settings-body,
.health-check-body {
margin: 0 22px; margin: 0 22px;
width: auto; width: auto;
} }

File diff suppressed because one or more lines are too long

View File

@ -701,15 +701,22 @@ form#tags-filter {
/** /**
* Privacy Settings section * Privacy Settings section
*
* Note: This section includes selectors from
* Site Health where duplicate styling is used.
*/ */
/* General */ /* General */
.privacy-settings #wpcontent, .privacy-settings #wpcontent,
.privacy-settings.auto-fold #wpcontent { .privacy-settings.auto-fold #wpcontent,
.site-health #wpcontent,
.site-health.auto-fold #wpcontent {
padding-left: 0; padding-left: 0;
} }
.privacy-settings-header h1 { /* Emulates .wrap h1 styling */
.privacy-settings-header h1,
.health-check-header h1 {
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
margin: 0 0.8rem 1rem; margin: 0 0.8rem 1rem;
@ -719,18 +726,21 @@ form#tags-filter {
} }
/* Header */ /* Header */
.privacy-settings-header { .privacy-settings-header,
.health-check-header {
text-align: center; text-align: center;
margin: 0 0 1rem; margin: 0 0 1rem;
background: #fff; background: #fff;
border-bottom: 1px solid #dcdcde; border-bottom: 1px solid #dcdcde;
} }
.privacy-settings-title-section { .privacy-settings-title-section,
.health-check-title-section {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
clear: both; clear: both;
padding-top: 8px;
} }
.privacy-settings-tabs-wrapper { .privacy-settings-tabs-wrapper {
@ -752,27 +762,32 @@ form#tags-filter {
transition: box-shadow 0.5s ease-in-out; transition: box-shadow 0.5s ease-in-out;
} }
.privacy-settings-tab:nth-child(1) { .privacy-settings-tab:nth-child(1),
.health-check-tab:nth-child(1) {
-ms-grid-column: 1; /* IE 11 */ -ms-grid-column: 1; /* IE 11 */
} }
.privacy-settings-tab:nth-child(2) { .privacy-settings-tab:nth-child(2),
.health-check-tab:nth-child(2) {
-ms-grid-column: 2; /* IE 11 */ -ms-grid-column: 2; /* IE 11 */
} }
.privacy-settings-tab:focus { .privacy-settings-tab:focus,
.health-check-tab:focus {
color: #1d2327; color: #1d2327;
outline: 1px solid #787c82; outline: 1px solid #787c82;
box-shadow: none; box-shadow: none;
} }
.privacy-settings-tab.active { .privacy-settings-tab.active,
.health-check-tab.active {
box-shadow: inset 0 -3px #3582c4; box-shadow: inset 0 -3px #3582c4;
font-weight: 600; font-weight: 600;
} }
/* Body */ /* Body */
.privacy-settings-body { .privacy-settings-body,
.health-check-body {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
} }
@ -787,11 +802,13 @@ form#tags-filter {
} }
/* Accordions */ /* Accordions */
.privacy-settings-accordion { .privacy-settings-accordion,
.health-check-accordion {
border: 1px solid #c3c4c7; border: 1px solid #c3c4c7;
} }
.privacy-settings-accordion-heading { .privacy-settings-accordion-heading,
.health-check-accordion-heading {
margin: 0; margin: 0;
border-top: 1px solid #c3c4c7; border-top: 1px solid #c3c4c7;
font-size: inherit; font-size: inherit;
@ -800,11 +817,13 @@ form#tags-filter {
color: inherit; color: inherit;
} }
.privacy-settings-accordion-heading:first-child { .privacy-settings-accordion-heading:first-child,
.health-check-accordion-heading:first-child {
border-top: none; border-top: none;
} }
.privacy-settings-accordion-trigger { .privacy-settings-accordion-trigger,
.health-check-accordion-trigger {
background: #fff; background: #fff;
border: 0; border: 0;
color: #2c3338; color: #2c3338;
@ -819,14 +838,19 @@ form#tags-filter {
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
-webkit-user-select: auto;
user-select: auto;
} }
.privacy-settings-accordion-trigger:hover, .privacy-settings-accordion-trigger:hover,
.privacy-settings-accordion-trigger:active { .privacy-settings-accordion-trigger:active,
.health-check-accordion-trigger:hover,
.health-check-accordion-trigger:active {
background: #f6f7f7; background: #f6f7f7;
} }
.privacy-settings-accordion-trigger:focus { .privacy-settings-accordion-trigger:focus,
.health-check-accordion-trigger:focus {
color: #1d2327; color: #1d2327;
border: none; border: none;
box-shadow: none; box-shadow: none;
@ -835,14 +859,17 @@ form#tags-filter {
background-color: #f6f7f7; background-color: #f6f7f7;
} }
.privacy-settings-accordion-trigger .title { .privacy-settings-accordion-trigger .title,
.health-check-accordion-trigger .title {
pointer-events: none; pointer-events: none;
font-weight: 600; font-weight: 600;
flex-grow: 1; flex-grow: 1;
} }
.privacy-settings-accordion-trigger .icon, .privacy-settings-accordion-trigger .icon,
.privacy-settings-view-read .icon { .privacy-settings-view-read .icon,
.health-check-accordion-trigger .icon,
.site-health-view-passed .icon {
border: solid #50575e; border: solid #50575e;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
height: 0.5rem; height: 0.5rem;
@ -854,53 +881,68 @@ form#tags-filter {
width: 0.5rem; width: 0.5rem;
} }
.privacy-settings-accordion-trigger .badge { .privacy-settings-accordion-trigger .badge,
.health-check-accordion-trigger .badge {
padding: 0.1rem 0.5rem 0.15rem; padding: 0.1rem 0.5rem 0.15rem;
color: #2c3338; color: #2c3338;
font-weight: 600; font-weight: 600;
}
.privacy-settings-accordion-trigger .badge {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.privacy-settings-accordion-trigger .badge.blue { .privacy-settings-accordion-trigger .badge.blue,
.health-check-accordion-trigger .badge.blue {
border: 1px solid #72aee6; border: 1px solid #72aee6;
} }
.privacy-settings-accordion-trigger .badge.orange { .privacy-settings-accordion-trigger .badge.orange,
.health-check-accordion-trigger .badge.orange {
border: 1px solid #dba617; border: 1px solid #dba617;
} }
.privacy-settings-accordion-trigger .badge.red { .privacy-settings-accordion-trigger .badge.red,
.health-check-accordion-trigger .badge.red {
border: 1px solid #e65054; border: 1px solid #e65054;
} }
.privacy-settings-accordion-trigger .badge.green { .privacy-settings-accordion-trigger .badge.green,
.health-check-accordion-trigger .badge.green {
border: 1px solid #00ba37; border: 1px solid #00ba37;
} }
.privacy-settings-accordion-trigger .badge.purple { .privacy-settings-accordion-trigger .badge.purple,
.health-check-accordion-trigger .badge.purple {
border: 1px solid #2271b1; border: 1px solid #2271b1;
} }
.privacy-settings-accordion-trigger .badge.gray { .privacy-settings-accordion-trigger .badge.gray,
.health-check-accordion-trigger .badge.gray {
border: 1px solid #c3c4c7; border: 1px solid #c3c4c7;
} }
.privacy-settings-accordion-trigger[aria-expanded="true"] .icon, .privacy-settings-accordion-trigger[aria-expanded="true"] .icon,
.privacy-settings-view-passed[aria-expanded="true"] .icon { .privacy-settings-view-passed[aria-expanded="true"] .icon,
.health-check-accordion-trigger[aria-expanded="true"] .icon,
.site-health-view-passed[aria-expanded="true"] .icon {
transform: translateY(-30%) rotate(-135deg) transform: translateY(-30%) rotate(-135deg)
} }
.privacy-settings-accordion-panel { .privacy-settings-accordion-panel,
.health-check-accordion-panel {
margin: 0; margin: 0;
padding: 1em 1.5em; padding: 1em 1.5em;
background: #fff; background: #fff;
} }
.privacy-settings-accordion-panel[hidden] { .privacy-settings-accordion-panel[hidden],
.health-check-accordion-panel[hidden] {
display: none; display: none;
} }
.privacy-settings-accordion-panel a .dashicons { .privacy-settings-accordion-panel a .dashicons,
.health-check-accordion-panel a .dashicons {
text-decoration: none; text-decoration: none;
} }
@ -945,16 +987,19 @@ form#tags-filter {
/* Media queries */ /* Media queries */
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
.privacy-settings-body { .privacy-settings-body,
.health-check-body {
margin: 0 12px; margin: 0 12px;
width: auto; width: auto;
} }
.privacy-settings .notice { .privacy-settings .notice,
.site-health .notice {
margin: 5px 10px 15px; margin: 5px 10px 15px;
} }
.privacy-settings .update-nag { .privacy-settings .update-nag,
.site-health .update-nag {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
@ -971,7 +1016,8 @@ form#tags-filter {
@media only screen and (max-width: 1004px) { @media only screen and (max-width: 1004px) {
.privacy-settings-body { .privacy-settings-body,
.health-check-body {
margin: 0 22px; margin: 0 22px;
width: auto; width: auto;
} }

File diff suppressed because one or more lines are too long

View File

@ -1,18 +1,7 @@
/*! This file is auto-generated */ /*! This file is auto-generated */
.site-health #wpcontent, /* Note: Any Site Health selectors that use
.site-health.auto-fold #wpcontent { duplicate styling from the Privacy settings screen
padding-right: 0; are styled in the Privacy section of edit.css */
}
/* 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 { .health-check-body h2 {
line-height: 1.4; line-height: 1.4;
@ -23,23 +12,8 @@
font-weight: 400; font-weight: 400;
} }
.health-check-header { .health-check-widget-title-section {
text-align: center; text-align: center;
margin: 0 0 1rem;
background: #fff;
border-bottom: 1px solid #dcdcde;
}
.health-check-title-section {
clear: both;
text-align: center;
padding-top: 8px;
}
.site-health .health-check-title-section {
display: flex;
align-items: center;
justify-content: center;
} }
.site-health-progress-wrapper { .site-health-progress-wrapper {
@ -187,24 +161,6 @@
box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
} }
.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-offscreen-nav .health-check-tab.active { .health-check-offscreen-nav .health-check-tab.active {
box-shadow: inset -3px 0 #3582c4; box-shadow: inset -3px 0 #3582c4;
font-weight: 600; font-weight: 600;
@ -322,130 +278,12 @@
margin: 0; 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 1.5em 1em 3.5em;
min-height: 46px;
position: relative;
text-align: right;
width: 100%;
align-items: center;
justify-content: space-between;
-webkit-user-select: auto;
user-select: auto;
}
.wp-core-ui .button.site-health-view-passed { .wp-core-ui .button.site-health-view-passed {
position: relative; position: relative;
padding-left: 40px; padding-left: 40px;
padding-right: 20px; padding-right: 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 0 2px 2px;
height: 0.5rem;
pointer-events: none;
position: absolute;
left: 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-right: 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. */ /* Better position for the WordPress admin notices and update nag. */
.site-health .notice { .site-health .notice {
@ -487,19 +325,6 @@
} }
@media screen and (max-width: 782px) { @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-left: 10px;
margin-right: 10px;
}
.site-health-issues-wrapper .health-check-accordion-trigger { .site-health-issues-wrapper .health-check-accordion-trigger {
flex-direction: column; flex-direction: column;
@ -532,10 +357,3 @@
} }
} }
/* 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;
}
}

File diff suppressed because one or more lines are too long

View File

@ -1,17 +1,6 @@
.site-health #wpcontent, /* Note: Any Site Health selectors that use
.site-health.auto-fold #wpcontent { duplicate styling from the Privacy settings screen
padding-left: 0; are styled in the Privacy section of edit.css */
}
/* 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 { .health-check-body h2 {
line-height: 1.4; line-height: 1.4;
@ -22,23 +11,8 @@
font-weight: 400; font-weight: 400;
} }
.health-check-header { .health-check-widget-title-section {
text-align: center; text-align: center;
margin: 0 0 1rem;
background: #fff;
border-bottom: 1px solid #dcdcde;
}
.health-check-title-section {
clear: both;
text-align: center;
padding-top: 8px;
}
.site-health .health-check-title-section {
display: flex;
align-items: center;
justify-content: center;
} }
.site-health-progress-wrapper { .site-health-progress-wrapper {
@ -186,24 +160,6 @@
box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
} }
.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-offscreen-nav .health-check-tab.active { .health-check-offscreen-nav .health-check-tab.active {
box-shadow: inset 3px 0 #3582c4; box-shadow: inset 3px 0 #3582c4;
font-weight: 600; font-weight: 600;
@ -321,130 +277,12 @@
margin: 0; 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;
user-select: auto;
}
.wp-core-ui .button.site-health-view-passed { .wp-core-ui .button.site-health-view-passed {
position: relative; position: relative;
padding-right: 40px; padding-right: 40px;
padding-left: 20px; 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. */ /* Better position for the WordPress admin notices and update nag. */
.site-health .notice { .site-health .notice {
@ -486,19 +324,6 @@
} }
@media screen and (max-width: 782px) { @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 { .site-health-issues-wrapper .health-check-accordion-trigger {
flex-direction: column; flex-direction: column;
@ -531,10 +356,3 @@
} }
} }
/* 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;
}
}

File diff suppressed because one or more lines are too long

View File

@ -1891,7 +1891,7 @@ function wp_dashboard_site_health() {
$issues_total = $issue_counts['recommended'] + $issue_counts['critical']; $issues_total = $issue_counts['recommended'] + $issue_counts['critical'];
?> ?>
<div class="health-check-title-section site-health-progress-wrapper loading hide-if-no-js"> <div class="health-check-widget-title-section site-health-progress-wrapper loading hide-if-no-js">
<div class="site-health-progress"> <div class="site-health-progress">
<svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.8-alpha-51024'; $wp_version = '5.8-alpha-51025';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.