Create theme/Ranko_test.css

theme/Ranko_test.css

@@ -0,0 +1,72 @@
+/* Ranko_test.css */
+
+/* General Body Styling */
+html, body {
+    background-color: #f1f1f1; /* Light grey background */
+    color: #333333; /* Dark grey text */
+    font-family: 'Roboto', sans-serif; /* Default font */
+}
+
+/* Header Styling */
+h1, h2, h3, h4 {
+    color: #5c6bc0; /* Indigo color for headings */
+}
+
+/* Styling for Tabs */
+.gradio-tab {
+    background-color: #5c6bc0; /* Indigo for tab background */
+    color: white; /* White text */
+}
+
+.gradio-tab:hover {
+    background-color: #3949ab; /* Darker indigo on hover */
+}
+
+/* Button Styling */
+.gr-button, .gr-button:focus {
+    background-color: #5c6bc0; /* Indigo button */
+    color: white;
+    border-radius: 8px;
+    padding: 10px 15px; /* Adjusted padding */
+}
+
+.gr-button:hover {
+    background: linear-gradient(to right, #7986cb, #5c6bc0); /* Gradient on hover */
+}
+
+/* Input Styling */
+textarea, input {
+    background: white; /* Input background */
+    color: black; /* Text color */
+    border: 2px solid #5c6bc0; /* Indigo border for inputs */
+    padding: 10px;
+    border-radius: 8px;
+}
+
+/* Markdown Styling */
+.markdown {
+    background-color: #e3f2fd; /* Light blue background for markdown */
+    padding: 15px; /* Padding for Markdown sections */
+    border-radius: 10px; /* Round corners */
+    border: 1px solid #5c6bc0; /* Border to distinguish */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
+}
+
+/* DataFrame Container Styling */
+.df-container {
+    background: #ffffff; /* White background for dataframes */
+    color: black; /* Black text */
+    border: 2px solid #5c6bc0; /* Matching border color for dataframes */
+    border-radius: 10px;
+    padding: 10px;
+}
+
+/* Dark Mode Styles */
+body.dark {
+    background-color: #232323; /* Dark background */
+    color: #e0e0e0; /* Light text */
+}
+
+body.dark h1, body.dark h2, body.dark h3, body.dark h4 {
+    color: #bbdefb; /* Light color for headings in dark mode */
+}