spa.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. /* Base */
  2. body,
  3. html {
  4. margin: 0;
  5. padding: 0;
  6. height: 100%;
  7. }
  8. body {
  9. color: #333;
  10. background-color: #fcfcfc;
  11. font: 14px/14px -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
  12. Roboto, 'Helvetica Neue', Arial, sans-serif;
  13. }
  14. button {
  15. margin: 0;
  16. border: none;
  17. font: inherit;
  18. color: inherit;
  19. }
  20. button:focus {
  21. outline: none;
  22. }
  23. *,
  24. *:after,
  25. *:before {
  26. -webkit-box-sizing: border-box;
  27. -moz-box-sizing: border-box;
  28. box-sizing: border-box;
  29. }
  30. /* Typography */
  31. h1 {
  32. font-size: 20px;
  33. line-height: 20px;
  34. margin: 0;
  35. }
  36. a {
  37. color: #0074d9;
  38. text-decoration: none;
  39. }
  40. a:hover {
  41. text-decoration: underline;
  42. }
  43. .small {
  44. font-size: 12px;
  45. }
  46. .strong {
  47. font-weight: bold;
  48. }
  49. .center {
  50. text-align: center;
  51. }
  52. .quiet {
  53. opacity: 0.7;
  54. }
  55. /* Colors */
  56. .low {
  57. background: #fce1e5;
  58. }
  59. .low--dark {
  60. background: #c21f39;
  61. }
  62. .medium {
  63. background: #fff4c2;
  64. }
  65. .medium--dark {
  66. background: #f9cd0b;
  67. }
  68. .high {
  69. background: rgb(230, 245, 208);
  70. }
  71. .high--dark {
  72. background: rgb(77, 146, 33);
  73. }
  74. /* App */
  75. .app {
  76. height: 100%;
  77. }
  78. /* Layout */
  79. .layout {
  80. display: flex;
  81. flex-direction: column;
  82. min-height: 100%;
  83. padding: 20px;
  84. }
  85. .layout__section {
  86. flex-grow: 0;
  87. }
  88. .layout__section--fill {
  89. flex-grow: 1;
  90. }
  91. .layout__section + .layout__section {
  92. margin-top: 20px;
  93. }
  94. @media only screen and (max-width: 640px) {
  95. .col3 {
  96. width: 100%;
  97. max-width: 100%;
  98. }
  99. .hide-mobile {
  100. display: none !important;
  101. }
  102. }
  103. /* Toolbar */
  104. .toolbar {
  105. display: flex;
  106. flex-wrap: wrap;
  107. }
  108. .toolbar__item {
  109. margin-right: 40px;
  110. margin-bottom: 10px;
  111. }
  112. /* Toggle */
  113. .toggle {
  114. display: inline-flex;
  115. align-items: center;
  116. }
  117. .toggle__label {
  118. margin-right: 0.5em;
  119. }
  120. .toggle__options {
  121. display: inline-block;
  122. border: 1px solid #0074d9;
  123. border-radius: 4px;
  124. color: #0074d9;
  125. overflow: hidden;
  126. white-space: nowrap;
  127. }
  128. .toggle__option {
  129. padding: 4px 8px;
  130. background: #fcfcfc;
  131. }
  132. .toggle__option + .toggle__option {
  133. border-left: 1px solid #0074d9;
  134. }
  135. .toggle__option.is-toggled {
  136. color: #fff;
  137. background: #0074d9;
  138. border-left-color: #fcfcfc;
  139. }
  140. /* Expand */
  141. .expandbutton {
  142. display: inline-block;
  143. width: 1em;
  144. margin-right: 0.25em;
  145. padding: 0;
  146. background-color: transparent;
  147. font-weight: bold;
  148. }
  149. /* Fraction */
  150. .fraction {
  151. font-size: 12px;
  152. color: #666;
  153. padding: 2px 4px;
  154. border-radius: 4px;
  155. }
  156. /* Coverage */
  157. .coverage-summary {
  158. border-collapse: collapse;
  159. }
  160. .coverage-summary tbody tr {
  161. border-bottom: 1px solid #fff;
  162. }
  163. .coverage-summary td,
  164. .coverage-summary th {
  165. padding: 5px;
  166. }
  167. .coverage-summary th {
  168. text-align: center;
  169. font-weight: normal;
  170. white-space: nowrap;
  171. }
  172. .coverage-summary th.abs,
  173. .coverage-summary td.pct,
  174. .coverage-summary td.abs {
  175. text-align: right;
  176. }
  177. .coverage-summary th.file {
  178. min-width: 300px;
  179. text-align: left;
  180. }
  181. .coverage-summary td.file {
  182. white-space: nowrap;
  183. }
  184. .coverage-summary td.pct {
  185. font-weight: 400;
  186. }
  187. .coverage-summary td.abs {
  188. color: #666;
  189. font-size: 12px;
  190. }
  191. .coverage-summary td.empty {
  192. opacity: 0.5;
  193. }
  194. .coverage-summary .headercell {
  195. border-top: 1px solid #eee;
  196. text-align: right;
  197. font-size: 12px;
  198. color: #666;
  199. }
  200. .coverage-summary .headercell:nth-child(4n - 2),
  201. .coverage-summary td:nth-child(4n - 2) {
  202. border-left: 2px solid #fcfcfc;
  203. padding-left: 2em;
  204. }
  205. .filetab {
  206. display: inline-block;
  207. width: 1em;
  208. }
  209. /* Sorter */
  210. .sorter {
  211. display: inline-block;
  212. width: 7px;
  213. height: 10px;
  214. margin-left: 0.5em;
  215. background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
  216. }
  217. .sorted .sorter {
  218. background-position: 0 -20px;
  219. }
  220. .sorted-desc .sorter {
  221. background-position: 0 -10px;
  222. }
  223. .sortable {
  224. cursor: pointer;
  225. }
  226. /* Bar */
  227. .bar {
  228. width: 50px;
  229. height: 5px;
  230. background: #fff;
  231. }
  232. .bar__data {
  233. height: 100%;
  234. }