style.css

/* custom_styles.css */

/* Dark theme styles */
body {
    background-color: #1a1a1a; /* Dark background color */
    color: #ffffff; /* Light text color */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Custom font family */
    margin: 0; /* Remove default body margin */
}

/* Container styles */
.gradio-interface {
    max-width: 800px; /* Limit interface width */
    margin: auto; /* Center interface horizontally */
    padding: 20px; /* Add padding around the interface */
}

/* Title and description styles */
.gradio-title {
    color: #ff5733; /* Custom title color */
    font-size: 36px; /* Custom title font size */
    margin-bottom: 20px; /* Add space below the title */
}

.gradio-description {
    font-size: 18px; /* Custom description font size */
    margin-bottom: 20px; /* Add space below the description */
}

/* Button styles */
.gradio-interface input[type="file"] {
    background-color: #ff5733; /* Custom button background color */
    color: #ffffff; /* Button text color */
    font-size: 16px; /* Custom button font size */
    padding: 10px 20px; /* Add padding to the button */
    border: none; /* Remove button border */
    border-radius: 5px; /* Add button border radius */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.gradio-interface input[type="file"]:hover {
    background-color: #e64a19; /* Darker background color on hover */
}

/* Output text styles */
.gr-output .gr-output-text {
    font-size: 24px; /* Custom output text font size */
    margin-top: 20px; /* Add space above the output text */
}

/* Image output styles */
.gr-output .gr-output-image img {
    border: 5px solid #ff5733; /* Custom border color for output images */
    border-radius: 10px; /* Add border radius to images */
    max-width: 100%; /* Ensure images don't exceed container width */
}