Working on tailwindcss issues brisbanesocialchess#680 (brisbanesocialchess#681)

* handling [data-theme='light'] .role:hover img

* set white color for table head

* move css transition

* set color text text-white always

* change color-role-coordinator

* run pre-commit

* Update frontend/assets/tailwind.css

Co-authored-by: John Bampton <[email protected]>

---------

Co-authored-by: John Bampton <[email protected]>

Author: BaseMax

frontend/about.md

@@ -33,7 +33,7 @@ title: About Us
     <div class="overflow-x-auto">
         <table class="w-full table-auto border-collapse">
             <thead>
-                <tr class="bg-table-header text-center">
+                <tr class="bg-table-header text-center text-white">
                     <th class="border px-4 py-2 w-[40px]">Role</th>
                     <th class="border px-4 py-2">Name</th>
                 </tr>

frontend/assets/styles/custom.css

@@ -6,6 +6,7 @@
 	--text-color: #ffffff;
 	--reverse-text-color: #111111;
 	--card-bg: rgba(255, 255, 255, 0.1);
+	--role-shadow-rgb: 255, 255, 255;
 }
 [data-theme='light'] {
 	--toggle-icon-color: #111111;
@@ -15,6 +16,7 @@
 	--text-color: #111111;
 	--reverse-text-color: #ffffff;
 	--card-bg: rgba(255, 255, 255, 0.85);
+	--role-shadow-rgb: 0, 0, 0;
 }
 
 /* Theme */
@@ -70,10 +72,10 @@
 }
 .role img {
 	border: var(--role-border) var(--role-color);
+	transition: filter 0.3s ease;
 }
 .role:hover img {
-	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
-	transition: filter 0.3s ease;
+	filter: drop-shadow(0 0 10px rgba(var(--role-shadow-rgb), 0.4)) drop-shadow(0 0 20px rgba(var(--role-shadow-rgb), 0.2));
 }
 .role span {
 	color: var(--role-color);

frontend/assets/tailwind.css

@@ -17,8 +17,9 @@
 	--color-role-moderator: #ec9c11;
 	--color-role-board: purple;
 	--color-role-leader: orange;
-	--color-role-coordinator: #3498db;
+	--color-role-coordinator: #1d4ed8;
 	--color-role-co-organizers: blue;
 	--color-role-event-organizers: lime;
 	--color-role-assistant-organizers: #c35339;
+    --role-shadow-rgb: 255, 255, 255; /* default for dark theme */
 }

frontend/index.md

@@ -55,7 +55,7 @@ title: Play, Learn & Compete in Brisbane
   </p>
   <div class="overflow-x-auto mb-6">
     <table class="min-w-full border border-gray-300 text-left">
-      <thead class="bg-indigo-900 text-center">
+      <thead class="bg-indigo-900 text-center text-white">
         <tr>
           <th class="px-4 py-2">Day</th>
           <th class="px-4 py-2">Time</th>

frontend/meetup.md

@@ -14,7 +14,7 @@ title: Chess Meetups & Locations
     Click on a day to view detailed meetup information:
   </p>
   <!-- Button group -->
-  <div class="flex flex-col text-[var(--reverse-text-color)] md:flex-row flex-wrap gap-3 mt-4 w-full max-w-lg justify-center">
+  <div class="flex flex-col text-white md:flex-row flex-wrap gap-3 mt-4 w-full max-w-lg justify-center">
     <a href="{{ '/meetup/wednesday/' | url }}" class="px-6 py-3 bg-indigo-900 hover:bg-indigo-500 rounded-full font-bold shadow-md transition">Wednesday</a>
     <a href="{{ '/meetup/thursday/' | url }}" class="px-6 py-3 bg-indigo-900 hover:bg-indigo-500 rounded-full font-bold shadow-md transition">Thursday</a>
     <a href="{{ '/meetup/friday/' | url }}" class="px-6 py-3 bg-indigo-900 hover:bg-indigo-500 rounded-full font-bold shadow-md transition">Friday</a>