I've been working on my JavaFX project and incorporating the JFoenix library for added functionality. Everything has been going smoothly as I customize the appearance of TabPane through CSS styling. However, one issue persists - the tab header labels and bottom strip seem to have a blurry or shadow effect that I can't quite figure out how to resolve. Here's a snippet of my current CSS code:
.jfx-tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.tab{
-fx-pref-width: 350;
-fx-pref-height: 50;
}
.jfx-tab-pane .tab-selected-line {
-fx-background-color: -fx-secondary;
}
.jfx-tab-pane .tab .tab-label {
-fx-font-weight: normal;
-fx-text-fill: -fx-primatytext;
-fx-font-size: 16;
}
.jfx-tab-pane .tab-header-area .jfx-rippler{
-jfx-rippler-fill :-fx-secondary;
}
.jfx-tab-pane .tab-selected-line{
-fx-stroke : -fx-secondary;
}
Here is an illustration of the issue:
https://i.sstatic.net/Hnyt9.png
Notice how the design of the tabpane headers appears to have a slight shadow or blurry effect, unlike other elements in the UI. Can anyone provide guidance on how to address this problem?