Spaces:
Sleeping
Sleeping
Update static/styles.css
Browse files- static/styles.css +48 -24
static/styles.css
CHANGED
@@ -124,49 +124,63 @@ body {
|
|
124 |
opacity: 0.9;
|
125 |
}
|
126 |
|
127 |
-
/*
|
128 |
.ingredients-list {
|
129 |
-
max-height: 200px;
|
130 |
-
overflow-
|
131 |
-
|
|
|
132 |
padding: 10px;
|
133 |
margin: 10px 0;
|
134 |
background-color: #f9f9f9;
|
135 |
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
136 |
}
|
137 |
|
138 |
.ingredients-list button {
|
139 |
-
|
140 |
-
|
141 |
-
|
142 |
-
|
143 |
-
|
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: #
|
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
|
163 |
-
|
164 |
-
|
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;
|
203 |
}
|
204 |
|
205 |
-
.
|
|
|
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;
|
237 |
}
|
238 |
|
239 |
-
.
|
|
|
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 |
}
|