Hugging Face's logo

Spaces:
Subbu1304
/
aichatbot
Sleeping

App Files Community
Subbu1304 commited on
Commit
fa585f1
·
verified ·
1 Parent(s): d5ab082

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +82 -40
static/styles.css CHANGED
@@ -1,55 +1,97 @@
1
- /* Customizing Gradio's Chatbot */
2
- .gradio-container {
3
- font-family: Arial, sans-serif;
4
- background-color: #f5f5f5;
 
 
 
 
 
 
5
  }
6
 
7
- #chatbot-container {
8
- max-width: 800px;
9
- margin: auto;
10
- padding: 20px;
11
- background-color: #fff;
12
- border-radius: 10px;
13
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
14
  }
15
 
16
- #chatbot-container .gradio-chatbot {
17
- border: 1px solid #e0e0e0;
18
- padding: 10px;
19
- background-color: #fafafa;
20
- border-radius: 8px;
21
- max-height: 400px;
22
- overflow-y: auto;
23
  }
24
 
25
- #chatbot-container .gradio-chatbot .message {
26
- padding: 8px 15px;
27
- margin: 5px 0;
28
- border-radius: 10px;
29
- max-width: 75%;
30
- word-wrap: break-word;
31
  }
32
 
33
- #chatbot-container .gradio-chatbot .message.bot {
34
- background-color: #e0e0e0;
35
- margin-left: 20px;
 
 
 
 
36
  }
37
 
38
- #chatbot-container .gradio-chatbot .message.user {
39
- background-color: #3b82f6;
40
- color: white;
41
- margin-right: 20px;
42
- text-align: right;
43
  }
44
 
45
- .gradio-button {
46
- background-color: #3b82f6;
47
- color: white;
48
- border: none;
49
- border-radius: 8px;
50
- padding: 10px 20px;
51
  }
52
 
53
- .gradio-button:hover {
54
- background-color: #2563eb;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  }
 
1
+ /* General Styles */
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ background-color: #f8f9fa;
5
+ margin: 0;
6
+ padding: 0;
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ height: 100vh;
11
  }
12
 
13
+ .chat-container {
14
+ width: 400px;
15
+ background-color: #ffffff;
16
+ border-radius: 10px;
17
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18
+ overflow: hidden;
 
19
  }
20
 
21
+ .chat-header {
22
+ background-color: #3b82f6;
23
+ color: #ffffff;
24
+ padding: 10px;
25
+ text-align: center;
 
 
26
  }
27
 
28
+ .chat-box {
29
+ padding: 15px;
30
+ max-height: 300px;
31
+ overflow-y: auto;
32
+ background-color: #f0f4f8;
 
33
  }
34
 
35
+ .bot-message,
36
+ .user-message {
37
+ background-color: #e0e0e0;
38
+ padding: 10px;
39
+ margin: 5px 0;
40
+ border-radius: 8px;
41
+ max-width: 80%;
42
  }
43
 
44
+ .user-message {
45
+ background-color: #3b82f6;
46
+ color: #ffffff;
47
+ align-self: flex-end;
 
48
  }
49
 
50
+ .user-input {
51
+ display: flex;
52
+ padding: 10px;
53
+ background-color: #ffffff;
54
+ border-top: 1px solid #e0e0e0;
 
55
  }
56
 
57
+ .user-input input {
58
+ flex: 1;
59
+ padding: 10px;
60
+ border: 1px solid #ddd;
61
+ border-radius: 8px;
62
+ margin-right: 10px;
63
+ }
64
+
65
+ .user-input button {
66
+ padding: 10px 20px;
67
+ background-color: #3b82f6;
68
+ color: white;
69
+ border: none;
70
+ border-radius: 8px;
71
+ cursor: pointer;
72
+ }
73
+
74
+ .user-input button:hover {
75
+ background-color: #2563eb;
76
+ }
77
+
78
+ .dropdown {
79
+ width: 100%;
80
+ padding: 10px;
81
+ border-radius: 8px;
82
+ margin-top: 10px;
83
+ }
84
+
85
+ #submit-btn {
86
+ width: 100px;
87
+ background-color: #3b82f6;
88
+ color: white;
89
+ border: none;
90
+ padding: 10px;
91
+ border-radius: 8px;
92
+ cursor: pointer;
93
+ }
94
+
95
+ #submit-btn:hover {
96
+ background-color: #2563eb;
97
  }