Create styles.py

styles.py

@@ -0,0 +1,162 @@
+# styles.py
+
+custom_css = """
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');
+
+/* Apply Fonts to the Entire App */
+body {
+    font-family: 'Open Sans', sans-serif;
+    background-color: #F8F9F9; /* Light Gray Background */
+    color: #2C3E50; /* Dark Slate Gray Text */
+}
+
+/* Style Headers */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Roboto', sans-serif;
+    color: #2E86C1; /* Primary Blue */
+}
+
+h1 {
+    font-size: 2.5em;
+    margin-bottom: 0.5em;
+}
+
+h2 {
+    font-size: 2em;
+    margin-bottom: 0.4em;
+}
+
+h3 {
+    font-size: 1.75em;
+    margin-bottom: 0.3em;
+}
+
+/* Style Markdown Text */
+.gr-markdown {
+    font-family: 'Open Sans', sans-serif;
+    line-height: 1.6;
+}
+
+/* Style Buttons */
+.gr-button {
+    background-color: #2E86C1; /* Primary Blue */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+}
+
+.gr-button:hover {
+    background-color: #1B4F72; /* Darker Blue on Hover */
+}
+
+/* Style Reset Buttons Differently */
+.gr-button.reset-button {
+    background-color: #F39C12; /* Accent Yellow */
+}
+
+.gr-button.reset-button:hover {
+    background-color: #D68910; /* Darker Yellow on Hover */
+}
+
+/* Style Textboxes */
+.gr-textbox {
+    border: 1px solid #BDC3C7; /* Light Gray Border */
+    border-radius: 5px;
+    padding: 0.5em;
+    font-size: 1em;
+    font-family: 'Open Sans', sans-serif;
+    transition: border-color 0.3s ease;
+}
+
+.gr-textbox:focus {
+    border-color: #28B463; /* Secondary Green on Focus */
+    box-shadow: 0 0 5px rgba(40, 180, 99, 0.5); /* Green Glow */
+}
+
+/* Style Plots */
+.gr-plot {
+    background-color: white;
+    border: 1px solid #BDC3C7;
+    border-radius: 5px;
+    padding: 1em;
+}
+
+/* Style File Downloads */
+.gr-file {
+    background-color: #28B463; /* Secondary Green */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+    margin-top: 0.5em;
+}
+
+.gr-file:hover {
+    background-color: #1E8449; /* Darker Green on Hover */
+}
+
+/* Style Tabs */
+.gr-tabs {
+    border-bottom: 2px solid #2E86C1; /* Primary Blue Border */
+}
+
+.gr-tab {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    color: #2E86C1;
+    padding: 0.5em 1em;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.gr-tab:hover {
+    color: #1B4F72; /* Darker Blue on Hover */
+}
+
+.gr-tab.active {
+    border-bottom: 3px solid #28B463; /* Secondary Green Active Indicator */
+    color: #28B463; /* Secondary Green Active Text */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2em;
+    }
+
+    h2 {
+        font-size: 1.75em;
+    }
+
+    h3 {
+        font-size: 1.5em;
+    }
+
+    .gr-button, .gr-file {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .gr-row {
+        flex-direction: column;
+    }
+
+    .gr-column {
+        width: 100%;
+    }
+
+    .gr-plot {
+        padding: 0.5em;
+    }
+}
+"""