c3.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. /*-- Chart --*/
  2. .c3 svg {
  3. font: 10px sans-serif;
  4. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  5. }
  6. .c3 path, .c3 line {
  7. fill: none;
  8. stroke: #000;
  9. }
  10. .c3 text {
  11. -webkit-user-select: none;
  12. -moz-user-select: none;
  13. user-select: none;
  14. }
  15. .c3-legend-item-tile,
  16. .c3-xgrid-focus,
  17. .c3-ygrid,
  18. .c3-event-rect,
  19. .c3-bars path {
  20. shape-rendering: crispEdges;
  21. }
  22. .c3-chart-arc path {
  23. stroke: #fff;
  24. }
  25. .c3-chart-arc rect {
  26. stroke: white;
  27. stroke-width: 1;
  28. }
  29. .c3-chart-arc text {
  30. fill: #fff;
  31. font-size: 13px;
  32. }
  33. /*-- Axis --*/
  34. /*-- Grid --*/
  35. .c3-grid line {
  36. stroke: #aaa;
  37. }
  38. .c3-grid text {
  39. fill: #aaa;
  40. }
  41. .c3-xgrid, .c3-ygrid {
  42. stroke-dasharray: 3 3;
  43. }
  44. /*-- Text on Chart --*/
  45. .c3-text.c3-empty {
  46. fill: #808080;
  47. font-size: 2em;
  48. }
  49. /*-- Line --*/
  50. .c3-line {
  51. stroke-width: 1px;
  52. }
  53. /*-- Point --*/
  54. .c3-circle {
  55. fill: currentColor;
  56. }
  57. .c3-circle._expanded_ {
  58. stroke-width: 1px;
  59. stroke: white;
  60. }
  61. .c3-selected-circle {
  62. fill: white;
  63. stroke-width: 2px;
  64. }
  65. /*-- Bar --*/
  66. .c3-bar {
  67. stroke-width: 0;
  68. }
  69. .c3-bar._expanded_ {
  70. fill-opacity: 1;
  71. fill-opacity: 0.75;
  72. }
  73. /*-- Focus --*/
  74. .c3-target.c3-focused {
  75. opacity: 1;
  76. }
  77. .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  78. stroke-width: 2px;
  79. }
  80. .c3-target.c3-defocused {
  81. opacity: 0.3 !important;
  82. }
  83. /*-- Region --*/
  84. .c3-region {
  85. fill: steelblue;
  86. fill-opacity: 0.1;
  87. }
  88. .c3-region text {
  89. fill-opacity: 1;
  90. }
  91. /*-- Brush --*/
  92. .c3-brush .extent {
  93. fill-opacity: 0.1;
  94. }
  95. /*-- Select - Drag --*/
  96. /*-- Legend --*/
  97. .c3-legend-item {
  98. font-size: 12px;
  99. }
  100. .c3-legend-item-hidden {
  101. opacity: 0.15;
  102. }
  103. .c3-legend-background {
  104. opacity: 0.75;
  105. fill: white;
  106. stroke: lightgray;
  107. stroke-width: 1;
  108. }
  109. /*-- Title --*/
  110. .c3-title {
  111. font: 14px sans-serif;
  112. }
  113. /*-- Tooltip --*/
  114. .c3-tooltip-container {
  115. z-index: 10;
  116. }
  117. .c3-tooltip {
  118. border-collapse: collapse;
  119. border-spacing: 0;
  120. background-color: #fff;
  121. empty-cells: show;
  122. -webkit-box-shadow: 7px 7px 12px -9px #777777;
  123. -moz-box-shadow: 7px 7px 12px -9px #777777;
  124. box-shadow: 7px 7px 12px -9px #777777;
  125. opacity: 0.9;
  126. }
  127. .c3-tooltip tr {
  128. border: 1px solid #CCC;
  129. }
  130. .c3-tooltip th {
  131. background-color: #aaa;
  132. font-size: 14px;
  133. padding: 2px 5px;
  134. text-align: left;
  135. color: #FFF;
  136. }
  137. .c3-tooltip td {
  138. font-size: 13px;
  139. padding: 3px 6px;
  140. background-color: #fff;
  141. border-left: 1px dotted #999;
  142. }
  143. .c3-tooltip td > span {
  144. display: inline-block;
  145. width: 10px;
  146. height: 10px;
  147. margin-right: 6px;
  148. }
  149. .c3-tooltip .value {
  150. text-align: right;
  151. }
  152. /*-- Area --*/
  153. .c3-area {
  154. stroke-width: 0;
  155. opacity: 0.2;
  156. }
  157. /*-- Arc --*/
  158. .c3-chart-arcs-title {
  159. dominant-baseline: middle;
  160. font-size: 1.3em;
  161. }
  162. .c3-chart-arcs .c3-chart-arcs-background {
  163. fill: #e0e0e0;
  164. stroke: #FFF;
  165. }
  166. .c3-chart-arcs .c3-chart-arcs-gauge-unit {
  167. fill: #000;
  168. font-size: 16px;
  169. }
  170. .c3-chart-arcs .c3-chart-arcs-gauge-max {
  171. fill: #777;
  172. }
  173. .c3-chart-arcs .c3-chart-arcs-gauge-min {
  174. fill: #777;
  175. }
  176. .c3-chart-arc .c3-gauge-value {
  177. fill: #000;
  178. /* font-size: 28px !important;*/
  179. }
  180. .c3-chart-arc.c3-target g path {
  181. opacity: 1;
  182. }
  183. .c3-chart-arc.c3-target.c3-focused g path {
  184. opacity: 1;
  185. }
  186. /*-- Zoom --*/
  187. .c3-drag-zoom.enabled {
  188. pointer-events: all !important;
  189. visibility: visible;
  190. }
  191. .c3-drag-zoom.disabled {
  192. pointer-events: none !important;
  193. visibility: hidden;
  194. }
  195. .c3-drag-zoom .extent {
  196. fill-opacity: 0.1;
  197. }