Refine controls and examples with clean blue-white styling
Browse files
app.py
CHANGED
|
@@ -174,15 +174,17 @@ CUSTOM_CSS = """
|
|
| 174 |
}
|
| 175 |
|
| 176 |
.gradio-container .gr-button-secondary {
|
| 177 |
-
background: #
|
| 178 |
color: #1d4ed8 !important;
|
| 179 |
border: none !important;
|
|
|
|
| 180 |
}
|
| 181 |
|
| 182 |
.gradio-container .gr-button-stop {
|
| 183 |
-
background: #
|
| 184 |
color: #1d4ed8 !important;
|
| 185 |
border: none !important;
|
|
|
|
| 186 |
}
|
| 187 |
|
| 188 |
.gradio-container .gr-group,
|
|
@@ -211,7 +213,9 @@ CUSTOM_CSS = """
|
|
| 211 |
.gradio-container textarea,
|
| 212 |
.gradio-container input {
|
| 213 |
background: #ffffff !important;
|
| 214 |
-
border
|
|
|
|
|
|
|
| 215 |
}
|
| 216 |
|
| 217 |
.gradio-container .gr-markdown a {
|
|
@@ -224,6 +228,51 @@ CUSTOM_CSS = """
|
|
| 224 |
color: #2454b8;
|
| 225 |
margin: 8px 0 2px 0;
|
| 226 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 227 |
"""
|
| 228 |
|
| 229 |
|
|
|
|
| 174 |
}
|
| 175 |
|
| 176 |
.gradio-container .gr-button-secondary {
|
| 177 |
+
background: #ffffff !important;
|
| 178 |
color: #1d4ed8 !important;
|
| 179 |
border: none !important;
|
| 180 |
+
box-shadow: inset 0 0 0 1px #bfdbfe !important;
|
| 181 |
}
|
| 182 |
|
| 183 |
.gradio-container .gr-button-stop {
|
| 184 |
+
background: #ffffff !important;
|
| 185 |
color: #1d4ed8 !important;
|
| 186 |
border: none !important;
|
| 187 |
+
box-shadow: inset 0 0 0 1px #bfdbfe !important;
|
| 188 |
}
|
| 189 |
|
| 190 |
.gradio-container .gr-group,
|
|
|
|
| 213 |
.gradio-container textarea,
|
| 214 |
.gradio-container input {
|
| 215 |
background: #ffffff !important;
|
| 216 |
+
border: none !important;
|
| 217 |
+
box-shadow: inset 0 0 0 1px #dbeafe !important;
|
| 218 |
+
border-radius: 12px !important;
|
| 219 |
}
|
| 220 |
|
| 221 |
.gradio-container .gr-markdown a {
|
|
|
|
| 228 |
color: #2454b8;
|
| 229 |
margin: 8px 0 2px 0;
|
| 230 |
}
|
| 231 |
+
|
| 232 |
+
.gradio-container .noUi-target {
|
| 233 |
+
border: none !important;
|
| 234 |
+
box-shadow: none !important;
|
| 235 |
+
background: #eaf2ff !important;
|
| 236 |
+
}
|
| 237 |
+
|
| 238 |
+
.gradio-container .noUi-connect {
|
| 239 |
+
background: #2563eb !important;
|
| 240 |
+
}
|
| 241 |
+
|
| 242 |
+
.gradio-container .noUi-handle {
|
| 243 |
+
border: none !important;
|
| 244 |
+
box-shadow: 0 0 0 2px #2563eb !important;
|
| 245 |
+
background: #ffffff !important;
|
| 246 |
+
}
|
| 247 |
+
|
| 248 |
+
.gradio-container [data-testid="block-examples"] {
|
| 249 |
+
border: none !important;
|
| 250 |
+
background: #eef4ff !important;
|
| 251 |
+
border-radius: 12px !important;
|
| 252 |
+
padding: 8px !important;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
.gradio-container [data-testid="block-examples"] table,
|
| 256 |
+
.gradio-container [data-testid="block-examples"] thead,
|
| 257 |
+
.gradio-container [data-testid="block-examples"] tbody,
|
| 258 |
+
.gradio-container [data-testid="block-examples"] tr,
|
| 259 |
+
.gradio-container [data-testid="block-examples"] td {
|
| 260 |
+
border: none !important;
|
| 261 |
+
background: transparent !important;
|
| 262 |
+
}
|
| 263 |
+
|
| 264 |
+
.gradio-container [data-testid="block-examples"] button {
|
| 265 |
+
background: #ffffff !important;
|
| 266 |
+
color: #1d4ed8 !important;
|
| 267 |
+
border: none !important;
|
| 268 |
+
border-radius: 10px !important;
|
| 269 |
+
box-shadow: inset 0 0 0 1px #bfdbfe !important;
|
| 270 |
+
font-size: 13px !important;
|
| 271 |
+
}
|
| 272 |
+
|
| 273 |
+
.gradio-container [data-testid="block-examples"] button:hover {
|
| 274 |
+
background: #dbeafe !important;
|
| 275 |
+
}
|
| 276 |
"""
|
| 277 |
|
| 278 |
|