highcharts.scss 20 KB

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