Spaces:
Running
Running
Update static/styles.css
Browse files- static/styles.css +62 -0
static/styles.css
CHANGED
@@ -124,6 +124,52 @@ body {
|
|
124 |
opacity: 0.9;
|
125 |
}
|
126 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
127 |
@media (max-width: 768px) {
|
128 |
.chat-container {
|
129 |
max-width: 100%;
|
@@ -151,6 +197,14 @@ body {
|
|
151 |
font-size: 12px;
|
152 |
min-width: 90px;
|
153 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
154 |
}
|
155 |
|
156 |
@media (min-width: 769px) {
|
@@ -177,4 +231,12 @@ body {
|
|
177 |
font-size: 16px;
|
178 |
min-width: 120px;
|
179 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
180 |
}
|
|
|
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 */
|
173 |
@media (max-width: 768px) {
|
174 |
.chat-container {
|
175 |
max-width: 100%;
|
|
|
197 |
font-size: 12px;
|
198 |
min-width: 90px;
|
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) {
|
|
|
231 |
font-size: 16px;
|
232 |
min-width: 120px;
|
233 |
}
|
234 |
+
|
235 |
+
.ingredients-list {
|
236 |
+
max-height: 250px; /* Adjusted for desktop */
|
237 |
+
}
|
238 |
+
|
239 |
+
.selected-ingredients textarea {
|
240 |
+
height: 100px;
|
241 |
+
}
|
242 |
}
|