Spaces:
Sleeping
Sleeping
Update static/styles.css
Browse files- static/styles.css +35 -36
static/styles.css
CHANGED
@@ -12,9 +12,9 @@ body {
|
|
12 |
|
13 |
.chat-container {
|
14 |
width: 100%;
|
15 |
-
max-width: 400px;
|
16 |
-
height: 80vh;
|
17 |
-
max-height: 600px;
|
18 |
border: 1px solid #ccc;
|
19 |
border-radius: 10px;
|
20 |
overflow: hidden;
|
@@ -22,7 +22,7 @@ body {
|
|
22 |
background-color: white;
|
23 |
display: flex;
|
24 |
flex-direction: column;
|
25 |
-
margin: 10px;
|
26 |
}
|
27 |
|
28 |
.chat-header {
|
@@ -35,9 +35,9 @@ body {
|
|
35 |
}
|
36 |
|
37 |
.chat-messages {
|
38 |
-
flex: 1;
|
39 |
overflow-y: auto;
|
40 |
-
padding: 15px;
|
41 |
box-sizing: border-box;
|
42 |
}
|
43 |
|
@@ -48,7 +48,7 @@ body {
|
|
48 |
border-radius: 5px;
|
49 |
max-width: 70%;
|
50 |
word-wrap: break-word;
|
51 |
-
font-size: 14px;
|
52 |
}
|
53 |
|
54 |
.user-message {
|
@@ -60,7 +60,7 @@ body {
|
|
60 |
margin-left: auto;
|
61 |
text-align: right;
|
62 |
word-wrap: break-word;
|
63 |
-
font-size: 14px;
|
64 |
}
|
65 |
|
66 |
.chat-input {
|
@@ -72,16 +72,16 @@ body {
|
|
72 |
|
73 |
.chat-input input {
|
74 |
flex: 1;
|
75 |
-
padding: 8px;
|
76 |
border: 1px solid #ccc;
|
77 |
border-radius: 5px;
|
78 |
box-sizing: border-box;
|
79 |
-
font-size: 14px;
|
80 |
-
min-height: 40px;
|
81 |
}
|
82 |
|
83 |
.chat-input button {
|
84 |
-
padding: 8px 15px;
|
85 |
margin-left: 10px;
|
86 |
background-color: #f28c38;
|
87 |
color: white;
|
@@ -89,8 +89,8 @@ body {
|
|
89 |
border-radius: 5px;
|
90 |
cursor: pointer;
|
91 |
transition: background-color 0.3s;
|
92 |
-
font-size: 14px;
|
93 |
-
min-height: 40px;
|
94 |
}
|
95 |
|
96 |
.chat-input button:hover {
|
@@ -99,7 +99,7 @@ body {
|
|
99 |
|
100 |
.option-button {
|
101 |
display: inline-block;
|
102 |
-
padding: 10px 15px;
|
103 |
margin: 5px;
|
104 |
background-color: #9c27b0;
|
105 |
color: white;
|
@@ -107,8 +107,8 @@ body {
|
|
107 |
border-radius: 5px;
|
108 |
cursor: pointer;
|
109 |
transition: background-color 0.3s;
|
110 |
-
font-size: 14px;
|
111 |
-
min-width: 100px;
|
112 |
text-align: center;
|
113 |
}
|
114 |
|
@@ -124,58 +124,57 @@ body {
|
|
124 |
opacity: 0.9;
|
125 |
}
|
126 |
|
127 |
-
/* Media Queries for Responsiveness */
|
128 |
@media (max-width: 768px) {
|
129 |
.chat-container {
|
130 |
-
max-width: 100%;
|
131 |
-
height: 90vh;
|
132 |
-
margin: 5px;
|
133 |
}
|
134 |
|
135 |
.chat-header {
|
136 |
-
font-size: 18px;
|
137 |
}
|
138 |
|
139 |
.chat-messages {
|
140 |
-
padding: 10px;
|
141 |
}
|
142 |
|
143 |
.chat-input input,
|
144 |
.chat-input button {
|
145 |
-
padding: 6px;
|
146 |
-
font-size: 12px;
|
147 |
-
min-height: 35px;
|
148 |
}
|
149 |
|
150 |
.option-button {
|
151 |
-
padding: 8px 12px;
|
152 |
-
font-size: 12px;
|
153 |
-
min-width: 90px;
|
154 |
}
|
155 |
}
|
156 |
|
157 |
@media (min-width: 769px) {
|
158 |
.chat-container {
|
159 |
-
margin: 20px;
|
160 |
}
|
161 |
|
162 |
.chat-header {
|
163 |
-
font-size: 22px;
|
164 |
}
|
165 |
|
166 |
.bot-message,
|
167 |
.user-message {
|
168 |
-
font-size: 16px;
|
169 |
}
|
170 |
|
171 |
.chat-input input,
|
172 |
.chat-input button {
|
173 |
-
font-size: 16px;
|
174 |
-
min-height: 45px;
|
175 |
}
|
176 |
|
177 |
.option-button {
|
178 |
-
font-size: 16px;
|
179 |
-
min-width: 120px;
|
180 |
}
|
181 |
}
|
|
|
12 |
|
13 |
.chat-container {
|
14 |
width: 100%;
|
15 |
+
max-width: 400px;
|
16 |
+
height: 80vh;
|
17 |
+
max-height: 600px;
|
18 |
border: 1px solid #ccc;
|
19 |
border-radius: 10px;
|
20 |
overflow: hidden;
|
|
|
22 |
background-color: white;
|
23 |
display: flex;
|
24 |
flex-direction: column;
|
25 |
+
margin: 10px;
|
26 |
}
|
27 |
|
28 |
.chat-header {
|
|
|
35 |
}
|
36 |
|
37 |
.chat-messages {
|
38 |
+
flex: 1;
|
39 |
overflow-y: auto;
|
40 |
+
padding: 15px;
|
41 |
box-sizing: border-box;
|
42 |
}
|
43 |
|
|
|
48 |
border-radius: 5px;
|
49 |
max-width: 70%;
|
50 |
word-wrap: break-word;
|
51 |
+
font-size: 14px;
|
52 |
}
|
53 |
|
54 |
.user-message {
|
|
|
60 |
margin-left: auto;
|
61 |
text-align: right;
|
62 |
word-wrap: break-word;
|
63 |
+
font-size: 14px;
|
64 |
}
|
65 |
|
66 |
.chat-input {
|
|
|
72 |
|
73 |
.chat-input input {
|
74 |
flex: 1;
|
75 |
+
padding: 8px;
|
76 |
border: 1px solid #ccc;
|
77 |
border-radius: 5px;
|
78 |
box-sizing: border-box;
|
79 |
+
font-size: 14px;
|
80 |
+
min-height: 40px;
|
81 |
}
|
82 |
|
83 |
.chat-input button {
|
84 |
+
padding: 8px 15px;
|
85 |
margin-left: 10px;
|
86 |
background-color: #f28c38;
|
87 |
color: white;
|
|
|
89 |
border-radius: 5px;
|
90 |
cursor: pointer;
|
91 |
transition: background-color 0.3s;
|
92 |
+
font-size: 14px;
|
93 |
+
min-height: 40px;
|
94 |
}
|
95 |
|
96 |
.chat-input button:hover {
|
|
|
99 |
|
100 |
.option-button {
|
101 |
display: inline-block;
|
102 |
+
padding: 10px 15px;
|
103 |
margin: 5px;
|
104 |
background-color: #9c27b0;
|
105 |
color: white;
|
|
|
107 |
border-radius: 5px;
|
108 |
cursor: pointer;
|
109 |
transition: background-color 0.3s;
|
110 |
+
font-size: 14px;
|
111 |
+
min-width: 100px;
|
112 |
text-align: center;
|
113 |
}
|
114 |
|
|
|
124 |
opacity: 0.9;
|
125 |
}
|
126 |
|
|
|
127 |
@media (max-width: 768px) {
|
128 |
.chat-container {
|
129 |
+
max-width: 100%;
|
130 |
+
height: 90vh;
|
131 |
+
margin: 5px;
|
132 |
}
|
133 |
|
134 |
.chat-header {
|
135 |
+
font-size: 18px;
|
136 |
}
|
137 |
|
138 |
.chat-messages {
|
139 |
+
padding: 10px;
|
140 |
}
|
141 |
|
142 |
.chat-input input,
|
143 |
.chat-input button {
|
144 |
+
padding: 6px;
|
145 |
+
font-size: 12px;
|
146 |
+
min-height: 35px;
|
147 |
}
|
148 |
|
149 |
.option-button {
|
150 |
+
padding: 8px 12px;
|
151 |
+
font-size: 12px;
|
152 |
+
min-width: 90px;
|
153 |
}
|
154 |
}
|
155 |
|
156 |
@media (min-width: 769px) {
|
157 |
.chat-container {
|
158 |
+
margin: 20px;
|
159 |
}
|
160 |
|
161 |
.chat-header {
|
162 |
+
font-size: 22px;
|
163 |
}
|
164 |
|
165 |
.bot-message,
|
166 |
.user-message {
|
167 |
+
font-size: 16px;
|
168 |
}
|
169 |
|
170 |
.chat-input input,
|
171 |
.chat-input button {
|
172 |
+
font-size: 16px;
|
173 |
+
min-height: 45px;
|
174 |
}
|
175 |
|
176 |
.option-button {
|
177 |
+
font-size: 16px;
|
178 |
+
min-width: 120px;
|
179 |
}
|
180 |
}
|