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
