lokesh341 commited on
Commit
f4f4eb1
·
verified ·
1 Parent(s): 3d051d4

Update static/styles.css

Browse files
Files changed (1) hide show
  1. 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 { height: 100vh; margin: 0; }
237
- .chat-header { font-size: 18px; }
238
- .chat-messages { padding: 10px; }
239
- .chat-input input, .chat-input button { padding: 6px; font-size: 12px; min-height: 35px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
  }