Overriding caspian.css -fx-background

[John Hendrikx]

So,

I'm having huge problems trying to make a simple change to a control to
give it a custom look. Something that used to look exactly right on
JavaFX 2.2 is now (since say 6 months) being overriden by the standard
css and I just cannot find any way to get rid of it. It seems to be
related to an (undocumented??) property -fx-background -- I cannot find
what this does, but it seems to specify a background color, just like
-fx-background-color.... although they're often used in combination,
like so:

.list-view:focused > .virtual-flow > .clipped-container > .sheet >
.list-cell:filled:focused:selected {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border,
-fx-selection-bar;
-fx-background-insets: 0, 1, 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
}

Note that -fx-focus-color is the same as -fx-accent...

Anyway, I want to override this standard "caspian bright blue" color
used to highlight items to something else. For TreeCells, this used to
be enough:

.list-cell:focused, .tree-cell:focused {
-fx-background-insets: 1, 1, 1;
-fx-background-color: radial-gradient(center 25% 0%, radius 25%,
color-blue 0%, transparent),
radial-gradient(center 75% 100%, radius 25%,
color-blue 0%, transparent),
linear-gradient(to right, transparent,
color-blue-20 15%, color-blue-20 85%, transparent);
}

...but the only time this gradient will show is when my Stage does not
have the focus (or I guess when the tree control it is used in does not
have the focus -- I don't know, I only have one control).

Now, no matter what I do, when the window has the focus and some cell is
selected, it will display that solid blue highlight color in
caspian.css... and I've tried a lot of things. For some reason
-fx-background is overriding whatever I do with -fx-background-color. I
tried this for example:

.tree-view:focused .tree-cell:focused,
.tree-view:focused .tree-cell:selected,
.tree-view:focused .tree-cell:focused:filled,
.tree-view:focused .tree-cell:selected:filled,
.list-cell:focused, .tree-cell:focused,
.list-cell:focused:selected, .tree-cell:focused:selected,
.list-cell:focused:filled, .tree-cell:focused:filled,
.list-cell:focused:selected:filled, .tree-cell:focused:selected:filled,
.list-cell:selected:filled, .tree-cell:selected:filled,
.list-cell:selected, .tree-cell:selected {
-fx-background: transparent;
-fx-background-insets: 1, 1, 1;
-fx-background-color: radial-gradient(center 25% 0%, radius 25%,
color-blue 0%, transparent),
radial-gradient(center 75% 100%, radius 25%,
color-blue 0%, transparent),
linear-gradient(to right, transparent,
color-blue-20 15%, color-blue-20 85%, transparent);
}

Note the "-fx-background: transparent". No matter what I put there, or
even if I leave it out, it will override the gradient I set. So putting
"-fx-background: black" results in a black background, no gradient
(except when unfocused). Putting transparent makes it caspian blue
(aargh), no gradient... leave it out completely, and I get caspian
blue... set it to null, I get a transparent background (or black, I
can't tell) but still no gradient.

How do I just show my gradient??

--John

[David Grieve]

Probably a question better put to the OTN forums, but…

In caspian.css, you'll find

/* A very light grey used for the background of windows. See also
* -fx-text-background-color, which should be used as the -fx-text-fill
* value for text painted on top of backgrounds colored with -fx-background.
*/
-fx-background: #f4f4f4;

and

/* A bright blue for highlighting/accenting objects. For example: selected
* text; selected items in menus, lists, trees, and tables; progress bars;
* default buttons.
*/
-fx-accent: #0093ff;

So if you want to change the bright blue, play with the accent color. For example, in your stylesheet you could change the accent color to yellow by
.root { -fx-accent: yellow; }

Note that by the way it is used in caspian, it needs to be a Color, not a Paint.

So,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
-fx-background-insets: 0, 1, 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
}
Note that -fx-focus-color is the same as -fx-accent...
.list-cell:focused, .tree-cell:focused {
-fx-background-insets: 1, 1, 1;
-fx-background-color: radial-gradient(center 25% 0%, radius 25%, color-blue 0%, transparent),
radial-gradient(center 75% 100%, radius 25%, color-blue 0%, transparent),
linear-gradient(to right, transparent, color-blue-20 15%, color-blue-20 85%, transparent);
}
...but the only time this gradient will show is when my Stage does not have the focus (or I guess when the tree control it is used in does not have the focus -- I don't know, I only have one control).
.tree-view:focused .tree-cell:focused,
.tree-view:focused .tree-cell:selected,
.tree-view:focused .tree-cell:focused:filled,
.tree-view:focused .tree-cell:selected:filled,
.list-cell:focused, .tree-cell:focused,
.list-cell:focused:selected, .tree-cell:focused:selected,
.list-cell:focused:filled, .tree-cell:focused:filled,
.list-cell:focused:selected:filled, .tree-cell:focused:selected:filled,
.list-cell:selected:filled, .tree-cell:selected:filled,
.list-cell:selected, .tree-cell:selected {
-fx-background: transparent;
-fx-background-insets: 1, 1, 1;
-fx-background-color: radial-gradient(center 25% 0%, radius 25%, color-blue 0%, transparent),
radial-gradient(center 75% 100%, radius 25%, color-blue 0%, transparent),
linear-gradient(to right, transparent, color-blue-20 15%, color-blue-20 85%, transparent);
}
Note the "-fx-background: transparent". No matter what I put there, or even if I leave it out, it will override the gradient I set. So putting "-fx-background: black" results in a black background, no gradient (except when unfocused). Putting transparent makes it caspian blue (aargh), no gradient... leave it out completely, and I get caspian blue... set it to null, I get a transparent background (or black, I can't tell) but still no gradient.
How do I just show my gradient??
--John