Create css.py

css.py

@@ -0,0 +1,115 @@
+"""All CSS styles and animations for the Monomerizer app."""
+
+BUBBLES_CSS = """
+/* ── Animated background bubbles ── */
+@keyframes float {
+    0%   { transform: translateY(0) scale(1); opacity: 0.25; }
+    50%  { transform: translateY(-120px) scale(1.15); opacity: 0.35; }
+    100% { transform: translateY(-240px) scale(1); opacity: 0; }
+}
+
+.bubble-container {
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    pointer-events: none; z-index: 0; overflow: hidden;
+}
+.bubble {
+    position: absolute; bottom: -60px; border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(120,180,255,0.35), rgba(180,130,255,0.15));
+    animation: float linear infinite;
+}
+.bubble:nth-child(1)  { width:40px; height:40px; left:5%;   animation-duration:14s; animation-delay:0s; }
+.bubble:nth-child(2)  { width:25px; height:25px; left:15%;  animation-duration:18s; animation-delay:2s; }
+.bubble:nth-child(3)  { width:55px; height:55px; left:28%;  animation-duration:20s; animation-delay:4s; }
+.bubble:nth-child(4)  { width:30px; height:30px; left:40%;  animation-duration:16s; animation-delay:1s; }
+.bubble:nth-child(5)  { width:45px; height:45px; left:55%;  animation-duration:22s; animation-delay:3s; }
+.bubble:nth-child(6)  { width:20px; height:20px; left:65%;  animation-duration:15s; animation-delay:5s; }
+.bubble:nth-child(7)  { width:50px; height:50px; left:75%;  animation-duration:19s; animation-delay:0s; }
+.bubble:nth-child(8)  { width:35px; height:35px; left:88%;  animation-duration:17s; animation-delay:2s; }
+.bubble:nth-child(9)  { width:28px; height:28px; left:48%;  animation-duration:21s; animation-delay:6s; }
+.bubble:nth-child(10) { width:38px; height:38px; left:92%;  animation-duration:16s; animation-delay:4s; }
+"""
+
+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 ── */
+.input-card {
+    background: linear-gradient(135deg, rgba(240,244,255,0.85) 0%, rgba(232,238,255,0.85) 100%);
+    border-radius: 20px !important; padding: 12px 16px !important;
+    border: 1px solid #d0d8f0 !important;
+    backdrop-filter: blur(8px);
+}
+.output-card {
+    background: linear-gradient(135deg, rgba(240,253,244,0.85) 0%, rgba(232,245,233,0.85) 100%);
+    border-radius: 20px !important; padding: 12px 16px !important;
+    border: 1px solid #c8e6c9 !important;
+    backdrop-filter: blur(8px);
+}
+.viz-card {
+    background: rgba(250,250,252,0.88);
+    border-radius: 20px !important; padding: 10px 14px !important;
+    border: 1px solid #e0e0e8 !important;
+    backdrop-filter: blur(8px);
+}
+
+/* ── Text areas ── */
+.smiles-input textarea {
+    font-size: 11px !important; font-family: monospace !important;
+    border-radius: 12px !important; line-height: 1.5 !important;
+}
+.compact-text textarea {
+    font-size: 11px !important; font-family: monospace !important;
+    border-radius: 12px !important; line-height: 1.4 !important;
+}
+
+/* ── Buttons ── */
+.run-btn {
+    border-radius: 26px !important; font-weight: 700 !important;
+    font-size: 15px !important; min-height: 46px !important;
+    box-shadow: 0 4px 14px rgba(91,127,245,0.3) !important;
+    transition: transform 0.15s, box-shadow 0.15s !important;
+}
+.run-btn:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(91,127,245,0.4) !important;
+}
+.nav-btn { border-radius: 20px !important; min-width: 40px !important; }
+.save-btn { border-radius: 20px !important; }
+
+/* ── Section labels ── */
+.section-label {
+    font-size: 10px !important; font-weight: 700 !important;
+    text-transform: uppercase !important; letter-spacing: 1.6px !important;
+    color: #999 !important; margin: 6px 0 2px 4px !important;
+}
+
+/* ── Footer ── */
+.footer-note {
+    text-align: center; font-size: 11px; color: #999;
+    margin: 6px 0 2px 0; line-height: 1.5;
+}
+.footer-note a { color: #5b7ff5; text-decoration: none; font-weight: 600; }
+.footer-note a:hover { text-decoration: underline; }
+
+/* ── Example SVG scaling ── */
+.example-svg-small svg { max-width: 20% !important; height: auto !important; margin: auto; display: block; }
+"""
+
+FULL_CSS = BUBBLES_CSS + LAYOUT_CSS
+
+BUBBLES_HTML = """
+<div class="bubble-container">
+    <div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>
+    <div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>
+    <div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>
+    <div class="bubble"></div>
+</div>
+"""