Create styles.py

src/styles.py

@@ -0,0 +1,346 @@
+"""
+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)