lokesh341 commited on
Commit
7519ea7
·
verified ·
1 Parent(s): 68188f1

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +63 -256
static/styles.css CHANGED
@@ -26,44 +26,44 @@ body {
26
  .chat-header {
27
  background-color: #0288d1;
28
  color: white;
29
- padding: 5px;
30
  text-align: center;
31
- font-size: 14px;
32
  flex-shrink: 0;
33
  }
34
 
35
  .chat-messages {
36
  flex: 1;
37
  overflow-y: auto;
38
- padding: 5px;
39
  box-sizing: border-box;
40
  }
41
 
42
  .bot-message {
43
  background-color: #e3f2fd;
44
- padding: 5px;
45
- margin: 5px 0;
46
  border-radius: 3px;
47
  max-width: 70%;
48
  word-wrap: break-word;
49
- font-size: 12px;
50
  }
51
 
52
  .user-message {
53
  background-color: #ffebee;
54
- padding: 5px;
55
- margin: 5px 0;
56
  border-radius: 3px;
57
  max-width: 70%;
58
  margin-left: auto;
59
  text-align: right;
60
  word-wrap: break-word;
61
- font-size: 12px;
62
  }
63
 
64
  .chat-input {
65
  display: flex;
66
- padding: 5px;
67
  border-top: 1px solid #ccc;
68
  flex-shrink: 0;
69
  position: sticky;
@@ -73,27 +73,27 @@ body {
73
 
74
  .chat-input input {
75
  flex: 1;
76
- padding: 4px;
77
  border: 1px solid #ccc;
78
  border-radius: 3px;
79
  box-sizing: border-box;
80
- font-size: 12px;
81
- min-height: 30px;
82
  resize: none;
83
  overflow-y: hidden;
84
  }
85
 
86
  .chat-input button {
87
- padding: 4px 8px;
88
- margin-left: 5px;
89
  background-color: #ff8f00;
90
  color: white;
91
  border: none;
92
  border-radius: 3px;
93
  cursor: pointer;
94
  transition: background-color 0.3s;
95
- font-size: 12px;
96
- min-height: 30px;
97
  }
98
 
99
  .chat-input button:hover {
@@ -101,49 +101,49 @@ body {
101
  }
102
 
103
  .ingredients-list {
104
- max-height: 100px;
105
  overflow-x: auto;
106
  overflow-y: hidden;
107
  white-space: nowrap;
108
- padding: 5px;
109
- margin: 5px 0;
110
  background-color: #f9f9f9;
111
  border-radius: 3px;
112
  display: flex;
113
- gap: 5px;
114
  }
115
 
116
  .ingredient-item {
117
  display: inline-flex;
118
  flex-direction: column;
119
  align-items: center;
120
- margin-right: 5px;
121
  cursor: pointer;
122
  }
123
 
124
  .ingredient-image {
125
- width: 30px;
126
- height: 30px;
127
  object-fit: cover;
128
  border-radius: 3px;
129
  }
130
 
131
  .ingredient-name {
132
  text-align: center;
133
- margin-top: 3px;
134
- font-size: 10px;
135
  color: #333;
136
  }
137
 
138
  .show-desc-button {
139
- padding: 2px 5px;
140
- margin-top: 3px;
141
  background-color: #4caf50;
142
  color: white;
143
  border: none;
144
  border-radius: 3px;
145
  cursor: pointer;
146
- font-size: 8px;
147
  width: 100%;
148
  }
149
 
@@ -161,7 +161,7 @@ body {
161
  border-radius: 3px;
162
  cursor: pointer;
163
  transition: background-color 0.3s;
164
- font-size: 12px;
165
  }
166
 
167
  .option-button.green { background-color: #4caf50; }
@@ -171,49 +171,49 @@ body {
171
 
172
  .selection-box {
173
  background-color: #e1f5fe;
174
- padding: 5px;
175
  border: 1px solid #0288d1;
176
  border-radius: 3px;
177
- margin: 5px 0;
178
- font-size: 12px;
179
  display: flex;
180
  flex-wrap: wrap;
181
  align-items: center;
182
- gap: 5px;
183
  }
184
 
185
  .selection-box span {
186
  background-color: #bbdefb;
187
- padding: 3px 5px;
188
  border-radius: 3px;
189
- margin-right: 3px;
190
  }
191
 
192
  .selected-item {
193
  display: flex;
194
  align-items: center;
195
  background-color: #bbdefb;
196
- padding: 3px 5px;
197
  border-radius: 3px;
198
- margin-right: 3px;
199
  }
200
 
201
  .selected-item-image {
202
- width: 20px;
203
- height: 20px;
204
  object-fit: cover;
205
  border-radius: 3px;
206
- margin-right: 3px;
207
  }
208
 
209
  .submit-button {
210
- padding: 4px 8px;
211
  background-color: #0288d1;
212
  color: white;
213
  border: none;
214
  border-radius: 3px;
215
  cursor: pointer;
216
- font-size: 12px;
217
  }
218
 
219
  .submit-button:hover {
@@ -221,14 +221,14 @@ body {
221
  }
222
 
223
  .remove-button {
224
- padding: 2px 5px;
225
- margin-left: 3px;
226
  background-color: #d32f2f;
227
  color: white;
228
  border: none;
229
  border-radius: 3px;
230
  cursor: pointer;
231
- font-size: 10px;
232
  }
233
 
234
  .remove-button:hover {
@@ -236,12 +236,12 @@ body {
236
  }
237
 
238
  .manual-input {
239
- padding: 3px;
240
  border: 1px solid #0288d1;
241
  border-radius: 3px;
242
- font-size: 12px;
243
- width: 120px;
244
- margin-left: 5px;
245
  }
246
 
247
  .dietary-button {
@@ -250,7 +250,7 @@ body {
250
  border: none;
251
  border-radius: 3px;
252
  cursor: pointer;
253
- font-size: 10px;
254
  color: white;
255
  }
256
 
@@ -275,9 +275,9 @@ body {
275
 
276
  .popup-content {
277
  background-color: #ffffff;
278
- padding: 10px;
279
- border-radius: 5px;
280
- max-width: 85%;
281
  max-height: 70vh;
282
  overflow-y: auto;
283
  text-align: center;
@@ -285,28 +285,28 @@ body {
285
  }
286
 
287
  .popup-image {
288
- width: 50px;
289
- height: 50px;
290
  object-fit: cover;
291
  border-radius: 3px;
292
- margin-bottom: 5px;
293
  }
294
 
295
  .button-container {
296
  display: flex;
297
  justify-content: center;
298
- gap: 5px;
299
- margin-top: 5px;
300
  }
301
 
302
  .popup-add-button {
303
- padding: 3px 6px;
304
  background-color: #4caf50;
305
  color: white;
306
  border: none;
307
  border-radius: 3px;
308
  cursor: pointer;
309
- font-size: 10px;
310
  }
311
 
312
  .popup-add-button:hover {
@@ -314,208 +314,15 @@ body {
314
  }
315
 
316
  .popup-close-button {
317
- padding: 3px 6px;
318
  background-color: #d32f2f;
319
  color: white;
320
  border: none;
321
  border-radius: 3px;
322
  cursor: pointer;
323
- font-size: 10px;
324
  }
325
 
326
  .popup-close-button:hover {
327
  background-color: #b71c1c;
328
- }
329
-
330
- /* Mobile Viewpoint Sizes */
331
- @media (max-width: 320px) { /* Small phones (e.g., iPhone 5/SE) */
332
- .chat-header {
333
- font-size: 10px;
334
- padding: 3px;
335
- }
336
- .chat-messages {
337
- padding: 2px;
338
- }
339
- .chat-input input, .chat-input button {
340
- padding: 2px;
341
- font-size: 8px;
342
- min-height: 20px;
343
- }
344
- .ingredients-list {
345
- max-height: 60px;
346
- padding: 2px;
347
- gap: 2px;
348
- }
349
- .ingredient-image {
350
- width: 20px;
351
- height: 20px;
352
- }
353
- .ingredient-name {
354
- font-size: 6px;
355
- margin-top: 2px;
356
- }
357
- .show-desc-button {
358
- font-size: 5px;
359
- padding: 1px 3px;
360
- }
361
- .popup-content {
362
- max-width: 75%;
363
- padding: 3px;
364
- }
365
- .popup-image {
366
- width: 30px;
367
- height: 30px;
368
- }
369
- .popup-add-button, .popup-close-button {
370
- padding: 1px 3px;
371
- font-size: 6px;
372
- }
373
- .selection-box {
374
- padding: 2px;
375
- gap: 2px;
376
- }
377
- .selected-item {
378
- padding: 1px 3px;
379
- }
380
- .selected-item-image {
381
- width: 15px;
382
- height: 15px;
383
- }
384
- .remove-button {
385
- padding: 1px 3px;
386
- font-size: 6px;
387
- }
388
- .manual-input {
389
- padding: 2px;
390
- width: 80px;
391
- font-size: 8px;
392
- }
393
- }
394
-
395
- @media (min-width: 321px) and (max-width: 480px) { /* Medium phones (e.g., iPhone 6/7/8) */
396
- .chat-header {
397
- font-size: 12px;
398
- padding: 4px;
399
- }
400
- .chat-messages {
401
- padding: 3px;
402
- }
403
- .chat-input input, .chat-input button {
404
- padding: 3px;
405
- font-size: 10px;
406
- min-height: 25px;
407
- }
408
- .ingredients-list {
409
- max-height: 80px;
410
- padding: 3px;
411
- gap: 3px;
412
- }
413
- .ingredient-image {
414
- width: 25px;
415
- height: 25px;
416
- }
417
- .ingredient-name {
418
- font-size: 8px;
419
- margin-top: 2px;
420
- }
421
- .show-desc-button {
422
- font-size: 6px;
423
- padding: 2px 4px;
424
- }
425
- .popup-content {
426
- max-width: 80%;
427
- padding: 5px;
428
- }
429
- .popup-image {
430
- width: 40px;
431
- height: 40px;
432
- }
433
- .popup-add-button, .popup-close-button {
434
- padding: 2px 4px;
435
- font-size: 8px;
436
- }
437
- .selection-box {
438
- padding: 3px;
439
- gap: 3px;
440
- }
441
- .selected-item {
442
- padding: 2px 4px;
443
- }
444
- .selected-item-image {
445
- width: 18px;
446
- height: 18px;
447
- }
448
- .remove-button {
449
- padding: 2px 4px;
450
- font-size: 8px;
451
- }
452
- .manual-input {
453
- padding: 2px;
454
- width: 100px;
455
- font-size: 10px;
456
- }
457
- }
458
-
459
- @media (min-width: 481px) and (max-width: 768px) { /* Large phones (e.g., iPhone X, Galaxy Note) */
460
- .chat-header {
461
- font-size: 14px;
462
- padding: 5px;
463
- }
464
- .chat-messages {
465
- padding: 5px;
466
- }
467
- .chat-input input, .chat-input button {
468
- padding: 4px;
469
- font-size: 12px;
470
- min-height: 30px;
471
- }
472
- .ingredients-list {
473
- max-height: 100px;
474
- padding: 5px;
475
- gap: 5px;
476
- }
477
- .ingredient-image {
478
- width: 30px;
479
- height: 30px;
480
- }
481
- .ingredient-name {
482
- font-size: 10px;
483
- margin-top: 3px;
484
- }
485
- .show-desc-button {
486
- font-size: 8px;
487
- padding: 2px 5px;
488
- }
489
- .popup-content {
490
- max-width: 85%;
491
- padding: 10px;
492
- }
493
- .popup-image {
494
- width: 50px;
495
- height: 50px;
496
- }
497
- .popup-add-button, .popup-close-button {
498
- padding: 3px 6px;
499
- font-size: 10px;
500
- }
501
- .selection-box {
502
- padding: 5px;
503
- gap: 5px;
504
- }
505
- .selected-item {
506
- padding: 3px 5px;
507
- }
508
- .selected-item-image {
509
- width: 20px;
510
- height: 20px;
511
- }
512
- .remove-button {
513
- padding: 2px 5px;
514
- font-size: 10px;
515
- }
516
- .manual-input {
517
- padding: 3px;
518
- width: 120px;
519
- font-size: 12px;
520
- }
521
  }
 
26
  .chat-header {
27
  background-color: #0288d1;
28
  color: white;
29
+ padding: 4px;
30
  text-align: center;
31
+ font-size: 12px;
32
  flex-shrink: 0;
33
  }
34
 
35
  .chat-messages {
36
  flex: 1;
37
  overflow-y: auto;
38
+ padding: 3px;
39
  box-sizing: border-box;
40
  }
41
 
42
  .bot-message {
43
  background-color: #e3f2fd;
44
+ padding: 3px;
45
+ margin: 3px 0;
46
  border-radius: 3px;
47
  max-width: 70%;
48
  word-wrap: break-word;
49
+ font-size: 10px;
50
  }
51
 
52
  .user-message {
53
  background-color: #ffebee;
54
+ padding: 3px;
55
+ margin: 3px 0;
56
  border-radius: 3px;
57
  max-width: 70%;
58
  margin-left: auto;
59
  text-align: right;
60
  word-wrap: break-word;
61
+ font-size: 10px;
62
  }
63
 
64
  .chat-input {
65
  display: flex;
66
+ padding: 3px;
67
  border-top: 1px solid #ccc;
68
  flex-shrink: 0;
69
  position: sticky;
 
73
 
74
  .chat-input input {
75
  flex: 1;
76
+ padding: 3px;
77
  border: 1px solid #ccc;
78
  border-radius: 3px;
79
  box-sizing: border-box;
80
+ font-size: 10px;
81
+ min-height: 25px;
82
  resize: none;
83
  overflow-y: hidden;
84
  }
85
 
86
  .chat-input button {
87
+ padding: 3px;
88
+ margin-left: 3px;
89
  background-color: #ff8f00;
90
  color: white;
91
  border: none;
92
  border-radius: 3px;
93
  cursor: pointer;
94
  transition: background-color 0.3s;
95
+ font-size: 10px;
96
+ min-height: 25px;
97
  }
98
 
99
  .chat-input button:hover {
 
101
  }
102
 
103
  .ingredients-list {
104
+ max-height: 80px;
105
  overflow-x: auto;
106
  overflow-y: hidden;
107
  white-space: nowrap;
108
+ padding: 3px;
109
+ margin: 3px 0;
110
  background-color: #f9f9f9;
111
  border-radius: 3px;
112
  display: flex;
113
+ gap: 3px;
114
  }
115
 
116
  .ingredient-item {
117
  display: inline-flex;
118
  flex-direction: column;
119
  align-items: center;
120
+ margin-right: 3px;
121
  cursor: pointer;
122
  }
123
 
124
  .ingredient-image {
125
+ width: 25px;
126
+ height: 25px;
127
  object-fit: cover;
128
  border-radius: 3px;
129
  }
130
 
131
  .ingredient-name {
132
  text-align: center;
133
+ margin-top: 2px;
134
+ font-size: 8px;
135
  color: #333;
136
  }
137
 
138
  .show-desc-button {
139
+ padding: 2px 4px;
140
+ margin-top: 2px;
141
  background-color: #4caf50;
142
  color: white;
143
  border: none;
144
  border-radius: 3px;
145
  cursor: pointer;
146
+ font-size: 6px;
147
  width: 100%;
148
  }
149
 
 
161
  border-radius: 3px;
162
  cursor: pointer;
163
  transition: background-color 0.3s;
164
+ font-size: 10px;
165
  }
166
 
167
  .option-button.green { background-color: #4caf50; }
 
171
 
172
  .selection-box {
173
  background-color: #e1f5fe;
174
+ padding: 3px;
175
  border: 1px solid #0288d1;
176
  border-radius: 3px;
177
+ margin: 3px 0;
178
+ font-size: 10px;
179
  display: flex;
180
  flex-wrap: wrap;
181
  align-items: center;
182
+ gap: 3px;
183
  }
184
 
185
  .selection-box span {
186
  background-color: #bbdefb;
187
+ padding: 2px 4px;
188
  border-radius: 3px;
189
+ margin-right: 2px;
190
  }
191
 
192
  .selected-item {
193
  display: flex;
194
  align-items: center;
195
  background-color: #bbdefb;
196
+ padding: 2px 4px;
197
  border-radius: 3px;
198
+ margin-right: 2px;
199
  }
200
 
201
  .selected-item-image {
202
+ width: 18px;
203
+ height: 18px;
204
  object-fit: cover;
205
  border-radius: 3px;
206
+ margin-right: 2px;
207
  }
208
 
209
  .submit-button {
210
+ padding: 3px;
211
  background-color: #0288d1;
212
  color: white;
213
  border: none;
214
  border-radius: 3px;
215
  cursor: pointer;
216
+ font-size: 10px;
217
  }
218
 
219
  .submit-button:hover {
 
221
  }
222
 
223
  .remove-button {
224
+ padding: 2px 4px;
225
+ margin-left: 2px;
226
  background-color: #d32f2f;
227
  color: white;
228
  border: none;
229
  border-radius: 3px;
230
  cursor: pointer;
231
+ font-size: 8px;
232
  }
233
 
234
  .remove-button:hover {
 
236
  }
237
 
238
  .manual-input {
239
+ padding: 2px;
240
  border: 1px solid #0288d1;
241
  border-radius: 3px;
242
+ font-size: 10px;
243
+ width: 100px;
244
+ margin-left: 3px;
245
  }
246
 
247
  .dietary-button {
 
250
  border: none;
251
  border-radius: 3px;
252
  cursor: pointer;
253
+ font-size: 8px;
254
  color: white;
255
  }
256
 
 
275
 
276
  .popup-content {
277
  background-color: #ffffff;
278
+ padding: 5px;
279
+ border-radius: 3px;
280
+ max-width: 80%;
281
  max-height: 70vh;
282
  overflow-y: auto;
283
  text-align: center;
 
285
  }
286
 
287
  .popup-image {
288
+ width: 40px;
289
+ height: 40px;
290
  object-fit: cover;
291
  border-radius: 3px;
292
+ margin-bottom: 3px;
293
  }
294
 
295
  .button-container {
296
  display: flex;
297
  justify-content: center;
298
+ gap: 3px;
299
+ margin-top: 3px;
300
  }
301
 
302
  .popup-add-button {
303
+ padding: 2px 4px;
304
  background-color: #4caf50;
305
  color: white;
306
  border: none;
307
  border-radius: 3px;
308
  cursor: pointer;
309
+ font-size: 8px;
310
  }
311
 
312
  .popup-add-button:hover {
 
314
  }
315
 
316
  .popup-close-button {
317
+ padding: 2px 4px;
318
  background-color: #d32f2f;
319
  color: white;
320
  border: none;
321
  border-radius: 3px;
322
  cursor: pointer;
323
+ font-size: 8px;
324
  }
325
 
326
  .popup-close-button:hover {
327
  background-color: #b71c1c;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
  }