PageSpeed_Page_View.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. #w3tcps_container {
  2. max-width: 1234px;
  3. }
  4. .w3tcps_loading .spinner {
  5. margin-top: 0;
  6. float: left;
  7. }
  8. .w3tcps_content .postbox {
  9. border: unset;
  10. box-shadow: unset;
  11. background: unset;
  12. }
  13. .w3tcps_content .postbox-title {
  14. border: unset !important;
  15. }
  16. .w3tcps_content .postbox .hndle {
  17. border-bottom: unset !important;
  18. }
  19. .w3tcps_timestamp {
  20. margin-right: 5px;
  21. }
  22. #w3tcps-core-metrics .inside {
  23. display: flex;
  24. flex-wrap: wrap;
  25. gap: 5px;
  26. }
  27. .w3tcps_metric {
  28. min-width: 255px;
  29. flex: 1 1 33%;
  30. box-sizing: border-box;
  31. border: 1px solid #c3c4c7;
  32. background: #fff;
  33. }
  34. .w3tcps_metric_title {
  35. font-size: 14px;
  36. border-bottom: 1px solid #ccd0d4;
  37. }
  38. .w3tcps_metric_title,
  39. .w3tcps_metric_stats {
  40. padding: 8px 12px;
  41. margin: 0;
  42. }
  43. .w3tcps_item_desciption {
  44. background-color: hsla(210, 17%, 77%, 0.1);
  45. padding: 15px !important;
  46. margin: 0 !important;
  47. }
  48. .w3tcps_breakdown_items_container {
  49. display: flex;
  50. flex-direction: row;
  51. flex-wrap: wrap;
  52. grid-row-gap: .75em;
  53. grid-column-gap: .75em;
  54. padding: .75em;
  55. }
  56. .w3tcps_breakdown_items_container .w3tcps_breakdown_items_table,
  57. .w3tcps_breakdown_items_container .w3tcps_instruction {
  58. flex: 49%;
  59. flex-grow: 1;
  60. align-self: flex-start;
  61. border: 1px solid #ccd0d4;
  62. border-collapse: collapse;
  63. }
  64. .w3tcps_breakdown_items_table {
  65. width: 100%;
  66. }
  67. .w3tcps_breakdown_items_table th,
  68. .w3tcps_breakdown_items_table td {
  69. text-align: left;
  70. padding: 8px 10px;
  71. }
  72. .w3tcps_breakdown_items_table .copyurl {
  73. cursor: pointer;
  74. }
  75. .w3tcps_breakdown_items_table tr:nth-child(even) {
  76. background-color: hsla(210, 17%, 77%, 0.1);
  77. }
  78. .w3tcps_instruction {
  79. padding: 0;
  80. }
  81. .w3tc_instruction_copy {
  82. padding: 10px;
  83. }
  84. #w3tcps_desktop {
  85. display: none;
  86. }
  87. .w3tcps_breakdown_items_toggle {
  88. cursor: pointer;
  89. }
  90. .w3tcps_breakdown_items_toggle .dashicons {
  91. position: absolute;
  92. right: 35px;
  93. }
  94. .w3tcps_range {
  95. font-family: unset;
  96. font-size: 14px;
  97. display: inline-flex;
  98. vertical-align: middle;
  99. align-items: center;
  100. }
  101. .w3tcps_breakdown_items {
  102. margin: 0;
  103. padding: 0;
  104. display: none;
  105. background: #ffffff;
  106. }
  107. #w3tcps-screenshots .inside {
  108. display: flex;
  109. flex-direction: row;
  110. flex-wrap: wrap;
  111. gap: 5px;
  112. }
  113. #w3tcps-screenshots .inside .w3tcps_screenshots_final_mobile,
  114. #w3tcps-screenshots .inside .w3tcps_screenshots_final_desktop {
  115. flex: 1 1 24%;
  116. }
  117. .w3tcps_screenshots_final_mobile img,
  118. .w3tcps_screenshots_final_desktop img {
  119. max-width: 100%;
  120. border: 1px solid #ddd;
  121. }
  122. #w3tcps-screenshots .inside .w3tcps_screenshots_other_mobile,
  123. #w3tcps-screenshots .inside .w3tcps_screenshots_other_desktop {
  124. flex: 1 1 74%;
  125. }
  126. .w3tcps_audit_results {
  127. border: 1px solid #c3c4c7;
  128. border-top: 0;
  129. border-bottom: 0;
  130. background: #fff;
  131. min-width: 320px;
  132. }
  133. .w3tcps_screenshots_other_mobile,
  134. .w3tcps_screenshots_final_mobile,
  135. .w3tcps_screenshots_other_desktop,
  136. .w3tcps_screenshots_final_desktop {
  137. border: 1px solid #c3c4c7;
  138. background: #fff;
  139. min-width: 250px
  140. }
  141. .w3tcps_final_screenshot_container {
  142. padding: 15px;
  143. }
  144. .opportunities .audits,
  145. .diagnostics .audits,
  146. .passed_audits .audits {
  147. padding: 0 !important;
  148. margin: 0 !important;
  149. border-left: 2px solid #72aee6;
  150. border-right: 0;
  151. border-top: 0;
  152. border-bottom: 1px solid #ccd0d4;
  153. }
  154. .opportunities .w3tcps_range,
  155. .diagnostics .w3tcps_range,
  156. .passed_audits .w3tcps_range {
  157. padding: 15px 45px 15px 15px;
  158. width: 100%;
  159. box-sizing: border-box;
  160. }
  161. .opportunities .w3tcps_range:hover,
  162. .diagnostics .w3tcps_range:hover,
  163. .passed_audits .w3tcps_range:hover {
  164. background-color: #FAFAFA;
  165. }
  166. .w3tcps_other_screenshot_container,
  167. .w3tcps_final_screenshot_container {
  168. text-align: center;
  169. }
  170. .w3tcps_screenshots_other_mobile img,
  171. .w3tcps_screenshots_other_desktop img {
  172. margin: 15px;
  173. border: 1px solid #ddd;
  174. }
  175. .w3tcps_range::before {
  176. content: '';
  177. width: 14px;
  178. height: 14px;
  179. display: inline-block;
  180. margin: 0 14px 0 6px;
  181. }
  182. .w3tcps_blank::before {
  183. border: calc(0.2 * 14px) solid #bdbdbd;
  184. border-radius: 100%;
  185. width: 12px;
  186. height: 12px;
  187. min-width: 12px;
  188. }
  189. .w3tcps_fail::before {
  190. width: 0px;
  191. margin: -14px 14px 0 6px;
  192. border-left: calc(14px / 2) solid transparent;
  193. border-right: calc(14px / 2) solid transparent;
  194. border-bottom: 14px solid #f33;
  195. }
  196. .w3tcps_average::before {
  197. background: #fa3;
  198. width: calc(14px * 0.88);
  199. height: calc(14px * 0.88);
  200. min-width: 12px;
  201. }
  202. .w3tcps_pass::before {
  203. border-radius: 100%;
  204. background: #0c6;
  205. min-width: 14px;
  206. }
  207. .gauge {
  208. position: relative;
  209. border-radius: 50%/100% 100% 0 0;
  210. background-color: var(--color, #fff);
  211. overflow: hidden;
  212. display: inline-flex;
  213. margin: 0 10px;
  214. }
  215. .gauge:before {
  216. content: "";
  217. display: block;
  218. padding-top: 50%;
  219. }
  220. .gauge .mask {
  221. position: absolute;
  222. left: 20%;
  223. right: 20%;
  224. bottom: 0;
  225. top: 40%;
  226. background-color: #f0f0f1;
  227. border-radius: 50%/100% 100% 0 0;
  228. }
  229. .gauge .percentage {
  230. position: absolute;
  231. top: -1px;
  232. left: -1px;
  233. bottom: 0;
  234. right: -1px;
  235. background-color: var(--background, #fff);
  236. transform: rotate(var(--rotation));
  237. transform-origin: bottom center;
  238. transition-duration: 600;
  239. }
  240. .gauge .value {
  241. position: absolute;
  242. bottom: 0%;
  243. left: 0;
  244. width: 100%;
  245. text-align: center;
  246. }
  247. .w3tc_fancy_header {
  248. background: #0e1920;
  249. border-bottom: 6px solid #cdeae7;
  250. height: 2.75em;
  251. position: relative;
  252. }
  253. .w3tc_fancy_title {
  254. color: #fff;
  255. position: absolute;
  256. bottom: 0;
  257. padding-left: 50px;
  258. }
  259. .w3tc_fancy_title>span:nth-of-type(1),
  260. .w3tc_fancy_title>span:nth-of-type(2),
  261. .w3tc_fancy_title>span:nth-of-type(3) {
  262. font-size: 2em;
  263. }
  264. .w3tc_fancy_title>span:nth-of-type(2) {
  265. color: #30bec4;
  266. }
  267. .w3tc_fancy_title>span:nth-of-type(4) {
  268. font-size: 1.8em;
  269. font-style: italic;
  270. }
  271. .w3tc_fancy_icon {
  272. position: absolute;
  273. top: 3px;
  274. left: 3px;
  275. width: 37px;
  276. height: 37px;
  277. }
  278. @media only screen and (max-width: 1024px) {
  279. .w3tcps_breakdown_items_container {
  280. flex-direction: column;
  281. }
  282. }
  283. @media only screen and (max-width: 600px) {
  284. .w3tcps_audit_results {
  285. border-top: 1px solid #ccd0d4;
  286. }
  287. }