laipower/wp-content/plugins/w3-total-cache/PageSpeed_Widget_View.css

170 lines
2.6 KiB
CSS
Raw Normal View History

#w3tc_pagespeed .inside {
min-height: 30px;
}
.w3tcps_loading .spinner {
margin-top: 5px;
float: unset;
}
.w3tcps_timestamp_container {
text-align: center;
}
.w3tcps_timestamp_label {
margin: 0;
}
.w3tcps_barline {
display: inline-flex;
min-width: 90px;
}
.w3tcps_barline div {
padding-left: 10px;
}
.w3tcps_buttons {
display: flex;
justify-content: center;
}
.w3tcps_buttons .button {
margin: 5px !important;
}
.w3tcps_widget_metrics {
display: flex;
flex-wrap: wrap;
}
.w3tcps_metric {
flex-grow: 1;
width: 33%;
}
.w3tcps_metric_title {
font-size: 14px;
}
.w3tcps_metric_title,
.w3tcps_metric_stats {
padding: 8px 5px;
margin: 0;
text-align: left;
}
.w3tcps_loading {
text-align: center;
}
.w3tcps_content {
padding: 15px;
}
.w3tcps_range {
font-family: unset;
font-size: 14px;
display: inline-flex;
vertical-align: middle;
align-items: center;
font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
}
.w3tcps_range::before {
content: '';
width: 14px;
height: 14px;
display: inline-block;
margin: 0 14px 0 6px;
}
.w3tcps_fail::before {
width: 0px;
margin: -14px 14px 0 6px;
border-left: calc(14px / 2) solid transparent;
border-right: calc(14px / 2) solid transparent;
border-bottom: 14px solid #f33;
}
.w3tcps_average::before {
background: #fa3;
width: calc(14px * 0.88);
height: calc(14px * 0.88);
}
.w3tcps_pass::before {
border-radius: 100%;
background: #0c6;
}
#w3tcps_legend {
text-align: center;
}
.w3tcps_gauge_desktop,
.w3tcps_gauge_mobile {
display: inline-block;
}
.gauge {
position: relative;
border-radius: 50%/100% 100% 0 0;
background-color: var(--color, #a22);
overflow: hidden;
display: inline-flex;
margin: 0 10px;
}
.gauge:before{
content: "";
display: block;
padding-top: 50%;
}
.gauge .mask {
position: absolute;
left: 20%;
right: 20%;
bottom: 0;
top: 40%;
background-color: #ffffff;
border-radius: 50%/100% 100% 0 0;
}
.gauge .percentage {
position: absolute;
top: -1px;
left: -1px;
bottom: 0;
right: -1px;
background-color: var(--background, #aaa);
transform:rotate(var(--rotation));
transform-origin: bottom center;
transition-duration: 600;
}
.gauge .value {
position:absolute;
bottom:0%;
left:0;
width:100%;
text-align: center;
}
@media only screen and (max-width: 1200px) {
.w3tcps_metric {
width: 50%;
}
}
@media only screen and (max-width: 782px) {
.w3tcps_metric {
width: 50%;
}
.w3tcps_metric > * {
text-align: center;
}
}