Spaces:
Runtime error
Runtime error
| import streamlit as st | |
| def apply_custom_styles(): | |
| st.markdown(""" | |
| <style> | |
| /* === Global Streamlit Overrides matching Original UI === */ | |
| /* Main Background */ | |
| .stApp { | |
| background: linear-gradient(135deg, #1a1c2c, #2e2b4f); | |
| background-attachment: fixed; | |
| color: #fff; | |
| } | |
| /* Container Glassmorphism emulation for Streamlit elements */ | |
| [data-testid="stVerticalBlock"] > [style*="flex-direction: column;"] > [data-testid="stVerticalBlock"] { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 15px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); | |
| padding: 30px; | |
| backdrop-filter: blur(8px); | |
| } | |
| /* Typography */ | |
| h1 { | |
| font-family: 'Poppins', sans-serif !important; | |
| color: #7dd3fc !important; | |
| text-align: center; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| font-family: 'Poppins', sans-serif !important; | |
| color: #ccc; | |
| text-align: center; | |
| font-size: 0.9em; | |
| margin-bottom: 20px; | |
| } | |
| /* File Uploader styling */ | |
| [data-testid="stFileUploadDropzone"] { | |
| border: 2px dashed rgba(255, 255, 255, 0.4) !important; | |
| border-radius: 12px !important; | |
| background-color: transparent !important; | |
| transition: background 0.3s ease, border-color 0.3s ease; | |
| } | |
| [data-testid="stFileUploadDropzone"]:hover { | |
| background: rgba(255, 255, 255, 0.05) !important; | |
| border-color: #7dd3fc !important; | |
| } | |
| /* Change some text inside uploader to white */ | |
| .st-emotion-cache-1gvek5f, .st-emotion-cache-1wivap2 { | |
| color: #fff !important; | |
| } | |
| /* Analyze Button */ | |
| .stButton button { | |
| background: linear-gradient(90deg, #7dd3fc, #8b5cf6) !important; | |
| border: none !important; | |
| padding: 10px 18px !important; | |
| border-radius: 8px !important; | |
| color: #fff !important; | |
| font-weight: 600 !important; | |
| transition: opacity 0.3s !important; | |
| width: 100% !important; | |
| } | |
| .stButton button:hover { | |
| opacity: 0.9 !important; | |
| color: #fff !important; | |
| transform: scale(1.02); | |
| } | |
| /* Result Boxes matching original UI */ | |
| .result-box-real { | |
| margin-top: 20px; | |
| padding: 12px; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-left: 5px solid #7dd3fc; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| .result-box-fake { | |
| margin-top: 20px; | |
| padding: 12px; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-left: 5px solid #8b5cf6; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| .confidence { | |
| margin-top: 5px; | |
| font-size: 0.9em; | |
| color: #ccc; | |
| } | |
| /* Markdown text overrides */ | |
| div.element-container p { | |
| color: #dfdfdf; | |
| font-family: "Poppins", sans-serif; | |
| } | |
| .confidence-bar-container { | |
| margin-top: 15px; | |
| width: 100%; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| height: 8px; | |
| overflow: hidden; | |
| } | |
| .confidence-bar-fill { | |
| height: 100%; | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |