This repository has no description
1/* src/components/Admin/AdminPanel.css */
2.admin-panel {
3 font-family: "articulat-cf", sans-serif;
4 max-width: 1200px;
5 margin: 0 auto;
6 padding: 20px;
7 color: var(--text);
8 background-color: var(--background);
9 transition: color 0.3s ease, background-color 0.3s ease;
10 }
11
12 /* Header */
13 .admin-header {
14 display: flex;
15 justify-content: space-between;
16 align-items: center;
17 margin-bottom: 20px;
18 padding-bottom: 10px;
19 margin-top: 20px;
20 }
21
22 .admin-header h1 {
23 margin: 0;
24 color: var(--button-bg);
25 font-size: 1.9em;
26 font-weight: 800;
27 }
28
29 /* Tab navigation - Updated */
30 .nav-tabs {
31 display: flex;
32 margin: 0 auto;
33 }
34
35 .nav-tab {
36 padding: 10px 20px;
37 background-color: var(--navbar-bg);
38 border: 1px solid var(--card-border);
39 border-bottom: 2px solid transparent;
40 cursor: pointer;
41 font-size: 16px;
42 margin: 0 5px;
43 color: var(--text);
44 transition: all 0.3s ease;
45 }
46
47 .nav-tab:hover {
48 background-color: var(--background);
49 border-color: var(--button-bg);
50 }
51
52 .nav-tab.active {
53 border-bottom: 2px solid var(--button-bg);
54 color: var(--button-bg);
55 font-weight: bold;
56 }
57
58 /* Container layout */
59 .admin-container {
60 display: grid;
61 grid-template-columns: 300px 1fr;
62 gap: 20px;
63 height: 133.0vh;
64 }
65
66 /* Resources sidebar */
67 .resources-sidebar {
68 flex-direction: column;
69 height: 93.8%;
70 overflow: scroll;
71 padding: 10px;
72 background: var(--navbar-bg);
73 border: 5px solid var(--card-border);
74 border-radius: 12px;
75 box-shadow: none;
76 }
77
78 .sidebar-header {
79 display: flex;
80 justify-content: space-between;
81 align-items: center;
82 padding: 15px;
83 background-color: var(--navbar-bg);
84 border-bottom: 1px solid var(--card-border);
85 transition: background-color 0.3s ease, border-color 0.3s ease;
86 }
87
88 .sidebar-header h2 {
89 margin: 0;
90 font-size: 18px;
91 color: var(--text);
92 }
93
94 .sidebar-filters {
95 padding: 10px 0px;
96 border-bottom: 1px solid var(--card-border);
97 background-color: var(--navbar-bg);
98 transition: background-color 0.3s ease, border-color 0.3s ease;
99 }
100
101 .filter-group {
102 margin-bottom: 8px;
103 }
104
105 .search-input {
106 background-color: var(--navbar-bg);
107 border: 1px solid var(--card-border);
108 color: var(--text);
109 font-size: 14px;
110 padding: 8px;
111 transition: all .3s ease;
112 width: 100%;
113 margin: 0px;
114 display: flex;
115 }
116
117 .search-input:hover,
118 .search-input:focus {
119 border-color: var(--button-bg);
120 background-color: var(--background);
121 }
122
123 .status-filter,
124 .completeness-filter {
125 width: 49%;
126 padding: 6px;
127 border: 1px solid var(--card-border);
128 border-radius: 4px;
129 font-size: 13px;
130 margin-right: 2%;
131 background-color: var(--navbar-bg);
132 color: var(--text);
133 transition: all 0.3s ease;
134 }
135
136 .status-filter:hover,
137 .completeness-filter:hover,
138 .status-filter:focus,
139 .completeness-filter:focus {
140 border-color: var(--button-bg);
141 background-color: var(--background);
142 }
143
144 .completeness-filter {
145 margin-right: 0;
146 }
147
148 .resources-list {
149 overflow-y: auto;
150 flex-grow: 1;
151 }
152
153 .resource-item {
154 display: flex;
155 flex-direction: column;
156 padding: 0;
157 border-bottom: 1px solid var(--card-border);
158 cursor: pointer;
159 transition: background-color 0.2s;
160 position: relative;
161 color: var(--text);
162 }
163
164 .resource-completeness-indicator {
165 height: 3px;
166 width: 100%;
167 background-color: var(--card-border);
168 }
169
170 .completeness-bar {
171 height: 100%;
172 background-color: #52c41a;
173 transition: width 0.3s;
174 }
175
176 .resource-item-content {
177 display: flex;
178 justify-content: space-between;
179 padding: 12px 15px;
180 }
181
182 .resource-item:hover {
183 background-color: var(--background);
184 }
185
186 .resource-item.selected {
187 background-color: rgba(59, 154, 248, 0.1);
188 border-left: 3px solid var(--button-bg);
189 }
190
191 .resource-item.status-draft .completeness-bar {
192 background-color: #faad14;
193 }
194
195 .resource-item.status-review .completeness-bar {
196 background-color: #1890ff;
197 }
198
199 .resource-item.status-published .completeness-bar {
200 background-color: #52c41a;
201 }
202
203 .resource-item-name {
204 overflow: hidden;
205 text-overflow: ellipsis;
206 white-space: nowrap;
207 flex-grow: 1;
208 }
209
210 .resource-item-meta {
211 display: flex;
212 gap: 5px;
213 font-size: 12px;
214 margin-top: 4px;
215 }
216
217 .status-badge {
218 padding: 2px 6px;
219 border-radius: 10px;
220 font-size: 11px;
221 text-transform: uppercase;
222 font-weight: bold;
223 }
224
225 .status-badge.status-draft {
226 background-color: rgba(250, 173, 20, 0.2);
227 color: #faad14;
228 border: 1px solid #faad14;
229 }
230
231 .status-badge.status-review {
232 background-color: rgba(24, 144, 255, 0.2);
233 color: #1890ff;
234 border: 1px solid #1890ff;
235 }
236
237 .status-badge.status-published {
238 background-color: rgba(82, 196, 26, 0.2);
239 color: #52c41a;
240 border: 1px solid #52c41a;
241 }
242
243 .featured-badge {
244 background-color: rgba(114, 46, 209, 0.2);
245 color: #722ed1;
246 border: 1px solid #722ed1;
247 padding: 2px 6px;
248 border-radius: 10px;
249 font-size: 11px;
250 text-transform: uppercase;
251 font-weight: bold;
252 }
253
254 .resource-item-actions {
255 display: flex;
256 gap: 5px;
257 visibility: hidden;
258 }
259
260 .resource-item:hover .resource-item-actions {
261 visibility: visible;
262 }
263
264 /* Resource editor */
265 .resource-editor {
266 color: var(--text);
267 height: 92%;
268 overflow-y: auto;
269 padding: 20px;
270 transition: background-color .3s ease,border-color .3s ease;
271 background: var(--navbar-bg);
272 border: 5px solid var(--card-border);
273 border-radius: 12px;
274 box-shadow: none;
275 }
276
277 .editor-header {
278 margin-bottom: 20px;
279 }
280
281 .resource-editor input {
282 margin: 0px;
283 }
284
285 .editor-header h2 {
286 margin: 0;
287 color: var(--text);
288 }
289
290 .floating-actions {
291 display: flex;
292 align-items: center;
293 gap: 15px;
294 }
295
296 .floating-save-button {
297 background-color: var(--button-bg);
298 color: var(--button-text);
299 padding: 8px 16px;
300 border-radius: 4px;
301 font-weight: 700;
302 font-size: 0.9em;
303 transition: background-color 0.3s ease;
304 margin: 0px;
305 }
306
307 .floating-save-button:hover {
308 background-color: #004F84;
309 }
310
311 .status-selector {
312 display: flex;
313 align-items: center;
314 gap: 10px;
315 }
316
317 .status-selector span {
318 font-weight: 500;
319 color: var(--text);
320 }
321
322 .status-buttons {
323 display: flex;
324 border: 1px solid var(--card-border);
325 border-radius: 4px;
326 overflow: hidden;
327 }
328
329 .status-button {
330 padding: 6px 10px;
331 background-color: var(--navbar-bg);
332 border: none;
333 border-right: 1px solid var(--card-border);
334 cursor: pointer;
335 font-size: 13px;
336 color: var(--text);
337 transition: all 0.3s ease;
338 }
339
340 .status-button:last-child {
341 border-right: none;
342 }
343
344 .status-button.active {
345 background-color: var(--button-bg);
346 color: var(--button-text);
347 }
348
349 .status-button:hover:not(.active) {
350 background-color: var(--background);
351 }
352
353 .resource-editor h2 {
354 margin-top: 0;
355 margin-bottom: 20px;
356 color: var(--text);
357 }
358
359 /* Form styling */
360 .form-row {
361 display: grid;
362 grid-template-columns: 1fr 1fr;
363 gap: 15px;
364 margin-bottom: 15px;
365 }
366
367 .form-group {
368 margin-bottom: 15px;
369 }
370
371 .form-group label {
372 display: block;
373 margin-bottom: 5px;
374 font-weight: 500;
375 color: var(--text);
376 }
377
378 .form-group input[type="text"],
379 .form-group input[type="url"],
380 .form-group input[type="number"],
381 .form-group textarea {
382 width: 100%;
383 border: 1px solid var(--card-border);
384 border-radius: 4px;
385 font-size: 14px;
386 background-color: var(--navbar-bg);
387 color: var(--text);
388 padding: 8px;
389 transition: all 0.3s ease;
390 }
391
392 .form-group input[type="text"]:hover,
393 .form-group input[type="url"]:hover,
394 .form-group input[type="number"]:hover,
395 .form-group textarea:hover,
396 .form-group input[type="text"]:focus,
397 .form-group input[type="url"]:focus,
398 .form-group input[type="number"]:focus,
399 .form-group textarea:focus {
400 border-color: var(--button-bg);
401 background-color: var(--background);
402 }
403
404 .form-group textarea {
405 resize: vertical;
406 min-height: 100px;
407 font-family: articulat-cf;
408 }
409
410 .checkbox-group {
411 display: flex;
412 align-items: center;
413 gap: 8px;
414 }
415
416 .checkbox-group input[type="checkbox"] {
417 margin: 0;
418 }
419
420 .checkbox-group label {
421 margin-bottom: 0;
422 }
423
424 /* Categories and Tags sections */
425 .categories-section,
426 .tags-section {
427 background-color: var(--background);
428 border-radius: 6px;
429 padding: 15px;
430 border: 1px solid var(--card-border);
431 transition: background-color 0.3s ease, border-color 0.3s ease;
432 }
433
434 .section-header {
435 display: flex;
436 justify-content: space-between;
437 align-items: center;
438 margin-bottom: 10px;
439 }
440
441 .section-header label {
442 font-weight: 600;
443 margin-bottom: 0;
444 color: var(--text);
445 }
446
447 .checkbox-list {
448 max-height: 200px;
449 overflow-y: auto;
450 }
451
452 .checkbox-item {
453 display: flex;
454 align-items: center;
455 margin-bottom: 8px;
456 gap: 8px;
457 }
458
459 .checkbox-item label {
460 margin-bottom: 0;
461 font-weight: normal;
462 color: var(--text);
463 }
464
465 /* Form actions */
466 .form-actions {
467 display: flex;
468 justify-content: flex-end;
469 gap: 10px;
470 margin-top: 20px;
471 }
472
473 /* Buttons */
474 button {
475 cursor: pointer;
476 border: none;
477 border-radius: 4px;
478 font-size: 14px;
479 transition: background-color 0.2s, opacity 0.2s;
480 }
481
482 button:disabled {
483 opacity: 0.5;
484 cursor: not-allowed;
485 }
486
487 .add-new-button {
488 background-color: var(--button-bg);
489 color: var(--button-text);
490 padding: 6px 12px;
491 font-size: 13px;
492 font-weight: 700;
493 }
494
495 .add-new-button:hover {
496 background-color: #004F84;
497 }
498
499 .delete-button {
500 background: none;
501 font-size: 16px;
502 opacity: .7;
503 padding: 3px 6px;
504 margin: 0px;
505 margin-left: 10px;
506 margin-bottom: 10px;
507 }
508
509 .delete-button:hover {
510 opacity: 1;
511 background-color: rgba(244, 67, 54, 0.1);
512 }
513
514 .add-item-button {
515 background-color: var(--navbar-bg);
516 color: var(--text);
517 padding: 4px 8px;
518 font-size: 12px;
519 border: 1px solid var(--card-border);
520 transition: all 0.3s ease;
521 }
522
523 .add-item-button:hover {
524 background-color: var(--background);
525 border-color: var(--button-bg);
526 }
527
528 .save-button {
529 background-color: var(--button-bg);
530 color: var(--button-text);
531 padding: 10px 20px;
532 font-weight: 700;
533 }
534
535 .save-button:hover {
536 background-color: #004F84;
537 }
538
539 .cancel-button {
540 background-color: var(--navbar-bg);
541 color: var(--text);
542 padding: 10px 20px;
543 border: 1px solid var(--card-border);
544 transition: all 0.3s ease;
545 }
546
547 .cancel-button:hover {
548 background-color: var(--background);
549 border-color: var(--button-bg);
550 }
551
552 .logout-button {
553 background-color: var(--navbar-bg);
554 color: var(--text);
555 padding: 8px 16px;
556 border: 1px solid var(--card-border);
557 transition: all 0.3s ease;
558 margin: 0px;
559 }
560
561 .logout-button:hover {
562 background-color: var(--background);
563 border-color: var(--button-bg);
564 }
565
566 /* Alert messages */
567 .alert {
568 padding: 12px 15px;
569 margin-bottom: 20px;
570 border-radius: 4px;
571 font-weight: 500;
572 }
573
574 .alert.success {
575 background-color: rgba(82, 196, 26, 0.1);
576 border: 1px solid #52c41a;
577 color: #52c41a;
578 }
579
580 .alert.error {
581 background-color: rgba(245, 34, 45, 0.1);
582 border: 1px solid #f5222d;
583 color: #f5222d;
584 }
585
586 /* Loading spinner */
587 .admin-loading {
588 display: flex;
589 flex-direction: column;
590 align-items: center;
591 justify-content: center;
592 height: 100vh;
593 color: var(--text);
594 background-color: var(--background);
595 }
596
597 .loading-spinner {
598 border: 4px solid var(--card-border);
599 border-top: 4px solid var(--button-bg);
600 border-radius: 50%;
601 width: 40px;
602 height: 40px;
603 animation: spin 1s linear infinite;
604 margin-bottom: 15px;
605 }
606
607 /* Reorder container - Updated */
608 .reorder-container {
609 max-width: 1200px;
610 margin: 0 auto;
611 padding: 20px;
612 background: var(--navbar-bg);
613 border: 5px solid var(--card-border);
614 border-radius: 12px;
615 color: var(--text);
616 }
617
618 .reorder-header {
619 display: flex;
620 justify-content: space-between;
621 align-items: center;
622 margin-bottom: 20px;
623 }
624
625 .reorder-controls {
626 display: flex;
627 align-items: center;
628 gap: 15px;
629 }
630
631 .reorder-mode-selector {
632 display: flex;
633 gap: 10px;
634 }
635
636 .mode-button {
637 padding: 8px 16px;
638 background-color: var(--navbar-bg);
639 border: 1px solid var(--card-border);
640 border-radius: 4px;
641 cursor: pointer;
642 color: var(--text);
643 transition: all 0.3s ease;
644 }
645
646 .mode-button:hover {
647 background-color: var(--background);
648 border-color: var(--button-bg);
649 }
650
651 .mode-button.active {
652 background-color: var(--button-bg);
653 color: var(--button-text);
654 border-color: var(--button-bg);
655 }
656
657 .category-select {
658 padding: 8px;
659 min-width: 200px;
660 border: 1px solid var(--card-border);
661 border-radius: 4px;
662 background-color: var(--navbar-bg);
663 color: var(--text);
664 transition: all 0.3s ease;
665 }
666
667 .category-select:hover,
668 .category-select:focus {
669 border-color: var(--button-bg);
670 background-color: var(--background);
671 }
672
673 /* Position input - New */
674 .position-control {
675 display: flex;
676 align-items: center;
677 gap: 8px;
678 margin-left: 10px;
679 }
680
681 .position-input {
682 width: 60px;
683 padding: 3px 5px;
684 border: 1px solid var(--card-border);
685 border-radius: 4px;
686 background-color: var(--navbar-bg);
687 color: var(--text);
688 font-size: 13px;
689 transition: all 0.3s ease;
690 }
691
692 .position-input:hover,
693 .position-input:focus {
694 border-color: var(--button-bg);
695 background-color: var(--background);
696 }
697
698 /* Sortable resources list */
699 .sortable-resources {
700 display: flex;
701 flex-direction: column;
702 gap: 10px;
703 }
704
705 .sortable-resource-item {
706 display: flex;
707 justify-content: space-between;
708 align-items: center;
709 padding: 15px;
710 background-color: var(--background);
711 border: 1px solid var(--card-border);
712 border-radius: 4px;
713 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
714 transition: all 0.3s ease;
715 }
716
717 .resource-info {
718 flex: 1;
719 }
720
721 .resource-name {
722 font-weight: bold;
723 margin-bottom: 5px;
724 color: var(--text);
725 }
726
727 .resource-meta {
728 display: flex;
729 gap: 10px;
730 font-size: 0.9rem;
731 align-items: center;
732 flex-wrap: wrap;
733 }
734
735 .reorder-actions {
736 display: flex;
737 gap: 5px;
738 }
739
740 .move-button {
741 width: 32px;
742 height: 32px;
743 background-color: var(--navbar-bg);
744 border: 1px solid var(--card-border);
745 border-radius: 4px;
746 cursor: pointer;
747 display: flex;
748 align-items: center;
749 justify-content: center;
750 font-size: 18px;
751 color: var(--text);
752 transition: all 0.3s ease;
753 }
754
755 .move-button:hover:not(:disabled) {
756 background-color: var(--background);
757 border-color: var(--button-bg);
758 }
759
760 .no-resources-message,
761 .select-category-message {
762 padding: 20px;
763 text-align: center;
764 color: var(--text);
765 background-color: var(--navbar-bg);
766 border: 1px solid var(--card-border);
767 border-radius: 4px;
768 margin-top: 20px;
769 }
770
771 .reorder-list h3 {
772 color: var(--text);
773 margin-top: 20px;
774 margin-bottom: 15px;
775 font-size: 18px;
776 }
777
778 @keyframes spin {
779 0% { transform: rotate(0deg); }
780 100% { transform: rotate(360deg); }
781 }
782
783 /* Login form */
784 .admin-login-container {
785 display: flex;
786 justify-content: center;
787 align-items: center;
788 height: 100vh;
789 background-color: var(--background);
790 transition: background-color 0.3s ease;
791 }
792
793 .admin-login-card {
794 background-color: var(--navbar-bg);
795 border-radius: 8px;
796 border: 1px solid var(--card-border);
797 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
798 padding: 30px;
799 width: 100%;
800 max-width: 400px;
801 transition: background-color 0.3s ease, border-color 0.3s ease;
802 }
803
804 .admin-login-card h2 {
805 margin-top: 0;
806 margin-bottom: 20px;
807 text-align: center;
808 color: var(--text);
809 }
810
811 .admin-container form {
812 border: 0px;
813 padding: 0px;
814 }
815
816 .auth-error {
817 background-color: rgba(245, 34, 45, 0.1);
818 border: 1px solid #f5222d;
819 color: #f5222d;
820 padding: 10px;
821 border-radius: 4px;
822 margin-bottom: 15px;
823 font-size: 14px;
824 }
825
826 .completeness-badge {
827 background-color: #f0f0f0;
828 color: #333;
829 font-size: 0.8rem;
830 padding: 0.1rem 0.3rem;
831 border-radius: 3px;
832 margin-left: 5px;
833 }
834
835 .filter-group {
836 margin-bottom: 10px;
837 }
838
839 .search-container {
840 position: relative;
841 display: flex;
842 align-items: center;
843 }
844
845 .reset-filters-button {
846 position: absolute;
847 right: 10px;
848 background: none;
849 border: none;
850 cursor: pointer;
851 font-size: 16px;
852 color: #666;
853 }
854
855 .featured-filter {
856 width: 100%;
857 padding: 8px;
858 border: 1px solid var(--card-border);
859 border-radius: 4px;
860 margin-bottom: 5px;
861 background-color: var(--navbar-bg);
862 color: var(--text);
863 transition: all 0.3s ease;
864 }
865
866 .featured-filter:hover,
867 .featured-filter:focus {
868 border-color: var(--button-bg);
869 background-color: var(--background);
870 }
871
872 .reset-filters-button:hover {
873 color: #ff3333;
874 }
875
876 .resources-summary {
877 margin: 5px 0;
878 font-size: 0.9rem;
879 color: var(--text);
880 opacity: 0.8;
881 padding: 0 10px;
882 }
883
884 .category-filter,
885 .tag-filter {
886 width: 100%;
887 padding: 8px;
888 border: 1px solid var(--card-border);
889 border-radius: 4px;
890 margin-bottom: 5px;
891 background-color: var(--navbar-bg);
892 color: var(--text);
893 transition: all 0.3s ease;
894 }
895
896 .category-filter:hover,
897 .category-filter:focus,
898 .tag-filter:hover,
899 .tag-filter:focus {
900 border-color: var(--button-bg);
901 background-color: var(--background);
902 }
903
904 /* Accessibility */
905 .sr-only {
906 position: absolute;
907 width: 1px;
908 height: 1px;
909 padding: 0;
910 margin: -1px;
911 overflow: hidden;
912 clip: rect(0, 0, 0, 0);
913 white-space: nowrap;
914 border-width: 0;
915 }
916
917 /* Responsive design */
918 @media (max-width: 768px) {
919 .admin-container {
920 grid-template-columns: 1fr;
921 }
922
923 .floating-actions {
924 align-items: center;
925 display: flex;
926 gap: 15px;
927 justify-content: space-between;
928 flex-direction: column;
929 }
930
931 .admin-container form {
932 border: 0px;
933 padding: 0px;
934 align-content: center;
935 display: block;
936 }
937
938 .form-group textarea {
939 min-height: 100px;
940 resize: vertical;
941 font-family: articulat-cf;
942 width: unset;
943 }
944
945 .admin-container {
946 display: grid;
947 gap: 0px;
948 }
949
950 .resource-editor {
951 height: 235%;
952 }
953
954 .resources-sidebar {
955 max-height: 80%;
956 overflow-y: scroll;
957 }
958
959 .admin-panel {
960 height: 2121.5px;
961 }
962
963 .form-row {
964 grid-template-columns: 1fr;
965 }
966
967 .reorder-header {
968 flex-direction: column;
969 align-items: start;
970 gap: 15px;
971 }
972
973 .reorder-controls {
974 flex-direction: column;
975 align-items: start;
976 width: 100%;
977 }
978
979 .reorder-mode-selector {
980 width: 100%;
981 }
982
983 .mode-button {
984 flex: 1;
985 text-align: center;
986 }
987
988 .category-selector {
989 width: 100%;
990 }
991
992 .category-select {
993 width: 100%;
994 }
995
996 .sortable-resource-item {
997 flex-direction: column;
998 align-items: start;
999 gap: 10px;
1000 }
1001
1002 .resource-meta {
1003 flex-direction: column;
1004 align-items: start;
1005 gap: 5px;
1006 }
1007
1008 .reorder-actions {
1009 align-self: flex-end;
1010 }
1011 }