highcharts.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835
  1. /**
  2. * @license Highcharts
  3. *
  4. * (c) 2009-2016 Torstein Honsi
  5. *
  6. * License: www.highcharts.com/license
  7. */
  8. .highcharts-container {
  9. position: relative;
  10. overflow: hidden;
  11. width: 100%;
  12. height: 100%;
  13. text-align: left;
  14. line-height: normal;
  15. z-index: 0;
  16. /* #1072 */
  17. -webkit-tap-highlight-color: transparent;
  18. font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  19. font-size: 12px;
  20. }
  21. .highcharts-root {
  22. display: block;
  23. }
  24. .highcharts-root text {
  25. stroke-width: 0;
  26. }
  27. .highcharts-strong {
  28. font-weight: bold;
  29. }
  30. .highcharts-emphasized {
  31. font-style: italic;
  32. }
  33. .highcharts-anchor {
  34. cursor: pointer;
  35. }
  36. .highcharts-background {
  37. fill: #ffffff;
  38. }
  39. .highcharts-plot-border, .highcharts-plot-background {
  40. fill: none;
  41. }
  42. .highcharts-label-box {
  43. fill: none;
  44. }
  45. .highcharts-button-box {
  46. fill: inherit;
  47. }
  48. /* Titles */
  49. .highcharts-title {
  50. fill: #333333;
  51. font-size: 1.5em;
  52. }
  53. .highcharts-subtitle {
  54. fill: #666666;
  55. }
  56. /* Axes */
  57. .highcharts-axis-line {
  58. fill: none;
  59. stroke: #ccd6eb;
  60. }
  61. .highcharts-yaxis .highcharts-axis-line {
  62. stroke-width: 0;
  63. }
  64. .highcharts-axis-title {
  65. fill: #666666;
  66. }
  67. .highcharts-axis-labels {
  68. fill: #666666;
  69. cursor: default;
  70. font-size: 0.9em;
  71. }
  72. .highcharts-grid-line {
  73. fill: none;
  74. stroke: #e6e6e6;
  75. }
  76. .highcharts-xaxis-grid .highcharts-grid-line {
  77. stroke-width: 0px;
  78. }
  79. .highcharts-tick {
  80. stroke: #ccd6eb;
  81. }
  82. .highcharts-yaxis .highcharts-tick {
  83. stroke-width: 0;
  84. }
  85. .highcharts-minor-grid-line {
  86. stroke: #f2f2f2;
  87. }
  88. .highcharts-crosshair-thin {
  89. stroke-width: 1px;
  90. stroke: #cccccc;
  91. }
  92. .highcharts-crosshair-category {
  93. stroke: #ccd6eb;
  94. stroke-opacity: 0.25;
  95. }
  96. /* Credits */
  97. .highcharts-credits {
  98. cursor: pointer;
  99. fill: #999999;
  100. font-size: 0.7em;
  101. transition: fill 250ms, font-size 250ms;
  102. }
  103. .highcharts-credits:hover {
  104. fill: black;
  105. font-size: 1em;
  106. }
  107. /* Tooltip */
  108. .highcharts-tooltip {
  109. cursor: default;
  110. pointer-events: none;
  111. white-space: nowrap;
  112. transition: stroke 150ms;
  113. }
  114. .highcharts-tooltip text {
  115. fill: #333333;
  116. }
  117. .highcharts-tooltip .highcharts-header {
  118. font-size: 0.85em;
  119. }
  120. .highcharts-tooltip-box {
  121. stroke-width: 1px;
  122. fill: #f7f7f7;
  123. fill-opacity: 0.85;
  124. }
  125. .highcharts-tooltip-box .highcharts-label-box {
  126. fill: #f7f7f7;
  127. fill-opacity: 0.85;
  128. }
  129. .highcharts-selection-marker {
  130. fill: #335cad;
  131. fill-opacity: 0.25;
  132. }
  133. .highcharts-graph {
  134. fill: none;
  135. stroke-width: 2px;
  136. stroke-linecap: round;
  137. stroke-linejoin: round;
  138. }
  139. .highcharts-state-hover .highcharts-graph {
  140. stroke-width: 3;
  141. }
  142. .highcharts-state-hover path {
  143. transition: stroke-width 50;
  144. /* quick in */
  145. }
  146. .highcharts-state-normal path {
  147. transition: stroke-width 250ms;
  148. /* slow out */
  149. }
  150. /* Legend hover affects points and series */
  151. g.highcharts-series,
  152. .highcharts-point,
  153. .highcharts-markers,
  154. .highcharts-data-labels {
  155. transition: opacity 250ms;
  156. }
  157. .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
  158. .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
  159. .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
  160. .highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
  161. opacity: 0.2;
  162. }
  163. /* Series options */
  164. /* Default colors */
  165. .highcharts-color-0 {
  166. fill: #7cb5ec;
  167. stroke: #7cb5ec;
  168. }
  169. .highcharts-color-1 {
  170. fill: #434348;
  171. stroke: #434348;
  172. }
  173. .highcharts-color-2 {
  174. fill: #90ed7d;
  175. stroke: #90ed7d;
  176. }
  177. .highcharts-color-3 {
  178. fill: #f7a35c;
  179. stroke: #f7a35c;
  180. }
  181. .highcharts-color-4 {
  182. fill: #8085e9;
  183. stroke: #8085e9;
  184. }
  185. .highcharts-color-5 {
  186. fill: #f15c80;
  187. stroke: #f15c80;
  188. }
  189. .highcharts-color-6 {
  190. fill: #e4d354;
  191. stroke: #e4d354;
  192. }
  193. .highcharts-color-7 {
  194. fill: #2b908f;
  195. stroke: #2b908f;
  196. }
  197. .highcharts-color-8 {
  198. fill: #f45b5b;
  199. stroke: #f45b5b;
  200. }
  201. .highcharts-color-9 {
  202. fill: #91e8e1;
  203. stroke: #91e8e1;
  204. }
  205. .highcharts-area {
  206. fill-opacity: 0.75;
  207. stroke-width: 0;
  208. }
  209. .highcharts-markers {
  210. stroke-width: 1px;
  211. stroke: #ffffff;
  212. }
  213. .highcharts-point {
  214. stroke-width: 1px;
  215. }
  216. .highcharts-dense-data .highcharts-point {
  217. stroke-width: 0;
  218. }
  219. .highcharts-data-label {
  220. font-size: 0.9em;
  221. font-weight: bold;
  222. }
  223. .highcharts-data-label-box {
  224. fill: none;
  225. stroke-width: 0;
  226. }
  227. .highcharts-data-label text, text.highcharts-data-label {
  228. fill: #333333;
  229. }
  230. .highcharts-data-label-connector {
  231. fill: none;
  232. }
  233. .highcharts-halo {
  234. fill-opacity: 0.25;
  235. stroke-width: 0;
  236. }
  237. .highcharts-series:not(.highcharts-pie-series) .highcharts-point-select {
  238. fill: #cccccc;
  239. stroke: #000000;
  240. }
  241. .highcharts-column-series rect.highcharts-point {
  242. stroke: #ffffff;
  243. }
  244. .highcharts-column-series .highcharts-point {
  245. transition: fill-opacity 250ms;
  246. }
  247. .highcharts-column-series .highcharts-point-hover {
  248. fill-opacity: 0.75;
  249. transition: fill-opacity 50ms;
  250. }
  251. .highcharts-pie-series .highcharts-point {
  252. stroke-linejoin: round;
  253. stroke: #ffffff;
  254. }
  255. .highcharts-pie-series .highcharts-point-hover {
  256. fill-opacity: 0.75;
  257. transition: fill-opacity 50ms;
  258. }
  259. .highcharts-funnel-series .highcharts-point {
  260. stroke-linejoin: round;
  261. stroke: #ffffff;
  262. }
  263. .highcharts-funnel-series .highcharts-point-hover {
  264. fill-opacity: 0.75;
  265. transition: fill-opacity 50ms;
  266. }
  267. .highcharts-funnel-series .highcharts-point-select {
  268. fill: inherit;
  269. stroke: inherit;
  270. }
  271. .highcharts-pyramid-series .highcharts-point {
  272. stroke-linejoin: round;
  273. stroke: #ffffff;
  274. }
  275. .highcharts-pyramid-series .highcharts-point-hover {
  276. fill-opacity: 0.75;
  277. transition: fill-opacity 50ms;
  278. }
  279. .highcharts-pyramid-series .highcharts-point-select {
  280. fill: inherit;
  281. stroke: inherit;
  282. }
  283. .highcharts-solidgauge-series .highcharts-point {
  284. stroke-width: 0;
  285. }
  286. .highcharts-treemap-series .highcharts-point {
  287. stroke-width: 1px;
  288. stroke: #e6e6e6;
  289. transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
  290. }
  291. .highcharts-treemap-series .highcharts-point-hover {
  292. stroke: #999999;
  293. transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
  294. }
  295. .highcharts-treemap-series .highcharts-above-level {
  296. display: none;
  297. }
  298. .highcharts-treemap-series .highcharts-internal-node {
  299. fill: none;
  300. }
  301. .highcharts-treemap-series .highcharts-internal-node-interactive {
  302. fill-opacity: 0.15;
  303. cursor: pointer;
  304. }
  305. .highcharts-treemap-series .highcharts-internal-node-interactive:hover {
  306. fill-opacity: 0.75;
  307. }
  308. /* Legend */
  309. .highcharts-legend-box {
  310. fill: none;
  311. stroke-width: 0;
  312. }
  313. .highcharts-legend-item text {
  314. fill: #333333;
  315. font-weight: bold;
  316. font-size: 1em;
  317. cursor: pointer;
  318. stroke-width: 0;
  319. }
  320. .highcharts-legend-item:hover text {
  321. fill: #000000;
  322. }
  323. .highcharts-legend-item-hidden * {
  324. fill: #cccccc !important;
  325. stroke: #cccccc !important;
  326. transition: fill 250ms;
  327. }
  328. .highcharts-legend-nav-active {
  329. fill: #003399;
  330. cursor: pointer;
  331. }
  332. .highcharts-legend-nav-inactive {
  333. fill: #cccccc;
  334. }
  335. .highcharts-legend-title-box {
  336. fill: none;
  337. stroke-width: 0;
  338. }
  339. /* Loading */
  340. .highcharts-loading {
  341. position: absolute;
  342. background-color: #ffffff;
  343. opacity: 0.5;
  344. text-align: center;
  345. z-index: 10;
  346. transition: opacity 250ms;
  347. }
  348. .highcharts-loading-hidden {
  349. height: 0 !important;
  350. opacity: 0;
  351. overflow: hidden;
  352. transition: opacity 250ms, height 250ms step-end;
  353. }
  354. .highcharts-loading-inner {
  355. font-weight: bold;
  356. position: relative;
  357. top: 45%;
  358. }
  359. /* Plot bands and polar pane backgrounds */
  360. .highcharts-plot-band, .highcharts-pane {
  361. fill: #000000;
  362. fill-opacity: 0.05;
  363. }
  364. .highcharts-plot-line {
  365. fill: none;
  366. stroke: #999999;
  367. stroke-width: 1px;
  368. }
  369. /* Highcharts More and modules */
  370. .highcharts-boxplot-box {
  371. fill: #ffffff;
  372. }
  373. .highcharts-boxplot-median {
  374. stroke-width: 2px;
  375. }
  376. .highcharts-bubble-series .highcharts-point {
  377. fill-opacity: 0.5;
  378. }
  379. .highcharts-errorbar-series .highcharts-point {
  380. stroke: #000000;
  381. }
  382. .highcharts-gauge-series .highcharts-data-label-box {
  383. stroke: #cccccc;
  384. stroke-width: 1px;
  385. }
  386. .highcharts-gauge-series .highcharts-dial {
  387. fill: #000000;
  388. stroke-width: 0;
  389. }
  390. .highcharts-polygon-series .highcharts-graph {
  391. fill: inherit;
  392. stroke-width: 0;
  393. }
  394. .highcharts-waterfall-series .highcharts-graph {
  395. stroke: #333333;
  396. stroke-dasharray: 1, 3;
  397. }
  398. .highcharts-sankey-series .highcharts-point {
  399. stroke-width: 0;
  400. }
  401. .highcharts-sankey-series .highcharts-link {
  402. transition: fill 250ms, fill-opacity 250ms;
  403. fill-opacity: 0.5;
  404. }
  405. .highcharts-sankey-series .highcharts-point-hover.highcharts-link {
  406. transition: fill 50ms, fill-opacity 50ms;
  407. fill-opacity: 1;
  408. }
  409. /* Highstock */
  410. .highcharts-navigator-mask-outside {
  411. fill-opacity: 0;
  412. }
  413. .highcharts-navigator-mask-inside {
  414. fill: #6685c2;
  415. /* navigator.maskFill option */
  416. fill-opacity: 0.25;
  417. cursor: ew-resize;
  418. }
  419. .highcharts-navigator-outline {
  420. stroke: #cccccc;
  421. fill: none;
  422. }
  423. .highcharts-navigator-handle {
  424. stroke: #cccccc;
  425. fill: #f2f2f2;
  426. cursor: ew-resize;
  427. }
  428. .highcharts-navigator-series {
  429. fill: #335cad;
  430. stroke: #335cad;
  431. }
  432. .highcharts-navigator-series .highcharts-graph {
  433. stroke-width: 1px;
  434. }
  435. .highcharts-navigator-series .highcharts-area {
  436. fill-opacity: 0.05;
  437. }
  438. .highcharts-navigator-xaxis .highcharts-axis-line {
  439. stroke-width: 0;
  440. }
  441. .highcharts-navigator-xaxis .highcharts-grid-line {
  442. stroke-width: 1px;
  443. stroke: #e6e6e6;
  444. }
  445. .highcharts-navigator-xaxis.highcharts-axis-labels {
  446. fill: #999999;
  447. }
  448. .highcharts-navigator-yaxis .highcharts-grid-line {
  449. stroke-width: 0;
  450. }
  451. .highcharts-scrollbar-thumb {
  452. fill: #cccccc;
  453. stroke: #cccccc;
  454. stroke-width: 1px;
  455. }
  456. .highcharts-scrollbar-button {
  457. fill: #e6e6e6;
  458. stroke: #cccccc;
  459. stroke-width: 1px;
  460. }
  461. .highcharts-scrollbar-arrow {
  462. fill: #666666;
  463. }
  464. .highcharts-scrollbar-rifles {
  465. stroke: #666666;
  466. stroke-width: 1px;
  467. }
  468. .highcharts-scrollbar-track {
  469. fill: #f2f2f2;
  470. stroke: #f2f2f2;
  471. stroke-width: 1px;
  472. }
  473. .highcharts-button {
  474. fill: #f7f7f7;
  475. stroke: #cccccc;
  476. cursor: default;
  477. stroke-width: 1px;
  478. transition: fill 250ms;
  479. }
  480. .highcharts-button text {
  481. fill: #333333;
  482. }
  483. .highcharts-button-hover {
  484. transition: fill 0ms;
  485. fill: #e6e6e6;
  486. stroke: #cccccc;
  487. }
  488. .highcharts-button-hover text {
  489. fill: #333333;
  490. }
  491. .highcharts-button-pressed {
  492. font-weight: bold;
  493. fill: #e6ebf5;
  494. stroke: #cccccc;
  495. }
  496. .highcharts-button-pressed text {
  497. fill: #333333;
  498. font-weight: bold;
  499. }
  500. .highcharts-button-disabled text {
  501. fill: #333333;
  502. }
  503. .highcharts-range-selector-buttons .highcharts-button {
  504. stroke-width: 0px;
  505. }
  506. .highcharts-range-label rect {
  507. fill: none;
  508. }
  509. .highcharts-range-label text {
  510. fill: #666666;
  511. }
  512. .highcharts-range-input rect {
  513. fill: none;
  514. }
  515. .highcharts-range-input text {
  516. fill: #333333;
  517. }
  518. .highcharts-range-input {
  519. stroke-width: 1px;
  520. stroke: #cccccc;
  521. }
  522. input.highcharts-range-selector {
  523. position: absolute;
  524. border: 0;
  525. width: 1px;
  526. /* Chrome needs a pixel to see it */
  527. height: 1px;
  528. padding: 0;
  529. text-align: center;
  530. left: -9em;
  531. /* #4798 */
  532. }
  533. .highcharts-crosshair-label text {
  534. fill: #ffffff;
  535. font-size: 1.1em;
  536. }
  537. .highcharts-crosshair-label .highcharts-label-box {
  538. fill: inherit;
  539. }
  540. .highcharts-candlestick-series .highcharts-point {
  541. stroke: #000000;
  542. stroke-width: 1px;
  543. }
  544. .highcharts-candlestick-series .highcharts-point-up {
  545. fill: #ffffff;
  546. }
  547. .highcharts-ohlc-series .highcharts-point-hover {
  548. stroke-width: 3px;
  549. }
  550. .highcharts-flags-series .highcharts-point .highcharts-label-box {
  551. stroke: #999999;
  552. fill: #ffffff;
  553. transition: fill 250ms;
  554. }
  555. .highcharts-flags-series .highcharts-point-hover .highcharts-label-box {
  556. stroke: #000000;
  557. fill: #ccd6eb;
  558. }
  559. .highcharts-flags-series .highcharts-point text {
  560. fill: #000000;
  561. font-size: 0.9em;
  562. font-weight: bold;
  563. }
  564. /* Highmaps */
  565. .highcharts-map-series .highcharts-point {
  566. transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
  567. stroke: #cccccc;
  568. }
  569. .highcharts-map-series .highcharts-point-hover {
  570. transition: fill 0ms, fill-opacity 0ms;
  571. fill-opacity: 0.5;
  572. stroke-width: 2px;
  573. }
  574. .highcharts-mapline-series .highcharts-point {
  575. fill: none;
  576. }
  577. .highcharts-heatmap-series .highcharts-point {
  578. stroke-width: 0;
  579. }
  580. .highcharts-map-navigation {
  581. font-size: 1.3em;
  582. font-weight: bold;
  583. text-align: center;
  584. }
  585. .highcharts-coloraxis {
  586. stroke-width: 0;
  587. }
  588. .highcharts-coloraxis-marker {
  589. fill: #999999;
  590. }
  591. .highcharts-null-point {
  592. fill: #f7f7f7;
  593. }
  594. /* 3d charts */
  595. .highcharts-3d-frame {
  596. fill: transparent;
  597. }
  598. /* Exporting module */
  599. .highcharts-contextbutton {
  600. fill: #ffffff;
  601. /* needed to capture hover */
  602. stroke: none;
  603. stroke-linecap: round;
  604. }
  605. .highcharts-contextbutton:hover {
  606. fill: #e6e6e6;
  607. stroke: #e6e6e6;
  608. }
  609. .highcharts-button-symbol {
  610. stroke: #666666;
  611. stroke-width: 3px;
  612. }
  613. .highcharts-menu {
  614. border: 1px solid #999999;
  615. background: #ffffff;
  616. padding: 5px 0;
  617. box-shadow: 3px 3px 10px #888;
  618. }
  619. .highcharts-menu-item {
  620. padding: 0.5em 1em;
  621. background: none;
  622. color: #333333;
  623. cursor: pointer;
  624. transition: background 250ms, color 250ms;
  625. }
  626. .highcharts-menu-item:hover {
  627. background: #335cad;
  628. color: #ffffff;
  629. }
  630. /* Drilldown module */
  631. .highcharts-drilldown-point {
  632. cursor: pointer;
  633. }
  634. .highcharts-drilldown-data-label text,
  635. text.highcharts-drilldown-data-label,
  636. .highcharts-drilldown-axis-label {
  637. cursor: pointer;
  638. fill: #003399;
  639. font-weight: bold;
  640. text-decoration: underline;
  641. }
  642. /* No-data module */
  643. .highcharts-no-data text {
  644. font-weight: bold;
  645. font-size: 12px;
  646. fill: #666666;
  647. }
  648. /* Drag-panes module */
  649. .highcharts-axis-resizer {
  650. cursor: ns-resize;
  651. stroke: black;
  652. stroke-width: 2px;
  653. }
  654. /* Bullet type series */
  655. .highcharts-bullet-target {
  656. stroke-width: 0;
  657. }
  658. /* Lineargauge type series */
  659. .highcharts-lineargauge-target {
  660. stroke-width: 1px;
  661. stroke: #333333;
  662. }
  663. .highcharts-lineargauge-target-line {
  664. stroke-width: 1px;
  665. stroke: #333333;
  666. }
  667. /* Annotations module */
  668. .highcharts-annotation-label-box {
  669. stroke-width: 1px;
  670. stroke: #000000;
  671. fill: #000000;
  672. fill-opacity: 0.75;
  673. }
  674. .highcharts-annotation-label text {
  675. fill: #e6e6e6;
  676. }