JavaFX-RealTime-Chat/chat.css at main · hidanvlad/JavaFX-RealTime-Chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Main Background */
.root {
    -fx-font-family: 'Segoe UI', sans-serif;
    -fx-background-color: #e5ddd5; /* WhatsApp Beige Background */
}

/* The Scrollable Area */
.scroll-pane {
    -fx-background-color: transparent;
    -fx-padding: 10px;
}
.scroll-pane > .viewport {
    -fx-background-color: transparent;
}

/* Input Area at the bottom */
.input-box {
    -fx-background-color: #f0f0f0;
    -fx-padding: 10px;
    -fx-border-color: #cccccc;
    -fx-border-width: 1px 0 0 0;
}

/* The Text Field */
.text-field {
    -fx-background-radius: 20px;
    -fx-border-radius: 20px;
    -fx-padding: 8px 15px;
    -fx-background-color: white;
    -fx-font-size: 14px;
}

/* The Send Button */
.button {
    -fx-background-color: #075e54; /* WhatsApp Dark Green */
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-background-radius: 50%; /* Circle button */
    -fx-min-width: 40px;
    -fx-min-height: 40px;
    -fx-cursor: hand;
}
.button:hover {
    -fx-background-color: #128c7e;
}

/* --- CHAT BUBBLES --- */

/* General Bubble Text */
.chat-bubble {
    -fx-font-size: 14px;
    -fx-padding: 8px 12px;
    -fx-background-radius: 10px;
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.1), 2, 0, 0, 1);
}

/* My Messages (Green, Right) */
.my-message {
    -fx-background-color: #dcf8c6; /* Pastel Green */
    -fx-text-fill: black;
    -fx-background-radius: 10px 0 10px 10px; /* Top-right corner sharp */
}

/* Others' Messages (White, Left) */
.other-message {
    -fx-background-color: #ffffff;
    -fx-text-fill: black;
    -fx-background-radius: 0 10px 10px 10px; /* Top-left corner sharp */
}