css.py

"""All CSS styles for the Monomerizer app."""

BUBBLES_CSS = ""

LAYOUT_CSS = """
/* ── Global ── */
.gradio-container {
    max-width: 1000px !important; margin: auto !important;
    position: relative; z-index: 1;
}

/* ── Rounding everything ── */
textarea, input, .gr-button, .gr-box, .gr-panel,
.gr-input, .gr-text-input { border-radius: 14px !important; }

/* ── Cards - dark frosted glass with pop borders ── */
.input-card {
    background: rgba(20,20,35,0.88) !important;
    border-radius: 22px !important; padding: 14px 18px !important;
    border: 2.5px solid rgba(255,100,200,0.6) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(255,100,200,0.15) !important;
}
.output-card {
    background: rgba(20,20,35,0.88) !important;
    border-radius: 22px !important; padding: 14px 18px !important;
    border: 2.5px solid rgba(100,220,180,0.6) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(100,220,180,0.15) !important;
}
.viz-card {
    background: rgba(20,20,35,0.88) !important;
    border-radius: 22px !important; padding: 12px 16px !important;
    border: 2.5px solid rgba(120,160,255,0.6) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(120,160,255,0.15) !important;
}

/* ── Text areas - dark ── */
.smiles-input textarea {
    font-size: 11px !important; font-family: monospace !important;
    border-radius: 12px !important; line-height: 1.5 !important;
    background: rgba(15,15,30,0.9) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(255,100,200,0.3) !important;
}
.compact-text textarea {
    font-size: 11px !important; font-family: monospace !important;
    border-radius: 12px !important; line-height: 1.4 !important;
    background: rgba(15,15,30,0.9) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(100,220,180,0.3) !important;
}

/* ── Labels inside cards ── */
.input-card label, .input-card .gr-label {
    color: #ff8ed4 !important; font-weight: 700 !important;
}
.output-card label, .output-card .gr-label {
    color: #6ee8c0 !important; font-weight: 700 !important;
}
.viz-card label, .viz-card .gr-label {
    color: #8cb4ff !important; font-weight: 700 !important;
}

/* ── Buttons ── */
.run-btn {
    border-radius: 26px !important; font-weight: 700 !important;
    font-size: 16px !important; min-height: 48px !important;
    background: linear-gradient(135deg, #ff6ec7 0%, #a855f7 50%, #6366f1 100%) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 4px 18px rgba(168,85,247,0.4) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}
.run-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 28px rgba(168,85,247,0.55) !important;
}
.nav-btn {
    border-radius: 20px !important; min-width: 40px !important;
    background: rgba(120,160,255,0.25) !important; color: #8cb4ff !important;
    border: 1px solid rgba(120,160,255,0.4) !important;
}
.nav-btn:hover { background: rgba(120,160,255,0.4) !important; }
.save-btn {
    border-radius: 20px !important;
    background: rgba(120,160,255,0.25) !important; color: #8cb4ff !important;
    border: 1px solid rgba(120,160,255,0.4) !important;
}
.save-btn:hover { background: rgba(120,160,255,0.4) !important; }

/* ── Section labels ── */
.section-label {
    font-size: 16px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 2.5px !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.3) !important;
    margin: 8px 0 3px 4px !important;
}

/* ── Footer ── */
.footer-note {
    text-align: center; font-size: 12px;
    color: #fff; margin: 8px 0 4px 0; line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.footer-note a { color: #ffe066; text-decoration: underline; font-weight: 700; }
.footer-note a:hover { color: #fff; }

/* ── Gradio built-in footer ── */
footer { color: rgba(255,255,255,0.5) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
footer a { color: rgba(255,255,255,0.7) !important; }

/* ── Counter text ── */
.compact-text input {
    color: #8cb4ff !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    font-weight: 600 !important;
}
"""

FULL_CSS = BUBBLES_CSS + LAYOUT_CSS

BUBBLES_HTML = ""