atascioglu commited on
Commit
1890819
·
verified ·
1 Parent(s): 89f7a61

Create style.css

Browse files
Files changed (1) hide show
  1. style.css +185 -0
style.css ADDED
@@ -0,0 +1,185 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html, body {
2
+ background-image: url('https://huggingface.co/spaces/ESCP/AITeachingAssistantPrototypeSF/resolve/main/ESCP_BANNER.png') !important;
3
+ background-size: contain !important;
4
+ background-position: top center !important;
5
+ background-repeat: no-repeat !important;
6
+ background-attachment: fixed !important;
7
+ background-color: rgb(40,9,109) !important;
8
+ margin: 0 !important;
9
+ padding: 0 !important;
10
+ }
11
+
12
+ .gradio-container {
13
+ max-width: 1400px !important;
14
+ width: 94vw !important;
15
+ margin: 0 auto !important;
16
+ padding-top: 220px !important;
17
+ background: transparent !important;
18
+ }
19
+
20
+ /* Title color: slightly closer yellow */
21
+ #escp_title h1 {
22
+ color: rgb(242,198,55) !important;
23
+ font-weight: 800 !important;
24
+ text-align: center !important;
25
+ margin: 0 0 12px 0 !important;
26
+ }
27
+
28
+ .gradio-container .gr-block,
29
+ .gradio-container .gr-box,
30
+ .gradio-container .gr-panel {
31
+ background: #ffffff !important;
32
+ border-radius: 10px !important;
33
+ }
34
+
35
+ .gradio-container input,
36
+ .gradio-container textarea,
37
+ .gradio-container select,
38
+ .gradio-container button {
39
+ background: #ffffff !important;
40
+ }
41
+
42
+ .gr-chatbot {
43
+ min-height: 520px !important;
44
+ }
45
+
46
+ .gradio-container button {
47
+ font-weight: 600 !important;
48
+ padding: 12px !important;
49
+ border-radius: 10px !important;
50
+ }
51
+
52
+ /* HF chrome transparency */
53
+ header, header *,
54
+ footer, footer * {
55
+ background: transparent !important;
56
+ box-shadow: none !important;
57
+ }
58
+
59
+ footer a, footer button,
60
+ header a, header button {
61
+ background: transparent !important;
62
+ border: none !important;
63
+ box-shadow: none !important;
64
+ }
65
+
66
+ #footer, #footer *,
67
+ [class*="footer"], [class*="footer"] *,
68
+ [class*="chip"], [class*="pill"], [class*="chip"] *, [class*="pill"] * {
69
+ background: transparent !important;
70
+ border: none !important;
71
+ box-shadow: none !important;
72
+ }
73
+
74
+ /* --- Extra aggressive: bottom "Use via API" + "Settings" controls --- */
75
+ button, a, div {
76
+ /* no-op; keep selector block reserved to avoid accidental changes */
77
+ }
78
+
79
+ /* target common HF space bottom bar/button patterns */
80
+ [data-testid*="api"], [data-testid*="settings"],
81
+ [id*="api"], [id*="settings"],
82
+ [class*="api"], [class*="settings"],
83
+ [class*="bottom"], [class*="toolbar"], [class*="controls"] {
84
+ background: transparent !important;
85
+ box-shadow: none !important;
86
+ }
87
+
88
+ [data-testid*="api"] *, [data-testid*="settings"] *,
89
+ [id*="api"] *, [id*="settings"] *,
90
+ [class*="api"] *, [class*="settings"] * {
91
+ background: transparent !important;
92
+ box-shadow: none !important;
93
+ }
94
+
95
+ /* ensure pills/buttons themselves are transparent */
96
+ button[class*="btn"], a[class*="btn"],
97
+ button[class*="button"], a[class*="button"] {
98
+ background: transparent !important;
99
+ box-shadow: none !important;
100
+ border: 1px solid rgba(255,255,255,0.25) !important; /* keeps it visible on dark bg */
101
+ }
102
+
103
+ section footer {
104
+ background: transparent !important;
105
+ }
106
+
107
+ section footer button,
108
+ section footer a {
109
+ background: transparent !important;
110
+ background-color: transparent !important;
111
+ border: none !important;
112
+ box-shadow: none !important;
113
+ }
114
+
115
+ /* Remove hover / focus backgrounds */
116
+ section footer button:hover,
117
+ section footer button:focus,
118
+ section footer a:hover,
119
+ section footer a:focus {
120
+ background: transparent !important;
121
+ background-color: transparent !important;
122
+ box-shadow: none !important;
123
+ }
124
+
125
+ /* Ensure text/icon stays visible */
126
+ section footer button,
127
+ section footer a {
128
+ color: white !important;
129
+ }
130
+
131
+ /* === Hard override: HF footer pill buttons ("Use via API" / "Settings") === */
132
+ section footer button,
133
+ section footer button * {
134
+ background: transparent !important;
135
+ background-color: transparent !important;
136
+ background-image: none !important;
137
+ box-shadow: none !important;
138
+ filter: none !important;
139
+ }
140
+
141
+ section footer button::before,
142
+ section footer button::after {
143
+ background: transparent !important;
144
+ background-color: transparent !important;
145
+ background-image: none !important;
146
+ box-shadow: none !important;
147
+ filter: none !important;
148
+ }
149
+
150
+ /* Ensure the button itself does not reintroduce the pill */
151
+ section footer button {
152
+ border: none !important;
153
+ outline: none !important;
154
+ -webkit-appearance: none !important;
155
+ appearance: none !important;
156
+ }
157
+
158
+ /* Keep link consistent too */
159
+ section footer a,
160
+ section footer a * {
161
+ background: transparent !important;
162
+ background-color: transparent !important;
163
+ box-shadow: none !important;
164
+ }
165
+
166
+ /* Fallback: Gradio footer area (covers cases where it's not literally section footer) */
167
+ .gradio-container footer button,
168
+ .gradio-container footer button *,
169
+ .gradio-container .footer button,
170
+ .gradio-container .footer button * {
171
+ background: transparent !important;
172
+ background-color: transparent !important;
173
+ background-image: none !important;
174
+ box-shadow: none !important;
175
+ }
176
+
177
+ .gradio-container footer button::before,
178
+ .gradio-container footer button::after,
179
+ .gradio-container .footer button::before,
180
+ .gradio-container .footer button::after {
181
+ background: transparent !important;
182
+ background-color: transparent !important;
183
+ background-image: none !important;
184
+ box-shadow: none !important;
185
+ }