Upload style.css with huggingface_hub

style.css

@@ -1,286 +1,220 @@
 /* ============================================
-   Text-to-SQL Demo — Custom Theme
+   Text-to-SQL Demo
+   RULE: All text on light backgrounds = DARK
    ============================================ */
 
-/* ---------- Global ---------- */
-* { box-sizing: border-box; }
-
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 1100px !important;
     margin: 0 auto !important;
 }
 
-/* ---------- Header ---------- */
-.main-header {
+/* -- Compact Header -- */
+.app-header {
     text-align: center;
-    padding: 2rem 1rem 0.5rem;
+    padding: 1rem 0 0.25rem;
 }
-.main-header h1 {
-    font-size: 2.8rem;
+.app-header h1 {
+    font-size: 2rem;
     font-weight: 800;
+    color: #1e293b;
+    margin: 0;
+}
+.app-header h1 span {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin: 0 0 0.3rem 0;
-    letter-spacing: -0.02em;
-}
-.main-header .tagline {
-    color: #475569;
-    font-size: 1.1rem;
-    margin: 0 auto;
-    max-width: 540px;
-    line-height: 1.5;
-}
-.main-header .model-link {
-    display: inline-block;
-    margin-top: 0.6rem;
-    font-size: 0.85rem;
-    color: #667eea;
-    text-decoration: none;
-    border: 1px solid #c7d2fe;
-    padding: 0.25rem 0.85rem;
-    border-radius: 20px;
-    transition: all 0.2s ease;
-}
-.main-header .model-link:hover {
-    background: #667eea;
-    color: #fff;
 }
 
-/* ---------- Pipeline Strip ---------- */
-.pipeline-strip {
-    background: #0f172a;
-    border-radius: 14px;
-    padding: 1.1rem 1.5rem;
+/* -- Badges: DARK backgrounds, white text -- */
+.tech-badges {
     display: flex;
-    align-items: center;
     justify-content: center;
     gap: 0.4rem;
     flex-wrap: wrap;
-    margin: 0.75rem 0 1.25rem;
-    border: 1px solid #1e293b;
-}
-.pipeline-strip .step {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.35rem 0.85rem;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    font-family: 'Fira Code', monospace;
-}
-.pipeline-strip .step-input {
-    background: #1e3a5f;
-    color: #7dd3fc;
-}
-.pipeline-strip .step-model {
-    background: #312e81;
-    color: #a5b4fc;
+    margin: 0.5rem 0;
 }
-.pipeline-strip .step-struct {
-    background: #422006;
-    color: #fbbf24;
-}
-.pipeline-strip .step-sql {
-    background: #14532d;
-    color: #86efac;
-}
-.pipeline-strip .arrow {
-    color: #475569;
-    font-size: 1.1rem;
-    margin: 0 0.15rem;
+.badge {
+    padding: 0.25rem 0.65rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
 }
+.badge-indigo  { background: #3730a3; color: #e0e7ff; }
+.badge-purple  { background: #5b21b6; color: #ede9fe; }
+.badge-emerald { background: #065f46; color: #d1fae5; }
+.badge-amber   { background: #92400e; color: #fef3c7; }
 
-/* ---------- Badges ---------- */
-.tech-badges {
+/* -- Pipeline: compact dark strip -- */
+.pipeline-strip {
+    background: #0f172a;
+    border-radius: 10px;
+    padding: 0.6rem 1rem;
     display: flex;
+    align-items: center;
     justify-content: center;
-    gap: 0.5rem;
+    gap: 0.3rem;
     flex-wrap: wrap;
-    margin-bottom: 1rem;
-}
-.badge {
-    display: inline-block;
-    padding: 0.3rem 0.75rem;
-    border-radius: 20px;
-    font-size: 0.78rem;
-    font-weight: 700;
-    letter-spacing: 0.03em;
-}
-.badge-indigo { background: #e0e7ff; color: #3730a3; }
-.badge-purple { background: #ede9fe; color: #5b21b6; }
-.badge-emerald { background: #d1fae5; color: #065f46; }
-.badge-amber { background: #fef3c7; color: #92400e; }
-
-/* ---------- Tabs ---------- */
-.tabs .tab-nav button {
-    font-weight: 600 !important;
-    color: #475569 !important;
-    font-size: 0.95rem !important;
+    margin: 0.5rem 0 0.75rem;
 }
-.tabs .tab-nav button.selected {
-    color: #667eea !important;
-    border-color: #667eea !important;
+.pipeline-strip .step {
+    padding: 0.25rem 0.6rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    font-family: 'Fira Code', monospace;
 }
+.pipeline-strip .step-input  { background: #1e3a5f; color: #7dd3fc; }
+.pipeline-strip .step-model  { background: #312e81; color: #a5b4fc; }
+.pipeline-strip .step-struct { background: #422006; color: #fbbf24; }
+.pipeline-strip .step-sql    { background: #14532d; color: #86efac; }
+.pipeline-strip .arrow       { color: #475569; font-size: 1rem; }
 
-/* ---------- SQL Output (dark code block) ---------- */
+/* -- SQL output: dark code block -- */
 .sql-output textarea {
-    font-family: 'Fira Code', 'Cascadia Code', 'SF Mono', monospace !important;
-    font-size: 1.15rem !important;
+    font-family: 'Fira Code', 'Cascadia Code', monospace !important;
+    font-size: 1.1rem !important;
     background: #0f172a !important;
     color: #e2e8f0 !important;
     border: 1px solid #1e293b !important;
-    border-radius: 12px !important;
-    padding: 1.15rem !important;
-    line-height: 1.6 !important;
-    letter-spacing: 0.01em !important;
-}
-.sql-output label span {
-    color: #1e293b !important;
-    font-weight: 600 !important;
+    border-radius: 10px !important;
+    padding: 1rem !important;
+    line-height: 1.5 !important;
 }
 
-/* ---------- Decode boxes ---------- */
+/* -- Decode/info boxes -- */
 .decode-box textarea {
     font-family: 'Fira Code', monospace !important;
-    font-size: 0.88rem !important;
+    font-size: 0.85rem !important;
     background: #f1f5f9 !important;
-    color: #1e293b !important;
+    color: #0f172a !important;
     border: 1px solid #cbd5e1 !important;
-    border-radius: 10px !important;
-}
-.decode-box label span {
-    color: #334155 !important;
-    font-weight: 600 !important;
+    border-radius: 8px !important;
 }
 
-/* ---------- Empty state placeholder ---------- */
-.sql-output textarea:placeholder-shown,
-.decode-box textarea:placeholder-shown {
-    font-style: italic;
-    opacity: 0.5;
-}
-.sql-output textarea:empty::before {
-    content: "Your SQL query will appear here...";
-    color: #64748b;
-    font-style: italic;
-}
-
-/* ---------- Generate Button ---------- */
+/* -- Generate button -- */
 .generate-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     border: none !important;
     color: #fff !important;
     font-weight: 700 !important;
-    font-size: 1.05rem !important;
-    padding: 0.8rem 2rem !important;
-    border-radius: 12px !important;
-    min-height: 48px !important;
-    letter-spacing: 0.02em !important;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25) !important;
+    font-size: 1rem !important;
+    border-radius: 10px !important;
+    min-height: 46px !important;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
+    transition: all 0.2s ease !important;
 }
 .generate-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
 }
 
-/* ---------- Section Headers ---------- */
-.section-title {
-    color: #1e293b !important;
-    font-weight: 700 !important;
+/* -- FORCE all labels/text dark on light backgrounds -- */
+label, label span, .label-wrap span,
+h1, h2, h3, h4, h5, h6,
+p, li, td, th, span, div {
+    color: #1e293b;
 }
-
-/* ---------- All labels dark ---------- */
-label span, .label-wrap span {
-    color: #1e293b !important;
+/* Exceptions for dark containers */
+.pipeline-strip *, .sql-output textarea,
+.app-footer, .app-footer * {
+    color: inherit;
 }
+.badge { color: inherit !important; }
 
-/* ---------- Input hint text ---------- */
+/* -- Hint text -- */
 .input-hint {
-    font-size: 0.82rem;
-    color: #64748b;
-    margin-top: -0.25rem;
-    margin-bottom: 0.5rem;
-    padding-left: 2px;
+    font-size: 0.8rem;
+    color: #64748b !important;
+    margin-top: -0.3rem;
 }
-
-/* ---------- Architecture diagram ---------- */
-.arch-section {
-    padding: 1.5rem;
+.input-hint code {
+    background: #e2e8f0;
+    color: #334155;
+    padding: 0.1rem 0.35rem;
+    border-radius: 3px;
+    font-size: 0.78rem;
 }
+
+/* -- Tab content cards -- */
 .arch-card {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
-    border-radius: 14px;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
+    border-radius: 12px;
+    padding: 1.25rem;
+    margin-bottom: 0.75rem;
 }
 .arch-card h3 {
-    color: #1e293b;
-    margin: 0 0 0.75rem 0;
-    font-size: 1.1rem;
+    color: #0f172a !important;
+    margin: 0 0 0.6rem 0;
+    font-size: 1.05rem;
+    font-weight: 700;
 }
-.arch-card p, .arch-card li {
-    color: #475569;
-    font-size: 0.95rem;
-    line-height: 1.6;
+.arch-card p,
+.arch-card li {
+    color: #334155 !important;
+    font-size: 0.92rem;
+    line-height: 1.55;
+}
+.arch-card strong {
+    color: #0f172a !important;
 }
 .arch-card code {
     background: #e0e7ff;
-    color: #3730a3;
-    padding: 0.15rem 0.45rem;
+    color: #3730a3 !important;
+    padding: 0.1rem 0.4rem;
     border-radius: 4px;
-    font-size: 0.85rem;
+    font-size: 0.82rem;
     font-family: 'Fira Code', monospace;
 }
+.arch-card a {
+    color: #4f46e5 !important;
+}
 .arch-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1rem;
+    gap: 0.75rem;
 }
 @media (max-width: 768px) {
     .arch-grid { grid-template-columns: 1fr; }
 }
 
-/* Encoding reference table */
+/* -- Reference table -- */
 .encoding-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
-    border-radius: 10px;
+    border-radius: 8px;
     overflow: hidden;
     border: 1px solid #e2e8f0;
-    font-size: 0.9rem;
+    font-size: 0.88rem;
 }
 .encoding-table th {
     background: #0f172a;
-    color: #e2e8f0;
-    padding: 0.7rem 1rem;
+    color: #e2e8f0 !important;
+    padding: 0.6rem 0.8rem;
     text-align: left;
     font-weight: 600;
 }
 .encoding-table td {
-    padding: 0.6rem 1rem;
+    padding: 0.5rem 0.8rem;
     border-bottom: 1px solid #f1f5f9;
-    color: #334155;
+    color: #334155 !important;
 }
 .encoding-table tr:last-child td { border-bottom: none; }
 .encoding-table tr:nth-child(even) td { background: #f8fafc; }
 .encoding-table .mono {
     font-family: 'Fira Code', monospace;
-    color: #667eea;
+    color: #4f46e5 !important;
     font-weight: 600;
-    font-size: 0.85rem;
 }
 
-/* Stats cards */
+/* -- Stats cards -- */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 0.75rem;
-    margin: 1rem 0;
+    gap: 0.6rem;
+    margin: 0.75rem 0;
 }
 @media (max-width: 768px) {
     .stats-grid { grid-template-columns: repeat(2, 1fr); }
@@ -288,39 +222,37 @@ label span, .label-wrap span {
 .stat-card {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
-    border-radius: 12px;
-    padding: 1.1rem;
+    border-radius: 10px;
+    padding: 0.9rem;
     text-align: center;
 }
 .stat-card .stat-value {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     font-weight: 800;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: #4f46e5 !important;
 }
 .stat-card .stat-label {
-    font-size: 0.8rem;
-    color: #64748b;
+    font-size: 0.72rem;
+    color: #64748b !important;
     font-weight: 600;
-    margin-top: 0.2rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    margin-top: 0.15rem;
 }
 
-/* ---------- Footer ---------- */
+/* -- Footer -- */
 .app-footer {
     text-align: center;
-    padding: 1.5rem 1rem;
-    margin-top: 1rem;
+    padding: 1rem;
+    margin-top: 0.75rem;
     border-top: 1px solid #e2e8f0;
-    color: #94a3b8;
-    font-size: 0.82rem;
+    font-size: 0.8rem;
+}
+.app-footer, .app-footer * {
+    color: #94a3b8 !important;
 }
 .app-footer a {
-    color: #667eea;
-    text-decoration: none;
+    color: #667eea !important;
 }
 
-/* Hide default gradio footer */
 footer { display: none !important; }