Update static/styles.css

static/styles.css

@@ -128,8 +128,8 @@ body {
     opacity: 0.9;
 }
 
-/* Horizontal scrollable ingredient list with images */
-.ingredients-list {
+/* Updated for menu items */
+.menu-items-list {
     max-height: 200px;
     overflow-x: auto;
     overflow-y: hidden;
@@ -142,21 +142,21 @@ body {
     gap: 10px;
 }
 
-.ingredients-list .ingredient-item {
+.menu-items-list .menu-item-item {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     margin-right: 15px;
 }
 
-.ingredients-list img {
+.menu-items-list img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 5px;
 }
 
-.ingredients-list button {
+.menu-items-list button {
     padding: 5px 10px;
     margin-top: 5px;
     background-color: #4caf50;
@@ -167,12 +167,12 @@ body {
     font-size: 12px;
 }
 
-.ingredients-list button:hover {
+.menu-items-list button:hover {
     background-color: #45a049;
 }
 
-/* Non-editable selected ingredients box */
-.selected-ingredients {
+/* Updated for selected menu items */
+.selected-menu-items {
     padding: 10px;
     margin: 10px 0;
     border: 1px solid #ccc;
@@ -182,7 +182,7 @@ body {
     max-height: 100px;
 }
 
-.selected-ingredients div {
+.selected-menu-items div {
     margin: 5px 0;
     word-wrap: break-word;
 }
@@ -216,16 +216,16 @@ body {
         min-width: 90px;
     }
 
-    .ingredients-list {
+    .menu-items-list {
         max-height: 150px;
     }
 
-    .ingredients-list img {
+    .menu-items-list img {
         width: 60px;
         height: 60px;
     }
 
-    .selected-ingredients {
+    .selected-menu-items {
         max-height: 80px;
     }
 }
@@ -255,16 +255,16 @@ body {
         min-width: 120px;
     }
 
-    .ingredients-list {
+    .menu-items-list {
         max-height: 250px;
     }
 
-    .ingredients-list img {
+    .menu-items-list img {
         width: 100px;
         height: 100px;
     }
 
-    .selected-ingredients {
+    .selected-menu-items {
         max-height: 120px;
     }
-}
+}