8080
8181 < div class ="chip z-depth-1 white " style ="border: none; margin: 0; font-weight: 500; ">
8282 < i class ="material-icons left <%= @accent_color %> -text "> category</ i >
83- <%= pluralize ( content_types_count , 'category ' ) %>
83+ <%= pluralize ( content_types_count , 'page type ' ) %>
8484 </ div >
8585
8686 < div class ="chip z-depth-1 white " style ="border: none; margin: 0; font-weight: 500; ">
106106
107107 <!-- Category quick filters -->
108108 < div class ="col s12 ">
109- < div class ="category-filters z-depth-1 " style ="background-color: #fff; border-radius: 8px; padding: 16px; margin-bottom: 25px; ">
109+ < div class ="category-filters z-depth-1 " style ="border-radius: 8px; padding: 16px; margin-bottom: 25px; ">
110110 < div class ="category-filter-title " style ="margin-bottom: 10px; display: flex; align-items: center; ">
111111 < i class ="material-icons <%= @accent_color %> -text " style ="margin-right: 8px; "> filter_list</ i >
112112 < span style ="font-weight: 500; font-size: 16px; "> Filter by category:</ span >
113113 </ div >
114114
115115 < div style ="display: flex; flex-wrap: wrap; gap: 8px; ">
116- < a href ="javascript:void(0); " onclick ="return filterByCategory('all'); " class ="category-filter active " data-category ="all " style ="padding: 6px 12px; border-radius: 4px; background-color: #f5f5f5; text-decoration: none; color: #333 ; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; ">
116+ < a href ="javascript:void(0); " onclick ="return filterByCategory('all'); " class ="category-filter active black-text " data-category ="all " style ="padding: 6px 12px; border-radius: 4px; background-color: #f5f5f5; text-decoration: none; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; ">
117117 < i class ="material-icons <%= @accent_color %> -text left " style ="font-size: 18px; margin-right: 6px; "> layers</ i >
118118 All (<%= total_items %> )
119119 </ a >
120120
121121 <% @tagged_content . each do |content_group | %>
122- < a href ="javascript:void(0); " onclick ="return filterByCategory('<%= content_group [ :type ] . downcase %> '); " class ="category-filter " data-category ="<%= content_group [ :type ] . downcase %> " style ="padding: 6px 12px; border-radius: 4px; background-color: #f5f5f5; text-decoration: none; color: #333 ; transition: all 0.2s ease; display: flex; align-items: center; ">
122+ < a href ="javascript:void(0); " onclick ="return filterByCategory('<%= content_group [ :type ] . downcase %> '); " class ="category-filter black-text " data-category ="<%= content_group [ :type ] . downcase %> " style ="padding: 6px 12px; border-radius: 4px; background-color: #f5f5f5; text-decoration: none; transition: all 0.2s ease; display: flex; align-items: center; ">
123123 < i class ="material-icons <%= content_group [ :color ] %> -text left " style ="font-size: 18px; margin-right: 6px; "> <%= content_group [ :icon ] %> </ i >
124124 <%= content_group [ :type ] . pluralize %> (<%= content_group [ :content ] . count %> )
125125 </ a >
453453 .modal-how-to-join {
454454 border-radius : 8px ;
455455 max-width : 500px ;
456+ transition : background-color 1s ease;
457+ }
458+
459+ body .dark .modal-how-to-join {
460+ background-color : # 2D2D31 !important ;
461+ color : # ddd ;
456462 }
457463
458464 .modal-how-to-join h4 {
459465 margin-top : 0 ;
460466 font-size : 20px ;
461467 font-weight : 500 ;
468+ transition : color 1s ease;
469+ }
470+
471+ body .dark .modal-how-to-join h4 {
472+ color : white;
462473 }
463474
464475 .modal-how-to-join ol {
473484 background-color : # f3e5f5 ;
474485 padding : 2px 5px ;
475486 border-radius : 3px ;
487+ transition : background-color 1s ease, color 1s ease;
488+ }
489+
490+ body .dark .modal-how-to-join .highlight {
491+ background-color : rgba (156 , 39 , 176 , 0.2 );
492+ color : white;
493+ }
494+
495+ /* Fix modal content border */
496+ body .dark .modal-content {
497+ border-color : rgba (255 , 255 , 255 , 0.1 ) !important ;
476498 }
477499
478500 : root {
545567 }
546568
547569 /* Category filters styling */
570+ .category-filters {
571+ background-color : # fff ;
572+ transition : background-color 1s ease;
573+ }
574+
575+ body .dark .category-filters {
576+ background-color : rgba (255 , 255 , 255 , 0.1 );
577+ }
578+
579+ .category-filter {
580+ background-color : # f5f5f5 ;
581+ color : # 333 ;
582+ transition : background-color 1s ease, color 1s ease;
583+ }
584+
585+ body .dark .category-filter {
586+ background-color : rgba (255 , 255 , 255 , 0.05 );
587+ }
588+
589+ /* Ensure filter text is always readable regardless of theme */
590+ .category-filter {
591+ color : # 333 !important ;
592+ }
593+
594+ /* Fix the filter title text in dark mode */
595+ body .dark .category-filter-title span {
596+ color : # ddd ;
597+ }
598+
599+ body .dark .category-filter .active {
600+ color : # 333 ;
601+ }
602+
548603 @media only screen and (max-width : 600px ) {
549604 .category-filters {
550605 overflow-x : auto;
580635
581636 /* Better card styling */
582637 .hoverable .card {
583- transition : box-shadow 0.25s , transform 0.25s ;
638+ transition : box-shadow 0.25s , transform 0.25s , background-color 1 s ease ;
584639 box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.1 );
585640 border-radius : 8px ;
586641 margin-bottom : 8px ;
642+ background-color : # fff ;
643+ }
644+
645+ body .dark .hoverable .card {
646+ background-color : rgba (255 , 255 , 255 , 0.1 );
647+ box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.3 );
587648 }
588649
589650 .hoverable .card : hover {
590651 box-shadow : 0 5px 15px rgba (0 , 0 , 0 , 0.2 );
591652 transform : translateY (-2px );
592653 }
593654
655+ body .dark .hoverable .card : hover {
656+ box-shadow : 0 5px 15px rgba (0 , 0 , 0 , 0.4 );
657+ }
658+
594659 /* Position relative for absolute positioning within */
595660 .hoverable .card {
596661 position : relative;
597662 padding-bottom : 8px ;
598663 border-bottom : 4px solid # eeeeee ;
664+ transition : border-color 1s ease;
665+ }
666+
667+ body .dark .hoverable .card {
668+ border-bottom : 4px solid rgba (255 , 255 , 255 , 0.1 );
599669 }
600670
601671 .js-content-card-container > a ,
623693 overflow : hidden;
624694 position : relative;
625695 padding-bottom : 20px !important ;
696+ transition : background-color 1s ease;
697+ }
698+
699+ body .dark .card .card-content {
700+ background-color : rgba (255 , 255 , 255 , 0.1 );
626701 }
627702
628703 .tags-container {
653728 height : 15px ;
654729 background : linear-gradient (to bottom, rgba (255 , 255 , 255 , 0 ) 0% , rgba (255 , 255 , 255 , 1 ) 100% );
655730 pointer-events : none;
731+ transition : background 1s ease;
732+ }
733+
734+ body .dark .card .card-content : after {
735+ background : linear-gradient (to bottom, rgba (40 , 40 , 45 , 0 ) 0% , rgba (40 , 40 , 45 , 1 ) 100% );
656736 }
657737
658738 /* Card footer line - more visible */
666746 background-color : # f0f0f0 ;
667747 border-radius : 0 0 8px 8px ;
668748 z-index : 1 ;
749+ transition : background-color 1s ease;
750+ }
751+
752+ body .dark .card ::after {
753+ background-color : rgba (255 , 255 , 255 , 0.05 );
754+ }
755+
756+ /* Dark mode text styles */
757+ body .dark .card .card-content span [style *= "color: #424242" ] {
758+ color : # ddd !important ;
759+ }
760+
761+ body .dark .grey-text {
762+ color : # aaa !important ;
763+ }
764+
765+ body .dark .tag-pill [style *= "background-color: #f0f0f0" ] {
766+ background-color : rgba (255 , 255 , 255 , 0.1 ) !important ;
767+ color : # aaa !important ;
669768 }
670769</ style >
0 commit comments