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