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