Commit
•
bec55d2
1
Parent(s):
b6e3dbd
Create style.css
Browse files
style.css
ADDED
@@ -0,0 +1,57 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* custom_styles.css */
|
2 |
+
|
3 |
+
/* Dark theme styles */
|
4 |
+
body {
|
5 |
+
background-color: #1a1a1a; /* Dark background color */
|
6 |
+
color: #ffffff; /* Light text color */
|
7 |
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Custom font family */
|
8 |
+
margin: 0; /* Remove default body margin */
|
9 |
+
}
|
10 |
+
|
11 |
+
/* Container styles */
|
12 |
+
.gradio-interface {
|
13 |
+
max-width: 800px; /* Limit interface width */
|
14 |
+
margin: auto; /* Center interface horizontally */
|
15 |
+
padding: 20px; /* Add padding around the interface */
|
16 |
+
}
|
17 |
+
|
18 |
+
/* Title and description styles */
|
19 |
+
.gradio-title {
|
20 |
+
color: #ff5733; /* Custom title color */
|
21 |
+
font-size: 36px; /* Custom title font size */
|
22 |
+
margin-bottom: 20px; /* Add space below the title */
|
23 |
+
}
|
24 |
+
|
25 |
+
.gradio-description {
|
26 |
+
font-size: 18px; /* Custom description font size */
|
27 |
+
margin-bottom: 20px; /* Add space below the description */
|
28 |
+
}
|
29 |
+
|
30 |
+
/* Button styles */
|
31 |
+
.gradio-interface input[type="file"] {
|
32 |
+
background-color: #ff5733; /* Custom button background color */
|
33 |
+
color: #ffffff; /* Button text color */
|
34 |
+
font-size: 16px; /* Custom button font size */
|
35 |
+
padding: 10px 20px; /* Add padding to the button */
|
36 |
+
border: none; /* Remove button border */
|
37 |
+
border-radius: 5px; /* Add button border radius */
|
38 |
+
cursor: pointer; /* Change cursor to pointer on hover */
|
39 |
+
transition: background-color 0.3s; /* Smooth transition for background color */
|
40 |
+
}
|
41 |
+
|
42 |
+
.gradio-interface input[type="file"]:hover {
|
43 |
+
background-color: #e64a19; /* Darker background color on hover */
|
44 |
+
}
|
45 |
+
|
46 |
+
/* Output text styles */
|
47 |
+
.gr-output .gr-output-text {
|
48 |
+
font-size: 24px; /* Custom output text font size */
|
49 |
+
margin-top: 20px; /* Add space above the output text */
|
50 |
+
}
|
51 |
+
|
52 |
+
/* Image output styles */
|
53 |
+
.gr-output .gr-output-image img {
|
54 |
+
border: 5px solid #ff5733; /* Custom border color for output images */
|
55 |
+
border-radius: 10px; /* Add border radius to images */
|
56 |
+
max-width: 100%; /* Ensure images don't exceed container width */
|
57 |
+
}
|