Hugging Face's logo

Spaces:
ayush2917
/
BirthdayM
Sleeping

App Files Community
ayush2917 commited on
Commit
bf45478
·
verified ·
1 Parent(s): 2b18c53

Update static/css/chat.css

Browse files
Files changed (1) hide show
  1. static/css/chat.css +67 -9
static/css/chat.css CHANGED
@@ -1,14 +1,72 @@
1
- /* static/css/chat.css */
2
  .chat-container {
3
- background: rgba(255, 255, 255, 0.9);
 
 
 
 
 
 
 
 
 
4
  padding: 20px;
5
- border-radius: 10px;
6
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
7
- animation: fadeIn 2s ease-in-out;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
 
10
- .chat-container h1 {
11
- font-size: 2.5em;
12
- color: #FF4500;
13
- text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
14
  }
 
 
1
  .chat-container {
2
+ max-width: 800px;
3
+ margin: 0 auto;
4
+ border: 1px solid #ddd;
5
+ border-radius: 8px;
6
+ overflow: hidden;
7
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
8
+ }
9
+
10
+ .chat-history {
11
+ height: 400px;
12
  padding: 20px;
13
+ overflow-y: auto;
14
+ background-color: #f9f9f9;
15
+ }
16
+
17
+ .message {
18
+ margin-bottom: 15px;
19
+ padding: 10px 15px;
20
+ border-radius: 18px;
21
+ max-width: 70%;
22
+ word-wrap: break-word;
23
+ }
24
+
25
+ .user-message {
26
+ background-color: #e3f2fd;
27
+ margin-left: auto;
28
+ border-bottom-right-radius: 0;
29
+ }
30
+
31
+ .krishna-message {
32
+ background-color: #f1f1f1;
33
+ margin-right: auto;
34
+ border-bottom-left-radius: 0;
35
+ }
36
+
37
+ .system-message {
38
+ background-color: #ffebee;
39
+ margin: 10px auto;
40
+ text-align: center;
41
+ font-style: italic;
42
+ max-width: 90%;
43
+ }
44
+
45
+ .chat-form {
46
+ display: flex;
47
+ padding: 15px;
48
+ background-color: #fff;
49
+ border-top: 1px solid #eee;
50
+ }
51
+
52
+ .chat-form input {
53
+ flex: 1;
54
+ padding: 10px 15px;
55
+ border: 1px solid #ddd;
56
+ border-radius: 20px;
57
+ outline: none;
58
+ }
59
+
60
+ .chat-form button {
61
+ margin-left: 10px;
62
+ padding: 10px 20px;
63
+ background-color: #4CAF50;
64
+ color: white;
65
+ border: none;
66
+ border-radius: 20px;
67
+ cursor: pointer;
68
  }
69
 
70
+ .chat-form button:hover {
71
+ background-color: #45a049;
 
 
72
  }