dark-unica.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. // Global font
  2. @import 'https://fonts.googleapis.com/css?family=Unica+One';
  3. // Chart background, point stroke for markers and columns etc
  4. $background-color: #2a2a2b;
  5. // Colors for data series and points.
  6. $colors: #2b908f #90ee7e #f45b5b #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee;
  7. // Neutral colors
  8. $neutral-color-100: #fff;
  9. $neutral-color-80: #E0E0E3;
  10. $neutral-color-60: #E0E0E3;
  11. $neutral-color-40: #666;
  12. $neutral-color-20: #606063;
  13. $neutral-color-10: #707073;
  14. $neutral-color-5: #505053;
  15. // Colored, shades
  16. $highlight-color-100: #F0F0F3;
  17. $highlight-color-60: rgba(255,255,255,0.1);
  18. $highlight-color-20: $neutral-color-10;
  19. // Data-labels
  20. $data-label-color: #B0B0B3;
  21. // Fonts
  22. $font-family: 'Unica One', Arial, Helvetica, sans-serif;
  23. $title-font-size: 20px;
  24. // Tooltip
  25. $tooltip-background: rgba(0, 0, 0, 0.85);
  26. // Range-selector
  27. $range-selector-input-text: silver;
  28. $range-selector-input-border: $neutral-color-5;
  29. // Buttons
  30. $highcharts-button-background: $neutral-color-5;
  31. $highcharts-button-text: #ccc;
  32. $highcharts-button-pressed-background: #000003;
  33. $highcharts-button-pressed-text: $neutral-color-100;
  34. $highcharts-button-hover-background: $neutral-color-10;
  35. $highcharts-button-hover-text: $neutral-color-100;
  36. $context-button-background: $neutral-color-5;
  37. // Navigator
  38. $navigator-series-fill: #7798BF;
  39. $navigator-series-border: #A6C7ED;
  40. // Navigator
  41. $scrollbar-track-background: #404043;
  42. $scrollbar-track-border: #404043;
  43. // Titles
  44. .highcharts-title, .highcharts-subtitle {
  45. text-transform: uppercase;
  46. }
  47. // Tooltip
  48. .highcharts-tooltip text {
  49. fill: #F0F0F0
  50. }
  51. // Range-selector
  52. .highcharts-range-selector-buttons text {
  53. fill: silver;
  54. }
  55. // Axes
  56. .highcharts-yaxis-grid {
  57. stroke-width: 1px;
  58. }
  59. .highcharts-axis-labels, .highcharts-axis-title {
  60. fill: #E0E0E3;
  61. }
  62. // Navigator
  63. .highcharts-navigator .highcharts-navigator-handle {
  64. fill: $neutral-color-40;
  65. stroke: #aaa;
  66. }
  67. .highcharts-navigator .highcharts-navigator-outline {
  68. stroke: #CCC;
  69. }
  70. .highcharts-navigator .highcharts-navigator-xaxis .highcharts-grid-line {
  71. stroke: $neutral-color-5;
  72. }
  73. // Scrollbar
  74. .highcharts-scrollbar .highcharts-scrollbar-rifles {
  75. stroke: $neutral-color-100;
  76. }
  77. .highcharts-scrollbar .highcharts-scrollbar-button {
  78. stroke: #606063;
  79. fill: #606063;
  80. }
  81. .highcharts-scrollbar .highcharts-scrollbar-arrow {
  82. fill: #CCC;
  83. }
  84. .highcharts-scrollbar .highcharts-scrollbar-thumb {
  85. fill: #808083;
  86. stroke: #808083;
  87. }
  88. // Navigation
  89. .highcharts-contextbutton .highcharts-button-symbol {
  90. stroke: #DDDDDD;
  91. }
  92. @import '../highcharts';