site-health-rtl.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. /*! This file is auto-generated */
  2. /* Note: Any Site Health selectors that use
  3. duplicate styling from the Privacy settings screen
  4. are styled in the Privacy section of edit.css */
  5. .health-check-body h2 {
  6. line-height: 1.4;
  7. }
  8. .health-check-body h3 {
  9. padding: 0;
  10. font-weight: 400;
  11. }
  12. .site-health-progress-wrapper {
  13. margin-bottom: 1rem;
  14. }
  15. .site-health-progress {
  16. display: inline-block;
  17. height: 20px;
  18. width: 20px;
  19. margin: 0;
  20. border-radius: 100%;
  21. position: relative;
  22. font-weight: 600;
  23. font-size: 0.4rem;
  24. }
  25. .site-health-progress-count {
  26. position: absolute;
  27. display: block;
  28. height: 80px;
  29. width: 80px;
  30. right: 50%;
  31. top: 50%;
  32. margin-top: -40px;
  33. margin-right: -40px;
  34. border-radius: 100%;
  35. line-height: 6.3;
  36. font-size: 2em;
  37. }
  38. .loading .site-health-progress svg #bar {
  39. stroke-dashoffset: 0;
  40. stroke: #c3c4c7;
  41. animation: loadingPulse 3s infinite ease-in-out;
  42. }
  43. .site-health-progress svg circle {
  44. stroke-dashoffset: 0;
  45. transition: stroke-dashoffset 1s linear;
  46. stroke: #c3c4c7;
  47. stroke-width: 2em;
  48. }
  49. .site-health-progress svg #bar {
  50. stroke-dashoffset: 565;
  51. stroke: #d63638;
  52. }
  53. .green .site-health-progress #bar {
  54. stroke: #00a32a;
  55. }
  56. .green .site-health-progress .site-health-progress-label {
  57. color: #00a32a;
  58. }
  59. .orange .site-health-progress #bar {
  60. stroke: #dba617;
  61. }
  62. .orange .site-health-progress .site-health-progress-label {
  63. color: #dba617;
  64. }
  65. .site-health-progress-label {
  66. font-weight: 600;
  67. line-height: 20px;
  68. margin-right: 0.3rem;
  69. }
  70. @keyframes loadingPulse {
  71. 0% {
  72. stroke: #c3c4c7;
  73. }
  74. 50% {
  75. stroke: #72aee6;
  76. }
  77. 100% {
  78. stroke: #c3c4c7;
  79. }
  80. }
  81. .health-check-tabs-wrapper {
  82. /* IE 11 */
  83. display: -ms-inline-grid;
  84. -ms-grid-columns: 1fr 1fr 1fr 1fr;
  85. vertical-align: top;
  86. /* modern browsers */
  87. display: inline-grid;
  88. grid-template-columns: 1fr 1fr 1fr 1fr;
  89. }
  90. .health-check-tabs-wrapper.tab-count-1 {
  91. grid-template-columns: 1fr;
  92. }
  93. .health-check-tabs-wrapper.tab-count-2 {
  94. grid-template-columns: 1fr 1fr;
  95. }
  96. .health-check-tabs-wrapper.tab-count-3 {
  97. grid-template-columns: 1fr 1fr 1fr;
  98. }
  99. .health-check-tab {
  100. display: block; /* IE 11 */
  101. text-decoration: none;
  102. color: inherit;
  103. padding: 0.5rem 1rem 1rem;
  104. margin: 0 1rem;
  105. transition: box-shadow 0.5s ease-in-out;
  106. }
  107. .health-check-offscreen-nav-wrapper {
  108. position: relative;
  109. background: transparent;
  110. border: none;
  111. }
  112. .health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
  113. right: initial;
  114. }
  115. .health-check-offscreen-nav {
  116. display: none;
  117. position: absolute;
  118. padding-top: 10px;
  119. left: 0;
  120. top: 100%;
  121. width: 13rem;
  122. }
  123. .health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
  124. display: inline-block;
  125. }
  126. .health-check-offscreen-nav:before {
  127. position: absolute;
  128. content: "";
  129. width: 0;
  130. height: 0;
  131. border-style: solid;
  132. border-width: 0 10px 5px;
  133. border-color: transparent transparent #ffffff;
  134. left: 20px;
  135. top: 5px;
  136. }
  137. .health-check-offscreen-nav .health-check-tab {
  138. background: #fff;
  139. box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
  140. }
  141. .health-check-offscreen-nav .health-check-tab.active {
  142. box-shadow: inset -3px 0 #3582c4;
  143. font-weight: 600;
  144. }
  145. .health-check-body {
  146. max-width: 800px;
  147. margin: 0 auto;
  148. }
  149. .health-check-table td:first-child {
  150. width: 30%;
  151. }
  152. .health-check-table td {
  153. width: 70%;
  154. }
  155. .health-check-table ul,
  156. .health-check-table ol {
  157. margin: 0;
  158. }
  159. .health-check-body li {
  160. line-height: 1.5;
  161. }
  162. .health-check-body .pass::before,
  163. .health-check-body .good::before {
  164. content: "\f147";
  165. color: #00a32a;
  166. }
  167. .health-check-body .warning::before {
  168. content: "\f460";
  169. color: #dba617;
  170. }
  171. .health-check-body .info::before {
  172. content: "\f348";
  173. color: #72aee6;
  174. }
  175. .health-check-body .fail::before,
  176. .health-check-body .error::before {
  177. content: "\f335";
  178. color: #d63638;
  179. }
  180. .site-health-copy-buttons {
  181. margin: 1rem 0;
  182. }
  183. .site-health-copy-buttons .copy-button-wrapper {
  184. display: inline-flex;
  185. align-items: center;
  186. margin: 0.5rem 0 1rem;
  187. }
  188. .site-health-copy-buttons .success {
  189. color: #008a20;
  190. margin-right: 0.5rem;
  191. }
  192. .site-status-has-issues.hide {
  193. display: none;
  194. }
  195. .site-health-view-more {
  196. text-align: center;
  197. }
  198. .site-health-issues-wrapper:first-of-type {
  199. margin-top: 3rem;
  200. }
  201. .site-health-issues-wrapper {
  202. margin-bottom: 3rem;
  203. margin-top: 2rem;
  204. }
  205. .site-status-all-clear {
  206. display: flex;
  207. flex-direction: column;
  208. align-items: center;
  209. justify-content: center;
  210. text-align: center;
  211. height: 100%;
  212. width: 100%;
  213. margin: 0 0 3rem;
  214. }
  215. @media all and (min-width: 784px) {
  216. .site-status-all-clear {
  217. margin: 2rem 0 5rem;
  218. }
  219. }
  220. .site-status-all-clear.hide {
  221. display: none;
  222. }
  223. .site-status-all-clear .dashicons {
  224. font-size: 150px;
  225. height: 150px;
  226. margin-bottom: 2rem;
  227. width: 150px;
  228. }
  229. .site-status-all-clear .encouragement {
  230. font-size: 1.5rem;
  231. font-weight: 600;
  232. }
  233. .site-status-all-clear p {
  234. margin: 0;
  235. }
  236. .wp-core-ui .button.site-health-view-passed {
  237. position: relative;
  238. padding-left: 40px;
  239. padding-right: 20px;
  240. }
  241. .health-check-wp-paths-sizes.spinner {
  242. visibility: visible;
  243. float: none;
  244. margin: 0 4px;
  245. flex-shrink: 0;
  246. }
  247. /* Styling unique to the dashboard widget. */
  248. #dashboard_site_health .site-health-details {
  249. padding-right: 16px;
  250. }
  251. #dashboard_site_health .site-health-details p:first-child {
  252. margin-top: 0;
  253. }
  254. #dashboard_site_health .site-health-details p:last-child {
  255. margin-bottom: 0;
  256. }
  257. #dashboard_site_health .health-check-widget {
  258. display: grid;
  259. grid-template-columns: 1fr 2fr;
  260. grid-auto-rows: minmax(64px, auto);
  261. column-gap: 16px;
  262. align-items: center;
  263. }
  264. #dashboard_site_health .site-health-progress-label {
  265. margin-right: 0;
  266. }
  267. .health-check-widget-title-section {
  268. margin-bottom: 0;
  269. text-align: center;
  270. }
  271. @media screen and (max-width: 480px) {
  272. #dashboard_site_health .health-check-widget {
  273. grid-template-columns: 100%;
  274. }
  275. }
  276. @media screen and (max-width: 782px) {
  277. .site-health-issues-wrapper .health-check-accordion-trigger {
  278. flex-direction: column;
  279. align-items: flex-start;
  280. }
  281. .health-check-accordion-trigger .badge {
  282. margin: 1em 0 0;
  283. }
  284. .health-check-table {
  285. table-layout: fixed;
  286. }
  287. .health-check-table td {
  288. box-sizing: border-box;
  289. display: block;
  290. width: 100%;
  291. word-wrap: break-word;
  292. }
  293. .health-check-table td:first-child {
  294. width: 100%;
  295. padding-bottom: 0;
  296. font-weight: 600;
  297. }
  298. .wp-core-ui .site-health-copy-buttons .copy-button {
  299. margin-bottom: 0;
  300. }
  301. }