highcharts.scss 19 KB

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