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
This commit is contained in:
rockquiet
GitHub
parent
f16f4c9b12
commit
9b67098d34
styles/bstats
BIN
styles/bstats/assets/catwalk.webp
(Stored with Git LFS)
BIN
styles/bstats/assets/catwalk.webp
(Stored with Git LFS)
Binary file not shown.
BIN
styles/bstats/assets/frappe.webp
(Stored with Git LFS)
BIN
styles/bstats/assets/frappe.webp
(Stored with Git LFS)
Binary file not shown.
BIN
styles/bstats/assets/latte.webp
(Stored with Git LFS)
BIN
styles/bstats/assets/latte.webp
(Stored with Git LFS)
Binary file not shown.
BIN
styles/bstats/assets/macchiato.webp
(Stored with Git LFS)
BIN
styles/bstats/assets/macchiato.webp
(Stored with Git LFS)
Binary file not shown.
BIN
styles/bstats/assets/mocha.webp
(Stored with Git LFS)
BIN
styles/bstats/assets/mocha.webp
(Stored with Git LFS)
Binary file not shown.
@ -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*/
|
||||
.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;
|
||||
}
|
||||
/*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-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;
|
||||
}
|
||||
/*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,
|
||||
.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 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,
|
||||
.highcharts-legend-title text {
|
||||
fill: @subtext0 !important;
|
||||
|
||||
/* map legend */
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user