Hugging Face's logo

Spaces:
vector-institute
/
UnBias-Plus-Dataset-Viewer
Running

App Files Community
UnBias-Plus-Dataset-Viewer / static /style.css
ahmedyradwan02's picture
ahmedyradwan02
Update static/style.css
8d02b1e verified
Raw
History Blame Contribute Delete
8.62 kB
/* ============================================================
 UnBias-Plus Dataset Viewer — Vector Institute Brand
 Open Sans · DM Mono · Magenta #EB088A · Black · White
 ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');
/* ── Light-mode tokens ──────────────────────────────────────── */
:root {
 --bg: #ffffff;
 --bg-2: #ffffff;
 --bg-3: #f5f5f5;
 --border: #e4e4e0;
 --text: #000000;
 --text-2: #3c3c3c;
 --text-3: #9a9a9a;
 --accent: #EB088A;
 --accent-dim: rgba(235, 8, 138, 0.07);
 --accent-hover: #c9076f;
 --high: #d63232;
 --high-bg: rgba(214, 50, 50, 0.08);
 --high-border: rgba(214, 50, 50, 0.25);
 --medium: #c47a00;
 --medium-bg: rgba(196, 122, 0, 0.08);
 --medium-border: rgba(196, 122, 0, 0.25);
 --low: #7a6200;
 --low-bg: rgba(122, 98, 0, 0.08);
 --low-border: rgba(122, 98, 0, 0.25);
 --radius: 10px;
 --radius-sm: 6px;
 --font: 'Open Sans', system-ui, sans-serif;
 --font-mono: 'DM Mono', ui-monospace, monospace;
}
/* ── Dark-mode tokens ───────────────────────────────────────── */
/* Gradio toggles class="dark" on <html> */
html.dark {
 --bg: #0d0d0d;
 --bg-2: #111111;
 --bg-3: #1a1a1a;
 --border: #2a2a2a;
 --text: #f0f0f0;
 --text-2: #c0c0c0;
 --text-3: #666666;
 /* accent stays magenta */
 --high: #f87171;
 --high-bg: rgba(248, 113, 113, 0.12);
 --high-border: rgba(248, 113, 113, 0.30);
 --medium: #f5a623;
 --medium-bg: rgba(245, 166, 35, 0.12);
 --medium-border: rgba(245, 166, 35, 0.30);
 --low: #c9a84c;
 --low-bg: rgba(201, 168, 76, 0.12);
 --low-border: rgba(201, 168, 76, 0.30);
}
/* System-preference fallback: applies before user touches the toggle */
@media (prefers-color-scheme: dark) {
 html:not(.light) {
 --bg: #0d0d0d;
 --bg-2: #111111;
 --bg-3: #1a1a1a;
 --border: #2a2a2a;
 --text: #f0f0f0;
 --text-2: #c0c0c0;
 --text-3: #666666;
 --high: #f87171;
 --high-bg: rgba(248, 113, 113, 0.12);
 --high-border: rgba(248, 113, 113, 0.30);
 --medium: #f5a623;
 --medium-bg: rgba(245, 166, 35, 0.12);
 --medium-border: rgba(245, 166, 35, 0.30);
 --low: #c9a84c;
 --low-bg: rgba(201, 168, 76, 0.12);
 --low-border: rgba(201, 168, 76, 0.30);
 }
}
/* ── App shell ──────────────────────────────────────────────── */
.gradio-container {
 background: var(--bg) !important;
 max-width: 1400px !important;
 font-family: var(--font) !important;
}
body,
html,
.app,
.main {
 background: var(--bg) !important;
}
footer {
 display: none !important;
}
/* Gradio wraps gr.HTML in a <div class="prose"> */
.prose,
.output-html,
.gr-html {
 color: var(--text) !important;
 font-family: var(--font) !important;
 background: transparent !important;
}
/* Remove default panel chrome */
.gap,
.block,
.padded,
.gr-panel,
.contain {
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
}
/* ── Buttons ─────────────────────────────────────────────────── */
/* Target via elem_classes we set in Python */
.vi-btn-primary,
.vi-btn-primary button {
 background: var(--accent) !important;
 border-color: var(--accent) !important;
 color: #ffffff !important;
 font-family: var(--font) !important;
 font-weight: 600 !important;
 border-radius: var(--radius-sm) !important;
 transition: background 0.15s, border-color 0.15s !important;
}
.vi-btn-primary:hover,
.vi-btn-primary button:hover {
 background: var(--accent-hover) !important;
 border-color: var(--accent-hover) !important;
}
.vi-btn-secondary,
.vi-btn-secondary button {
 background: var(--bg-3) !important;
 border-color: var(--border) !important;
 color: var(--text-2) !important;
 font-family: var(--font) !important;
 font-weight: 500 !important;
 border-radius: var(--radius-sm) !important;
}
/* ── Split selector (compact dropdown) ──────────────────────── */
.vi-split-selector {
 max-width: 180px !important;
 background: transparent !important;
}
.vi-split-selector label {
 font-family: var(--font-mono) !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.06em !important;
 color: var(--text-3) !important;
}
.vi-split-selector select,
.vi-split-selector input,
.vi-split-selector .wrap {
 font-family: var(--font-mono) !important;
 font-size: 13px !important;
 background: var(--bg-3) !important;
 border-color: var(--border) !important;
 color: var(--text-2) !important;
 border-radius: var(--radius-sm) !important;
}
.vi-split-selector svg { color: var(--text-3) !important; }
/* ── Nav row: consistent height + symmetrical buttons ────────── */
.vi-nav-row {
 align-items: stretch !important;
 gap: 8px !important;
}
/* All interactive elements in the nav row share the same height */
.vi-nav-row button,
.vi-nav-row input,
.vi-nav-row textarea,
.vi-nav-row .wrap,
.vi-nav-row .wrap-inner {
 height: 44px !important;
 min-height: 44px !important;
 max-height: 44px !important;
 box-sizing: border-box !important;
}
/* Prev and Next get equal fixed width so they mirror each other */
.vi-btn-primary button,
.vi-btn-secondary button {
 width: 100% !important;
 min-width: 100px !important;
 padding-left: 20px !important;
 padding-right: 20px !important;
}
/* ── Nav display ─────────────────────────────────────────────── */
#vi-nav-display textarea,
#vi-nav-display input {
 text-align: center !important;
 font-family: var(--font-mono) !important;
 font-size: 13px !important;
 color: var(--text-2) !important;
 background: var(--bg-3) !important;
 border-color: var(--border) !important;
}
html.dark #vi-nav-display textarea,
html.dark #vi-nav-display input {
 background: var(--bg-3) !important;
 color: var(--text-2) !important;
 border-color: var(--border) !important;
}
/* ── Logo switching ──────────────────────────────────────────── */
/* Default: show black logo (light mode), hide white logo */
.vi-logo-light { display: block !important; }
.vi-logo-dark { display: none !important; }
/* Dark mode via Gradio toggle (adds class="dark" to <html>) */
html.dark .vi-logo-light { display: none !important; }
html.dark .vi-logo-dark { display: block !important; }
/* Dark mode via system preference */
@media (prefers-color-scheme: dark) {
 html:not(.light) .vi-logo-light { display: none !important; }
 html:not(.light) .vi-logo-dark { display: block !important; }
}
/* ── Typography reset inside rendered HTML ───────────────────── */
/* Ensures text color is always readable in both themes */
.prose *,
.output-html * {
 color: inherit;
}
/* Scrollbar (subtle in both themes) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
 background: var(--border);
 border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }