/* ============================================================ 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.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
*/ .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.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); }