|
|
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap'); |
|
|
|
|
|
:root{ |
|
|
--vb-bg: #F8FAFC; |
|
|
--vb-card: #FFFFFF; |
|
|
--vb-text: #0F172A; |
|
|
--vb-muted: #475569; |
|
|
--vb-primary: #7C3AED; |
|
|
--vb-primary-2: #06B6D4; |
|
|
--vb-accent: #2563EB; |
|
|
--vb-positive: #10B981; |
|
|
--vb-negative: #EF4444; |
|
|
--vb-neutral: #94A3B8; |
|
|
--vb-border: #E2E8F0; |
|
|
--vb-radius: 14px; |
|
|
--vb-shadow: 0 8px 20px rgba(2, 6, 23, .06); |
|
|
} |
|
|
|
|
|
html, body, .gradio-container{ |
|
|
background: var(--vb-bg) !important; |
|
|
color: var(--vb-text); |
|
|
font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif; |
|
|
} |
|
|
.gradio-container { max-width: 1120px !important; margin: 0 auto !important; } |
|
|
|
|
|
.vb-hero{ |
|
|
display:flex; align-items:center; gap:14px; padding:18px 20px; margin:8px 0 18px; |
|
|
background: linear-gradient(90deg, rgba(124,58,237,.10), rgba(6,182,212,.10)); |
|
|
border:1px solid var(--vb-border); border-radius: var(--vb-radius); |
|
|
} |
|
|
.vb-hero img{ filter: drop-shadow(0 2px 10px rgba(124,58,237,.25)); } |
|
|
.vb-hero .vb-title{ font-size: 20px; font-weight:800; letter-spacing:.2px; } |
|
|
.vb-hero .vb-sub{ color: var(--vb-muted); font-size: 13px; margin-top: -4px; } |
|
|
|
|
|
.gr-markdown, .gr-box, .gr-panel, .gr-article{ |
|
|
background: var(--vb-card) !important; |
|
|
border:1px solid var(--vb-border) !important; |
|
|
border-radius: var(--vb-radius) !important; |
|
|
box-shadow: var(--vb-shadow); |
|
|
} |
|
|
.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { color: var(--vb-text); } |
|
|
.gr-markdown h2 { font-size: 18px; margin-top: 10px; } |
|
|
|
|
|
button, .gr-button{ |
|
|
border-radius: var(--vb-radius) !important; |
|
|
border: 0 !important; |
|
|
box-shadow: var(--vb-shadow); |
|
|
font-weight:700 !important; |
|
|
} |
|
|
button.primary, .gr-button-primary{ |
|
|
background: linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important; |
|
|
color: #fff !important; |
|
|
} |
|
|
button.primary:hover, .gr-button-primary:hover{ filter: brightness(1.06); transform: translateY(-1px); } |
|
|
button.secondary, .gr-button-secondary{ |
|
|
background: #fff !important; border:1px solid var(--vb-border) !important; color: var(--vb-text) !important; |
|
|
} |
|
|
|
|
|
input, textarea, select, .gr-textbox, .gr-textbox textarea{ |
|
|
border-radius: calc(var(--vb-radius) - 4px) !important; |
|
|
border:1px solid var(--vb-border) !important; |
|
|
background: #fff !important; |
|
|
} |
|
|
input[type="range"]::-webkit-slider-thumb { background: var(--vb-primary) !important; } |
|
|
input[type="checkbox"]:checked { accent-color: var(--vb-primary) !important; } |
|
|
|
|
|
[data-testid="file"] .file-preview, .gr-file{ border-radius: var(--vb-radius) !important; border:1px solid var(--vb-border) !important;} |
|
|
|
|
|
.js-plotly-plot .plotly .bg { fill: #fff !important; } |
|
|
.js-plotly-plot .plotly .xgrid, .js-plotly-plot .plotly .ygrid { stroke: #E2E8F0 !important; opacity: 1; } |
|
|
.js-plotly-plot .plotly .legend text{ font-weight:600; } |
|
|
|
|
|
.vb-chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; } |
|
|
.vb-chip.pos{ background: rgba(16,185,129,.12); color:#065F46; } |
|
|
.vb-chip.neu{ background: rgba(148,163,184,.16); color:#334155; } |
|
|
.vb-chip.neg{ background: rgba(239,68,68,.12); color:#7F1D1D; } |
|
|
|
|
|
.vb-footer{ color: var(--vb-muted); font-size: 12px; text-align:center; margin: 12px 0; } |
|
|
|
