This repository has no description
1/* src/components/Resources/Resources.css */
2
3.resources-page {
4 margin: 20px auto 20px;
5 max-width: 1200px;
6 padding: 20px;
7
8.resources-disclaimer p {
9 margin: 0;
10 font-size: 0.95rem;
11 color: var(--text);
12 line-height: 1.5;
13}
14
15/* ======= Improved Filter Bar ======= */
16.resources-filters {
17 background-color: var(--navbar-bg);
18 border: 2px solid var(--card-border);
19 border-radius: 8px;
20 padding: 1.1em;
21 max-width: 480px;
22 align-content: center;
23}
24
25.filter-options {
26 margin-bottom: 5px;
27}
28
29.filter-label {
30 font-size: 0.95rem;
31 font-weight: 600;
32 margin-right: 8px;
33 color: var(--text);
34 white-space: nowrap;
35}
36
37.filter-options {
38 display: flex;
39 align-items: center;
40}
41
42.filter-dropdowns {
43 display: flex;
44 flex-wrap: wrap;
45 gap: 1.5rem;
46 width: 100%;
47 align-items: center;
48 justify-content: center;
49}
50
51.category-filter-dropdown,
52.quality-filter {
53 display: flex;
54 align-items: center;
55}
56
57.filter-select {
58 padding: 8px 32px 8px 12px;
59 border: 2px solid var(--card-border);
60 border-radius: 6px;
61 font-size: 0.95rem;
62 background-color: var(--navbar-bg);
63 color: var(--text);
64 cursor: pointer;
65 appearance: none;
66 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
67 background-repeat: no-repeat;
68 background-position: right 8px center;
69 background-size: 16px;
70 transition: all 0.2s ease;
71}
72
73.filter-select:focus {
74 border-color: var(--button-bg);
75 outline: none;
76 box-shadow: 0 0 0 3px rgba(var(--button-bg-rgb), 0.1);
77}
78
79/* Toggle filters container - Modified for horizontal layout */
80.toggle-filters {
81 display: flex;
82 align-items: center;
83 gap: 20px;
84}
85
86/* New and Score toggle styling */
87.toggle-filter {
88 display: flex;
89 align-items: center;
90}
91
92.toggle-label {
93 display: flex;
94 align-items: center;
95 cursor: pointer;
96}
97
98.toggle-label input[type="checkbox"] {
99 appearance: none;
100 background-color: var(--card-border);
101 border-radius: 8px;
102 cursor: pointer;
103 height: 20px;
104 margin: 0 8px 0 0;
105 position: relative;
106 transition: background-color .3s;
107 width: 38px;
108}
109
110.toggle-label input[type="checkbox"]:checked {
111 background-color: var(--button-bg);
112}
113
114.toggle-label input[type="checkbox"]::before {
115 content: '';
116 position: absolute;
117 width: 16px;
118 height: 16px;
119 border-radius: 5px;
120 top: 1px;
121 left: 2px;
122 background-color: white;
123 transition: transform 0.3s;
124}
125
126.dark-mode .toggle-label input[type="checkbox"]::before {
127 background-color: #666;
128}
129
130.toggle-label input[type="checkbox"]:checked::before {
131 transform: translateX(14px);
132}
133
134.toggle-label input[type="checkbox"]:focus {
135 outline: none;
136 box-shadow: 0 0 0 3px rgba(var(--button-bg-rgb), 0.2);
137}
138
139.toggle-text {
140 font-size: .95rem;
141 font-weight: 600;
142 font-family: articulat-cf;
143 white-space: nowrap;
144 padding-top: 3px;
145}
146
147.resource-meta {
148 flex-direction: row;
149}
150
151/* ======= Content Sections ======= */
152.featured-section,
153.all-resources-section,
154.random-resources-section {
155 margin-bottom: 40px;
156}
157
158.all-resources-section {
159 margin-bottom: 4px;
160}
161
162.featured-section h2,
163.all-resources-section h2,
164.random-resources-section h2 {
165 font-size: 1.3rem;
166 margin-bottom: 16px;
167 border-bottom: 2px solid var(--card-border);
168 padding-bottom: 8px;
169}
170
171/* Random resources section styling */
172.random-resources-section {
173 background-color: rgba(var(--button-bg-rgb), 0.05);
174 border-radius: 10px;
175 margin-top: 20px;
176 margin-bottom: 30px;
177 border: 2px solid rgba(var(--button-bg-rgb), 0.1);
178}
179
180.random-resources-section h2 {
181 border-bottom-color: rgba(var(--button-bg-rgb), 0.2);
182}
183
184/* Category section styling */
185.category-header {
186 font-size: 1.2rem;
187 margin: 45px 0 16px;
188 padding-bottom: 6px;
189}
190
191/* Featured section description */
192.featured-description {
193 margin-top: -0.5rem;
194 margin-bottom: 1.5rem;
195 color: var(--text);
196 font-style: italic;
197 opacity: 0.8;
198}
199
200.resources-grid {
201 display: grid;
202 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
203 gap: 20px;
204}
205
206/* ======= Resource Cards ======= */
207.resource-card {
208 border: 2px solid var(--card-border);
209 border-radius: 8px;
210 overflow: hidden;
211 transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
212 text-decoration: none;
213 color: inherit;
214 background-color: var(--background);
215 height: 100%;
216 display: flex;
217 flex-direction: column;
218}
219
220.resource-card:hover {
221 transform: translateY(-4px);
222 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
223}
224
225.resource-content {
226 padding: 16px;
227 flex-grow: 1;
228 display: flex;
229 flex-direction: column;
230}
231
232.filter-disclaimer-container {
233 display: flex;
234 gap: 20px;
235 align-content: center;
236 justify-content: space-between;
237}
238
239/* Improved resource header styling */
240.resource-header {
241 display: flex;
242 align-items: flex-start;
243 justify-content: space-between;
244 gap: 8px;
245 margin-bottom: 10px;
246}
247
248.resource-name {
249 font-size: 1.1rem;
250 margin: 0;
251 color: var(--button-bg);
252 line-height: 1.3;
253}
254
255/* Resource badges container */
256.resource-badges {
257 display: flex;
258 flex-wrap: wrap;
259 gap: 6px;
260 flex-shrink: 0;
261 margin-top: 3px;
262}
263
264/* Badge styling */
265.new-badge, .score-badge {
266 align-items: center;
267 border-radius: 5.9px;
268 color: var(--button-text);
269 display: inline-flex;
270 font-size: .7rem;
271 font-weight: 700;
272 height: 18px;
273 padding: 2px 8px;
274 padding-bottom: 0px;
275 vertical-align: text-bottom;
276 margin-bottom: 4px;
277}
278
279/* NEW badge styling */
280.new-badge {
281 animation: pulse 2s infinite;
282 background-color: #666 !important;
283}
284
285/* SCORE badge styling */
286.score-badge {
287 background-color: var(--button-bg) !important;
288}
289
290@keyframes pulse {
291 0% {
292 transform: scale(1);
293 }
294 50% {
295 transform: scale(1.05);
296 }
297 100% {
298 transform: scale(1);
299 }
300}
301
302.resource-description {
303 font-size: 0.9rem;
304 color: var(--text);
305 margin: 0 0 8px 0;
306 flex-grow: 1;
307 opacity: 0.8;
308}
309
310/* Resource domain styling */
311.resource-domain {
312 font-size: 0.85rem;
313 color: var(--text);
314 opacity: 0.7;
315 margin: 0 0 16px 0;
316}
317
318.resource-meta {
319 display: flex;
320 justify-content: space-between;
321 align-items: center;
322 margin-top: auto;
323}
324
325/* Categories display */
326.resource-categories {
327 display: flex;
328 flex-wrap: wrap;
329 gap: 6px;
330}
331
332.resource-category {
333 font-size: 0.8rem;
334 background-color: var(--card-border);
335 padding: 4px 8px;
336 border-radius: 4px;
337 color: var(--text);
338}
339
340/* Tags display */
341.resource-tags {
342 display: flex;
343 flex-wrap: wrap;
344 gap: 4px;
345 margin-top: 8px;
346}
347
348.resource-tag {
349 font-size: 0.75rem;
350 background-color: rgba(var(--button-bg-rgb), 0.1);
351 padding: 3px 6px;
352 border-radius: 4px;
353 color: var(--text);
354 opacity: 0.8;
355}
356
357.no-results {
358 text-align: center;
359 padding: 40px;
360 color: var(--text);
361 opacity: 0.7;
362}
363
364/* Resource Loader */
365.resource-loader {
366 display: flex;
367 flex-direction: column;
368 align-items: center;
369 justify-content: center;
370 padding: 40px;
371 text-align: center;
372}
373
374.loader-spinner {
375 border: 4px solid var(--card-border);
376 border-left-color: var(--button-bg);
377 border-radius: 50%;
378 width: 40px;
379 height: 40px;
380 animation: spin 1s linear infinite;
381 margin-bottom: 16px;
382 transition: border-color 0.3s ease;
383}
384
385.resource-loader p {
386 color: var(--text);
387 opacity: 0.8;
388}
389
390#new-toggle:focus,
391#score-toggle:focus {
392 border-color: var(--card-border);
393}
394
395@keyframes spin {
396 0% { transform: rotate(0deg); }
397 100% { transform: rotate(360deg); }
398}
399
400/* Responsive adjustments */
401@media (max-width: 920px) {
402 .filter-controls-container {
403 flex-direction: column;
404 }
405
406 & .feeling-lucky-button {
407 font-size: 0.9em;
408 }
409}
410
411@media (max-width: 768px) {
412 .resources-page {
413 padding: 10px;
414 }
415
416 .resources-page .alt-card {
417 padding: 1rem;
418 }
419
420 .feature-cards {
421 flex-direction: column;
422 gap: 0.8rem;
423 align-items: center;
424 }
425
426 .filters-row {
427 flex-direction: column;
428 align-items: flex-start;
429 gap: 15px;
430 }
431
432 .filter-dropdowns {
433 flex-direction: column;
434 align-items: center;
435 gap: 1rem;
436 }
437
438 .filter-dropdown {
439 width: 100%;
440 justify-content: space-between;
441 flex-direction: column;
442 }
443
444 .toggle-filters {
445 width: 100%;
446 justify-content: space-between;
447 flex-direction: column;
448 }
449
450 .filter-share-button {
451 width: 100%;
452 }
453
454 .filter-share-button .share-button {
455 width: 100%;
456 }
457
458 .resources-header h1 {
459 font-size: 1.5rem;
460 }
461
462 .resources-grid {
463 grid-template-columns: 1fr;
464 }
465}
466
467/* Responsive adjustments */
468@media (max-width: 710px) {
469 .filter-disclaimer-container {
470 display: flex;
471 gap: 20px;
472 align-content: center;
473 justify-content: center;
474 flex-direction: column;
475 }
476
477 .resources-filters {
478 max-width: unset;
479 }
480
481 .resources-disclaimer {
482 margin: auto;
483 max-width: unset;
484 }
485}
486
487@media (max-width: 400px) {
488 .resources-page {
489 max-width: 100%;
490 }
491
492 .search-filters-container {
493 gap: 0px;
494 }
495
496 .search-filters-container {
497 gap: 0rem;
498 }
499
500 .resources-header h1 {
501 font-size: 1.4rem;
502 }
503
504 .header-tagline p {
505 font-size: 0.9rem;
506 }
507
508 .toggle-filters {
509 flex-direction: column;
510 gap: 10px;
511 }
512
513 .filters-row {
514 align-items: center;
515 }
516}
517}
518
519.resources-page .alt-card {
520 text-align: left;
521 background: var(--navbar-bg);
522 border-radius: 12px;
523 border: 5px solid var(--card-border);
524 padding: 1.7rem;
525 transition: background-color 0.3s ease, border-color 0.3s ease;
526}
527
528/* ======= Redesigned Header Section ======= */
529.resources-header {
530 display: flex;
531 flex-direction: column;
532 gap: 2em;
533 margin-bottom: 2rem;
534 margin-top: 1em;
535}
536
537/* Header main section with title and tagline */
538.header-main {
539 text-align: center;
540}
541
542.resources-header h1 {
543 font-size: 2.2rem;
544 font-weight: 700;
545 margin-bottom: 0.5rem;
546 color: var(--button-bg);
547 letter-spacing: -0.01em;
548}
549
550.header-tagline p {
551 font-size: 1.1rem;
552 color: var(--text);
553 opacity: 0.85;
554 max-width: 600px;
555 margin: 0 auto;
556 line-height: 1.4;
557}
558
559/* Feature cards */
560
561.feature-cards {
562 display: flex;
563 justify-content: space-between;
564 gap: 1.5rem;
565 flex-wrap: wrap;
566}
567
568.feature-card {
569 display: flex;
570 align-items: center;
571 background-color: var(--card-border);
572 padding: 0.7rem 1.2rem;
573 border-radius: 8px;
574 transition: transform 0.2s, background-color 0.2s;
575}
576
577.feature-card:hover {
578 transform: translateY(-2px);
579 background-color: rgba(var(--button-bg-rgb), 0.1);
580}
581
582.feature-icon {
583 font-size: 1.2rem;
584 margin-right: 0.5rem;
585}
586
587.feature-text {
588 font-size: 0.95rem;
589 font-weight: 500;
590}
591
592/* Search and quick actions container */
593.search-filters-container {
594 display: flex;
595 gap: 1rem;
596 justify-content: center;
597 align-items: center; /* Changed from stretch to center */
598 height: 48px; /* Set a fixed height for the container */
599}
600
601/* Improved search input */
602.search-container {
603 position: relative;
604 height: 100%; /* Make it fill the container height */
605}
606
607.search-icon {
608 position: absolute;
609 left: 12px;
610 top: 50%;
611 transform: translateY(-50%);
612 font-size: 1rem;
613 opacity: 0.6;
614 z-index: 1;
615}
616
617.search-input {
618 width: 100%;
619 padding: 0 12px 0 40px; /* Adjusted padding */
620 font-size: 1rem;
621 border: 2px solid var(--card-border);
622 border-radius: 8px;
623 background-color: var(--navbar-bg);
624 color: var(--text);
625 transition: all 0.3s ease;
626 height: 100%; /* Make it fill the container height */
627 box-sizing: border-box; /* Include padding and border in the element's total height */
628}
629
630.search-input:focus {
631 border-color: var(--button-bg);
632 outline: none;
633 box-shadow: 0 0 0 3px rgba(var(--button-bg-rgb), 0.2);
634}
635
636/* Quick actions */
637.quick-actions {
638 display: flex;
639 gap: 0.5rem;
640 height: 100%; /* Make it fill the container height */
641}
642
643/* Share button */
644.share-button {
645 display: flex;
646 align-items: center;
647 justify-content: center;
648 gap: 6px;
649 background-color: var(--button-bg);
650 color: var(--button-text);
651 padding: 0 20px; /* Adjusted padding */
652 border: none;
653 border-radius: 8px;
654 font-size: 0.95rem;
655 font-weight: 600;
656 cursor: pointer;
657 transition: all 0.2s ease;
658 height: 100%; /* Make it fill the container height */
659}
660
661/* Smaller share button in filter row */
662.share-button.compact {
663 padding: 0 14px; /* Adjusted padding */
664 font-size: 0.85rem;
665 height: 36px; /* Fixed height for the compact version */
666}
667
668.share-button:hover,
669.feeling-lucky-button:hover {
670 opacity: 0.9;
671 transform: translateY(-2px);
672 color: white;
673}
674
675.share-button:active,
676.feeling-lucky-button:active {
677 transform: translateY(0);
678}
679
680.share-icon {
681 font-size: 1.1rem;
682}
683
684.header-tagline-detail {
685 font-size: 0.8em !important;
686 margin-top: 7px !important;
687}
688
689/* Feeling Lucky button */
690.feeling-lucky-button {
691 display: flex;
692 align-items: center;
693 justify-content: center;
694 background-color: var(--card-border);
695 color: var(--text);
696 padding: 0 20px; /* Adjusted padding */
697 border: none;
698 border-radius: 8px;
699 font-size: 0.95rem;
700 font-weight: 600;
701 cursor: pointer;
702 transition: all 0.2s ease;
703 height: 100%; /* Make it fill the container height */
704 white-space: nowrap; /* Prevent text wrapping */
705}
706
707/* ======= Filter Controls Container ======= */
708.filter-controls-container {
709 align-items: unset;
710 display: flex;
711 gap: 20px;
712 justify-content: space-between;
713 margin-bottom: 0px;
714 flex-direction: column;
715 align-content: center;
716}
717
718.filter-section {
719 width: 100%;
720}
721
722/* Filters row - for horizontal alignment */
723.filters-row {
724 display: flex;
725 align-items: center;
726 gap: 20px;
727 flex-wrap: wrap;
728 justify-content: center;
729}
730
731/* Filter dropdown */
732.filter-dropdown {
733 display: flex;
734 align-items: center;
735 gap: 8px;
736}
737
738/* Filter share button container */
739.filter-share-button {
740 display: flex;
741 align-items: center;
742}
743
744/* Enhanced disclaimer styling */
745.resources-disclaimer {
746 align-items: flex-start;
747 border-radius: 8px;
748 display: flex;
749 gap: 10px;
750 padding: 14px 18px;
751 background-color: var(--background);
752 border: 2px solid var(--card-border);
753 flex-basis: 40%;
754}
755
756.disclaimer-icon {
757 font-size: 1.2rem;
758 margin-top: 2px;
759}