lokesh341 commited on
Commit
53f36cf
·
verified ·
1 Parent(s): 22cbb8d

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +52 -24
static/styles.css CHANGED
@@ -113,47 +113,64 @@ body {
113
  gap: 10px;
114
  }
115
 
116
- .suggestion-item, .ingredient-item {
117
- display: inline-flex;
118
  flex-direction: column;
119
  align-items: center;
120
- margin-right: 15px;
121
  cursor: pointer;
 
 
122
  }
123
 
124
- .suggestions-list img, .ingredients-list img {
125
- width: 60px;
126
- height: 60px;
127
  object-fit: cover;
128
- border-radius: 5px;
 
129
  }
130
 
131
- .suggestions-list button, .ingredients-list button {
132
- padding: 5px 10px;
 
 
 
 
 
 
 
 
 
 
 
 
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
- .suggestions-list, .ingredients-list {
344
- max-height: 120px;
 
 
 
 
 
 
345
  }
346
- .suggestions-list img, .ingredients-list img {
347
- width: 50px;
348
- height: 50px;
349
  }
350
- .suggestion-item, .ingredient-item {
351
- margin-right: 10px;
 
 
 
 
 
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%;