update

app.py

@@ -3,45 +3,68 @@ from tinysql_dataset_viewer import dataset_viewer
 import gradio as gr
 
 custom_css = """
-/* NUCLEAR OPTION - Force EVERYTHING dark */
-*, *::before, *::after {
+/* Force black background on EVERYTHING first */
+* {
     background-color: #0A0A0A !important;
+}
+
+/* Then selectively override what needs different colors */
+
+/* Dark gray for inputs and tables */
+input, textarea, select {
+    background-color: #1A1A1A !important;
     color: #E0E0E0 !important;
+    border: 1px solid #3A3A3A !important;
+}
+
+/* Tables - dark gray background */
+table, .dataframe {
+    background-color: #1A1A1A !important;
 }
 
-/* Override for specific dark elements that should stay darker */
-input, textarea, select, table, .dataframe, 
 table td, table th, .dataframe td, .dataframe th {
     background-color: #1A1A1A !important;
     color: #E0E0E0 !important;
 }
 
-/* Table cells should NOT have nested black backgrounds */
-table td *, table th *, .dataframe td *, .dataframe th * {
+/* CRITICAL: Text inside tables should be transparent */
+table td div, table td span, table td p,
+table th div, table th span, table th p {
     background-color: transparent !important;
 }
 
-/* Gray gradient boxes should keep their backgrounds */
-[style*="background: linear-gradient"],
-[style*="background: #2A2A2A"],
-[style*="background: #3A3A3A"],
-[style*="background: #4A4A4A"] {
-    background: inherit !important;
+/* Code editors - dark gray */
+.code, pre, code {
+    background-color: #1A1A1A !important;
 }
 
-/* Text inside styled boxes should have transparent backgrounds */
-[style*="background"] * {
+/* Text inside code blocks transparent */
+.code *, pre *, code * {
     background-color: transparent !important;
 }
 
-.gradio-container {
-    background: #0A0A0A !important;
+/* Keep gradient boxes with their inline styles */
+div[style*="background: linear-gradient"],
+div[style*="background: #2A2A2A"],
+div[style*="background: #3A3A3A"] {
+    background: revert !important;
+}
+
+/* Text inside gradient boxes transparent */
+div[style*="background"] span,
+div[style*="background"] div:not([style*="background"]),
+div[style*="background"] p {
+    background-color: transparent !important;
 }
 
-/* Tabs - black background, bigger bold text */
+/* All text white */
+*, h1, h2, h3, h4, h5, h6, p, span, div {
+    color: #E0E0E0 !important;
+}
+
+/* Tabs */
 .tab-nav {
     background: #0A0A0A !important;
-    border: none !important;
 }
 
 .tab-nav button {
@@ -57,7 +80,7 @@ table td *, table th *, .dataframe td *, .dataframe th * {
 }
 
 /* Orange labels */
-label > span {
+label span {
     background: #FF6B4A !important;
     color: white !important;
     padding: 0.4rem 0.8rem !important;
@@ -66,7 +89,7 @@ label > span {
 }
 
 /* Orange buttons */
-.primary, button.primary {
+.primary {
     background: #FF6B4A !important;
     color: white !important;
 }
@@ -79,24 +102,6 @@ input[type="range"]::-webkit-slider-thumb {
 input[type="range"]::-moz-range-thumb {
     background: #FF6B4A !important;
 }
-
-/* Code blocks stay dark gray with transparent text containers */
-pre, code, .code {
-    background: #1A1A1A !important;
-}
-
-pre *, code *, .code * {
-    background-color: transparent !important;
-}
-
-/* Line numbers in code should be transparent */
-.cm-lineNumbers, .cm-gutters {
-    background: #1A1A1A !important;
-}
-
-.cm-line {
-    background: transparent !important;
-}
 """
 
 with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Base()) as demo: