Monadic-ScalaFX-Demo/src/main/resources/static/css/main.css

.root {
  -fx-font-family: Roboto;
  src: "/resources/roboto/Roboto-Regular.ttf";
  -fx-text-fill: white;
  -fx-background-color: #14161d;
  /* rgb(38,38,38) */
}

.text-white {
  -fx-text-fill: white;
}

.clear-list-view .scroll-bar:horizontal .track,
.clear-list-view .scroll-bar:vertical .track {
  -fx-background-color: transparent;
  -fx-border-color: transparent;
  -fx-background-radius: 0em;
  -fx-border-radius: 2em;
}

.clear-list-view .scroll-bar:horizontal .increment-button,
.clear-list-view .scroll-bar:horizontal .decrement-button {
  -fx-background-color: transparent;
  -fx-background-radius: 0em;
  -fx-padding: 0 0 10 0;
}

.clear-list-view .scroll-bar:vertical .increment-button,
.clear-list-view .scroll-bar:vertical .decrement-button {
  -fx-background-color: transparent;
  -fx-background-radius: 0em;
  -fx-padding: 0 10 0 0;
}
.clear-list-view .scroll-bar .increment-arrow,
.clear-list-view .scroll-bar .decrement-arrow {
  -fx-shape: " ";
  -fx-padding: 0;
}

.clear-list-view .scroll-bar:horizontal .thumb,
.clear-list-view .scroll-bar:vertical .thumb {
  -fx-background-color: derive(black, 90%);
  -fx-background-insets: 2, 0, 0;
  -fx-background-radius: 2em;
}

.scroll-pane .scroll-bar:horizontal .track,
.scroll-pane .scroll-bar:vertical .track {
  -fx-background-color: transparent;
  -fx-border-color: transparent;
  -fx-background-radius: 0em;
  -fx-border-radius: 2em;
}

.scroll-pane .scroll-bar:horizontal .increment-button,
.scroll-pane .scroll-bar:horizontal .decrement-button {
  -fx-background-color: transparent;
  -fx-background-radius: 0em;
  -fx-padding: 0 0 10 0;
}

.scroll-pane .scroll-bar:vertical .increment-button,
.scroll-pane .scroll-bar:vertical .decrement-button {
  -fx-background-color: transparent;
  -fx-background-radius: 0em;
  -fx-padding: 0 10 0 0;
}
.scroll-pane .scroll-bar .increment-arrow,
.scroll-pane .scroll-bar .decrement-arrow {
  -fx-shape: " ";
  -fx-padding: 0;
}

.scroll-pane .scroll-bar:horizontal .thumb,
.scroll-pane .scroll-bar:vertical .thumb {
  -fx-background-color: derive(black, 90%);
  -fx-background-insets: 2, 0, 0;
  -fx-background-radius: 2em;
}

.scroll-pane {
  -fx-background-color: transparent;
}

.scroll-pane > .viewport {
  -fx-background-color: transparent;
}

.clear-list-view {
  -fx-background-color: rgba(28, 28, 28, 28, 0.4);
  -fx-text-fill: white;
  -fx-background-radius: 20px;
  -fx-padding: 5px 10px;
}

.clear-list-view .list-cell {
  -fx-background-color: transparent;
  -fx-text-fill: white;
}

.clear-list-view .list-cell:selected {
  -fx-background-color: rgba(0, 0, 0, 0.2);
  -fx-text-fill: white;
  -fx-background-radius: 20px;
}

.clear-list-view .list-cell:hover {
  -fx-background-color: rgba(0, 0, 0, 0.1);
  -fx-text-fill: white;
  -fx-background-radius: 20px;
}

.clear-list-view .list-cell:selected:hover {
  -fx-background-color: rgba(0, 0, 0, 0.3);
  -fx-text-fill: white;
  -fx-background-radius: 20px;
}

.clear-list-view:focused .list-cell:selected {
  -fx-background-color: rgba(0, 0, 0, 0.3);
  -fx-text-fill: white;
  -fx-background-radius: 20px;
}