Chatto-Desktop-ScalaFX/src/main/resources/styles/chat.css

/* .ikonli-font-icon {
  -fx-icon-size: 100px;
  -fx-icon-color: blue;
} */

.ikonli-font-icon:hover {
  -fx-icon-color: #1976a8;
}

#chatMainPane {
  -fx-padding: 5px;
}

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

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

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

.my-list-view .scroll-bar:horizontal .thumb,
.my-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;
}

.chat-message-sender-box {
  -fx-text-fill: white;
  -fx-background-color: LIGHTGREEN;
  /* -fx-background-color: #82ccdd; */
  -fx-background-radius: 30px;
  -fx-padding: 20px;
}

.chat-message-receiver-box {
  -fx-text-fill: white;
  /* -fx-background-color: LIGHTGREEN; */
  -fx-background-color: #82ccdd;
  -fx-background-radius: 30px;
  -fx-padding: 20px;
}

.chat-background {
  -fx-background-color: rgba(0, 0, 0, 0.4);
  /* -fx-selection-bar: rgba(0, 0, 0, 0.5); */
  -fx-text-fill: white;
  -fx-background-radius: 20px;
  -fx-padding: 5px 10px;
}

.my-list-view {
  -fx-background-color: rgba(0, 0, 0, 0.4);
  /* -fx-selection-bar: rgba(0, 0, 0, 0.5); */
  -fx-text-fill: white;
  -fx-background-radius: 20px;
  -fx-padding: 5px 10px;
}

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

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

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

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

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

.text-area {
  -fx-text-fill: white;
  -fx-border-radius: 20px;
}

.text-area .content {
  -fx-background-color: rgb(116, 116, 116);
  -fx-background-radius: 20px;
}

.text-area {
  -fx-background-color: rgba(53, 89, 119, 0.4);
}

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

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

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

#chatInput {
  -fx-text-fill: white;
  -fx-background-radius: 20px;
  -fx-padding: 5px 10px;
}