Hugging Face's logo

Spaces:
JerLag
/
verbatify
Sleeping

App Files Community
verbatify / verbatim.css
JerLag's picture
JerLag
Update verbatim.css
4cdefd4 verified
Raw History Blame Contribute Delete
7.84 kB
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
/* ====== Forcer le mode clair + variables (texte NOIR partout) ====== */
:root,
html[data-theme="dark"],
body[data-theme="dark"],
.dark, .theme-dark {
color-scheme: light !important;
/* Palette */
--vb-bg:#F8FAFC;
--vb-card:#FFFFFF;
--vb-text:#0F172A; /* noir unique */
--vb-primary:#7C3AED;
--vb-primary-2:#06B6D4;
--vb-border:#E2E8F0;
/* Tokens Gradio forcés en noir */
--body-background-fill:#F8FAFC;
--panel-background-fill:#FFFFFF;
--block-background-fill:#FFFFFF;
--block-border-color:#E2E8F0;
--text-color:#0F172A;
--secondary-text-color:#0F172A;
--muted-text-color:#0F172A;
--link-text-color:#0F172A;
--input-background-fill:#FFFFFF;
--input-text-color:#0F172A;
--input-border-color:#E2E8F0;
--button-primary-background-fill:#7C3AED;
--button-primary-text-color:#0F172A; /* texte bouton en noir */
}
/* ====== Coupe-feu : tout texte en noir, poids normal ====== */
html, body, .gradio-container{
background:var(--vb-bg) !important;
color:var(--vb-text) !important;
font-family:Manrope,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
font-weight:400 !important;
}
.gradio-container, .gradio-container *{
color:var(--vb-text) !important;
font-weight:400 !important;
}
/* Liens explicitement noirs */
.gradio-container a,
.gradio-container a:visited,
.gradio-container a:hover,
.gradio-container a:active{
color:#0F172A !important;
text-decoration: underline;
}
/* Placeholders & disabled en noir */
.gradio-container ::placeholder{ color:#0F172A !important; opacity:1 !important; }
.gradio-container [disabled], .gradio-container :disabled{ color:#0F172A !important; opacity:1 !important; }
/* Titres/labels noirs */
.gradio-container h1,.gradio-container h2,.gradio-container h3,
.gradio-container h4,.gradio-container h5,.gradio-container h6,
.gradio-container .prose,.gradio-container .gr-markdown,
.gradio-container [data-testid="block-label"],
.gradio-container .component-label,.gradio-container .label,
.gradio-container .wrap > .label{
color:#0F172A !important;
font-weight:400 !important;
}
/* Retirer les rubans/pills automatiques et entêtes sombres */
.gradio-container .wrap > div[class*="absolute"][class*="top-0"][class*="left-0"],
.gradio-container [class*="absolute"][class*="top-0"][class*="left-0"][class*="rounded-b"],
.gradio-container [class*="absolute"][class*="top-0"][class*="left-0"][class*="rounded-br"]{
background:transparent !important; border:none !important; box-shadow:none !important;
}
.gradio-container [data-testid="block-info"],
.gradio-container [data-testid="block-label"],
.gradio-container .block .label,
.gradio-container .wrap > .label,
.gradio-container [class*="header-button"],
.gradio-container .table caption{
background:transparent !important;
color:#0F172A !important;
border:0 !important;
box-shadow:none !important;
}
/* ====== Encart / cartes (dégradé doux, sans bordures noires) ====== */
.gradio-container .block,.gradio-container .gr-block,.gradio-container .gr-box,
.gradio-container .panel,.gradio-container .form,.gradio-container .group,
.gradio-container .row,.gradio-container .column,.gradio-container .tabs,
.gradio-container .tabitem,.gradio-container [class*="accordion"],
.gradio-container [class*="box"]{
background:linear-gradient(180deg, rgba(124,58,237,.10), rgba(6,182,212,.10)) !important;
border:1px solid transparent !important;
border-radius:14px !important;
box-shadow:0 10px 26px rgba(2,6,23,.08);
}
/* ====== Header ====== */
.vb-hero{
display:flex;align-items:center;gap:16px;
padding:20px 22px;margin:10px 0 20px;
background:linear-gradient(90deg, rgba(124,58,237,.18), rgba(6,182,212,.18));
border:1px solid var(--vb-border);border-radius:14px;box-shadow:0 10px 26px rgba(2,6,23,.08);
}
.vb-hero .vb-title{font-size:22px !important; font-weight:400 !important; color:#0F172A !important}
.vb-hero .vb-sub{font-size:13px !important; font-weight:400 !important; color:#0F172A !important}
/* ====== Inputs ====== */
.gradio-container input[type="text"],
.gradio-container input[type="number"],
.gradio-container textarea,
.gradio-container select,
.gradio-container .gr-textbox,
.gradio-container .gr-textbox textarea{
background:#fff !important; color:#0F172A !important;
border:1px solid #E2E8F0 !important; border-radius:12px !important;
box-shadow:none !important;
}
.gradio-container input:focus,
.gradio-container textarea:focus{
border-color:transparent !important;
box-shadow:0 0 0 2px rgba(124,58,237,.35), 0 0 0 4px rgba(6,182,212,.25) !important;
}
/* ====== Checkboxes / radios en couleur bouton ====== */
.gradio-container input[type="checkbox"],
.gradio-container input[type="radio"]{
accent-color:var(--vb-primary) !important;
}
/* ====== Sliders (plus d’orange) ====== */
.gradio-container input[type="range"]{ accent-color:var(--vb-primary) !important; }
.gradio-container .noUi-target{ background:rgba(124,58,237,.18) !important; border:0 !important; box-shadow:none !important; }
.gradio-container .noUi-connect{ background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important; }
.gradio-container .noUi-handle{
background:#fff !important; border:2px solid var(--vb-primary) !important;
box-shadow:0 2px 10px rgba(124,58,237,.3) !important;
}
/* ====== Bouton principal (texte noir, non gras) ====== */
.vb-cta{
background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
color:#0F172A !important;
border:0 !important;
font-weight:400 !important; /* pas en gras */
font-size:16px !important;
padding:14px 18px !important;
border-radius:14px !important;
box-shadow:0 10px 24px rgba(124,58,237,.28);
}
.vb-cta:hover{ transform:translateY(-1px); filter:brightness(1.04) }
/* ====== DataFrames / Tables ====== */
.gradio-container .table,.gradio-container .table *,.gradio-container .svelte-virtual-table-viewport,.gradio-container .table-wrap{
background:#fff !important; color:#0F172A !important; border-color:#E2E8F0 !important;
}
.gradio-container .table thead,.gradio-container .table thead tr,.gradio-container .table thead th{
background:linear-gradient(90deg, rgba(124,58,237,.12), rgba(6,182,212,.12)) !important;
color:#0F172A !important; border-bottom:1px solid #E2E8F0 !important; font-weight:400 !important;
}
/* ====== Plotly (textes en noir) ====== */
.js-plotly-plot text,.js-plotly-plot .legend text{ fill:#0F172A !important; color:#0F172A !important; }
.js-plotly-plot .g-xtick text,.js-plotly-plot .g-ytick text{ fill:#0F172A !important; }
.js-plotly-plot .plotly .bg{ fill:#fff !important; }
.js-plotly-plot .plotly .xgrid,.js-plotly-plot .plotly .ygrid{ stroke:#E2E8F0 !important; opacity:1; }
/* ====== Couleur des blocs "empty … unpadded_box" ====== */
:root{ --vb-secondary-bg: linear-gradient(180deg, rgba(124,58,237,.14), rgba(6,182,212,.14)); }
.gradio-container .empty[class*="unpadded_box"],
.gradio-container [aria-label="Empty value"]{
--background-fill-secondary: var(--vb-secondary-bg) !important;
background: var(--background-fill-secondary) !important;
border-color: transparent !important;
color:#0F172A !important;
box-shadow:0 10px 26px rgba(2,6,23,.08);
}
/* ====== Centrage parfait du bouton dans sa colonne #vb-cta-cell ====== */
#vb-cta-cell{
display:flex !important;
align-items:center !important; /* vertical */
justify-content:center !important; /* horizontal */
min-height:160px; /* hauteur pour bien centrer */
padding:12px 16px !important;
}
#vb-cta-cell > .wrap{ width:100% !important; }
#vb-cta-cell button.vb-cta{
display:inline-flex !important;
margin:0 auto !important;
max-width:380px;
}