How to use CSS ladder on Tab's header text?

csh

Hi,

I have a TabPane which I've customized with CSS. I want a dark background when a Tab is hovered or selected. but also want a bright text-fill color for the Tab header text.

I hoped I could solve this by using the CSS ladder function, in fact TabPane already uses it, but it has no effect.

Can somebody help?

The goal is that the tab header text color adapts to the Tab's background color, preferably using CSS ladder.

App:

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Tab;

import javafx.scene.control.TabPane;

import javafx.stage.Stage;

public class TestApp3 extends Application {

   public static void main(String[] args) {

   launch(args);

  }

   @Override
   public void start(final Stage stage) throws Exception {

  TabPane tabPane = new TabPane();

  tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);

  tabPane.getTabs().add(new Tab("Tab1"));

  tabPane.getTabs().add(new Tab("Tab2"));

  Scene scene = new Scene(tabPane);

  stage.setScene(scene);

  scene.getStylesheets().addAll("styles.css");

  stage.show();

  }

}

styles.css:

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {

   -fx-text-fill: ladder(-fx-background, white 49%, black 50%); /* Has no effect, what I am doing wrong? */
}

.tab-pane > .tab-header-area > .headers-region > .tab {

   -fx-background-color: #000000;

}

.tab-pane > .tab-header-area > .headers-region > .tab:hover {

   -fx-background-color: #000000;

}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {

   -fx-background-color: -fx-background;

}

bekwam

Try this

.tab {

   -fx-background-color: white;

}

.tab:hover, .tab:selected {

   -fx-background-color: black;

}

.tab-label {

   background: white;

   -fx-text-fill: ladder(background, white 49%, black 50%);

}

.tab-label:hover, .tab:selected > .tab-container > .tab-label {

   background: black;

   -fx-text-fill: ladder(background, white 49%, black 50%);

}