OdyJuju commited on
Commit
1697462
·
verified ·
1 Parent(s): 8bceaee

Delete style.css

Browse files
Files changed (1) hide show
  1. style.css +0 -326
style.css DELETED
@@ -1,326 +0,0 @@
1
- /* --- Target the Gradio app wrapper for backgrounds --- */
2
- gradio-app,
3
- .gradio-app,
4
- .main,
5
- #app,
6
- [data-testid="app"] {
7
- background-color: rgb(40,9,109) !important;
8
- background-image:
9
- url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_top.png'),
10
- url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_mid.png'),
11
- url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_bottom.png') !important;
12
- background-position:
13
- top center,
14
- 0 913px,
15
- bottom center !important;
16
- background-repeat:
17
- no-repeat,
18
- repeat-y,
19
- no-repeat !important;
20
- background-size:
21
- 100% auto,
22
- 100% auto,
23
- 100% auto !important;
24
- min-height: 100vh !important;
25
- }
26
-
27
- /* --- Fallback on html/body --- */
28
- html, body {
29
- background-color: rgb(40,9,109) !important;
30
- margin: 0 !important;
31
- padding: 0 !important;
32
- min-height: 100vh !important;
33
- }
34
-
35
- /* Bottom image is now part of the main background layers (positioned at bottom center) */
36
-
37
- /* --- Main container --- */
38
- .gradio-container {
39
- max-width: 1400px !important;
40
- width: 94vw !important;
41
- margin: 0 auto !important;
42
- padding-top: 220px !important;
43
- padding-bottom: 150px !important;
44
- background: transparent !important;
45
- }
46
-
47
- /* --- Title in ESCP gold --- */
48
- #escp_title h1 {
49
- color: rgb(242,198,55) !important;
50
- font-size: 3rem !important;
51
- font-weight: 800 !important;
52
- text-align: center !important;
53
- margin: 0 0 12px 0 !important;
54
- }
55
-
56
- /* --- Subtitle --- */
57
- #escp_title p, #escp_title em {
58
- color: rgba(255,255,255,0.85) !important;
59
- text-align: center !important;
60
- }
61
-
62
- /* --- Tab bar background --- */
63
- .tabs > .tab-nav,
64
- .tab-nav,
65
- div[role="tablist"],
66
- .svelte-tabs > .tab-nav {
67
- background: rgba(40,9,109,0.6) !important;
68
- border-radius: 10px 10px 0 0 !important;
69
- padding: 4px !important;
70
- }
71
-
72
- /* --- ALL tab buttons: force white text --- */
73
- .tabs > .tab-nav button,
74
- .tab-nav button,
75
- div[role="tablist"] button,
76
- button[role="tab"],
77
- .svelte-tabs button,
78
- .tab-nav > button,
79
- .tabs button {
80
- color: #ffffff !important;
81
- font-weight: 600 !important;
82
- border: none !important;
83
- background: transparent !important;
84
- padding: 10px 20px !important;
85
- border-radius: 8px 8px 0 0 !important;
86
- opacity: 1 !important;
87
- }
88
-
89
- /* --- Selected tab: ESCP gold --- */
90
- .tabs > .tab-nav button.selected,
91
- .tab-nav button.selected,
92
- button[role="tab"][aria-selected="true"],
93
- button[role="tab"].selected,
94
- div[role="tablist"] button[aria-selected="true"],
95
- .svelte-tabs button.selected {
96
- color: rgb(242,198,55) !important;
97
- background: rgba(255,255,255,0.12) !important;
98
- }
99
-
100
- /* --- Unselected tabs: ensure visibility --- */
101
- .tabs > .tab-nav button:not(.selected),
102
- .tab-nav button:not(.selected),
103
- button[role="tab"][aria-selected="false"],
104
- button[role="tab"]:not(.selected),
105
- div[role="tablist"] button:not([aria-selected="true"]) {
106
- color: #ffffff !important;
107
- opacity: 1 !important;
108
- }
109
-
110
- /* --- White card panels --- */
111
- .gradio-container .gr-block,
112
- .gradio-container .gr-box,
113
- .gradio-container .gr-panel,
114
- .gradio-container .gr-group {
115
- background: #ffffff !important;
116
- border-radius: 10px !important;
117
- }
118
-
119
- /* --- Tab content area --- */
120
- .tabitem {
121
- background: rgba(255,255,255,0.95) !important;
122
- border-radius: 0 0 10px 10px !important;
123
- padding: 16px !important;
124
- }
125
-
126
- /* --- Inputs --- */
127
- .gradio-container input,
128
- .gradio-container textarea,
129
- .gradio-container select {
130
- background: #ffffff !important;
131
- border: 1px solid #d1d5db !important;
132
- border-radius: 8px !important;
133
- }
134
-
135
- /* --- Buttons: ESCP purple primary --- */
136
- .gradio-container button:not([role="tab"]) {
137
- font-weight: 600 !important;
138
- padding: 10px 16px !important;
139
- border-radius: 10px !important;
140
- }
141
-
142
- button.primary {
143
- background-color: rgb(40,9,109) !important;
144
- color: #ffffff !important;
145
- border: none !important;
146
- }
147
-
148
- button.primary:hover {
149
- background-color: rgb(60,20,140) !important;
150
- }
151
-
152
- button.secondary {
153
- background-color: #ffffff !important;
154
- color: rgb(40,9,109) !important;
155
- border: 2px solid rgb(40,9,109) !important;
156
- }
157
-
158
- button.secondary:hover {
159
- background-color: rgb(240,238,250) !important;
160
- }
161
-
162
- /* --- Dataframes --- */
163
- [data-testid="dataframe"] {
164
- background-color: #ffffff !important;
165
- border-radius: 10px !important;
166
- }
167
-
168
- table {
169
- font-size: 0.85rem !important;
170
- }
171
-
172
- /* --- Chatbot (AI Dashboard tab) --- */
173
- .gr-chatbot {
174
- min-height: 380px !important;
175
- background-color: #ffffff !important;
176
- border-radius: 12px !important;
177
- }
178
-
179
- .gr-chatbot .message.user {
180
- background-color: rgb(232,225,250) !important;
181
- border-radius: 12px !important;
182
- }
183
-
184
- .gr-chatbot .message.bot {
185
- background-color: #f3f4f6 !important;
186
- border-radius: 12px !important;
187
- }
188
-
189
- /* --- Gallery --- */
190
- .gallery {
191
- background: #ffffff !important;
192
- border-radius: 10px !important;
193
- }
194
-
195
- /* --- Log textbox --- */
196
- textarea {
197
- font-family: monospace !important;
198
- font-size: 0.8rem !important;
199
- }
200
-
201
- /* --- Markdown headings inside tabs --- */
202
- .tabitem h3 {
203
- color: rgb(40,9,109) !important;
204
- font-weight: 700 !important;
205
- }
206
-
207
- .tabitem h4 {
208
- color: #374151 !important;
209
- }
210
-
211
- /* --- Examples row (AI Dashboard) --- */
212
- .examples-row button {
213
- background: rgb(240,238,250) !important;
214
- color: rgb(40,9,109) !important;
215
- border: 1px solid rgb(40,9,109) !important;
216
- border-radius: 8px !important;
217
- font-size: 0.85rem !important;
218
- }
219
-
220
- .examples-row button:hover {
221
- background: rgb(232,225,250) !important;
222
- }
223
-
224
- /* --- Header / footer: transparent over banner --- */
225
- header, header *,
226
- footer, footer * {
227
- background: transparent !important;
228
- box-shadow: none !important;
229
- }
230
-
231
- footer a, footer button,
232
- header a, header button {
233
- background: transparent !important;
234
- border: none !important;
235
- box-shadow: none !important;
236
- }
237
-
238
- #footer, #footer *,
239
- [class*="footer"], [class*="footer"] *,
240
- [class*="chip"], [class*="pill"], [class*="chip"] *, [class*="pill"] * {
241
- background: transparent !important;
242
- border: none !important;
243
- box-shadow: none !important;
244
- }
245
-
246
- [data-testid*="api"], [data-testid*="settings"],
247
- [id*="api"], [id*="settings"],
248
- [class*="api"], [class*="settings"],
249
- [class*="bottom"], [class*="toolbar"], [class*="controls"] {
250
- background: transparent !important;
251
- box-shadow: none !important;
252
- }
253
-
254
- [data-testid*="api"] *, [data-testid*="settings"] *,
255
- [id*="api"] *, [id*="settings"] *,
256
- [class*="api"] *, [class*="settings"] * {
257
- background: transparent !important;
258
- box-shadow: none !important;
259
- }
260
-
261
- section footer {
262
- background: transparent !important;
263
- }
264
-
265
- section footer button,
266
- section footer a {
267
- background: transparent !important;
268
- background-color: transparent !important;
269
- border: none !important;
270
- box-shadow: none !important;
271
- color: white !important;
272
- }
273
-
274
- section footer button:hover,
275
- section footer button:focus,
276
- section footer a:hover,
277
- section footer a:focus {
278
- background: transparent !important;
279
- background-color: transparent !important;
280
- box-shadow: none !important;
281
- }
282
-
283
- section footer button,
284
- section footer button * {
285
- background: transparent !important;
286
- background-color: transparent !important;
287
- background-image: none !important;
288
- box-shadow: none !important;
289
- filter: none !important;
290
- }
291
-
292
- section footer button::before,
293
- section footer button::after {
294
- background: transparent !important;
295
- background-color: transparent !important;
296
- background-image: none !important;
297
- box-shadow: none !important;
298
- filter: none !important;
299
- }
300
-
301
- section footer a,
302
- section footer a * {
303
- background: transparent !important;
304
- background-color: transparent !important;
305
- box-shadow: none !important;
306
- }
307
-
308
- .gradio-container footer button,
309
- .gradio-container footer button *,
310
- .gradio-container .footer button,
311
- .gradio-container .footer button * {
312
- background: transparent !important;
313
- background-color: transparent !important;
314
- background-image: none !important;
315
- box-shadow: none !important;
316
- }
317
-
318
- .gradio-container footer button::before,
319
- .gradio-container footer button::after,
320
- .gradio-container .footer button::before,
321
- .gradio-container .footer button::after {
322
- background: transparent !important;
323
- background-color: transparent !important;
324
- background-image: none !important;
325
- box-shadow: none !important;
326
- }