Update style.css

style.css

@@ -1,326 +1,315 @@
-/* --- Target the Gradio app wrapper for backgrounds --- */
+/* =========================================================
+   ESCP THEME — compatible Gradio 6.x
+   ========================================================= */
+ 
+/* --- Background on root elements --- */
 gradio-app,
 .gradio-app,
-.main,
-#app,
-[data-testid="app"] {
-  background-color: rgb(40,9,109) !important;
+body,
+html {
+  background-color: rgb(40, 9, 109) !important;
   background-image:
     url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_top.png'),
     url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_mid.png'),
     url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_bottom.png') !important;
-  background-position:
-    top center,
-    0 913px,
-    bottom center !important;
-  background-repeat:
-    no-repeat,
-    repeat-y,
-    no-repeat !important;
-  background-size:
-    100% auto,
-    100% auto,
-    100% auto !important;
+  background-position: top center, 0 913px, bottom center !important;
+  background-repeat: no-repeat, repeat-y, no-repeat !important;
+  background-size: 100% auto, 100% auto, 100% auto !important;
   min-height: 100vh !important;
-}
-
-/* --- Fallback on html/body --- */
-html, body {
-  background-color: rgb(40,9,109) !important;
   margin: 0 !important;
   padding: 0 !important;
-  min-height: 100vh !important;
 }
-
-/* Bottom image is now part of the main background layers (positioned at bottom center) */
-
+ 
 /* --- Main container --- */
 .gradio-container {
   max-width: 1400px !important;
   width: 94vw !important;
   margin: 0 auto !important;
-  padding-top: 220px !important;
+  padding-top: 40px !important;
   padding-bottom: 150px !important;
   background: transparent !important;
 }
-
-/* --- Title in ESCP gold --- */
+ 
+/* =========================================================
+   FIX PRINCIPAL : texte noir dans les zones blanches
+   ========================================================= */
+ 
+/* Toutes les zones de contenu blanc → texte sombre */
+.tabitem,
+.tabitem *:not(button):not([role="tab"]),
+.tab-content,
+.tab-content *:not(button):not([role="tab"]) {
+  color: #1a1a1a !important;
+}
+ 
+/* Inputs, textareas, selects */
+input, textarea, select,
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  color: #1a1a1a !important;
+  background: #ffffff !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
+}
+ 
+/* Labels des composants */
+label, .label-wrap, .label-wrap span,
+span.svelte-1ed2p3z,
+.block label span {
+  color: #374151 !important;
+}
+ 
+/* Dataframes / tables */
+table, th, td,
+[data-testid="dataframe"] table,
+[data-testid="dataframe"] th,
+[data-testid="dataframe"] td {
+  color: #1a1a1a !important;
+  background-color: #ffffff !important;
+}
+ 
+th {
+  background-color: #f3f4f6 !important;
+  font-weight: 600 !important;
+}
+ 
+/* Log textbox */
+.gradio-container textarea {
+  color: #1a1a1a !important;
+  font-family: monospace !important;
+  font-size: 0.8rem !important;
+}
+ 
+/* Chatbot messages */
+.message-wrap .message,
+[data-testid="bot"],
+[data-testid="user"],
+.bubble-wrap {
+  color: #1a1a1a !important;
+}
+ 
+/* =========================================================
+   TITRE ESCP
+   ========================================================= */
 #escp_title h1 {
-  color: rgb(242,198,55) !important;
+  color: rgb(242, 198, 55) !important;
   font-size: 3rem !important;
   font-weight: 800 !important;
   text-align: center !important;
   margin: 0 0 12px 0 !important;
 }
-
-/* --- Subtitle --- */
-#escp_title p, #escp_title em {
-  color: rgba(255,255,255,0.85) !important;
+ 
+#escp_title p,
+#escp_title em {
+  color: rgba(255, 255, 255, 0.85) !important;
   text-align: center !important;
 }
-
-/* --- Tab bar background --- */
+ 
+/* =========================================================
+   TABS — Gradio 6 utilise des classes différentes
+   ========================================================= */
+ 
+/* Barre de navigation des tabs */
 .tabs > .tab-nav,
-.tab-nav,
-div[role="tablist"],
-.svelte-tabs > .tab-nav {
-  background: rgba(40,9,109,0.6) !important;
+[role="tablist"],
+.tab-nav {
+  background: rgba(40, 9, 109, 0.6) !important;
   border-radius: 10px 10px 0 0 !important;
   padding: 4px !important;
 }
-
-/* --- ALL tab buttons: force white text --- */
-.tabs > .tab-nav button,
-.tab-nav button,
-div[role="tablist"] button,
+ 
+/* Tous les boutons tab → blanc */
 button[role="tab"],
-.svelte-tabs button,
-.tab-nav > button,
-.tabs button {
+.tab-nav button,
+[role="tablist"] button {
   color: #ffffff !important;
   font-weight: 600 !important;
-  border: none !important;
   background: transparent !important;
+  border: none !important;
   padding: 10px 20px !important;
   border-radius: 8px 8px 0 0 !important;
   opacity: 1 !important;
 }
-
-/* --- Selected tab: ESCP gold --- */
-.tabs > .tab-nav button.selected,
-.tab-nav button.selected,
+ 
+/* Tab sélectionné → or ESCP */
 button[role="tab"][aria-selected="true"],
-button[role="tab"].selected,
-div[role="tablist"] button[aria-selected="true"],
-.svelte-tabs button.selected {
-  color: rgb(242,198,55) !important;
-  background: rgba(255,255,255,0.12) !important;
-}
-
-/* --- Unselected tabs: ensure visibility --- */
-.tabs > .tab-nav button:not(.selected),
-.tab-nav button:not(.selected),
+.tab-nav button.selected,
+button[role="tab"].selected {
+  color: rgb(242, 198, 55) !important;
+  background: rgba(255, 255, 255, 0.12) !important;
+  border-bottom: 2px solid rgb(242, 198, 55) !important;
+}
+ 
+/* Tab non sélectionné → blanc */
 button[role="tab"][aria-selected="false"],
-button[role="tab"]:not(.selected),
-div[role="tablist"] button:not([aria-selected="true"]) {
+button[role="tab"]:not(.selected) {
   color: #ffffff !important;
-  opacity: 1 !important;
+  opacity: 0.85 !important;
 }
-
-/* --- White card panels --- */
-.gradio-container .gr-block,
-.gradio-container .gr-box,
-.gradio-container .gr-panel,
-.gradio-container .gr-group {
-  background: #ffffff !important;
-  border-radius: 10px !important;
-}
-
-/* --- Tab content area --- */
+ 
+/* Contenu des tabs → fond blanc */
 .tabitem {
-  background: rgba(255,255,255,0.95) !important;
+  background: rgba(255, 255, 255, 0.95) !important;
   border-radius: 0 0 10px 10px !important;
-  padding: 16px !important;
-}
-
-/* --- Inputs --- */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
-  background: #ffffff !important;
-  border: 1px solid #d1d5db !important;
-  border-radius: 8px !important;
-}
-
-/* --- Buttons: ESCP purple primary --- */
-.gradio-container button:not([role="tab"]) {
-  font-weight: 600 !important;
-  padding: 10px 16px !important;
-  border-radius: 10px !important;
-}
-
-button.primary {
-  background-color: rgb(40,9,109) !important;
+  padding: 20px !important;
+}
+ 
+/* =========================================================
+   BOUTONS
+   ========================================================= */
+ 
+/* Boutons primaires */
+button.primary,
+.gr-button-primary,
+[data-testid="button"].primary {
+  background-color: rgb(40, 9, 109) !important;
   color: #ffffff !important;
   border: none !important;
+  font-weight: 600 !important;
+  border-radius: 10px !important;
+  padding: 10px 16px !important;
 }
-
+ 
 button.primary:hover {
-  background-color: rgb(60,20,140) !important;
+  background-color: rgb(60, 20, 140) !important;
 }
-
-button.secondary {
+ 
+/* Boutons secondaires */
+button.secondary,
+.gr-button-secondary {
   background-color: #ffffff !important;
-  color: rgb(40,9,109) !important;
-  border: 2px solid rgb(40,9,109) !important;
+  color: rgb(40, 9, 109) !important;
+  border: 2px solid rgb(40, 9, 109) !important;
+  font-weight: 600 !important;
+  border-radius: 10px !important;
+  padding: 10px 16px !important;
 }
-
+ 
 button.secondary:hover {
-  background-color: rgb(240,238,250) !important;
-}
-
-/* --- Dataframes --- */
-[data-testid="dataframe"] {
-  background-color: #ffffff !important;
+  background-color: rgb(240, 238, 250) !important;
+}
+ 
+/* =========================================================
+   COMPOSANTS GRADIO 6
+   ========================================================= */
+ 
+/* Blocks / panels */
+.block,
+.gr-block,
+.gr-box,
+.gr-panel,
+.gr-group,
+.contain {
+  background: #ffffff !important;
   border-radius: 10px !important;
 }
-
-table {
-  font-size: 0.85rem !important;
+ 
+/* Gallery */
+.gallery,
+.grid-wrap {
+  background: #ffffff !important;
+  border-radius: 10px !important;
 }
-
-/* --- Chatbot (AI Dashboard tab) --- */
-.gr-chatbot {
-  min-height: 380px !important;
+ 
+/* Chatbot */
+.chatbot,
+.chat-wrap,
+[data-testid="chatbot"] {
   background-color: #ffffff !important;
   border-radius: 12px !important;
+  min-height: 380px !important;
 }
-
-.gr-chatbot .message.user {
-  background-color: rgb(232,225,250) !important;
+ 
+/* Messages user */
+[data-testid="user"] .bubble-wrap,
+.message.user {
+  background-color: rgb(232, 225, 250) !important;
+  color: #1a1a1a !important;
   border-radius: 12px !important;
 }
-
-.gr-chatbot .message.bot {
+ 
+/* Messages bot */
+[data-testid="bot"] .bubble-wrap,
+.message.bot {
   background-color: #f3f4f6 !important;
+  color: #1a1a1a !important;
   border-radius: 12px !important;
 }
-
-/* --- Gallery --- */
-.gallery {
+ 
+/* Dropdown */
+.dropdown, select {
   background: #ffffff !important;
-  border-radius: 10px !important;
-}
-
-/* --- Log textbox --- */
-textarea {
-  font-family: monospace !important;
-  font-size: 0.8rem !important;
+  color: #1a1a1a !important;
+  border-radius: 8px !important;
 }
-
-/* --- Markdown headings inside tabs --- */
+ 
+/* =========================================================
+   HEADINGS dans les tabs
+   ========================================================= */
+.tabitem h1,
+.tabitem h2,
 .tabitem h3 {
-  color: rgb(40,9,109) !important;
+  color: rgb(40, 9, 109) !important;
   font-weight: 700 !important;
 }
-
-.tabitem h4 {
+ 
+.tabitem h4,
+.tabitem h5,
+.tabitem p {
   color: #374151 !important;
 }
-
-/* --- Examples row (AI Dashboard) --- */
-.examples-row button {
-  background: rgb(240,238,250) !important;
-  color: rgb(40,9,109) !important;
-  border: 1px solid rgb(40,9,109) !important;
+ 
+/* =========================================================
+   EXAMPLES (boutons de suggestion)
+   ========================================================= */
+.examples table td,
+.examples-row button,
+.gr-samples-table td {
+  background: rgb(240, 238, 250) !important;
+  color: rgb(40, 9, 109) !important;
+  border: 1px solid rgb(40, 9, 109) !important;
   border-radius: 8px !important;
   font-size: 0.85rem !important;
 }
-
+ 
+.examples table td:hover,
 .examples-row button:hover {
-  background: rgb(232,225,250) !important;
-}
-
-/* --- Header / footer: transparent over banner --- */
-header, header *,
-footer, footer * {
+  background: rgb(232, 225, 250) !important;
+}
+ 
+/* =========================================================
+   FOOTER / HEADER — transparent
+   ========================================================= */
+header, footer,
+header *, footer *,
+.footer, .footer * {
   background: transparent !important;
   box-shadow: none !important;
 }
-
+ 
 footer a, footer button,
-header a, header button {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-#footer, #footer *,
-[class*="footer"], [class*="footer"] *,
-[class*="chip"], [class*="pill"], [class*="chip"] *, [class*="pill"] * {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-[data-testid*="api"], [data-testid*="settings"],
-[id*="api"], [id*="settings"],
-[class*="api"], [class*="settings"],
-[class*="bottom"], [class*="toolbar"], [class*="controls"] {
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
-[data-testid*="api"] *, [data-testid*="settings"] *,
-[id*="api"] *, [id*="settings"] *,
-[class*="api"] *, [class*="settings"] * {
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
-section footer {
-  background: transparent !important;
-}
-
+header a, header button,
 section footer button,
 section footer a {
   background: transparent !important;
   background-color: transparent !important;
   border: none !important;
   box-shadow: none !important;
-  color: white !important;
+  color: rgba(255, 255, 255, 0.7) !important;
 }
-
+ 
 section footer button:hover,
-section footer button:focus,
-section footer a:hover,
-section footer a:focus {
+section footer a:hover {
   background: transparent !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-
-section footer button,
-section footer button * {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-  filter: none !important;
-}
-
-section footer button::before,
-section footer button::after {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-  filter: none !important;
-}
-
-section footer a,
-section footer a * {
-  background: transparent !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
+  color: #ffffff !important;
 }
-
-.gradio-container footer button,
-.gradio-container footer button *,
-.gradio-container .footer button,
-.gradio-container .footer button * {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
+ 
+/* =========================================================
+   KPI CARDS — laisser le style inline fonctionner
+   ========================================================= */
+.kpi-card {
+  background: rgba(255, 255, 255, 0.72) !important;
+  color: #2d1f4e !important;
 }
-
-.gradio-container footer button::before,
-.gradio-container footer button::after,
-.gradio-container .footer button::before,
-.gradio-container .footer button::after {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-}
+