style.css

/* =========================================================
   ESCP THEME — compatible Gradio 6.x
   ========================================================= */
 
/* --- Background on root elements --- */
gradio-app,
.gradio-app,
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;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
/* --- Main container --- */
.gradio-container {
  max-width: 1400px !important;
  width: 94vw !important;
  margin: 0 auto !important;
  padding-top: 40px !important;
  padding-bottom: 150px !important;
  background: transparent !important;
}
 
/* =========================================================
   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;
  font-size: 3rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}
 
#escp_title p,
#escp_title em {
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: center !important;
}
 
/* =========================================================
   TABS — Gradio 6 utilise des classes différentes
   ========================================================= */
 
/* Barre de navigation des tabs */
.tabs > .tab-nav,
[role="tablist"],
.tab-nav {
  background: rgba(40, 9, 109, 0.6) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 4px !important;
}
 
/* Tous les boutons tab → blanc */
button[role="tab"],
.tab-nav button,
[role="tablist"] button {
  color: #ffffff !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px 8px 0 0 !important;
  opacity: 1 !important;
}
 
/* Tab sélectionné → or ESCP */
button[role="tab"][aria-selected="true"],
.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) {
  color: #ffffff !important;
  opacity: 0.85 !important;
}
 
/* Contenu des tabs → fond blanc */
.tabitem {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 0 0 10px 10px !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;
}
 
/* 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;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
}
 
button.secondary:hover {
  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;
}
 
/* Gallery */
.gallery,
.grid-wrap {
  background: #ffffff !important;
  border-radius: 10px !important;
}
 
/* Chatbot */
.chatbot,
.chat-wrap,
[data-testid="chatbot"] {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  min-height: 380px !important;
}
 
/* Messages user */
[data-testid="user"] .bubble-wrap,
.message.user {
  background-color: rgb(232, 225, 250) !important;
  color: #1a1a1a !important;
  border-radius: 12px !important;
}
 
/* Messages bot */
[data-testid="bot"] .bubble-wrap,
.message.bot {
  background-color: #f3f4f6 !important;
  color: #1a1a1a !important;
  border-radius: 12px !important;
}
 
/* Dropdown */
.dropdown, select {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-radius: 8px !important;
}
 
/* =========================================================
   HEADINGS dans les tabs
   ========================================================= */
.tabitem h1,
.tabitem h2,
.tabitem h3 {
  color: rgb(40, 9, 109) !important;
  font-weight: 700 !important;
}
 
.tabitem h4,
.tabitem h5,
.tabitem p {
  color: #374151 !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;
}
 
/* =========================================================
   FOOTER / HEADER — transparent
   ========================================================= */
header, footer,
header *, footer *,
.footer, .footer * {
  background: transparent !important;
  box-shadow: none !important;
}
 
footer a, footer button,
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: rgba(255, 255, 255, 0.7) !important;
}
 
section footer button:hover,
section footer a:hover {
  background: transparent !important;
  color: #ffffff !important;
}
 
/* =========================================================
   KPI CARDS — laisser le style inline fonctionner
   ========================================================= */
.kpi-card {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #2d1f4e !important;
}