chartist.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
  1. .ct-label {
  2. fill: #a3afb7;
  3. color: #a3afb7;
  4. font-size: 0.858rem;
  5. line-height: 1; }
  6. .ct-chart-line .ct-label,
  7. .ct-chart-bar .ct-label {
  8. display: block;
  9. display: -ms-flexbox;
  10. display: flex; }
  11. .ct-label.ct-horizontal.ct-start {
  12. -ms-flex-align: flex-end;
  13. align-items: flex-end;
  14. -ms-flex-pack: flex-start;
  15. justify-content: flex-start;
  16. text-align: left;
  17. text-anchor: start; }
  18. .ct-label.ct-horizontal.ct-end {
  19. -ms-flex-align: flex-start;
  20. align-items: flex-start;
  21. -ms-flex-pack: flex-start;
  22. justify-content: flex-start;
  23. text-align: left;
  24. text-anchor: start; }
  25. .ct-label.ct-vertical.ct-start {
  26. -ms-flex-align: flex-end;
  27. align-items: flex-end;
  28. -ms-flex-pack: flex-end;
  29. justify-content: flex-end;
  30. text-align: right;
  31. text-anchor: end; }
  32. .ct-label.ct-vertical.ct-end {
  33. -ms-flex-align: flex-end;
  34. align-items: flex-end;
  35. -ms-flex-pack: flex-start;
  36. justify-content: flex-start;
  37. text-align: left;
  38. text-anchor: start; }
  39. .ct-chart-bar .ct-label.ct-horizontal.ct-start {
  40. -ms-flex-align: flex-end;
  41. align-items: flex-end;
  42. -ms-flex-pack: center;
  43. justify-content: center;
  44. text-align: center;
  45. text-anchor: start; }
  46. .ct-chart-bar .ct-label.ct-horizontal.ct-end {
  47. -ms-flex-align: flex-start;
  48. align-items: flex-start;
  49. -ms-flex-pack: center;
  50. justify-content: center;
  51. text-align: center;
  52. text-anchor: start; }
  53. .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
  54. -ms-flex-align: flex-end;
  55. align-items: flex-end;
  56. -ms-flex-pack: flex-start;
  57. justify-content: flex-start;
  58. text-align: left;
  59. text-anchor: start; }
  60. .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
  61. -ms-flex-align: flex-start;
  62. align-items: flex-start;
  63. -ms-flex-pack: flex-start;
  64. justify-content: flex-start;
  65. text-align: left;
  66. text-anchor: start; }
  67. .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
  68. -ms-flex-align: center;
  69. align-items: center;
  70. -ms-flex-pack: flex-end;
  71. justify-content: flex-end;
  72. text-align: right;
  73. text-anchor: end; }
  74. .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
  75. -ms-flex-align: center;
  76. align-items: center;
  77. -ms-flex-pack: flex-start;
  78. justify-content: flex-start;
  79. text-align: left;
  80. text-anchor: end; }
  81. .ct-grid {
  82. stroke: rgba(0, 0, 0, 0.1);
  83. stroke-width: 1px;
  84. stroke-dasharray: 2px; }
  85. .ct-point {
  86. stroke-width: 8px;
  87. stroke-linecap: round; }
  88. .ct-line {
  89. fill: none;
  90. stroke-width: 3px; }
  91. .ct-area {
  92. stroke: none;
  93. fill-opacity: 0.15; }
  94. .ct-bar {
  95. fill: none;
  96. stroke-width: 10px; }
  97. .ct-slice-donut {
  98. fill: none;
  99. stroke-width: 60px; }
  100. .ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
  101. stroke: #3e8ef7; }
  102. .ct-series-a .ct-slice-pie, .ct-series-a .ct-area {
  103. fill: #3e8ef7; }
  104. .ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
  105. stroke: #49de94; }
  106. .ct-series-b .ct-slice-pie, .ct-series-b .ct-area {
  107. fill: #49de94; }
  108. .ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
  109. stroke: #ff666b; }
  110. .ct-series-c .ct-slice-pie, .ct-series-c .ct-area {
  111. fill: #ff666b; }
  112. .ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
  113. stroke: #9463f7; }
  114. .ct-series-d .ct-slice-pie, .ct-series-d .ct-area {
  115. fill: #9463f7; }
  116. .ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
  117. stroke: #ffcd17; }
  118. .ct-series-e .ct-slice-pie, .ct-series-e .ct-area {
  119. fill: #ffcd17; }
  120. .ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
  121. stroke: #f74584; }
  122. .ct-series-f .ct-slice-pie, .ct-series-f .ct-area {
  123. fill: #f74584; }
  124. .ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
  125. stroke: #96a3fa; }
  126. .ct-series-g .ct-slice-pie, .ct-series-g .ct-area {
  127. fill: #96a3fa; }
  128. .ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
  129. stroke: #5a9101; }
  130. .ct-series-h .ct-slice-pie, .ct-series-h .ct-area {
  131. fill: #5a9101; }
  132. .ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
  133. stroke: #fa983c; }
  134. .ct-series-i .ct-slice-pie, .ct-series-i .ct-area {
  135. fill: #fa983c; }
  136. .ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
  137. stroke: #54cbe3; }
  138. .ct-series-j .ct-slice-pie, .ct-series-j .ct-area {
  139. fill: #54cbe3; }
  140. .ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
  141. stroke: #17b3a3; }
  142. .ct-series-k .ct-slice-pie, .ct-series-k .ct-area {
  143. fill: #17b3a3; }
  144. .ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
  145. stroke: #ab8c82; }
  146. .ct-series-l .ct-slice-pie, .ct-series-l .ct-area {
  147. fill: #ab8c82; }
  148. .ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
  149. stroke: #bdbdbd; }
  150. .ct-series-m .ct-slice-pie, .ct-series-m .ct-area {
  151. fill: #bdbdbd; }
  152. .ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
  153. stroke: #76838f; }
  154. .ct-series-n .ct-slice-pie, .ct-series-n .ct-area {
  155. fill: #76838f; }
  156. .ct-square {
  157. display: block;
  158. position: relative;
  159. width: 100%; }
  160. .ct-square:before {
  161. display: block;
  162. float: left;
  163. content: "";
  164. width: 0;
  165. height: 0;
  166. padding-bottom: 100%; }
  167. .ct-square:after {
  168. content: "";
  169. display: table;
  170. clear: both; }
  171. .ct-square > svg {
  172. display: block;
  173. position: absolute;
  174. top: 0;
  175. left: 0; }
  176. .ct-minor-second {
  177. display: block;
  178. position: relative;
  179. width: 100%; }
  180. .ct-minor-second:before {
  181. display: block;
  182. float: left;
  183. content: "";
  184. width: 0;
  185. height: 0;
  186. padding-bottom: 93.75%; }
  187. .ct-minor-second:after {
  188. content: "";
  189. display: table;
  190. clear: both; }
  191. .ct-minor-second > svg {
  192. display: block;
  193. position: absolute;
  194. top: 0;
  195. left: 0; }
  196. .ct-major-second {
  197. display: block;
  198. position: relative;
  199. width: 100%; }
  200. .ct-major-second:before {
  201. display: block;
  202. float: left;
  203. content: "";
  204. width: 0;
  205. height: 0;
  206. padding-bottom: 88.8888888889%; }
  207. .ct-major-second:after {
  208. content: "";
  209. display: table;
  210. clear: both; }
  211. .ct-major-second > svg {
  212. display: block;
  213. position: absolute;
  214. top: 0;
  215. left: 0; }
  216. .ct-minor-third {
  217. display: block;
  218. position: relative;
  219. width: 100%; }
  220. .ct-minor-third:before {
  221. display: block;
  222. float: left;
  223. content: "";
  224. width: 0;
  225. height: 0;
  226. padding-bottom: 83.3333333333%; }
  227. .ct-minor-third:after {
  228. content: "";
  229. display: table;
  230. clear: both; }
  231. .ct-minor-third > svg {
  232. display: block;
  233. position: absolute;
  234. top: 0;
  235. left: 0; }
  236. .ct-major-third {
  237. display: block;
  238. position: relative;
  239. width: 100%; }
  240. .ct-major-third:before {
  241. display: block;
  242. float: left;
  243. content: "";
  244. width: 0;
  245. height: 0;
  246. padding-bottom: 80%; }
  247. .ct-major-third:after {
  248. content: "";
  249. display: table;
  250. clear: both; }
  251. .ct-major-third > svg {
  252. display: block;
  253. position: absolute;
  254. top: 0;
  255. left: 0; }
  256. .ct-perfect-fourth {
  257. display: block;
  258. position: relative;
  259. width: 100%; }
  260. .ct-perfect-fourth:before {
  261. display: block;
  262. float: left;
  263. content: "";
  264. width: 0;
  265. height: 0;
  266. padding-bottom: 75%; }
  267. .ct-perfect-fourth:after {
  268. content: "";
  269. display: table;
  270. clear: both; }
  271. .ct-perfect-fourth > svg {
  272. display: block;
  273. position: absolute;
  274. top: 0;
  275. left: 0; }
  276. .ct-perfect-fifth {
  277. display: block;
  278. position: relative;
  279. width: 100%; }
  280. .ct-perfect-fifth:before {
  281. display: block;
  282. float: left;
  283. content: "";
  284. width: 0;
  285. height: 0;
  286. padding-bottom: 66.6666666667%; }
  287. .ct-perfect-fifth:after {
  288. content: "";
  289. display: table;
  290. clear: both; }
  291. .ct-perfect-fifth > svg {
  292. display: block;
  293. position: absolute;
  294. top: 0;
  295. left: 0; }
  296. .ct-minor-sixth {
  297. display: block;
  298. position: relative;
  299. width: 100%; }
  300. .ct-minor-sixth:before {
  301. display: block;
  302. float: left;
  303. content: "";
  304. width: 0;
  305. height: 0;
  306. padding-bottom: 62.5%; }
  307. .ct-minor-sixth:after {
  308. content: "";
  309. display: table;
  310. clear: both; }
  311. .ct-minor-sixth > svg {
  312. display: block;
  313. position: absolute;
  314. top: 0;
  315. left: 0; }
  316. .ct-golden-section {
  317. display: block;
  318. position: relative;
  319. width: 100%; }
  320. .ct-golden-section:before {
  321. display: block;
  322. float: left;
  323. content: "";
  324. width: 0;
  325. height: 0;
  326. padding-bottom: 61.804697157%; }
  327. .ct-golden-section:after {
  328. content: "";
  329. display: table;
  330. clear: both; }
  331. .ct-golden-section > svg {
  332. display: block;
  333. position: absolute;
  334. top: 0;
  335. left: 0; }
  336. .ct-major-sixth {
  337. display: block;
  338. position: relative;
  339. width: 100%; }
  340. .ct-major-sixth:before {
  341. display: block;
  342. float: left;
  343. content: "";
  344. width: 0;
  345. height: 0;
  346. padding-bottom: 60%; }
  347. .ct-major-sixth:after {
  348. content: "";
  349. display: table;
  350. clear: both; }
  351. .ct-major-sixth > svg {
  352. display: block;
  353. position: absolute;
  354. top: 0;
  355. left: 0; }
  356. .ct-minor-seventh {
  357. display: block;
  358. position: relative;
  359. width: 100%; }
  360. .ct-minor-seventh:before {
  361. display: block;
  362. float: left;
  363. content: "";
  364. width: 0;
  365. height: 0;
  366. padding-bottom: 56.25%; }
  367. .ct-minor-seventh:after {
  368. content: "";
  369. display: table;
  370. clear: both; }
  371. .ct-minor-seventh > svg {
  372. display: block;
  373. position: absolute;
  374. top: 0;
  375. left: 0; }
  376. .ct-major-seventh {
  377. display: block;
  378. position: relative;
  379. width: 100%; }
  380. .ct-major-seventh:before {
  381. display: block;
  382. float: left;
  383. content: "";
  384. width: 0;
  385. height: 0;
  386. padding-bottom: 53.3333333333%; }
  387. .ct-major-seventh:after {
  388. content: "";
  389. display: table;
  390. clear: both; }
  391. .ct-major-seventh > svg {
  392. display: block;
  393. position: absolute;
  394. top: 0;
  395. left: 0; }
  396. .ct-octave {
  397. display: block;
  398. position: relative;
  399. width: 100%; }
  400. .ct-octave:before {
  401. display: block;
  402. float: left;
  403. content: "";
  404. width: 0;
  405. height: 0;
  406. padding-bottom: 50%; }
  407. .ct-octave:after {
  408. content: "";
  409. display: table;
  410. clear: both; }
  411. .ct-octave > svg {
  412. display: block;
  413. position: absolute;
  414. top: 0;
  415. left: 0; }
  416. .ct-major-tenth {
  417. display: block;
  418. position: relative;
  419. width: 100%; }
  420. .ct-major-tenth:before {
  421. display: block;
  422. float: left;
  423. content: "";
  424. width: 0;
  425. height: 0;
  426. padding-bottom: 40%; }
  427. .ct-major-tenth:after {
  428. content: "";
  429. display: table;
  430. clear: both; }
  431. .ct-major-tenth > svg {
  432. display: block;
  433. position: absolute;
  434. top: 0;
  435. left: 0; }
  436. .ct-major-eleventh {
  437. display: block;
  438. position: relative;
  439. width: 100%; }
  440. .ct-major-eleventh:before {
  441. display: block;
  442. float: left;
  443. content: "";
  444. width: 0;
  445. height: 0;
  446. padding-bottom: 37.5%; }
  447. .ct-major-eleventh:after {
  448. content: "";
  449. display: table;
  450. clear: both; }
  451. .ct-major-eleventh > svg {
  452. display: block;
  453. position: absolute;
  454. top: 0;
  455. left: 0; }
  456. .ct-major-twelfth {
  457. display: block;
  458. position: relative;
  459. width: 100%; }
  460. .ct-major-twelfth:before {
  461. display: block;
  462. float: left;
  463. content: "";
  464. width: 0;
  465. height: 0;
  466. padding-bottom: 33.3333333333%; }
  467. .ct-major-twelfth:after {
  468. content: "";
  469. display: table;
  470. clear: both; }
  471. .ct-major-twelfth > svg {
  472. display: block;
  473. position: absolute;
  474. top: 0;
  475. left: 0; }
  476. .ct-double-octave {
  477. display: block;
  478. position: relative;
  479. width: 100%; }
  480. .ct-double-octave:before {
  481. display: block;
  482. float: left;
  483. content: "";
  484. width: 0;
  485. height: 0;
  486. padding-bottom: 25%; }
  487. .ct-double-octave:after {
  488. content: "";
  489. display: table;
  490. clear: both; }
  491. .ct-double-octave > svg {
  492. display: block;
  493. position: absolute;
  494. top: 0;
  495. left: 0; }