Edit - PageSpeed_Widget

Edit: PageSpeed_Widget_View.css

#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;
	}
}

Cancel