source: CookCraft-FrontEnd/CookCraft-FrontEnd-master/cookcraft-app/src/css/HomeCss/hero.module.css@ f08e256

Last change on this file since f08e256 was d7b7f00, checked in by Gorazd Biskoski <gorazdbiskoskii@…>, 4 weeks ago

Add project
  • Property mode set to 100644
File size: 6.0 KB
Line 
1.hero {
2 box-sizing: border-box;
3 background: linear-gradient(to right, #ffffff, #f5f5f5);
4 padding: 40px 0;
5 text-align: center;
6 color: #333;
7}
8
9.container {
10 max-width: 1200px;
11 margin: 0 auto;
12 padding: 0 15px;
13}
14
15.heroTitle {
16 font-size: 50px;
17 margin-bottom: 10px;
18 font-weight: 700;
19 color: #000;
20}
21
22.heroSubtitle {
23 font-size: 20px;
24 font-weight: 300;
25 margin-top: -5px;
26 opacity: 0.8;
27 color: #555;
28}
29
30.searchContainer {
31 display: flex;
32 justify-content: center;
33 align-items: center;
34 margin-top: 30px;
35 transition: width 0.3s ease;
36 flex-wrap: wrap;
37}
38
39.searchInput {
40 padding: 15px;
41 width: 300px;
42 border: none;
43 border-radius: 30px 0 0 30px;
44 outline: none;
45 font-size: 18px;
46 color: #333;
47 background-color: #fff;
48 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
49}
50
51.searchButton {
52 background-color: #FFA500;
53 color: white;
54 padding: 15px 25px;
55 border: none;
56 border-radius: 0 30px 30px 0;
57 cursor: pointer;
58 font-size: 18px;
59 transition: background-color 0.3s ease;
60}
61
62.searchButton:hover {
63 background-color: #e59400;
64 cursor: pointer;
65}
66
67.fullWidth {
68 width: 100%;
69}
70
71.filterContainer {
72 display: flex;
73 justify-content: space-between;
74 max-width: 100%;
75 margin: 20px auto;
76 gap: 20px;
77 flex-wrap: wrap;
78}
79
80.filterGroup {
81 display: flex;
82 flex-direction: column;
83 align-items: center;
84 flex: 1;
85 min-width: 200px;
86}
87
88.filterGroup.hasOpened {
89 margin-top: 10px;
90}
91
92.filterGroup label {
93 font-size: 16px;
94 margin-bottom: 5px;
95 color: #333;
96 text-align: left;
97 width: 100%;
98}
99
100.dropdown {
101 position: relative;
102 display: inline-block;
103 width: 100%;
104}
105
106.dropdownButton {
107 width: 100%;
108 padding: 10px 20px;
109 background-color: #fff;
110 color: #333;
111 border: 1px solid #ddd;
112 border-radius: 5px;
113 cursor: pointer;
114 font-size: 16px;
115 text-align: left;
116 transition: background-color 0.3s ease;
117
118 line-height: 1.6;
119}
120
121.dropdownContent {
122 display: none;
123 position: absolute;
124 background-color: #fff;
125 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
126 z-index: 1;
127 width: 100%;
128 border-radius: 5px;
129}
130
131.dropdown:hover .dropdownContent,
132.dropdownContent:hover {
133 display: block;
134}
135
136.dropdownItem {
137 padding: 10px;
138 cursor: pointer;
139 transition: background-color 0.3s ease, transform 0.3s ease;
140 font-size: 16px;
141}
142
143.dropdownItem:hover {
144 background-color: #FFA500;
145 color: white;
146}
147
148.ingredientSelection {
149 display: flex;
150 flex-direction: column;
151 gap: 10px;
152 width: 100%;
153}
154
155.searchInputContainer {
156 position: relative;
157 width: 100%;
158}
159
160.searchIngredientsInput {
161 width: 100%;
162 padding: 10px 35px 10px 20px;
163 margin-bottom: 10px;
164 border: 1px solid #ddd;
165 border-radius: 5px;
166 font-size: 16px;
167 box-sizing: border-box;
168}
169
170.searchIcon {
171 position: absolute;
172 right: 10px;
173 top: 40%;
174 transform: translateY(-50%);
175 color: #FFA500;
176 font-size: 18px;
177 pointer-events: none;
178}
179
180.ingredientList {
181 display: flex;
182 flex-wrap: nowrap;
183 justify-content: flex-start;
184 gap: 10px;
185 max-width: 100%;
186 overflow-x: auto;
187 overflow-y: hidden;
188 padding: 10px;
189 box-sizing: border-box;
190}
191
192.ingredientItem {
193 background-color: white;
194 border: 1px solid black;
195 color: #FFA500;
196 padding: 8px 15px;
197 border-radius: 5px;
198 cursor: pointer;
199 font-size: 14px;
200 user-select: none;
201 transition: transform 0.3s ease;
202 box-sizing: border-box;
203 flex: 0 0 auto;
204 text-align: center;
205}
206
207.ingredientItem:hover {
208 background-color: #e59400;
209 color: white;
210}
211
212.ingredientItem:active {
213 transform: scale(0.95);
214}
215
216.ingredientDropzone {
217 flex: 1;
218 min-height: 50px;
219 border: 2px dashed #ddd;
220 border-radius: 5px;
221 display: flex;
222 align-items: center;
223 justify-content: flex-start;
224 background-color: #f9f9f9;
225 flex-wrap: wrap;
226 padding: 10px;
227 padding-left: 20px;
228 transition: background-color 0.3s ease;
229}
230
231.ingredientDropzoneActive {
232 background-color: #ffe5b4;
233}
234
235.tag {
236 border: 1px solid black;
237 background-color: #FFA500;
238 color: white;
239 padding: 8px 15px;
240 border-radius: 20px;
241 margin: 5px;
242 cursor: pointer;
243 display: inline-flex;
244 align-items: center;
245 font-size: 14px;
246 transition: background-color 0.3s ease;
247 animation: fadeIn 0.3s;
248}
249
250.dropzonePlaceholder {
251 color: #999;
252}
253
254.tag:hover {
255 background-color: #e59400;
256}
257
258.tag:active {
259 transform: scale(0.95);
260}
261
262@keyframes fadeIn {
263 from {
264 opacity: 0;
265 }
266 to {
267 opacity: 1;
268 }
269}
270
271@media (max-width: 768px) {
272 .hero {
273 padding: 20px 0;
274 }
275
276 .heroTitle {
277 font-size: 28px;
278 margin-bottom: 15px;
279 }
280
281 .heroSubtitle {
282 font-size: 16px;
283 margin-bottom: 20px;
284 padding: 0 10px;
285 }
286
287 .searchContainer {
288 flex-direction: column;
289 align-items: center;
290 width: 100%;
291 max-width: 350px;
292 }
293
294 .searchInput {
295 width: 100%;
296 margin-bottom: 10px;
297 }
298
299 .searchButton {
300 width: 100%;
301 font-size: 20px;
302 }
303
304 .filterContainer {
305 flex-direction: column;
306 align-items: center;
307 width: 100%;
308 gap: 10px;
309 }
310
311 .filterGroup {
312 width: 100%;
313 }
314
315 .dropdownButton {
316 width: 100%;
317 padding: 12px;
318 }
319
320 .ingredientSelection {
321 width: 100%;
322 max-width: 100%;
323 }
324
325 .ingredientList {
326 flex-wrap: wrap;
327 justify-content: center;
328 gap: 8px;
329 max-width: 100%;
330 overflow-x: auto;
331 }
332
333 .ingredientItem {
334 width: auto;
335 flex: 1 1 auto;
336 text-align: center;
337 padding: 5px 10px;
338 font-size: 14px;
339 }
340
341 .ingredientDropzone {
342 width: 100%;
343 margin-top: 10px;
344 padding: 10px;
345 min-height: 60px;
346 overflow-x: auto;
347 }
348
349 .dropzonePlaceholder {
350 text-align: center;
351 font-size: 14px;
352 }
353}
354
Note: See TracBrowser for help on using the repository browser.