source: frontend/css.css@ 1c51912

Last change on this file since 1c51912 was c164f8f, checked in by Kristijan <kristijanzafirovski26@…>, 6 days ago

pred-finalna
  • Property mode set to 100644
File size: 6.6 KB
RevLine 
[c164f8f]1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f9;
4 color: #333;
5 margin: 0;
6 padding: 0;
7 display: flex;
8 height: 100vh;
9 overflow: hidden; /* Add this to prevent body overflow */
10}
11
12.top-right {
13 position: absolute;
14 top: 20px;
15 right: 20px;
16}
17
18.login-button {
19 background-color: #007bff;
20 color: white;
21 border: none;
22 padding: 10px 20px;
23 border-radius: 5px;
24 cursor: pointer;
25 transition: background-color 0.3s;
26}
27
28.login-button:hover {
29 background-color: #0056b3;
30}
31
32.sidebar {
33 width: 300px;
34 background-color: #ffffff;
35 padding: 20px;
36 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
37 display: flex;
38 flex-direction: column;
39 align-items: center;
40 justify-content: space-evenly;
41 box-sizing: border-box;
42}
43
44.logo {
45 margin-bottom: 20px;
46}
47
48.logo img {
49 max-width: 100%;
50 height: auto;
51}
52
53.searchBar {
54 width: 100%;
55}
56
57.searchBar form {
58 display: flex;
59 flex-direction: column;
60}
61
62.searchBar label {
63 margin: 10px 0 5px;
64 font-weight: bold;
65}
66
67.searchBar input[type="text"],
68.searchBar input[type="date"],
69.searchBar input[type="number"] {
70 border: 1px solid #ccc;
71 border-radius: 5px;
72 padding: 10px;
73 font-size: 16px;
74 width: 100%;
75 margin-bottom: 20px;
76 box-sizing: border-box;
77}
78
79.searchBar input[type="submit"] {
80 background-color: #007bff;
81 color: #fff;
82 border: none;
83 border-radius: 5px;
84 padding: 10px;
85 font-size: 16px;
86 cursor: pointer;
87 transition: background-color 0.3s ease;
88}
89
90.searchBar input[type="submit"]:hover {
91 background-color: #0056b3;
92}
93
94.content {
95 flex: 1;
96 padding: 20px;
97 overflow-y: auto;
98 overflow-x: hidden; /* Add this to prevent horizontal overflow */
99 box-sizing: border-box;
100}
101
102#givenOptions {
103 width: 100%;
104 margin-top: 20px;
105 padding: 20px;
106 border-radius: 10px;
107 box-sizing: border-box;
108}
109
110.option {
111 display: flex;
112 justify-content: space-between;
113 align-items: center;
114 width: 100%;
115 border: 1px solid #ccc;
116 border-radius: 10px;
117 margin-bottom: 20px;
118 padding: 20px;
119 box-sizing: border-box;
120 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
121 background-color: #f4f4f9;
122 overflow-x: auto; /* Add this to handle overflow within option */
123}
124.btnWrapper{
125 display: flex;
126 flex-direction: column;
127 justify-content: space-evenly;
128}
129
130.favBtn{
131 display: none;
132}
133.image {
134 width: 100%;
135 max-width: 300px;
136 height: auto;
137 border-radius: 10px;
138 margin-bottom: 15px;
139}
140
141.option-details {
142 display: flex;
143 flex-direction: column;
144 align-items: center;
145 width: calc(100% - 300px); /* Adjust width to fit within option */
146 box-sizing: border-box;
147}
148
149p, h1, h2 {
150 margin: 0;
151 padding: 5px 0;
152 text-align: center;
153}
154
155h1 {
156 font-size: 24px;
157 font-weight: bold;
158}
159
160h2 {
161 font-size: 20px;
162 color: #007bff;
163}
164
165.country {
166 font-size: 18px;
167 color: #555;
168}
169
170.price {
171 font-size: 22px;
172 font-weight: bold;
173 color: #e74c3c;
174}
175
176.loading-overlay {
177 position: fixed;
178 top: 0;
179 left: 0;
180 right: 0;
181 bottom: 0;
182 background-color: rgba(255, 255, 255, 0.8);
183 display: flex;
184 justify-content: center;
185 align-items: center;
186 z-index: 1000;
187 display: none;
188}
189
190.loading-content {
191 text-align: center;
192}
193
194.spinner {
195 border: 8px solid #f3f3f3;
196 border-top: 8px solid #3498db;
197 border-radius: 50%;
198 width: 60px;
199 height: 60px;
200 animation: spin 2s linear infinite;
201}
202
203@keyframes spin {
204 0% { transform: rotate(0deg); }
205 100% { transform: rotate(360deg); }
206}
207
208
209.popup {
210 display: none;
211 position: fixed;
212 z-index: 1000;
213 left: 0;
214 top: 0;
215 width: 100%;
216 height: 100%;
217 overflow: auto;
218 background-color: rgba(0, 0, 0, 0.4);
219}
220
221.popup-content {
222 background-color: #fff;
223 margin: 15% auto;
224 padding: 20px;
225 border: 1px solid #888;
226 width: 80%;
227 max-width: 400px;
228 border-radius: 10px;
229 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
230 text-align: center;
231 display: flex;
232 flex-direction: column;
233 align-items: center;
234}
235
236.close {
237 color: #aaa;
238 align-self: flex-end;
239 font-size: 28px;
240 font-weight: bold;
241 cursor: pointer;
242 margin-bottom: 10px;
243}
244
245.close:hover,
246.close:focus {
247 color: black;
248 text-decoration: none;
249}
250
251form {
252 width: 100%;
253}
254
255form label {
256 margin: 10px 0 5px;
257 font-weight: bold;
258 width: 100%;
259 text-align: left;
260}
261
262form input[type="email"],
263form input[type="password"],
264form input[type="text"] {
265 width: 100%;
266 padding: 10px;
267 margin-bottom: 20px;
268 border: 1px solid #ccc;
269 border-radius: 5px;
270 box-sizing: border-box;
271 font-size: 16px;
272}
273
274.button {
275 width: 100%;
276 padding: 10px;
277 margin: 10px 0;
278 background-color: #007bff;
279 color: white;
280 border: none;
281 border-radius: 5px;
282 cursor: pointer;
283 font-size: 16px;
284 transition: background-color 0.3s;
285}
286
287.button:hover {
288 background-color: #0056b3;
289}
290
291.button[type="button"] {
292 background-color: #dd4b39;
293}
294
295.button[type="button"]:hover {
296 background-color: #c23321;
297}
298
299form p {
300 margin-top: 20px;
301 text-align: center;
302}
303
304form a {
305 color: #007bff;
306}
307
308form a:hover {
309 color: #0056b3;
310}
311
312/* Response Messages */
313.response {
314 margin-top: 10px;
315 color: red;
316}
317
318.accDetails {
319 display: none;
320}
321.overlay {
322 display: none;
323 position: fixed;
324 top: 0;
325 left: 0;
326 width: 100%;
327 height: 100%;
328 background-color: rgba(0, 0, 0, 0.7);
329 z-index: 1000;
330}
331
332.overlay-content {
333 position: relative;
334 margin: 5% auto;
335 padding: 20px;
336 width: 80%;
337 max-width: 1000px;
338 background-color: #fff;
339 display: flex;
340 justify-content: space-between;
341}
342
343.close {
344 position: absolute;
345 top: 10px;
346 right: 25px;
347 color: #aaa;
348 font-size: 35px;
349 font-weight: bold;
350 cursor: pointer;
351}
352
353.close:hover,
354.close:focus {
355 color: #000;
356 text-decoration: none;
357 cursor: pointer;
358}
359
360.saved-trips-container,
361.price-changes-container {
362 width: 48%;
363 overflow-y: auto;
364 max-height: 600px;
365}
366
367h2 {
368 text-align: center;
369}
370
371#savedTripsList,
372#priceChangesList {
373 list-style-type: none;
374 padding: 0;
375}
376
377#savedTripsList .option,
378#priceChangesList .price-change {
379 padding: 10px;
380 margin: 10px 0;
381 border: 1px solid #ccc;
382 border-radius: 5px;
383 background-color: #f4f4f9;
384}
385.btn {
386 margin: 15px;
387 width: 200px;
388 height: 30px;
389 background-color: #007bff;
390 color: white;
391 border: none;
392 border-radius: 5px;
393 cursor: pointer;
394 transition: background-color 0.3s;
395}
396
397.btn:disabled {
398 background-color: grey;
399 cursor: not-allowed;
400 opacity: 0.65;
401}
Note: See TracBrowser for help on using the repository browser.