Spaces:
Sleeping
Sleeping
Update static/styles.css
Browse files- static/styles.css +52 -24
static/styles.css
CHANGED
@@ -113,47 +113,64 @@ body {
|
|
113 |
gap: 10px;
|
114 |
}
|
115 |
|
116 |
-
.
|
117 |
-
display:
|
118 |
flex-direction: column;
|
119 |
align-items: center;
|
120 |
-
margin
|
121 |
cursor: pointer;
|
|
|
|
|
122 |
}
|
123 |
|
124 |
-
.
|
125 |
-
width:
|
126 |
-
height:
|
127 |
object-fit: cover;
|
128 |
-
border-radius:
|
|
|
129 |
}
|
130 |
|
131 |
-
.
|
132 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
133 |
margin-top: 5px;
|
134 |
-
background-color: #4caf50;
|
135 |
-
color: white;
|
136 |
border: none;
|
137 |
border-radius: 5px;
|
138 |
cursor: pointer;
|
139 |
font-size: 12px;
|
|
|
140 |
}
|
141 |
|
142 |
.show-desc-button {
|
143 |
-
padding: 5px 10px;
|
144 |
-
margin-top: 5px;
|
145 |
background-color: #0288d1;
|
146 |
color: white;
|
147 |
-
border: none;
|
148 |
-
border-radius: 5px;
|
149 |
-
cursor: pointer;
|
150 |
-
font-size: 12px;
|
151 |
}
|
152 |
|
153 |
.show-desc-button:hover {
|
154 |
background-color: #0277bd;
|
155 |
}
|
156 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
157 |
.option-button {
|
158 |
display: inline-block;
|
159 |
padding: 10px 15px;
|
@@ -340,15 +357,26 @@ body {
|
|
340 |
font-size: 12px;
|
341 |
min-height: 35px;
|
342 |
}
|
343 |
-
.
|
344 |
-
max-height:
|
|
|
|
|
|
|
|
|
|
|
|
|
345 |
}
|
346 |
-
.
|
347 |
-
width:
|
348 |
-
height:
|
349 |
}
|
350 |
-
.
|
351 |
-
|
|
|
|
|
|
|
|
|
|
|
352 |
}
|
353 |
.popup-content {
|
354 |
max-width: 85%;
|
|
|
113 |
gap: 10px;
|
114 |
}
|
115 |
|
116 |
+
.ingredient-item {
|
117 |
+
display: flex;
|
118 |
flex-direction: column;
|
119 |
align-items: center;
|
120 |
+
margin: 10px;
|
121 |
cursor: pointer;
|
122 |
+
max-width: 120px;
|
123 |
+
text-align: center;
|
124 |
}
|
125 |
|
126 |
+
.item-image {
|
127 |
+
width: 100px;
|
128 |
+
height: 100px;
|
129 |
object-fit: cover;
|
130 |
+
border-radius: 10px;
|
131 |
+
margin-bottom: 5px;
|
132 |
}
|
133 |
|
134 |
+
.item-name {
|
135 |
+
font-size: 14px;
|
136 |
+
margin-bottom: 5px;
|
137 |
+
color: #333;
|
138 |
+
}
|
139 |
+
|
140 |
+
.button-container {
|
141 |
+
display: flex;
|
142 |
+
gap: 5px;
|
143 |
+
justify-content: center;
|
144 |
+
}
|
145 |
+
|
146 |
+
.show-desc-button, .add-button {
|
147 |
+
padding: 6px 12px;
|
148 |
margin-top: 5px;
|
|
|
|
|
149 |
border: none;
|
150 |
border-radius: 5px;
|
151 |
cursor: pointer;
|
152 |
font-size: 12px;
|
153 |
+
width: 100px;
|
154 |
}
|
155 |
|
156 |
.show-desc-button {
|
|
|
|
|
157 |
background-color: #0288d1;
|
158 |
color: white;
|
|
|
|
|
|
|
|
|
159 |
}
|
160 |
|
161 |
.show-desc-button:hover {
|
162 |
background-color: #0277bd;
|
163 |
}
|
164 |
|
165 |
+
.add-button {
|
166 |
+
background-color: #4caf50;
|
167 |
+
color: white;
|
168 |
+
}
|
169 |
+
|
170 |
+
.add-button:hover {
|
171 |
+
background-color: #45a049;
|
172 |
+
}
|
173 |
+
|
174 |
.option-button {
|
175 |
display: inline-block;
|
176 |
padding: 10px 15px;
|
|
|
357 |
font-size: 12px;
|
358 |
min-height: 35px;
|
359 |
}
|
360 |
+
.ingredients-list {
|
361 |
+
max-height: 200px;
|
362 |
+
flex-wrap: wrap;
|
363 |
+
justify-content: center;
|
364 |
+
}
|
365 |
+
.ingredient-item {
|
366 |
+
max-width: 100px;
|
367 |
+
margin: 5px;
|
368 |
}
|
369 |
+
.item-image {
|
370 |
+
width: 80px;
|
371 |
+
height: 80px;
|
372 |
}
|
373 |
+
.item-name {
|
374 |
+
font-size: 12px;
|
375 |
+
}
|
376 |
+
.show-desc-button, .add-button {
|
377 |
+
width: 80px;
|
378 |
+
padding: 4px 8px;
|
379 |
+
font-size: 10px;
|
380 |
}
|
381 |
.popup-content {
|
382 |
max-width: 85%;
|