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
@@ -177,12 +177,12 @@
 		.side-nav {
 			background-color: @mantle !important;
 		}
-		
+
 		.teal {
 			background-color: @surface0 !important;
 		}
 
-		/*slide out nav text & icons*/
+		/* slide out nav text & icons */
 		.subheader,
 		.left {
 			color: @text !important;
@@ -213,7 +213,7 @@
 		blockquote {
 			border-left: 5px solid @maroon;
 		}
-		/*code box*/
+		/* code box */
 		.prettyprint,
 		.withBox,
 		.prettyprinted {
@@ -303,7 +303,7 @@
 			filter: saturate(38%) hue-rotate(-25deg) brightness(153%) sepia(6%);
 		}
 
-		/*checkbox*/
+		/* checkbox */
 		[type="checkbox"] + label::before,
 		[type="checkbox"]:not(.filled-in) + label::after {
 			border: 2px solid @subtext0;
@@ -314,11 +314,11 @@
 			border-bottom: 2px solid @green;
 		}
 
-		/*table hover*/
+		/* table hover */
 		div.material-table table tbody tr:hover {
 			background-color: fade(@surface2, 40%);
 		}
-		/*nav hover*/
+		/* nav hover */
 		nav ul a:hover {
 			background-color: fade(@surface2, 40%);
 		}
@@ -331,7 +331,7 @@
 		.input-field .active {
 			color: @accent-color !important;
 		}
-		/*search unfocused*/
+		/* search unfocused */
 		input:not([type]),
 		input[type="text"],
 		input[type="password"],
@@ -348,7 +348,7 @@
 			border-bottom: 1px solid @subtext0;
 			box-shadow: 1 1px 0 0 @subtext0;
 		}
-		/*search focused*/
+		/* search focused */
 		input:not([type]):focus:not([readonly]),
 		input[type="text"]:focus:not([readonly]),
 		input[type="password"]:focus:not([readonly]),
@@ -395,7 +395,7 @@
 			background-color: @mantle !important;
 			color: @subtext0 !important;
 		}
-		
+
 		.btn-large.red {
 			background-color: darken(@red, 30%) !important;
 		}
@@ -411,13 +411,13 @@
 			border-bottom: 1px solid @surface0;
 		}
 
-		/*modals found in custom chart settings*/
+		/* modals found in custom chart settings */
 		.modal .modal-content,
 		.modal .modal-footer {
 			background-color: @surface0;
 		}
 
-		/*custom chart dropdown menu*/
+		/* custom chart dropdown menu */
 		.select-wrapper input.select-dropdown {
 			border-bottom: 1px solid @subtext0;
 		}
@@ -444,7 +444,7 @@
 			color: @overlay1 !important;
 		}
 
-		/*custom chart lever*/
+		/* custom chart lever */
 		.switch label .lever {
 			background-color: @overlay0;
 			&::after {
@@ -459,59 +459,96 @@
 		}
 
 		/* HIGHCHARTS "let's hope this does'nt break"-section */
-		/*all the charts*/
+		/* all the charts */
 		.highcharts-graph when (@graphUseAccentColor=1) {
 			stroke: @accent-color;
 		}
 		.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) {
-			stroke: @overlay0 !important;
-		}
 		.highcharts-point {
-			stroke: @base;
+			stroke: @base !important;
+			& when (@flavor=latte) {
+				stroke: @overlay0 !important;
+			}
 		}
-		/*grid*/
+		/* graph chart grid */
-		.highcharts-grid .highcharts-yaxis-grid,
+		.highcharts-grid.highcharts-yaxis-grid .highcharts-grid-line {
-		.highcharts-grid-line {
 			stroke: @surface0;
 		}
-		.highcharts-axis .highcharts-xaxis,
+		/* bottom timeline line */
 		.highcharts-tick,
-		.highcharts-axis-line {
+		.highcharts-xaxis .highcharts-axis-line {
 			stroke: @surface1;
 		}
-		/*vertical line on graph hover*/
+		/* 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;
 		}
-		/*time navigator on bottom*/
+		/* 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 .highcharts-navigator-outline {
-		.highcharts-navigator-outline {
 			stroke: @surface1;
 		}
-		.highcharts-navigator,
+		/* navigator handles on the left & right */
-		.highcharts-navigator-handle {
+		.highcharts-navigator .highcharts-navigator-handle {
-			fill: @surface2;
+			fill: @surface0;
 			stroke: @overlay1;
 		}
-		/*scrollbar*/
+		/* 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 {
@@ -528,7 +565,7 @@
 		.highcharts-scrollbar-arrow {
 			fill: @mantle;
 		}
-		
+
 		/* buttons */
 		.highcharts-button text {
 			fill: @subtext1 !important;
@@ -573,34 +610,60 @@
 			fill: @base !important;
 			stroke: @surface0 !important;
 		}
-		
+
-		/*pie text*/
+		/* pie text "shadow" */
 		.highcharts-text-outline {
 			stroke: @mantle;
 			stroke-width: 2px;
 		}
-		.highcharts-label,
+		/* pie text */
-		.highcharts-data-label,
+		.highcharts-label.highcharts-data-label tspan {
-		tspan {
 			fill: @subtext1;
 		}
-		.highcharts-label,
+		/* pie subtitle */
-		.highcharts-tooltip span {
+		.highcharts-subtitle tspan {
+			fill: @subtext0;
+		}
+		/* pie hover text */
+		.highcharts-label.highcharts-tooltip text {
+			fill: @subtext1 !important;
 			color: @subtext1 !important;
 		}
-		/*hover text background*/
+		/* 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,
+		/* map legend */
-		.highcharts-legend-title text {
+		/* legend title */
-			fill: @subtext0 !important;
+		.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;
+		}
 	}
 }