luisoala commited on
Commit
2573148
·
1 Parent(s): d7743fd
Files changed (1) hide show
  1. app.py +46 -58
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; /* Increased height to prevent scrolling */
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
- /* Fix for any other elements that might have backgrounds */
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
  """)