feat(bstats): more highcharts theming (#206)
* feat: themed the bar & pie charts * fix: clickable text color in drilldown pie chart * fix: wrong pie chart outline on latte * feat: themed the bar chart legend * fix: wrong "no data to display" text color * fix: wrong color of axis title (in bar charts)
This commit is contained in:
rockquiet
GitHub
parent
c510a905c5
commit
a8b581385c
@ -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.1
|
||||
@version 0.2.0
|
||||
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.css
|
||||
@description Soothing pastel theme for bStats
|
||||
@author Catppuccin
|
||||
@ -479,7 +479,7 @@
|
||||
background: @base !important;
|
||||
}
|
||||
/* map blends in with background on latte flavor */
|
||||
.highcharts-point {
|
||||
.highcharts-map-series .highcharts-point {
|
||||
stroke: @base !important;
|
||||
& when (@flavor=latte) {
|
||||
stroke: @overlay0 !important;
|
||||
@ -620,6 +620,14 @@
|
||||
.highcharts-label.highcharts-data-label tspan {
|
||||
fill: @subtext1;
|
||||
}
|
||||
/* drilldown pie text */
|
||||
.highcharts-label.highcharts-data-label.highcharts-drilldown-data-label tspan {
|
||||
fill: @blue;
|
||||
}
|
||||
.highcharts-label.highcharts-data-label.highcharts-drilldown-data-label text {
|
||||
fill: @blue !important;
|
||||
color: @blue !important;
|
||||
}
|
||||
/* pie subtitle */
|
||||
.highcharts-subtitle tspan {
|
||||
fill: @subtext0;
|
||||
@ -644,6 +652,14 @@
|
||||
.highcharts-label.highcharts-tooltip span:not(div.highcharts-label > span:nth-child(1) > span:nth-child(1)) {
|
||||
color: @subtext1 !important;
|
||||
}
|
||||
/* "No data to display" */
|
||||
.highcharts-label.highcharts-no-data tspan {
|
||||
fill: @subtext1;
|
||||
}
|
||||
/* axis label */
|
||||
.highcharts-axis-title tspan {
|
||||
fill: @subtext1;
|
||||
}
|
||||
|
||||
/* hover text background */
|
||||
.highcharts-label-box,
|
||||
@ -651,7 +667,7 @@
|
||||
fill: @surface0;
|
||||
}
|
||||
|
||||
/* map legend */
|
||||
/* legend */
|
||||
/* legend title */
|
||||
.highcharts-label.highcharts-legend-title text {
|
||||
fill: @subtext1 !important;
|
||||
@ -665,5 +681,136 @@
|
||||
.highcharts-legend-item .highcharts-grid.highcharts-coloraxis-grid .highcharts-grid-line {
|
||||
stroke: @base;
|
||||
}
|
||||
/* background only for bar chart legend */
|
||||
.highcharts-legend .highcharts-legend-box[fill="#FFFFFF"][stroke="#999999"] {
|
||||
fill: @surface0 !important;
|
||||
stroke: @surface1 !important;
|
||||
}
|
||||
/* bar chart entries */
|
||||
.highcharts-legend .highcharts-legend-item.highcharts-bar-series tspan {
|
||||
fill: @subtext1 !important;
|
||||
&:hover {
|
||||
fill: @text !important;
|
||||
}
|
||||
}
|
||||
.highcharts-legend .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden tspan {
|
||||
fill: @overlay2 !important;
|
||||
&:hover {
|
||||
fill: @subtext0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.highcharts-point {
|
||||
stroke: @base !important;
|
||||
}
|
||||
/* bar chart circle outline */
|
||||
.highcharts-legend .highcharts-legend-item.highcharts-bar-series rect {
|
||||
stroke: none !important;
|
||||
}
|
||||
/* disabled bar chart circle */
|
||||
.highcharts-legend .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden rect {
|
||||
fill: @overlay0 !important;
|
||||
stroke: none !important;
|
||||
}
|
||||
/* bar & pie chart colors */
|
||||
/* color 0 */
|
||||
.highcharts-point.highcharts-color-0,
|
||||
.highcharts-halo.highcharts-color-0,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-0 rect {
|
||||
fill: @red !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-0 {
|
||||
stroke: @red !important;
|
||||
}
|
||||
/* color 1 */
|
||||
.highcharts-point.highcharts-color-1,
|
||||
.highcharts-halo.highcharts-color-1,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-1 rect {
|
||||
fill: @green !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-1 {
|
||||
stroke: @green !important;
|
||||
}
|
||||
/* color 2 */
|
||||
.highcharts-point.highcharts-color-2,
|
||||
.highcharts-halo.highcharts-color-2,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-2 rect {
|
||||
fill: @sky !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-2 {
|
||||
stroke: @sky !important;
|
||||
}
|
||||
/* color 3 */
|
||||
.highcharts-point.highcharts-color-3,
|
||||
.highcharts-halo.highcharts-color-3,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-3 rect {
|
||||
fill: @peach !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-3 {
|
||||
stroke: @peach !important;
|
||||
}
|
||||
/* color 4 */
|
||||
.highcharts-point.highcharts-color-4,
|
||||
.highcharts-halo.highcharts-color-4,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-4 rect {
|
||||
fill: @yellow !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-4 {
|
||||
stroke: @yellow !important;
|
||||
}
|
||||
/* color 5 */
|
||||
.highcharts-point.highcharts-color-5,
|
||||
.highcharts-halo.highcharts-color-5,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-5 rect {
|
||||
fill: @teal !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-5 {
|
||||
stroke: @teal !important;
|
||||
}
|
||||
/* color 6 */
|
||||
.highcharts-point.highcharts-color-6,
|
||||
.highcharts-halo.highcharts-color-6,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-6 rect {
|
||||
fill: @pink !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-6 {
|
||||
stroke: @pink !important;
|
||||
}
|
||||
/* color 7 */
|
||||
.highcharts-point.highcharts-color-7,
|
||||
.highcharts-halo.highcharts-color-7,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-7 rect {
|
||||
fill: @flamingo !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-7 {
|
||||
stroke: @flamingo !important;
|
||||
}
|
||||
/* color 8 */
|
||||
.highcharts-point.highcharts-color-8,
|
||||
.highcharts-halo.highcharts-color-8,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-8 rect {
|
||||
fill: @subtext0 !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-8 {
|
||||
stroke: @subtext0 !important;
|
||||
}
|
||||
/* color 9 */
|
||||
.highcharts-point.highcharts-color-9,
|
||||
.highcharts-halo.highcharts-color-9,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-9 rect {
|
||||
fill: @blue !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-9 {
|
||||
stroke: @blue !important;
|
||||
}
|
||||
/* color 10 */
|
||||
.highcharts-point.highcharts-color-10,
|
||||
.highcharts-halo.highcharts-color-10,
|
||||
.highcharts-legend-item.highcharts-bar-series.highcharts-color-10 rect {
|
||||
fill: @mauve !important;
|
||||
}
|
||||
.highcharts-data-label-connector.highcharts-color-10 {
|
||||
stroke: @mauve !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user