| |
| gradio-app, |
| .gradio-app, |
| .main, |
| #app, |
| [data-testid="app"] { |
| background-color: rgb(15, 23, 42) !important; |
| background-image: |
| url("https://huggingface.co/spaces/XRachel/bc4/resolve/main/assets/BankChurn.png") !important; |
| background-position: top center !important; |
| background-repeat: no-repeat !important; |
| background-size: 100% auto !important; |
| min-height: 100vh !important; |
| } |
|
|
| html, body { |
| background-color: rgb(15, 23, 42) !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| min-height: 100vh !important; |
| } |
|
|
| .gradio-container { |
| max-width: 1400px !important; |
| width: 94vw !important; |
| margin: 0 auto !important; |
| padding-top: 220px !important; |
| padding-bottom: 140px !important; |
| background: transparent !important; |
| } |
|
|
| #escp_title h1 { |
| color: rgb(242, 198, 55) !important; |
| font-size: 3rem !important; |
| font-weight: 800 !important; |
| text-align: center !important; |
| margin: 0 0 12px 0 !important; |
| } |
|
|
| #escp_title p, |
| #escp_title em { |
| color: rgba(255, 255, 255, 0.9) !important; |
| text-align: center !important; |
| } |
|
|
| .tabs > .tab-nav, |
| .tab-nav, |
| div[role="tablist"] { |
| background: rgba(15, 23, 42, 0.60) !important; |
| border-radius: 10px 10px 0 0 !important; |
| padding: 4px !important; |
| } |
|
|
| .tabs > .tab-nav button, |
| .tab-nav button, |
| div[role="tablist"] button, |
| button[role="tab"] { |
| color: #ffffff !important; |
| font-weight: 600 !important; |
| border: none !important; |
| background: transparent !important; |
| padding: 10px 20px !important; |
| border-radius: 8px 8px 0 0 !important; |
| opacity: 1 !important; |
| } |
|
|
| .tabs > .tab-nav button.selected, |
| .tab-nav button.selected, |
| button[role="tab"][aria-selected="true"], |
| div[role="tablist"] button[aria-selected="true"] { |
| color: rgb(242, 198, 55) !important; |
| background: rgba(255, 255, 255, 0.12) !important; |
| } |
|
|
| .gradio-container .gr-block, |
| .gradio-container .gr-box, |
| .gradio-container .gr-panel, |
| .gradio-container .gr-group, |
| .tabitem { |
| background: rgba(255, 255, 255, 0.97) !important; |
| border-radius: 12px !important; |
| } |
|
|
| .tabitem { |
| padding: 16px !important; |
| } |
|
|
| .gradio-container input, |
| .gradio-container textarea, |
| .gradio-container select { |
| border-radius: 10px !important; |
| } |
|
|
| button:not([role="tab"]) { |
| border-radius: 10px !important; |
| font-weight: 700 !important; |
| } |
|
|
