fix(bstats): improve highcharts theming (#201)

* fix: improved highcharts theming

- hovering over a line graph is now themed
- fix theming of the time navigator
- "graps use accent color" is now fully finished
- map legend & info box when hovering over the map is now properly themed

* update images

styles/bstats/catppuccin.user.css

@@ -2,7 +2,7 @@
 @name bStats Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/bstats
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bstats
-@version 0.1.0
+@version 0.1.1
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.css
 @description Soothing pastel theme for bStats
 @author Catppuccin
@@ -466,52 +466,89 @@
 		.highcharts-graph when (@graphUseAccentColor=0) {
 			stroke: @red;
 		}
+		/* "shadow" area below graph in time navigator */
+		.highcharts-area {
+			fill: fade(@red, 5%) !important;
+			& when (@graphUseAccentColor=1) {
+				fill: fade(@accent-color, 5%) !important;
+			}
+		}
 
-		/*background*/
+		/* charts background */
 		.highcharts-container {
 			background: @base !important;
 		}
 		/* map blends in with background on latte flavor */
-		.highcharts-point when (@flavor=latte) {
+		.highcharts-point {
+			stroke: @base !important;
+			& when (@flavor=latte) {
 				stroke: @overlay0 !important;
 			}
-		.highcharts-point {
-			stroke: @base;
 		}
-		/*grid*/
-		.highcharts-grid .highcharts-yaxis-grid,
-		.highcharts-grid-line {
+		/* graph chart grid */
+		.highcharts-grid.highcharts-yaxis-grid .highcharts-grid-line {
 			stroke: @surface0;
 		}
-		.highcharts-axis .highcharts-xaxis,
+		/* bottom timeline line */
 		.highcharts-tick,
-		.highcharts-axis-line {
+		.highcharts-xaxis .highcharts-axis-line {
 			stroke: @surface1;
 		}
+		/* bottom timeline & y axis text text */
+		.highcharts-axis-labels.highcharts-xaxis-labels text,
+		.highcharts-axis-labels.highcharts-yaxis-labels text {
+			fill: @subtext1 !important;
+		}
+
 		/* vertical line on graph hover */
 		.highcharts-crosshair,
 		.highcharts-crosshair-thin {
 			stroke: @overlay2;
 		}
+		/* circle marker on graph */
+		.highcharts-markers .highcharts-halo.highcharts-color-0 {
+			fill: @red !important;
+			stroke: none !important;
+			& when (@graphUseAccentColor=1) {
+				fill: @accent-color !important;
+			}
+		}
+		.highcharts-markers path {
+			fill: @red !important;
+			stroke: @base !important;
+			& when (@graphUseAccentColor=1) {
+				fill: @accent-color !important;
+			}
+		}
+
 		/* time navigator on bottom */
+		/* active time span */
 		.highcharts-navigator,
 		.highcharts-navigator-mask-inside {
 			fill: fade(@surface1, 33%);
 		}
-		.highcharts-navigator,
-		.highcharts-navigator-outline {
+		.highcharts-navigator .highcharts-navigator-outline {
 			stroke: @surface1;
 		}
-		.highcharts-navigator,
-		.highcharts-navigator-handle {
-			fill: @surface2;
+		/* navigator handles on the left & right */
+		.highcharts-navigator .highcharts-navigator-handle {
+			fill: @surface0;
 			stroke: @overlay1;
 		}
+		/* vertical timestamp lines */
+		.highcharts-grid.highcharts-xaxis-grid.highcharts-navigator-xaxis .highcharts-grid-line {
+			stroke: @surface1;
+		}
+		/* time navigator timestamp text */
+		.highcharts-xaxis-labels.highcharts-navigator-xaxis tspan {
+			fill: @subtext0 !important;
+		}
+
 		/* scrollbar */
 		.highcharts-scrollbar,
 		.highcharts-scrollbar-track {
 			fill: @surface0;
-			stroke: @surface0;
+			stroke: @surface1;
 		}
 		.highcharts-scrollbar,
 		.highcharts-scrollbar-thumb {
@@ -574,33 +611,59 @@
 			stroke: @surface0 !important;
 		}
 
-		/*pie text*/
+		/* pie text "shadow" */
 		.highcharts-text-outline {
 			stroke: @mantle;
 			stroke-width: 2px;
 		}
-		.highcharts-label,
-		.highcharts-data-label,
-		tspan {
+		/* pie text */
+		.highcharts-label.highcharts-data-label tspan {
 			fill: @subtext1;
 		}
-		.highcharts-label,
-		.highcharts-tooltip span {
+		/* pie subtitle */
+		.highcharts-subtitle tspan {
+			fill: @subtext0;
+		}
+		/* pie hover text */
+		.highcharts-label.highcharts-tooltip text {
+			fill: @subtext1 !important;
 			color: @subtext1 !important;
 		}
+		/* hover text */
+		.highcharts-label.highcharts-tooltip-box tspan {
+			fill: @subtext1;
+		}
+		/* hover text red dot */
+		.highcharts-label.highcharts-tooltip-box tspan[style="fill:#F44336"] {
+			fill: @red !important;
+			& when (@graphUseAccentColor=1) {
+				fill: @accent-color !important;
+			}
+		}
+		/* map hover text */
+		.highcharts-label.highcharts-tooltip span:not(div.highcharts-label > span:nth-child(1) > span:nth-child(1)) {
+			color: @subtext1 !important;
+		}
+
 		/* hover text background */
 		.highcharts-label-box,
 		.highcharts-tooltip-box {
 			fill: @surface0;
 		}
+
 		/* map legend */
-		.highcharts-label,
-		.highcharts-legend-title text {
-			fill: @subtext0 !important;
+		/* legend title */
+		.highcharts-label.highcharts-legend-title text {
+			fill: @subtext1 !important;
 		}
+		/* legend labels */
 		.highcharts-axis-labels,
 		.highcharts-coloraxis-labels text {
 			fill: @subtext0 !important;
 		}
+		/* vertical lines */
+		.highcharts-legend-item .highcharts-grid.highcharts-coloraxis-grid .highcharts-grid-line {
+			stroke: @base;
+		}
 	}
 }