Rtkhoury/Coding_workshop_2
0
1/* --- Target the Gradio app wrapper for backgrounds --- */2gradio-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 --- */28html, 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,65div[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,75div[role="tablist"] button,76button[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,92button[role="tab"][aria-selected="true"],93button[role="tab"].selected,94div[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),103button[role="tab"][aria-selected="false"],104button[role="tab"]:not(.selected),105div[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 142button.primary {143 background-color: rgb(40,9,109) !important;144 color: #ffffff !important;145 border: none !important;146}147 148button.primary:hover {149 background-color: rgb(60,20,140) !important;150}151 152button.secondary {153 background-color: #ffffff !important;154 color: rgb(40,9,109) !important;155 border: 2px solid rgb(40,9,109) !important;156}157 158button.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 168table {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 --- */196textarea {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 --- */225header, header *,226footer, footer * {227 background: transparent !important;228 box-shadow: none !important;229}230 231footer a, footer button,232header 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 261section footer {262 background: transparent !important;263}264 265section footer button,266section 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 274section footer button:hover,275section footer button:focus,276section footer a:hover,277section footer a:focus {278 background: transparent !important;279 background-color: transparent !important;280 box-shadow: none !important;281}282 283section footer button,284section 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 292section footer button::before,293section 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 301section footer a,302section 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}