Yaswanth56 commited on
Commit
2f303fb
·
verified ·
1 Parent(s): dbd2afb

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +48 -24
static/styles.css CHANGED
@@ -124,49 +124,63 @@ body {
124
  opacity: 0.9;
125
  }
126
 
127
- /* New CSS for scrollable ingredients list */
128
  .ingredients-list {
129
- max-height: 200px; /* Fixed height for scrollable area */
130
- overflow-y: auto;
131
- border: 1px solid #ccc;
 
132
  padding: 10px;
133
  margin: 10px 0;
134
  background-color: #f9f9f9;
135
  border-radius: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  }
137
 
138
  .ingredients-list button {
139
- display: block;
140
- width: 100%;
141
- text-align: left;
142
- margin: 5px 0;
143
- padding: 8px;
144
- background-color: #fff;
145
- border: 1px solid #ddd;
146
  border-radius: 5px;
147
  cursor: pointer;
 
148
  }
149
 
150
  .ingredients-list button:hover {
151
- background-color: #e0e0e0;
152
  }
153
 
 
154
  .selected-ingredients {
155
  padding: 10px;
156
  margin: 10px 0;
157
  border: 1px solid #ccc;
158
  border-radius: 5px;
159
  background-color: #f0f0f0;
 
 
160
  }
161
 
162
- .selected-ingredients textarea {
163
- width: 100%;
164
- height: 80px;
165
- resize: vertical;
166
- border: 1px solid #ddd;
167
- border-radius: 5px;
168
- padding: 5px;
169
- font-size: 14px;
170
  }
171
 
172
  /* Media Queries */
@@ -199,12 +213,17 @@ body {
199
  }
200
 
201
  .ingredients-list {
202
- max-height: 150px; /* Adjusted for mobile */
203
  }
204
 
205
- .selected-ingredients textarea {
 
206
  height: 60px;
207
  }
 
 
 
 
208
  }
209
 
210
  @media (min-width: 769px) {
@@ -233,10 +252,15 @@ body {
233
  }
234
 
235
  .ingredients-list {
236
- max-height: 250px; /* Adjusted for desktop */
237
  }
238
 
239
- .selected-ingredients textarea {
 
240
  height: 100px;
241
  }
 
 
 
 
242
  }
 
124
  opacity: 0.9;
125
  }
126
 
127
+ /* Horizontal scrollable ingredient list with images */
128
  .ingredients-list {
129
+ max-height: 200px;
130
+ overflow-x: auto;
131
+ overflow-y: hidden;
132
+ white-space: nowrap;
133
  padding: 10px;
134
  margin: 10px 0;
135
  background-color: #f9f9f9;
136
  border-radius: 5px;
137
+ display: flex;
138
+ gap: 10px;
139
+ }
140
+
141
+ .ingredients-list .ingredient-item {
142
+ display: inline-flex;
143
+ flex-direction: column;
144
+ align-items: center;
145
+ margin-right: 15px;
146
+ }
147
+
148
+ .ingredients-list img {
149
+ width: 80px;
150
+ height: 80px;
151
+ object-fit: cover;
152
+ border-radius: 5px;
153
  }
154
 
155
  .ingredients-list button {
156
+ padding: 5px 10px;
157
+ margin-top: 5px;
158
+ background-color: #4caf50;
159
+ color: white;
160
+ border: none;
 
 
161
  border-radius: 5px;
162
  cursor: pointer;
163
+ font-size: 12px;
164
  }
165
 
166
  .ingredients-list button:hover {
167
+ background-color: #45a049;
168
  }
169
 
170
+ /* Non-editable selected ingredients box */
171
  .selected-ingredients {
172
  padding: 10px;
173
  margin: 10px 0;
174
  border: 1px solid #ccc;
175
  border-radius: 5px;
176
  background-color: #f0f0f0;
177
+ overflow-y: auto;
178
+ max-height: 100px;
179
  }
180
 
181
+ .selected-ingredients div {
182
+ margin: 5px 0;
183
+ word-wrap: break-word;
 
 
 
 
 
184
  }
185
 
186
  /* Media Queries */
 
213
  }
214
 
215
  .ingredients-list {
216
+ max-height: 150px;
217
  }
218
 
219
+ .ingredients-list img {
220
+ width: 60px;
221
  height: 60px;
222
  }
223
+
224
+ .selected-ingredients {
225
+ max-height: 80px;
226
+ }
227
  }
228
 
229
  @media (min-width: 769px) {
 
252
  }
253
 
254
  .ingredients-list {
255
+ max-height: 250px;
256
  }
257
 
258
+ .ingredients-list img {
259
+ width: 100px;
260
  height: 100px;
261
  }
262
+
263
+ .selected-ingredients {
264
+ max-height: 120px;
265
+ }
266
  }