further fix dark mode styles

static/css/style.css

@@ -1,111 +1,99 @@
-.custom-dataframe {
-    width: 100% !important;
-    overflow-x: auto !important;
-}
-
-.custom-dataframe table {
-    width: auto !important;
-    min-width: 100% !important;
-    font-size: 14px !important;
+:root {
+    --background-color: #ffffff;
+    --text-color: #000000;
+    --header-background: #f0f0f0;
+    --global-column-background: #f0f8ff;
+    --dimension-column-background: #f0fff0;
+    --hover-background: rgba(0, 0, 0, 0.1);
+    --border-color: #e0e0e0;
+    --row-even-global: #e6f3ff;
+    --row-even-dimension: #e6ffe6;
 }
 
-.custom-dataframe thead th {
-    padding: 4px 8px !important;
-    text-align: center !important;
-    vertical-align: middle !important;
-    white-space: nowrap !important;
-    overflow: visible !important;
-    font-size: 12px !important;
-    font-weight: bold !important;
-    line-height: 1.2 !important;
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #1a1a1a;
+        --text-color: #e0e0e0;
+        --header-background: #333333;
+        --global-column-background: rgba(0, 50, 100, 0.3);
+        --dimension-column-background: rgba(0, 75, 0, 0.3);
+        --hover-background: rgba(255, 255, 255, 0.1);
+        --border-color: #3a3a3a;
+        --row-even-global: rgba(0, 60, 120, 0.3);
+        --row-even-dimension: rgba(0, 90, 0, 0.3);
+    }
 }
 
-.custom-dataframe tbody td {
-    padding: 4px 8px !important;
-    text-align: right !important;
-    vertical-align: middle !important;
-    white-space: nowrap !important;
-    overflow: visible !important;
-    line-height: 1.2 !important;
+/* Light mode styles */
+.custom-dataframe {
+    color: #000000;
+    background-color: #ffffff;
 }
 
-.custom-dataframe tbody td:first-child {
-    text-align: left !important;
+.custom-dataframe thead th {
+    background-color: #f0f0f0 !important;
+    color: #000000 !important;
 }
 
-/* Adjust the sort indicator position */
-.custom-dataframe thead th::after {
-    font-size: 12px !important;
-    line-height: 1 !important;
-    margin-left: 4px !important;
+.custom-dataframe tbody td {
+    background-color: #ffffff !important;
+    color: #000000 !important;
 }
 
-/* Style for global result columns */
 .custom-dataframe thead th:nth-child(-n+4),
 .custom-dataframe tbody td:nth-child(-n+4) {
-    background-color: #f0f8ff !important; /* Light blue background */
+    background-color: #f0f8ff !important;
 }
 
-/* Style for dimension-specific result columns */
 .custom-dataframe thead th:nth-child(n+5),
 .custom-dataframe tbody td:nth-child(n+5) {
-    background-color: #f0fff0 !important; /* Light green background */
+    background-color: #f0fff0 !important;
 }
 
-/* Alternating row colors for better readability */
 .custom-dataframe tbody tr:nth-child(even) td:nth-child(-n+4) {
-    background-color: #e6f3ff !important; /* Slightly darker light blue */
+    background-color: #e6f3ff !important;
 }
 
 .custom-dataframe tbody tr:nth-child(even) td:nth-child(n+5) {
-    background-color: #e6ffe6 !important; /* Slightly darker light green */
+    background-color: #e6ffe6 !important;
 }
 
-/* Dark mode specific styles */
+/* Dark mode styles */
 @media (prefers-color-scheme: dark) {
     .custom-dataframe {
-        color: #e0e0e0;
-        background-color: #1a1a1a;
-    }
-
-    .custom-dataframe table {
-        background-color: #2a2a2a;
-        border-collapse: collapse;
+        color: #e0e0e0 !important;
+        background-color: #1a1a1a !important;
     }
 
     .custom-dataframe thead th {
-        background-color: #333333;
-        color: #ffffff;
-        border-bottom: 2px solid #4a4a4a;
+        background-color: #333333 !important;
+        color: #ffffff !important;
     }
 
     .custom-dataframe tbody td {
-        border: 1px solid #3a3a3a;
+        background-color: #1a1a1a !important;
+        color: #e0e0e0 !important;
     }
 
-    /* Style for global result columns in dark mode */
     .custom-dataframe thead th:nth-child(-n+4),
     .custom-dataframe tbody td:nth-child(-n+4) {
-        background-color: rgba(0, 50, 100, 0.3);
+        background-color: rgba(0, 50, 100, 0.3) !important;
     }
 
-    /* Style for dimension-specific result columns in dark mode */
     .custom-dataframe thead th:nth-child(n+5),
     .custom-dataframe tbody td:nth-child(n+5) {
-        background-color: rgba(0, 75, 0, 0.3);
+        background-color: rgba(0, 75, 0, 0.3) !important;
     }
 
-    /* Hover effect for better row distinction in dark mode */
-    .custom-dataframe tbody tr:hover td {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    /* Alternating row colors for better readability in dark mode */
     .custom-dataframe tbody tr:nth-child(even) td:nth-child(-n+4) {
-        background-color: rgba(0, 60, 120, 0.3);
+        background-color: rgba(0, 60, 120, 0.3) !important;
     }
 
     .custom-dataframe tbody tr:nth-child(even) td:nth-child(n+5) {
-        background-color: rgba(0, 90, 0, 0.3);
+        background-color: rgba(0, 90, 0, 0.3) !important;
+    }
+
+    .custom-dataframe tbody tr:hover td {
+        background-color: rgba(255, 255, 255, 0.1) !important;
     }
 }