| """ | |
| This module contains the custom styling for the Daease app. | |
| """ | |
| def get_custom_css(): | |
| """ | |
| Returns the custom CSS for styling the application with a pitch black theme and modern UI. | |
| """ | |
| return """ | |
| <style> | |
| /* Import modern fonts */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| /* Pitch black theme with improved UI */ | |
| body { | |
| background-color: #000000 !important; | |
| color: #f8f9fa !important; | |
| font-family: 'Inter', sans-serif !important; | |
| letter-spacing: -0.01em; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Main container styling with subtle gradient */ | |
| .main { | |
| background: linear-gradient(135deg, rgba(20, 20, 20, 1), rgba(0, 0, 0, 1)); | |
| padding: 1.5rem !important; | |
| max-width: 100%; | |
| border-radius: 20px; | |
| } | |
| /* Header & top content area */ | |
| .css-1v3fvcr, .css-1vq4p4l, .css-18e3th9, .css-1d391kg { | |
| background-color: #000000 !important; | |
| } | |
| /* Sidebar styling with accent color */ | |
| section[data-testid="stSidebar"] { | |
| background-color: #0a0a0a !important; | |
| border-right: 1px solid rgba(122, 95, 255, 0.2); | |
| } | |
| /* App header - fix being cut off */ | |
| h1 { | |
| font-family: 'Inter', sans-serif !important; | |
| font-weight: 600 !important; | |
| font-size: 1.8rem !important; | |
| color: #ff6600 !important; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 1rem !important; | |
| margin-top: 1rem !important; | |
| padding-top: 1.5rem !important; | |
| -webkit-background-clip: initial !important; | |
| -webkit-text-fill-color: initial !important; | |
| overflow: visible !important; | |
| } | |
| /* Ensure header container has enough space */ | |
| .block-container > div:first-child { | |
| padding-top: 1.5rem !important; | |
| margin-top: 0.5rem !important; | |
| overflow: visible !important; | |
| } | |
| /* Adjust block spacing */ | |
| .block-container { | |
| padding-top: 1rem !important; /* Increased from 0.5rem */ | |
| max-width: 95% !important; | |
| } | |
| h2, h3, h4, h5, h6 { | |
| font-family: 'Inter', sans-serif !important; | |
| font-weight: 600 !important; | |
| color: #f8f9fa !important; | |
| letter-spacing: -0.02em; | |
| } | |
| p, li, div { | |
| font-family: 'Inter', sans-serif !important; | |
| color: #e0e0e0 !important; | |
| font-size: 0.9rem !important; | |
| } | |
| /* Chat container with improved shadows */ | |
| .stChatFloatingInputContainer { | |
| border-radius: 20px !important; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; | |
| padding: 10px !important; | |
| background-color: #0a0a0a !important; | |
| border: 1px solid rgba(122, 95, 255, 0.15) !important; | |
| } | |
| /* Chat input with improved UI */ | |
| .stChatInputContainer { | |
| padding: 0.5rem !important; | |
| } | |
| .stChatInputContainer textarea { | |
| border-radius: 14px !important; | |
| padding: 8px 12px !important; | |
| background-color: #111111 !important; | |
| border: 1px solid rgba(122, 95, 255, 0.2) !important; | |
| color: #f0f0f0 !important; | |
| font-family: 'Inter', sans-serif !important; | |
| font-size: 0.9rem !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .stChatInputContainer textarea:focus { | |
| border: 1px solid rgba(122, 95, 255, 0.6) !important; | |
| box-shadow: 0 0 0 2px rgba(122, 95, 255, 0.2) !important; | |
| } | |
| /* Chat messages with enhanced styling */ | |
| .chat-message { | |
| padding: 0.8rem !important; | |
| border-radius: 16px !important; | |
| margin-bottom: 0.8rem !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important; | |
| transition: all 0.3s ease-in-out !important; | |
| } | |
| /* Custom chat layout styles - forcing right/left alignment */ | |
| .stChatMessage { | |
| max-width: 85% !important; | |
| margin-bottom: 0.7rem !important; | |
| border-radius: 16px !important; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| /* Main chat container */ | |
| [data-testid="stChatContainer"] { | |
| padding: 0 1rem !important; | |
| row-gap: 0.5rem !important; | |
| } | |
| /* Force right alignment for user messages */ | |
| [data-testid="stChatContainer"] > div > [data-testid="stChatMessage"]:has([data-testid="userChatMessage"]) { | |
| display: flex !important; | |
| justify-content: flex-end !important; | |
| width: 100% !important; | |
| } | |
| /* Force left alignment for assistant messages */ | |
| [data-testid="stChatContainer"] > div > [data-testid="stChatMessage"]:has([data-testid="assistantChatMessage"]) { | |
| display: flex !important; | |
| justify-content: flex-start !important; | |
| width: 100% !important; | |
| } | |
| /* User message styling */ | |
| [data-testid="userChatMessage"] { | |
| background-color: #191921 !important; | |
| border-right: 3px solid #7A5FFF !important; | |
| border-left: none !important; | |
| border-top-right-radius: 4px !important; | |
| margin-left: auto !important; | |
| } | |
| /* Assistant message styling */ | |
| [data-testid="assistantChatMessage"] { | |
| background-color: #131419 !important; | |
| border-left: 3px solid #00D1B2 !important; | |
| border-top-left-radius: 4px !important; | |
| margin-right: auto !important; | |
| } | |
| /* Buttons and toggles with gradient */ | |
| .stButton > button, | |
| .stDownloadButton > button { | |
| border-radius: 12px !important; | |
| padding: 0.5rem 1.2rem !important; | |
| background: linear-gradient(135deg, #7A5FFF, #00D1B2) !important; | |
| color: white !important; | |
| border: none !important; | |
| font-weight: 500 !important; | |
| font-family: 'Inter', sans-serif !important; | |
| transition: all 0.3s ease !important; | |
| transform: translateY(0) !important; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; | |
| } | |
| .stButton > button:hover, | |
| .stDownloadButton > button:hover { | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 8px 16px rgba(122, 95, 255, 0.4) !important; | |
| } | |
| /* Toggle switch */ | |
| .stToggle { | |
| color: #f8f9fa !important; | |
| } | |
| [data-baseweb="checkbox"] { | |
| margin-right: 6px !important; | |
| } | |
| /* Sidebar headers and labels */ | |
| .sidebar .sidebar-content { | |
| background-color: #0a0a0a !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stMarkdownContainer"] h1, | |
| [data-testid="stSidebar"] [data-testid="stMarkdownContainer"] h2 { | |
| color: #f8f9fa !important; | |
| font-size: 1.1rem !important; | |
| font-weight: 600 !important; | |
| margin-top: 0.5rem !important; | |
| margin-bottom: 0.5rem !important; | |
| } | |
| /* Expander/Dropdown with improved styling */ | |
| .streamlit-expanderHeader { | |
| border-radius: 12px !important; | |
| background-color: #111111 !important; | |
| border: 1px solid rgba(0, 209, 178, 0.2) !important; | |
| color: #f0f0f0 !important; | |
| font-weight: 500 !important; | |
| padding: 1rem !important; | |
| font-family: 'Inter', sans-serif !important; | |
| } | |
| .streamlit-expanderContent { | |
| background-color: #0a0a0a !important; | |
| border-radius: 0 0 12px 12px !important; | |
| padding: 1.2rem !important; | |
| border: 1px solid rgba(0, 209, 178, 0.2) !important; | |
| border-top: none !important; | |
| } | |
| /* Citations and sources with improved styling */ | |
| a { | |
| color: #00D1B2 !important; | |
| text-decoration: none !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| a:hover { | |
| text-decoration: underline !important; | |
| color: #7A5FFF !important; | |
| } | |
| /* Italicize uncertainties with improved styling */ | |
| .uncertainty { | |
| font-style: italic !important; | |
| color: rgba(255, 107, 107, 0.9) !important; | |
| } | |
| /* Legal disclaimer with improved styling */ | |
| .footer-text { | |
| font-size: 0.7rem !important; | |
| color: rgba(240, 240, 240, 0.5) !important; | |
| text-align: center !important; | |
| padding: 12px !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| width: 100% !important; | |
| z-index: 99 !important; | |
| background-color: rgba(0, 0, 0, 0.7) !important; | |
| backdrop-filter: blur(5px) !important; | |
| } | |
| /* Hide empty elements and default header */ | |
| .element-container:has(h1:empty) { | |
| display: none !important; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a0a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #333; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #444; | |
| } | |
| /* Typing indicator animation */ | |
| .typing-indicator { | |
| display: flex; | |
| align-items: center; | |
| margin: 10px 0; | |
| } | |
| .typing-indicator span { | |
| height: 8px; | |
| width: 8px; | |
| margin: 0 2px; | |
| background-color: #00D1B2; | |
| border-radius: 50%; | |
| display: inline-block; | |
| opacity: 0.6; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation: pulse 1s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation: pulse 1s infinite ease-in-out .2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation: pulse 1s infinite ease-in-out .4s; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 0.6; | |
| } | |
| 50% { | |
| transform: scale(1.3); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0.6; | |
| } | |
| } | |
| /* Make components more compact instead of scaling */ | |
| .stApp { | |
| max-width: 100% !important; | |
| } | |
| </style> | |
| """ | |
| def apply_styling(): | |
| """ | |
| Apply the custom CSS styling to the Streamlit app. | |
| """ | |
| import streamlit as st | |
| st.markdown(get_custom_css(), unsafe_allow_html=True) |