WordPress/wp-admin/css/site-health-rtl.css
audrasjb 08d046c717 General: Ensure admin notices are properly displayed on Site Health layout.
This changeset adds some CSS tweaks to ensure admin notices like the "Automated update failed" notice don't break the layout of the Site Health and Privacy Settings screens.

Props johnjamesjacoby, costdev, Clorith, audrasjb, SergeyBiryukov, joedolson.
Fixes #54624.


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


git-svn-id: http://core.svn.wordpress.org/trunk@53779 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-19 21:51:11 +00:00

359 lines
6.1 KiB
CSS

/*! This file is auto-generated */
/* 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;
right: 50%;
top: 50%;
margin-top: -40px;
margin-right: -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-right: 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 {
right: initial;
}
.health-check-offscreen-nav {
display: none;
position: absolute;
padding-top: 10px;
left: 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;
left: 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-right: 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-left: 40px;
padding-right: 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-right: 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-right: 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;
}
}