Hugging Face's logo

Spaces:
Arrcttacsrks
/
Llama-3.2-3B_ChatX
Sleeping

App Files Community
Arrcttacsrks commited on
Commit
f46606f
·
verified ·
1 Parent(s): 43d4650

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +100 -48
style.css CHANGED
@@ -1,79 +1,131 @@
 
 
 
 
 
 
 
1
  body {
2
- background-color: #f7f9fc;
3
- font-family: 'Arial', sans-serif;
 
 
 
 
 
4
  }
5
 
6
  .chat-container {
7
- width: 90%;
8
- max-width: 600px;
9
- margin: 50px auto;
10
- background-color: white;
11
- border-radius: 10px;
12
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
13
- padding: 20px;
14
  display: flex;
15
  flex-direction: column;
 
 
 
 
16
  }
17
 
18
- h1 {
 
 
 
19
  text-align: center;
20
- color: #333;
 
21
  }
22
 
23
- #chat-box {
24
- height: 400px;
 
25
  overflow-y: auto;
26
- border: 1px solid #ccc;
27
- border-radius: 5px;
28
- padding: 10px;
29
- margin-bottom: 10px;
30
- background: linear-gradient(to bottom, #ffffff, #f0f0f0);
 
 
 
 
 
 
 
 
 
 
31
  }
32
 
33
  .user-message {
34
- text-align: right;
35
- background-color: #cce5ff;
36
- padding: 10px;
37
- border-radius: 5px;
38
- margin: 5px 0;
39
- display: inline-block;
40
- max-width: 80%;
41
- animation: fadeIn 0.5s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
 
44
- .bot-response {
45
- text-align: left;
46
- background-color: #e2e3e5;
47
  padding: 10px;
48
- border-radius: 5px;
49
- margin: 5px 0;
50
- display: inline-block;
51
- max-width: 80%;
52
- animation: fadeIn 0.5s;
53
  }
54
 
55
- input[type="text"] {
56
- border: 1px solid #ccc;
57
- border-radius: 5px;
58
  padding: 10px;
59
- margin-top: 10px;
 
 
 
 
 
 
 
 
60
  }
61
 
62
- button {
63
- background-color: #007bff;
64
  color: white;
65
  border: none;
66
- border-radius: 5px;
67
- padding: 10px;
 
68
  cursor: pointer;
69
- margin-top: 5px;
 
 
 
 
70
  }
71
 
72
- button:hover {
73
- background-color: #0056b3;
74
  }
75
 
76
- @keyframes fadeIn {
77
- from { opacity: 0; }
78
- to { opacity: 1; }
79
  }
 
1
+ /* Reset */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
  body {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ height: 100vh;
13
+ margin: 0;
14
+ font-family: Arial, sans-serif;
15
+ background-color: #f4f4f9;
16
  }
17
 
18
  .chat-container {
19
+ width: 100%;
20
+ max-width: 450px;
21
+ height: 90vh;
 
 
 
 
22
  display: flex;
23
  flex-direction: column;
24
+ border-radius: 12px;
25
+ overflow: hidden;
26
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
27
+ background-color: #ffffff;
28
  }
29
 
30
+ .chat-header {
31
+ padding: 16px;
32
+ background-color: #00796b;
33
+ color: white;
34
  text-align: center;
35
+ font-weight: bold;
36
+ font-size: 1.2em;
37
  }
38
 
39
+ .chat-box {
40
+ flex-grow: 1;
41
+ padding: 20px;
42
  overflow-y: auto;
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 10px;
46
+ background-color: #e5e5e5;
47
+ }
48
+
49
+ .chat-box .user-message, .chat-box .bot-message {
50
+ max-width: 75%;
51
+ padding: 12px 16px;
52
+ border-radius: 12px;
53
+ line-height: 1.4;
54
+ display: flex;
55
+ align-items: center;
56
+ position: relative;
57
+ font-size: 0.9em;
58
  }
59
 
60
  .user-message {
61
+ align-self: flex-end;
62
+ background-color: #00796b;
63
+ color: white;
64
+ border-bottom-right-radius: 2px;
65
+ border-bottom-left-radius: 12px;
66
+ }
67
+
68
+ .bot-message {
69
+ align-self: flex-start;
70
+ background-color: #f1f0f0;
71
+ color: #333;
72
+ border-bottom-left-radius: 2px;
73
+ border-bottom-right-radius: 12px;
74
+ }
75
+
76
+ .bot-message span, .user-message span {
77
+ font-size: 0.75em;
78
+ color: #999;
79
+ margin-right: 8px;
80
+ }
81
+
82
+ #typing-indicator {
83
+ font-style: italic;
84
+ color: #777;
85
+ display: none;
86
  }
87
 
88
+ #chat-form {
89
+ display: flex;
90
+ gap: 5px;
91
  padding: 10px;
92
+ background-color: #ffffff;
93
+ border-top: 1px solid #ddd;
 
 
 
94
  }
95
 
96
+ #chat-form input {
97
+ flex: 1;
 
98
  padding: 10px;
99
+ font-size: 1em;
100
+ border: 1px solid #ddd;
101
+ border-radius: 8px;
102
+ outline: none;
103
+ transition: border-color 0.2s;
104
+ }
105
+
106
+ #chat-form input:focus {
107
+ border-color: #00796b;
108
  }
109
 
110
+ #chat-form button {
111
+ background-color: #00796b;
112
  color: white;
113
  border: none;
114
+ padding: 0 15px;
115
+ font-size: 1em;
116
+ border-radius: 8px;
117
  cursor: pointer;
118
+ transition: background-color 0.2s;
119
+ }
120
+
121
+ #chat-form button:hover {
122
+ background-color: #005b4f;
123
  }
124
 
125
+ #chat-form #clear-chat {
126
+ background-color: #ff5f5f;
127
  }
128
 
129
+ #chat-form #clear-chat:hover {
130
+ background-color: #cc4a4a;
 
131
  }