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

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +143 -5
static/styles.css CHANGED
@@ -327,14 +327,75 @@ body {
327
  background-color: #b71c1c;
328
  }
329
 
330
- /* Mobile Responsiveness */
331
- @media (max-width: 768px) {
332
- .chat-container {
333
- height: 100vh;
334
- margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
336
  .chat-header {
337
  font-size: 12px;
 
338
  }
339
  .chat-messages {
340
  padding: 3px;
@@ -346,6 +407,8 @@ body {
346
  }
347
  .ingredients-list {
348
  max-height: 80px;
 
 
349
  }
350
  .ingredient-image {
351
  width: 25px;
@@ -353,6 +416,7 @@ body {
353
  }
354
  .ingredient-name {
355
  font-size: 8px;
 
356
  }
357
  .show-desc-button {
358
  font-size: 6px;
@@ -371,13 +435,87 @@ body {
371
  font-size: 8px;
372
  }
373
  .selection-box {
 
374
  gap: 3px;
375
  }
376
  .selected-item {
377
  padding: 2px 4px;
378
  }
 
 
 
 
379
  .remove-button {
380
  padding: 2px 4px;
381
  font-size: 8px;
382
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  }
 
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;
 
407
  }
408
  .ingredients-list {
409
  max-height: 80px;
410
+ padding: 3px;
411
+ gap: 3px;
412
  }
413
  .ingredient-image {
414
  width: 25px;
 
416
  }
417
  .ingredient-name {
418
  font-size: 8px;
419
+ margin-top: 2px;
420
  }
421
  .show-desc-button {
422
  font-size: 6px;
 
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
  }