The question is published on by Tutorial Guruji team.
my current styling pattern is ({0} is replaced with bar specific color code)
"-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,-30%)) "
+ "(100%, derive(-fx-bar-fill,-40%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,80%)) "
+ "(100%, derive(-fx-bar-fill, 0%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,30%)) "
+ "(100%, derive(-fx-bar-fill,-10%));"
+ "-fx-background-insets: 0,1,2;"
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;";
This looks like this:
The problem is that I get a parser warning because of deprecated linear syntax.
I tried to refactor the styling pattern to linear-gradient without changing the result using the guide but I don’t get it.
Can anyone solve this?
Answer
The deprecated version defines three backgrounds.
Each background starts with linear.
These backgrounds work like layers.
So the only thing I had to do was to create three backgrounds, too.
My first solution separeted the backgrounds with ; which leads to a parsing error.
The backgrounds have to be separeted by comma.
The border of the bars are created by reducing the drawing area using -fx-background-insets.
My final solution is
"-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg1
+ "derive(-fx-bar-fill, -30%), derive(-fx-bar-fill, -40%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg2
+ "derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg3
+ "derive(-fx-bar-fill, 30%), derive(-fx-bar-fill, -10%));"
+ "-fx-background-insets: 0,1,2;" // reducing drawing area for each bg
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;"