Spaces:
Sleeping
Sleeping
Update static/styles.css
Browse files- static/styles.css +114 -4
static/styles.css
CHANGED
@@ -139,6 +139,21 @@ body {
|
|
139 |
font-size: 12px;
|
140 |
}
|
141 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
142 |
.option-button {
|
143 |
display: inline-block;
|
144 |
padding: 10px 15px;
|
@@ -232,9 +247,104 @@ body {
|
|
232 |
.dietary-button.gray { background-color: #9e9e9e; }
|
233 |
.dietary-button:hover { opacity: 0.9; }
|
234 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
235 |
@media (max-width: 768px) {
|
236 |
-
.chat-container {
|
237 |
-
|
238 |
-
|
239 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
240 |
}
|
|
|
139 |
font-size: 12px;
|
140 |
}
|
141 |
|
142 |
+
.show-desc-button {
|
143 |
+
padding: 5px 10px;
|
144 |
+
margin-top: 5px;
|
145 |
+
background-color: #2196f3;
|
146 |
+
color: white;
|
147 |
+
border: none;
|
148 |
+
border-radius: 5px;
|
149 |
+
cursor: pointer;
|
150 |
+
font-size: 12px;
|
151 |
+
}
|
152 |
+
|
153 |
+
.show-desc-button:hover {
|
154 |
+
background-color: #1976d2;
|
155 |
+
}
|
156 |
+
|
157 |
.option-button {
|
158 |
display: inline-block;
|
159 |
padding: 10px 15px;
|
|
|
247 |
.dietary-button.gray { background-color: #9e9e9e; }
|
248 |
.dietary-button:hover { opacity: 0.9; }
|
249 |
|
250 |
+
/* Popup Styles */
|
251 |
+
.description-popup {
|
252 |
+
position: fixed;
|
253 |
+
top: 0;
|
254 |
+
left: 0;
|
255 |
+
width: 100%;
|
256 |
+
height: 100%;
|
257 |
+
background-color: rgba(0, 0, 0, 0.5);
|
258 |
+
display: flex;
|
259 |
+
justify-content: center;
|
260 |
+
align-items: center;
|
261 |
+
z-index: 1000;
|
262 |
+
}
|
263 |
+
|
264 |
+
.popup-content {
|
265 |
+
background-color: white;
|
266 |
+
padding: 20px;
|
267 |
+
border-radius: 10px;
|
268 |
+
max-width: 90%;
|
269 |
+
max-height: 80vh;
|
270 |
+
overflow-y: auto;
|
271 |
+
text-align: center;
|
272 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
273 |
+
}
|
274 |
+
|
275 |
+
.popup-image {
|
276 |
+
width: 100px;
|
277 |
+
height: 100px;
|
278 |
+
object-fit: cover;
|
279 |
+
border-radius: 5px;
|
280 |
+
margin-bottom: 10px;
|
281 |
+
}
|
282 |
+
|
283 |
+
.popup-add-button {
|
284 |
+
padding: 8px 15px;
|
285 |
+
background-color: #4caf50;
|
286 |
+
color: white;
|
287 |
+
border: none;
|
288 |
+
border-radius: 5px;
|
289 |
+
cursor: pointer;
|
290 |
+
margin: 10px 5px 0 0;
|
291 |
+
}
|
292 |
+
|
293 |
+
.popup-add-button:hover {
|
294 |
+
background-color: #45a049;
|
295 |
+
}
|
296 |
+
|
297 |
+
.popup-close-button {
|
298 |
+
padding: 8px 15px;
|
299 |
+
background-color: #f44336;
|
300 |
+
color: white;
|
301 |
+
border: none;
|
302 |
+
border-radius: 5px;
|
303 |
+
cursor: pointer;
|
304 |
+
margin: 10px 0 0 5px;
|
305 |
+
}
|
306 |
+
|
307 |
+
.popup-close-button:hover {
|
308 |
+
background-color: #d32f2f;
|
309 |
+
}
|
310 |
+
|
311 |
+
/* Mobile Responsiveness */
|
312 |
@media (max-width: 768px) {
|
313 |
+
.chat-container {
|
314 |
+
height: 100vh;
|
315 |
+
margin: 0;
|
316 |
+
}
|
317 |
+
.chat-header {
|
318 |
+
font-size: 16px;
|
319 |
+
}
|
320 |
+
.chat-messages {
|
321 |
+
padding: 5px;
|
322 |
+
}
|
323 |
+
.chat-input input, .chat-input button {
|
324 |
+
padding: 6px;
|
325 |
+
font-size: 12px;
|
326 |
+
min-height: 35px;
|
327 |
+
}
|
328 |
+
.suggestions-list, .ingredients-list {
|
329 |
+
max-height: 120px;
|
330 |
+
}
|
331 |
+
.suggestions-list img, .ingredients-list img {
|
332 |
+
width: 50px;
|
333 |
+
height: 50px;
|
334 |
+
}
|
335 |
+
.suggestion-item, .ingredient-item {
|
336 |
+
margin-right: 10px;
|
337 |
+
}
|
338 |
+
.popup-content {
|
339 |
+
max-width: 85%;
|
340 |
+
padding: 15px;
|
341 |
+
}
|
342 |
+
.popup-image {
|
343 |
+
width: 80px;
|
344 |
+
height: 80px;
|
345 |
+
}
|
346 |
+
.popup-add-button, .popup-close-button {
|
347 |
+
padding: 6px 12px;
|
348 |
+
font-size: 12px;
|
349 |
+
}
|
350 |
}
|