bg color
Browse files
app.py
CHANGED
@@ -71,16 +71,54 @@ def create_ui():
|
|
71 |
# Define CSS for the validation UI - improved for dark mode compatibility
|
72 |
gr.HTML("""
|
73 |
<style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
74 |
.gradio-container {
|
75 |
max-width: 800px;
|
76 |
margin: 0 auto;
|
77 |
}
|
78 |
-
/* Make group boxes background transparent/match page background */
|
79 |
-
.gr-group {
|
80 |
-
background-color: transparent !important;
|
81 |
-
border: none !important;
|
82 |
-
box-shadow: none !important;
|
83 |
-
}
|
84 |
.validation-step {
|
85 |
margin-bottom: 15px;
|
86 |
border: 1px solid var(--border-color-primary, #e0e0e0);
|
@@ -89,7 +127,6 @@ def create_ui():
|
|
89 |
}
|
90 |
.step-header {
|
91 |
padding: 10px 15px;
|
92 |
-
background-color: var(--background-fill-secondary, #f5f5f5);
|
93 |
display: flex;
|
94 |
align-items: center;
|
95 |
cursor: pointer;
|
@@ -114,42 +151,17 @@ def create_ui():
|
|
114 |
}
|
115 |
/* Style for the progress status container and text - fixed height and italics */
|
116 |
.progress-container {
|
117 |
-
min-height: 65px;
|
118 |
padding: 12px;
|
119 |
display: flex;
|
120 |
align-items: center;
|
121 |
margin-bottom: 10px;
|
122 |
-
background-color: transparent !important; /* Force transparency */
|
123 |
}
|
124 |
.progress-status {
|
125 |
font-style: italic;
|
126 |
width: 100%;
|
127 |
}
|
128 |
-
/*
|
129 |
-
.gradio-container .prose,
|
130 |
-
.gradio-container [class*="message"],
|
131 |
-
.gradio-container [class*="container"],
|
132 |
-
.gradio-container [class*="wrap"],
|
133 |
-
.gradio-container [class*="panel"],
|
134 |
-
.gradio-container [class*="box"] {
|
135 |
-
background-color: transparent !important;
|
136 |
-
}
|
137 |
-
/* Ensure the validation results have the same background as the page */
|
138 |
-
.validation-results {
|
139 |
-
background-color: transparent !important;
|
140 |
-
}
|
141 |
-
/* Fix for tab container backgrounds */
|
142 |
-
.tabs > .tab-nav {
|
143 |
-
background-color: transparent !important;
|
144 |
-
}
|
145 |
-
.tabs > .tabitem {
|
146 |
-
background-color: transparent !important;
|
147 |
-
}
|
148 |
-
/* Ensure HTML components don't get unwanted backgrounds */
|
149 |
-
.gradio-html {
|
150 |
-
background-color: transparent !important;
|
151 |
-
}
|
152 |
-
/* Add slight border for visual separation instead of background color */
|
153 |
.progress-container {
|
154 |
border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
|
155 |
border-radius: 8px;
|
@@ -162,32 +174,8 @@ def create_ui():
|
|
162 |
.arrow-down {
|
163 |
transform: rotate(90deg);
|
164 |
}
|
165 |
-
.status-success {
|
166 |
-
background-color: #4caf50;
|
167 |
-
}
|
168 |
-
.status-error {
|
169 |
-
background-color: #f44336;
|
170 |
-
}
|
171 |
-
.status-waiting {
|
172 |
-
background-color: #9e9e9e;
|
173 |
-
}
|
174 |
-
/* Dark mode specific styles */
|
175 |
-
.dark .step-header {
|
176 |
-
background-color: var(--background-fill-secondary, #2e2e2e);
|
177 |
-
color: var(--body-text-color, #ffffff);
|
178 |
-
}
|
179 |
-
.dark .step-title {
|
180 |
-
color: var(--body-text-color, #ffffff);
|
181 |
-
}
|
182 |
-
.dark .step-details {
|
183 |
-
color: var(--body-text-color, #ffffff);
|
184 |
-
background-color: var(--background-fill-primary, #1f1f1f);
|
185 |
-
padding: 10px 15px;
|
186 |
-
}
|
187 |
-
/* Add this to ensure details are also styled for light mode */
|
188 |
.step-details {
|
189 |
padding: 10px 15px;
|
190 |
-
background-color: var(--background-fill-primary, #ffffff);
|
191 |
}
|
192 |
</style>
|
193 |
""")
|
|
|
71 |
# Define CSS for the validation UI - improved for dark mode compatibility
|
72 |
gr.HTML("""
|
73 |
<style>
|
74 |
+
/* Target ALL elements with background colors */
|
75 |
+
.gradio-container *,
|
76 |
+
.gradio-container *::before,
|
77 |
+
.gradio-container *::after {
|
78 |
+
background-color: transparent !important;
|
79 |
+
}
|
80 |
+
|
81 |
+
/* Only preserve explicit backgrounds for specific UI elements */
|
82 |
+
.step-header,
|
83 |
+
.status-success,
|
84 |
+
.status-error,
|
85 |
+
.status-waiting {
|
86 |
+
background-color: var(--background-fill-secondary, #f5f5f5) !important;
|
87 |
+
}
|
88 |
+
|
89 |
+
/* Reset specific important element backgrounds */
|
90 |
+
.dark .step-header {
|
91 |
+
background-color: var(--background-fill-secondary, #2e2e2e) !important;
|
92 |
+
}
|
93 |
+
.dark .step-details {
|
94 |
+
background-color: var(--background-fill-primary, #1f1f1f) !important;
|
95 |
+
}
|
96 |
+
.step-details {
|
97 |
+
background-color: var(--background-fill-primary, #ffffff) !important;
|
98 |
+
}
|
99 |
+
.status-success {
|
100 |
+
background-color: #4caf50 !important;
|
101 |
+
}
|
102 |
+
.status-error {
|
103 |
+
background-color: #f44336 !important;
|
104 |
+
}
|
105 |
+
.status-waiting {
|
106 |
+
background-color: #9e9e9e !important;
|
107 |
+
}
|
108 |
+
|
109 |
+
/* Specifically target tab panels */
|
110 |
+
.tabitem,
|
111 |
+
.tab-panel,
|
112 |
+
[data-testid="tabitem"],
|
113 |
+
[data-testid="tab-panel"] {
|
114 |
+
background-color: transparent !important;
|
115 |
+
}
|
116 |
+
|
117 |
+
/* Keep original styling for other elements */
|
118 |
.gradio-container {
|
119 |
max-width: 800px;
|
120 |
margin: 0 auto;
|
121 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
122 |
.validation-step {
|
123 |
margin-bottom: 15px;
|
124 |
border: 1px solid var(--border-color-primary, #e0e0e0);
|
|
|
127 |
}
|
128 |
.step-header {
|
129 |
padding: 10px 15px;
|
|
|
130 |
display: flex;
|
131 |
align-items: center;
|
132 |
cursor: pointer;
|
|
|
151 |
}
|
152 |
/* Style for the progress status container and text - fixed height and italics */
|
153 |
.progress-container {
|
154 |
+
min-height: 65px;
|
155 |
padding: 12px;
|
156 |
display: flex;
|
157 |
align-items: center;
|
158 |
margin-bottom: 10px;
|
|
|
159 |
}
|
160 |
.progress-status {
|
161 |
font-style: italic;
|
162 |
width: 100%;
|
163 |
}
|
164 |
+
/* Add borders for visual separation */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
165 |
.progress-container {
|
166 |
border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
|
167 |
border-radius: 8px;
|
|
|
174 |
.arrow-down {
|
175 |
transform: rotate(90deg);
|
176 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
177 |
.step-details {
|
178 |
padding: 10px 15px;
|
|
|
179 |
}
|
180 |
</style>
|
181 |
""")
|