Your IP : 216.73.217.143
/* ****************************************************************************
* MODULES: PERFORMANCE
*/
@import "../common/mixins";
@import "../common/variables";
@import "~@wpmudev/shared-ui/scss/colors";
.wpmud .wrap-wphb-performance {
.box-performance-metrics .wphb-performance-metrics {
display: flex;
align-items: center;
margin-bottom: 30px;
@include bp(tablet) { flex-direction: column; }
.wphb-metrics-table {
display: flex;
flex-wrap: wrap;
width: 100%;
& > div {
display: flex;
justify-content: space-between;
flex: 50%;
border: 1px solid #E6E6E6;
padding: 20px 30px;
font-size: 13px;
&:nth-child(even) { border-left-width: 0; }
&:nth-child(n+3) { border-top-width: 0; }
@include bp(desktop-large) { padding: 20px 10px; }
@include bp(desktop) {
flex: 100%;
&:nth-child(even) { border-left-width: 1px; }
&:nth-child(n+2) { border-top-width: 0; }
}
@include bp(tablet) {
flex: 50%;
&:nth-child(even) { border-left-width: 0; }
&:nth-child(2) { border-top-width: 1px; }
}
@include bp(phone-large) {
flex: 100%;
&:nth-child(even) { border-left-width: 1px; }
&:nth-child(2) { border-top-width: 0; }
}
}
.wphb-metric-info {
display: flex;
align-items: center;
a, span.sui-tooltip, span[class^="sui-icon-"] { line-height: 16px; }
strong { margin: 0 10px; }
}
.wphb-metric-value {
font-weight: 500;
letter-spacing: -0.25px;
color: #888888;
}
}
}
.box-performance-metrics .wphb-performance-score {
font-family: $font;
margin-right: 30px;
.wphb-gauge__wrapper {
margin: 0 auto;
width: 290px;
stroke-width: 28px;
stroke-linecap: butt;
.wphb-gauge__percentage {
text-anchor: middle;
dominant-baseline: central;
font-weight: bold;
letter-spacing: -1px;
font-size: 16px;
color: $gray-alt;
}
.metric {
pointer-events: auto;
transition: transform .1s .2s ease-out, opacity .3s ease-out;
&.metric--FCP .speed-metric-gauge { color: $color--performance-fcp; }
&.metric--SI .speed-metric-gauge { color: $color--performance-si; }
&.metric--LCP .speed-metric-gauge { color: $color--performance-lcp; }
&.metric--TTI .speed-metric-gauge { color: $color--performance-tti; }
&.metric--TBT .speed-metric-gauge { color: $color--performance-tbt; }
&.metric--CLS .speed-metric-gauge { color: $color--performance-cls; }
.wphb-gauge {
fill: none;
}
.wphb-gauge--bg { opacity: 0.3; }
.speed-metric-gauge {
stroke-dashoffset: var(--metric-offset);
}
.speed-metric-gauge.wphb-gauge--fill {
stroke-dasharray: var(--metric-array);
}
circle {
stroke: currentcolor;
r: 38px;
}
text {
&.metric__label {
font-size: 7px;
font-weight: bold;
}
&.metric__label,
&.metric__value {
letter-spacing: -0.25px;
}
&.metric__value {
font-size: 6.5px;
font-weight: 500;
fill: #000000;
opacity: 0;
transition: opacity 0.2s;
}
}
}
&.state--highlight {
.wphb-gauge__percentage { opacity: 0; }
.metric { opacity: .3; }
.metric--highlight {
opacity: 1;
stroke-width: 32px;
}
.metric--highlight .metric__value {
opacity: 1;
}
}
}
}
#wphb-error-details {
display: none;
code {
background: #fff;
}
}
/**
* Historic Field Data meta box.
*/
.box-performance-metrics {
.wphb-border-frame .table-header { background-color: #FAFAFA; }
#first_contentful_paint,
#interaction_to_next_paint {
svg g path {
stroke: transparent;
}
svg g rect {
stroke: transparent;
stroke-width: 0;
}
& > div > div {
width: auto !important;
}
}
/**
* Fix for flickering tooltips
* @see https://github.com/google/google-visualization-issues/issues/2162
*/
div.google-visualization-tooltip { pointer-events: none }
.google-visualization-tooltip {
margin-top: -60px;
max-width: 200px;
border: none;
border-radius: 4px;
background-color: #333333;
padding: 8px 12px;
color: #FFFFFF;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.25px;
line-height: 18px;
}
.performance-chart-keys {
display: flex;
justify-content: space-around;
}
.performance-chart-keys span {
color: #333;
font-size: 13px;
font-weight: 500;
text-align: center;
line-height: 25px;
&:before {
content: "";
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 0 auto 5px;
}
&.fast-key:before { background-color: #1ABC9C; }
&.average-key:before { background-color: #FECF2F; }
&.slow-key:before { background-color: #FF6D6D; }
}
}
/**
* Performance audits.
*/
.box-performance-audits {
.wphb-audits-filter p.sui-description {
margin-bottom: 10px;
}
.sui-accordion:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields) {
margin: 0 -30px 60px;
border-top: 0;
border-left: 0;
border-right: 0;
&:last-of-type {
margin-top: -20px;
border-bottom-width: 1px;
}
@include bp(tablet) { margin: 0 -20px 30px; }
.sui-accordion-item:last-child .sui-accordion-item-header,
.sui-accordion:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields) .sui-accordion-item:last-child .sui-accordion-item-body {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.sui-accordion-header > div:nth-child(2) {
flex-basis: 62px;
}
.sui-accordion-header > div:nth-child(2),
.sui-accordion-item-header > div:nth-child(2) {
width: 62px;
flex-grow: 0;
display: flex;
justify-content: flex-start;
}
}
.box-performance-audits {
#server-response-time {
.sui-settings-box {
margin-top: 20px;
margin-bottom: 20px;
.sui-image {
float: left;
margin-bottom: 20px;
}
}
.wphb-ttfb-measurements {
display: flex;
margin-top: 20px;
margin-bottom: 20px;
.sui-form-field { margin-bottom: 0; }
}
.sui-form-control[disabled] {
font-size: 12px;
text-align: center;
color: #333333;
background-color: #FAFAFA;
}
}
}
/**
* Diagnostics.
*/
.box-performance-audits {
#largest-contentful-paint-element,
#layout-shift-elements {
.sui-accordion-item-body .sui-box-body table th:nth-child(2) { width: 200px }
.sui-code-snippet {
tab-size: 0;
}
}
}
.sui-actions-right .sui-tooltip {
margin-right: 10px;
}
.sui-dismissed .sui-circle-score svg circle:last-child {
stroke: #AAAAAA;
}
.wphb-gray-color svg circle:last-child {
stroke: #F2F2F2 !important;
}
// Overwrites on per audit basis.
#dom-size table td {
&:first-of-type { width: 200px; }
&:last-of-type { width: 100px; }
&:nth-of-type(2) {
width: 100%;
text-align: left !important;
}
}
#duplicated-javascript .sui-accordion-item-body .sui-box-body table th:last-of-type { width: 130px; }
.sui-accordion .sui-accordion-item-header .sui-accordion-open-indicator { margin-left: 30px !important; }
}
.wpmud .wrap-wphb-performance.sui-wrap.sui-color-accessible .sui-side-tabs > [data-tabs] > *.active {
color: #FFFFFF !important;
}