Spaces:
Sleeping
Sleeping
Update static/styles.css
Browse files- static/styles.css +143 -5
static/styles.css
CHANGED
@@ -327,14 +327,75 @@ body {
|
|
327 |
background-color: #b71c1c;
|
328 |
}
|
329 |
|
330 |
-
/* Mobile
|
331 |
-
@media (max-width:
|
332 |
-
.chat-
|
333 |
-
|
334 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
}
|