source: interfejs/style.css

main
Last change on this file was 69f2a41, checked in by Klimentina Efremova <klimentina08642@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 14.3 KB
RevLine 
[69f2a41]1/* Handcraft Marketplace - Pink & Dark Blue Theme */
2:root {
3 --dark-blue: #0A1929;
4 --medium-blue: #1E3A5F;
5 --light-blue: #3B5F8A;
6 --pink: #FF69B4;
7 --light-pink: #FFB6C1;
8 --soft-pink: #FFC0CB;
9 --white: #FFFFFF;
10 --off-white: #F8F9FA;
11 --gray: #6C757D;
12 --light-gray: #E9ECEF;
13 --success: #28A745;
14 --danger: #DC3545;
15 --warning: #FFC107;
16}
17
18* {
19 margin: 0;
20 padding: 0;
21 box-sizing: border-box;
22}
23
24body {
25 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26 background: linear-gradient(135deg, var(--off-white) 0%, var(--white) 100%);
27 color: var(--dark-blue);
28 min-height: 100vh;
29 display: flex;
30 flex-direction: column;
31}
32
33/* Header - White background for logo */
34header {
35 background-color: var(--white);
36 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
37 padding: 1rem 2rem;
38 display: flex;
39 justify-content: space-between;
40 align-items: center;
41 position: sticky;
42 top: 0;
43 z-index: 1000;
44}
45
46.logo-container {
47 display: flex;
48 align-items: center;
49 gap: 1rem;
50}
51
52.logo-container img {
53 max-height: 50px;
54 width: auto;
55 border-radius: 5px;
56}
57
58.logo-container h1 {
59 color: var(--dark-blue);
60 font-size: 1.5rem;
61 font-weight: 600;
62 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--pink) 100%);
63 -webkit-background-clip: text;
64 -webkit-text-fill-color: transparent;
65 background-clip: text;
66}
67
68nav ul {
69 display: flex;
70 list-style: none;
71 gap: 2rem;
72}
73
74nav a {
75 text-decoration: none;
76 color: var(--dark-blue);
77 font-weight: 500;
78 padding: 0.5rem 1rem;
79 border-radius: 5px;
80 transition: all 0.3s ease;
81}
82
83nav a:hover {
84 background: linear-gradient(135deg, var(--light-blue) 0%, var(--pink) 100%);
85 color: var(--white);
86}
87
88nav a.active {
89 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--pink) 100%);
90 color: var(--white);
91}
92
93.btn-register {
94 background: linear-gradient(135deg, var(--pink) 0%, var(--light-pink) 100%);
95 color: var(--white);
96}
97
98/* Main Content */
99main {
100 flex: 1;
101 padding: 2rem;
102 max-width: 1400px;
103 margin: 0 auto;
104 width: 100%;
105}
106
107/* Hero Section */
108.hero {
109 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--pink) 100%);
110 color: var(--white);
111 padding: 4rem 2rem;
112 border-radius: 20px;
113 margin-bottom: 3rem;
114 text-align: center;
115 position: relative;
116 overflow: hidden;
117}
118
119.hero::before {
120 content: '';
121 position: absolute;
122 top: 0;
123 left: 0;
124 right: 0;
125 bottom: 0;
126 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M20 20 L80 20 L80 80 L20 80 Z" fill="none" stroke="white" stroke-width="2"/><circle cx="50" cy="50" r="15" fill="none" stroke="white" stroke-width="2"/></svg>');
127 background-size: 50px 50px;
128}
129
130.hero-content {
131 position: relative;
132 z-index: 1;
133}
134
135.hero h2 {
136 font-size: 2.5rem;
137 margin-bottom: 1rem;
138}
139
140.hero p {
141 font-size: 1.2rem;
142 margin-bottom: 2rem;
143 opacity: 0.9;
144}
145
146/* Buttons */
147.btn-primary {
148 background: linear-gradient(135deg, var(--pink) 0%, var(--light-pink) 100%);
149 color: var(--white);
150 border: none;
151 padding: 0.75rem 1.5rem;
152 border-radius: 5px;
153 font-size: 1rem;
154 font-weight: 600;
155 cursor: pointer;
156 transition: transform 0.3s ease, box-shadow 0.3s ease;
157 text-decoration: none;
158 display: inline-block;
159}
160
161.btn-primary:hover {
162 transform: translateY(-2px);
163 box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
164}
165
166.btn-secondary {
167 background: transparent;
168 color: var(--white);
169 border: 2px solid var(--white);
170 padding: 0.75rem 1.5rem;
171 border-radius: 5px;
172 font-size: 1rem;
173 font-weight: 600;
174 cursor: pointer;
175 transition: all 0.3s ease;
176 text-decoration: none;
177 display: inline-block;
178 margin-left: 1rem;
179}
180
181.btn-secondary:hover {
182 background: var(--white);
183 color: var(--pink);
184}
185
186.btn-full {
187 width: 100%;
188}
189
190.btn-small {
191 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
192 color: var(--white);
193 border: none;
194 padding: 0.5rem 1rem;
195 border-radius: 3px;
196 font-size: 0.875rem;
197 cursor: pointer;
198 transition: transform 0.3s ease;
199 text-decoration: none;
200 display: inline-block;
201 text-align: center;
202}
203
204.btn-small:hover {
205 transform: translateY(-2px);
206}
207
208/* Features Section */
209.features {
210 margin-bottom: 3rem;
211}
212
213.features h2 {
214 text-align: center;
215 margin-bottom: 2rem;
216 color: var(--dark-blue);
217 font-size: 2rem;
218}
219
220.feature-grid {
221 display: grid;
222 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
223 gap: 2rem;
224}
225
226.feature-card {
227 background: linear-gradient(135deg, var(--white) 0%, var(--soft-pink) 100%);
228 padding: 2rem;
229 border-radius: 10px;
230 text-align: center;
231 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
232 transition: transform 0.3s ease;
233 border: 2px solid var(--light-pink);
234}
235
236.feature-card:hover {
237 transform: translateY(-5px);
238 box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);
239}
240
241.feature-icon {
242 font-size: 3rem;
243 margin-bottom: 1rem;
244 color: var(--pink);
245}
246
247.feature-card h3 {
248 margin-bottom: 1rem;
249 color: var(--dark-blue);
250}
251
252/* Categories Section */
253.categories {
254 margin-bottom: 3rem;
255}
256
257.categories h2 {
258 text-align: center;
259 margin-bottom: 2rem;
260 color: var(--dark-blue);
261 font-size: 2rem;
262}
263
264.category-list {
265 display: grid;
266 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
267 gap: 1.5rem;
268}
269
270.category-card {
271 background: linear-gradient(135deg, var(--light-blue) 0%, var(--pink) 100%);
272 color: var(--white);
273 padding: 1.5rem;
274 border-radius: 10px;
275 text-align: center;
276 cursor: pointer;
277 transition: transform 0.3s ease;
278}
279
280.category-card:hover {
281 transform: translateY(-5px);
282}
283
284.category-card h3 {
285 margin-bottom: 1rem;
286}
287
288/* Product Grid */
289.product-grid {
290 display: grid;
291 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
292 gap: 2rem;
293 margin-top: 2rem;
294}
295
296.product-card {
297 background: var(--white);
298 border-radius: 10px;
299 overflow: hidden;
300 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
301 transition: transform 0.3s ease;
302 border: 2px solid var(--light-pink);
303}
304
305.product-card:hover {
306 transform: translateY(-5px);
307 box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);
308}
309
310.product-image {
311 width: 100%;
312 height: 200px;
313 overflow: hidden;
314 background: linear-gradient(135deg, var(--light-gray) 0%, var(--soft-pink) 100%);
315}
316
317.product-image img {
318 width: 100%;
319 height: 100%;
320 object-fit: cover;
321}
322
323.product-info {
324 padding: 1.5rem;
325}
326
327.product-info h3 {
328 margin-bottom: 0.5rem;
329 color: var(--dark-blue);
330 font-size: 1rem;
331 line-height: 1.4;
332}
333
334.product-price {
335 font-size: 1.25rem;
336 font-weight: bold;
337 color: var(--pink);
338 margin-bottom: 0.5rem;
339}
340
341.product-store {
342 color: var(--light-blue);
343 font-size: 0.875rem;
344 margin-bottom: 1rem;
345}
346
347/* Forms */
348.form-container {
349 max-width: 500px;
350 margin: 0 auto;
351 background: var(--white);
352 padding: 2rem;
353 border-radius: 10px;
354 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
355 border: 2px solid var(--light-pink);
356}
357
358.form-container-large {
359 max-width: 700px;
360}
361
362.form h2, .form h3 {
363 color: var(--dark-blue);
364 margin-bottom: 1rem;
365}
366
367.form h3 {
368 margin-top: 1.5rem;
369 padding-bottom: 0.5rem;
370 border-bottom: 2px solid var(--pink);
371}
372
373.form-subtitle {
374 color: var(--gray);
375 margin-bottom: 2rem;
376 text-align: center;
377}
378
379.form-group {
380 margin-bottom: 1.5rem;
381}
382
383.form-row {
384 display: grid;
385 grid-template-columns: 1fr 1fr;
386 gap: 1rem;
387}
388
389label {
390 display: block;
391 margin-bottom: 0.5rem;
392 color: var(--dark-blue);
393 font-weight: 500;
394}
395
396input[type="text"],
397input[type="email"],
398input[type="password"],
399input[type="date"],
400input[type="number"],
401select,
402textarea {
403 width: 100%;
404 padding: 0.75rem;
405 border: 2px solid var(--light-gray);
406 border-radius: 5px;
407 font-size: 1rem;
408 transition: border-color 0.3s ease;
409}
410
411input:focus,
412select:focus,
413textarea:focus {
414 outline: none;
415 border-color: var(--pink);
416}
417
418.password-hint {
419 color: var(--gray);
420 font-size: 0.75rem;
421 margin-top: 0.25rem;
422 display: block;
423}
424
425.form-note {
426 color: var(--gray);
427 font-size: 0.875rem;
428 margin-bottom: 1rem;
429}
430
431.checkbox {
432 display: flex;
433 align-items: center;
434 gap: 0.5rem;
435}
436
437.checkbox input {
438 width: auto;
439}
440
441.checkbox label {
442 margin-bottom: 0;
443}
444
445.form-footer {
446 text-align: center;
447 margin-top: 2rem;
448 padding-top: 1rem;
449 border-top: 1px solid var(--light-gray);
450}
451
452.form-footer a {
453 color: var(--pink);
454 text-decoration: none;
455 font-weight: 600;
456}
457
458.form-footer a:hover {
459 text-decoration: underline;
460}
461
462/* Modal */
463.modal {
464 display: none;
465 position: fixed;
466 z-index: 1001;
467 left: 0;
468 top: 0;
469 width: 100%;
470 height: 100%;
471 background-color: rgba(0, 0, 0, 0.5);
472}
473
474.modal-content {
475 background: linear-gradient(135deg, var(--white) 0%, var(--soft-pink) 100%);
476 margin: 15% auto;
477 padding: 2rem;
478 border-radius: 10px;
479 max-width: 400px;
480 position: relative;
481 border: 3px solid var(--pink);
482}
483
484.close {
485 color: var(--gray);
486 float: right;
487 font-size: 2rem;
488 font-weight: bold;
489 cursor: pointer;
490 line-height: 1;
491}
492
493.close:hover {
494 color: var(--dark-blue);
495}
496
497.code-expiry {
498 color: var(--danger);
499 font-weight: bold;
500 margin: 1rem 0;
501}
502
503.resend-link {
504 margin-top: 1rem;
505 font-size: 0.875rem;
506}
507
508.resend-link a {
509 color: var(--pink);
510 text-decoration: none;
511 font-weight: 600;
512}
513
514/* Dashboard Cards */
515.dashboard-header {
516 margin-bottom: 2rem;
517}
518
519.dashboard-header h2 {
520 color: var(--dark-blue);
521 font-size: 2rem;
522}
523
524.dashboard-stats {
525 display: grid;
526 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
527 gap: 1.5rem;
528 margin-bottom: 2rem;
529}
530
531.stat-card {
532 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--pink) 100%);
533 color: var(--white);
534 padding: 1.5rem;
535 border-radius: 10px;
536 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
537}
538
539.stat-card h3 {
540 font-size: 1rem;
541 margin-bottom: 0.5rem;
542 opacity: 0.9;
543}
544
545.stat-number {
546 font-size: 2rem;
547 font-weight: bold;
548}
549
550.stat-card.pink {
551 background: linear-gradient(135deg, var(--pink) 0%, var(--light-pink) 100%);
552}
553
554.stat-card.blue {
555 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
556}
557
558.dashboard-section {
559 background: var(--white);
560 border-radius: 10px;
561 padding: 1.5rem;
562 margin-bottom: 2rem;
563 border: 2px solid var(--light-pink);
564}
565
566.dashboard-section h3 {
567 color: var(--dark-blue);
568 margin-bottom: 1rem;
569 padding-bottom: 0.5rem;
570 border-bottom: 2px solid var(--pink);
571}
572
573/* Tables */
574table {
575 width: 100%;
576 border-collapse: collapse;
577 margin-top: 1rem;
578}
579
580th {
581 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
582 color: var(--white);
583 padding: 0.75rem;
584 text-align: left;
585 font-weight: 600;
586}
587
588td {
589 padding: 0.75rem;
590 border-bottom: 1px solid var(--light-gray);
591}
592
593tr:hover {
594 background-color: var(--soft-pink);
595}
596
597.status-badge {
598 padding: 0.25rem 0.5rem;
599 border-radius: 3px;
600 font-size: 0.75rem;
601 font-weight: 600;
602}
603
604.status-pending {
605 background: var(--warning);
606 color: var(--dark-blue);
607}
608
609.status-approved,
610.status-delivered {
611 background: var(--success);
612 color: var(--white);
613}
614
615.status-rejected,
616.status-canceled {
617 background: var(--danger);
618 color: var(--white);
619}
620
621/* Tabs */
622.tabs {
623 display: flex;
624 gap: 0.5rem;
625 margin-bottom: 1.5rem;
626 border-bottom: 2px solid var(--light-pink);
627 padding-bottom: 0.5rem;
628}
629
630.tab-btn {
631 background: none;
632 border: none;
633 padding: 0.5rem 1rem;
634 cursor: pointer;
635 font-size: 1rem;
636 color: var(--gray);
637 border-radius: 5px 5px 0 0;
638 transition: all 0.3s ease;
639}
640
641.tab-btn:hover {
642 color: var(--pink);
643}
644
645.tab-btn.active {
646 color: var(--white);
647 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--pink) 100%);
648}
649
650.tab-content {
651 display: none;
652}
653
654.tab-content.active {
655 display: block;
656}
657
658/* Loading States */
659.loading {
660 text-align: center;
661 padding: 2rem;
662 color: var(--gray);
663}
664
665.loading::after {
666 content: '';
667 display: inline-block;
668 width: 1rem;
669 height: 1rem;
670 border: 2px solid var(--light-pink);
671 border-top-color: var(--pink);
672 border-radius: 50%;
673 animation: spin 1s linear infinite;
674 margin-left: 0.5rem;
675}
676
677@keyframes spin {
678 to { transform: rotate(360deg); }
679}
680
681/* Footer */
682footer {
683 background: linear-gradient(135deg, var(--dark-blue) 0%, var(--medium-blue) 100%);
684 color: var(--white);
685 margin-top: 3rem;
686 padding: 3rem 2rem 1rem;
687}
688
689.footer-content {
690 max-width: 1400px;
691 margin: 0 auto;
692 display: grid;
693 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
694 gap: 2rem;
695}
696
697.footer-section h3 {
698 color: var(--pink);
699 margin-bottom: 1rem;
700}
701
702.footer-section ul {
703 list-style: none;
704}
705
706.footer-section a {
707 color: var(--white);
708 text-decoration: none;
709 transition: color 0.3s ease;
710}
711
712.footer-section a:hover {
713 color: var(--pink);
714}
715
716.footer-bottom {
717 text-align: center;
718 margin-top: 2rem;
719 padding-top: 1rem;
720 border-top: 1px solid rgba(255, 255, 255, 0.1);
721}
722
723/* Responsive Design */
724@media (max-width: 768px) {
725 header {
726 flex-direction: column;
727 gap: 1rem;
728 }
729
730 nav ul {
731 flex-wrap: wrap;
732 justify-content: center;
733 gap: 0.5rem;
734 }
735
736 .hero h2 {
737 font-size: 2rem;
738 }
739
740 .hero p {
741 font-size: 1rem;
742 }
743
744 .btn-secondary {
745 margin-left: 0;
746 margin-top: 1rem;
747 }
748
749 .form-row {
750 grid-template-columns: 1fr;
751 }
752
753 .dashboard-stats {
754 grid-template-columns: 1fr;
755 }
756
757 .modal-content {
758 margin: 30% auto;
759 width: 90%;
760 }
761}
762
763@media (max-width: 480px) {
764 .logo-container {
765 flex-direction: column;
766 text-align: center;
767 }
768
769 .logo-container h1 {
770 font-size: 1.2rem;
771 }
772
773 .hero {
774 padding: 2rem 1rem;
775 }
776
777 .hero h2 {
778 font-size: 1.5rem;
779 }
780
781 .feature-grid {
782 grid-template-columns: 1fr;
783 }
784
785 .category-list {
786 grid-template-columns: 1fr;
787 }
788
789 .product-grid {
790 grid-template-columns: 1fr;
791 }
792}
Note: See TracBrowser for help on using the repository browser.