ui/theme.py

"""
DeepText Studio - Thème Futuriste

Thème Gradio dark minimaliste avec accents néon.
"""

import gradio as gr


def create_theme() -> gr.themes.Base:
    theme = gr.themes.Base(
        primary_hue=gr.themes.Color(
            c50="#e6feff",
            c100="#b3fcff",
            c200="#80faff",
            c300="#4df8ff",
            c400="#1af6ff",
            c500="#00f0ff",
            c600="#00c0cc",
            c700="#009099",
            c800="#006066",
            c900="#003033",
            c950="#001a1a",
        ),
        secondary_hue=gr.themes.Color(
            c50="#f3e8ff",
            c100="#e0cffc",
            c200="#c9a5f7",
            c300="#b37bf2",
            c400="#a855f7",
            c500="#9333ea",
            c600="#7e22ce",
            c700="#6b21a8",
            c800="#581c87",
            c900="#3b0764",
            c950="#2e0550",
        ),
        neutral_hue=gr.themes.Color(
            c50="#f0f6fc",
            c100="#e6edf3",
            c200="#c9d1d9",
            c300="#8b949e",
            c400="#6e7681",
            c500="#484f58",
            c600="#30363d",
            c700="#21262d",
            c800="#161b22",
            c900="#0d1117",
            c950="#0a0a0f",
        ),
        font=gr.themes.GoogleFont("Inter"),
        font_mono=gr.themes.GoogleFont("JetBrains Mono"),
    ).set(
        # Fond principal
        body_background_fill="#0a0a0f",
        body_background_fill_dark="#0a0a0f",
        body_text_color="#e6edf3",
        body_text_color_dark="#e6edf3",
        # Blocs / Panels
        block_background_fill="#0d1117",
        block_background_fill_dark="#0d1117",
        block_border_color="rgba(255, 255, 255, 0.06)",
        block_border_color_dark="rgba(255, 255, 255, 0.06)",
        block_border_width="1px",
        block_label_background_fill="#161b22",
        block_label_background_fill_dark="#161b22",
        block_label_text_color="#8b949e",
        block_label_text_color_dark="#8b949e",
        block_shadow="0 0 20px rgba(0, 240, 255, 0.03)",
        block_shadow_dark="0 0 20px rgba(0, 240, 255, 0.03)",
        block_title_text_color="#e6edf3",
        block_title_text_color_dark="#e6edf3",
        # Inputs
        input_background_fill="#161b22",
        input_background_fill_dark="#161b22",
        input_border_color="rgba(255, 255, 255, 0.08)",
        input_border_color_dark="rgba(255, 255, 255, 0.08)",
        input_border_color_focus="#00f0ff",
        input_border_color_focus_dark="#00f0ff",
        input_placeholder_color="#484f58",
        input_placeholder_color_dark="#484f58",
        # Boutons - style clean & humain
        button_primary_background_fill="#e6edf3",
        button_primary_background_fill_dark="#e6edf3",
        button_primary_text_color="#0d1117",
        button_primary_text_color_dark="#0d1117",
        button_primary_background_fill_hover="#c9d1d9",
        button_primary_background_fill_hover_dark="#c9d1d9",
        button_secondary_background_fill="#21262d",
        button_secondary_background_fill_dark="#21262d",
        button_secondary_text_color="#e6edf3",
        button_secondary_text_color_dark="#e6edf3",
        # Bordures / Radius
        border_color_primary="rgba(255, 255, 255, 0.06)",
        border_color_primary_dark="rgba(255, 255, 255, 0.06)",
        block_radius="8px",
        input_radius="8px",
        container_radius="12px",
        # Ombres
        shadow_spread="0px",
    )

    return theme


# CSS custom additionnel pour effets avancés
CUSTOM_CSS = """
/* DeepText Studio - Custom CSS */

/* ── Corps global ── */
.gradio-container {
    background: #0a0a0f !important;
    max-width: 100% !important;
    padding: 0 2rem !important;
}

/* ── Header ── */
.app-header {
    text-align: center;
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.1);
    margin-bottom: 1rem;
}

.app-header h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: -0.02em;
}

.app-header p {
    color: #6e7681;
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
}

/* ── Tabs ── */
.tab-nav button {
    color: #8b949e !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    font-size: 0.9rem !important;
}

.tab-nav button:hover {
    color: #00f0ff !important;
}

.tab-nav button.selected {
    color: #00f0ff !important;
    border-bottom: 2px solid #00f0ff !important;
    background: rgba(0, 240, 255, 0.05) !important;
}

/* ── Boutons ── */
.primary {
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}

.primary:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* ── Blocs de résultats ── */
.result-block {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ── Progress bar - fix scroll container ── */
.block {
    overflow: visible !important;
}

.tabitem {
    overflow: visible !important;
}

.tabitem > div,
.tabitem > div > div {
    overflow: visible !important;
}

.wrap {
    overflow: visible !important;
}

.generating {
    overflow: visible !important;
}

/* ── Labels ── */
.label-wrap {
    font-size: 0.85rem !important;
}

/* ── Inputs focus glow ── */
textarea:focus, input:focus {
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.15) !important;
}

/* ── Code / Tokens ── */
.token-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ── Footer ── */
footer {
    display: none !important;
}

/* ── Scrollbar custom ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0d1117;
}

::-webkit-scrollbar-thumb {
    background: #21262d;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #30363d;
}

/* ── Animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tabitem {
    animation: fadeIn 0.3s ease-out;
}

/* ── Responsive - Tablette ── */
@media (max-width: 768px) {
    .gradio-container {
        padding: 0.5rem !important;
    }

    .app-header h1 {
        font-size: 1.4rem;
    }

    .app-header p {
        font-size: 0.75rem;
    }

    .tab-nav {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }

    .tab-nav button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .row {
        flex-direction: column !important;
    }

    .col {
        min-width: 100% !important;
    }
}

/* ── Responsive - Mobile ── */
@media (max-width: 480px) {
    .app-header {
        padding: 1rem 0 0.5rem;
    }

    .app-header h1 {
        font-size: 1.2rem;
    }

    .tab-nav button {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
}
"""