Spaces:
Running on Zero
Running on Zero
File size: 2,790 Bytes
fced97d 4c6125c fced97d 4c6125c fced97d 4c6125c fced97d 75c5414 fced97d 75c5414 fced97d a915481 0163508 fced97d 3266bd1 0163508 fced97d a915481 fced97d 75c5414 fced97d 4c6125c fced97d 4c6125c fced97d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | """Gradio theme + global CSS for the recipe-card look."""
from __future__ import annotations
import gradio as gr
theme = gr.themes.Soft(
primary_hue="orange",
neutral_hue="stone",
font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
)
CSS = """
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
/* ---------------------------------------------------------------------------
Force a warm light palette regardless of the browser/system dark mode.
We pin the parchment background, so we must also pin DARK text colours via
Gradio's CSS variables — otherwise dark-mode users get white text on the
light background and it disappears.
--------------------------------------------------------------------------- */
.gradio-container, .gradio-container.dark {
background: #f5ecd9 !important;
color-scheme: light !important;
--body-text-color: #4a3722;
--body-text-color-subdued: #7a5a35;
--block-title-text-color: #6b4a2a;
--block-label-text-color: #6b4a2a;
--block-info-text-color: #7a5a35;
--block-background-fill: #fffbf0;
--input-background-fill: #fffbf0;
--border-color-primary: #d8c9ad;
--color-accent-soft: #fbe2d2;
}
/* Blanket dark text for native Gradio text elements (covers dark mode) */
.gradio-container,
.gradio-container .prose,
.gradio-container label,
.gradio-container .gr-text,
.gradio-container span,
.gradio-container p,
.gradio-container .gr-check-radio label,
.gradio-container .wrap,
.gradio-container .gr-form,
.gradio-container .tab-nav button,
.gradio-container .gr-accordion,
.gradio-container input,
.gradio-container textarea {
color: #4a3722 !important;
}
.gradio-container .prose h1,
.gradio-container .prose h2,
.gradio-container .prose h3 { font-family: 'Lora', serif !important; color: #6b4a2a !important; }
/* Tabs: dark labels, terracotta active */
.gradio-container .tab-nav button { color: #6b4a2a !important; }
.gradio-container .tab-nav button.selected {
color: #a85c2a !important; border-bottom-color: #a85c2a !important;
}
/* Native blocks (inputs, radio, checkbox, number) on warm cards */
.gradio-container .block,
.gradio-container .form,
.gradio-container input[type="text"],
.gradio-container input[type="number"] {
background: #fffbf0 !important;
border-color: #d8c9ad !important;
}
/* Generic container shared by every HTMLComponent */
.cwm-card {
border: 1px solid #d8c9ad;
border-radius: 14px;
padding: 22px 26px;
box-shadow: 0 8px 24px rgba(107, 74, 42, 0.08);
}
button.primary, .gr-button-primary {
background: #a85c2a !important;
color: #fffbf0 !important;
font-weight: 600 !important;
font-size: 16px !important;
padding: 12px 22px !important;
}
"""
|