themes/Ranko_test.css

/* 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 */
}