GigaCheck / styles.py
iitolstykh's picture
update app
0cf2685
Raw
History Blame Contribute Delete
2.98 kB
"""Gradio theme and CSS for the GigaCheck demo (pastel orange-red)."""
from __future__ import annotations
import gradio as gr
THEME = gr.themes.Soft(
primary_hue=gr.themes.colors.red,
secondary_hue=gr.themes.colors.orange,
neutral_hue=gr.themes.colors.stone,
font=(gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"),
)
CSS = """
:root {
--gc-peach: #FFE3D5;
--gc-coral: #FF8A65;
--gc-red: #E5533C;
--gc-deep: #C5402B;
--gc-green: #2FA66B;
--gc-ink: #3A2A24;
}
.gradio-container {
max-width: 980px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#gc-header { text-align: center; margin: 0.4rem 0 1.2rem; }
#gc-header h1 {
margin: 0; font-weight: 800; letter-spacing: -0.03em; font-size: 2.2rem;
background: linear-gradient(110deg, var(--gc-coral) 0%, var(--gc-red) 55%, var(--gc-deep) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
#gc-header p { margin: 0.45rem 0 0; color: var(--gc-ink); opacity: 0.7; font-size: 1.02rem; }
.gc-lang-note {
border-radius: 12px;
padding: 10px 14px;
margin: 0 0 6px;
font-size: 0.9rem;
color: var(--gc-deep);
background: linear-gradient(135deg, rgba(255,227,213,0.85), rgba(255,138,101,0.22));
border: 1px solid rgba(229,83,60,0.30);
}
.gc-lang-note b { font-weight: 700; }
.gc-counter { font-size: 0.82rem; opacity: 0.7; margin: 2px 4px 0; }
.gc-counter.gc-bad { color: var(--gc-red); opacity: 1; font-weight: 600; }
.gc-card {
padding: 18px 20px;
border-radius: 16px;
background: #ffffff;
border: 1px solid rgba(229,83,60,0.22);
box-shadow: 0 6px 22px rgba(229,83,60,0.08);
}
.gc-verdict { font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; color: var(--gc-ink); }
.gc-bar {
display: flex; width: 100%; height: 26px;
border-radius: 999px; overflow: hidden;
background: #f1ece9;
}
.gc-bar-human { background: var(--gc-green); height: 100%; transition: width 0.4s ease; }
.gc-bar-ai { background: var(--gc-red); height: 100%; transition: width 0.4s ease; }
.gc-bar-legend {
display: flex; justify-content: space-between;
margin-top: 8px; font-size: 0.9rem; font-weight: 600;
}
.gc-legend-human { color: var(--gc-green); }
.gc-legend-ai { color: var(--gc-red); }
.gc-summary { font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; }
.gc-summary-ai { color: var(--gc-deep); }
.gc-summary-clean { color: var(--gc-green); }
.gc-text {
white-space: pre-wrap; word-wrap: break-word; line-height: 1.65;
font-size: 1.0rem; color: var(--gc-ink);
}
.gc-ai-span { border-radius: 4px; padding: 1px 1px; color: #2a160f; }
button.primary, .gradio-container .primary {
background: linear-gradient(135deg, var(--gc-coral), var(--gc-red)) !important;
border: none !important;
color: #ffffff !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
}
button.primary:hover, .gradio-container .primary:hover {
filter: brightness(1.05) saturate(1.08);
}
"""