Hugging Face's logo

Spaces:
XRachel
/
template4
Sleeping

App Files Community
XRachel commited on
Commit
3f351ba
·
verified ·
1 Parent(s): 544c108

Upload style.css

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