src/styles/components.py

"""
CSS styles for UI components in the leaderboard application.
"""
from src.utils.config import dark_theme

def get_container_styles():
    """
    Get CSS styles for page containers
    
    Returns:
        str: CSS string for containers
    """
    return f"""
    .title-container {{
        padding: 0.75rem 0 1.5rem 0;
        text-align: center;
        color: white;
        margin-bottom: 0.5rem;
    }}
    
    .title {{
        font-size: 64px;
        font-weight: 700;
        margin-bottom: 15px;
        color: {dark_theme['title_color']};
    }}
    
    .subtitle {{
        font-size: 20px;
        font-weight: 400;
        opacity: 0.9;
        color: {dark_theme['subtitle_color']};
    }}
    """

def get_links_bar_styles():
    """
    Get CSS styles for the links bar below the header
    
    Returns:
        str: CSS string for links bar
    """
    return f"""
    .links-bar {{
        text-align: center;
        padding: 0 0 15px 0;
        margin-bottom: 25px;
        font-size: 14px;
        border-bottom: 1px solid {dark_theme['border']};
    }}
    
    .link-item {{
        color: {dark_theme['primary']};
        text-decoration: none;
        transition: opacity 0.2s ease;
        margin: 0 3px;
        font-weight: 500;
    }}
    
    .link-item:hover {{
        opacity: 0.8;
        text-decoration: underline;
    }}
    
    .info-item {{
        color: {dark_theme['text_color']};
        margin: 0 3px;
        font-weight: 400;
    }}
    """

def get_card_styles():
    """
    Get CSS styles for cards
    
    Returns:
        str: CSS string for cards
    """
    return f"""
    .card {{
        background-color: {dark_theme['card_bg']};
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        margin-bottom: 24px;
        transition: transform 0.2s, box-shadow 0.2s;
    }}
    
    .card:hover {{
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }}
    
    .card-title {{
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 16px;
        color: {dark_theme['text_color']};
        display: flex;
        align-items: center;
    }}
    
    .card-title-icon {{
        margin-right: 10px;
        font-size: 22px;
    }}
    """

def get_task_card_styles():
    """
    Get CSS styles for task cards
    
    Returns:
        str: CSS string for task cards
    """
    return f"""
    .task-card {{
        background-color: {dark_theme['card_bg']};
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        margin-bottom: 16px;
        border-left: 4px solid {dark_theme['task_border']};
    }}
    
    .task-title {{
        font-size: 18px;
        font-weight: 600;
        color: {dark_theme['task_title']};
        margin-bottom: 8px;
    }}
    
    .task-description {{
        font-size: 15px;
        color: {dark_theme['text_color']};
        line-height: 1.5;
    }}
    """

def get_button_styles():
    """
    Get CSS styles for buttons
    
    Returns:
        str: CSS string for buttons
    """
    return f"""
    /* Button styling - completely new and modern */
    div.stButton > button {{
        background-color: {dark_theme['card_bg']};
        color: {dark_theme['text_color']};
        border: 1px solid {dark_theme['border']};
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        margin: 4px;
        transition: all 0.2s ease;
    }}
    
    div.stButton > button:hover {{
        background-color: {dark_theme['hover']};
        border-color: {dark_theme['border']};
        transform: translateY(-1px);
    }}
    
    /* Active button styling */
    div.stButton > button.selected {{
        background-color: {dark_theme['primary']} !important;
        color: white !important;
        border-color: {dark_theme['primary']} !important;
    }}
    """

def get_tabs_styles():
    """
    Get CSS styles for tabs
    
    Returns:
        str: CSS string for tabs
    """
    return f"""
    /* Tabs styling */
    .stTabs [data-baseweb="tab-list"] {{
        gap: 8px;
        margin-bottom: 20px;
    }}
    
    .stTabs [data-baseweb="tab"] {{
        border-radius: 8px 8px 0 0;
        padding: 12px 24px;
        font-weight: 500;
        background-color: {dark_theme['hover']};
        color: {dark_theme['text_color']};
    }}
    
    .stTabs [data-baseweb="tab"][aria-selected="true"] {{
        background-color: {dark_theme['primary']};
        color: white;
    }}
    
    .stTabs [data-baseweb="tab-highlight"] {{
        background-color: transparent;
    }}
    """

def get_alert_styles():
    """
    Get CSS styles for alerts and information boxes
    
    Returns:
        str: CSS string for alerts
    """
    return f"""
    /* Alert/info box styling */
    .info-box {{
        background-color: {dark_theme['info_bg']};
        border-left: 4px solid {dark_theme['info_border']};
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        color: {dark_theme['text_color']};
    }}
    
    .warning-box {{
        background-color: {dark_theme['warning_bg']};
        border-left: 4px solid {dark_theme['warning_border']};
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        color: {dark_theme['text_color']};
    }}
    """

def get_footer_styles():
    """
    Get CSS styles for the footer
    
    Returns:
        str: CSS string for the footer
    """
    return f"""
    /* Footer styling */
    .footer {{
        text-align: center;
        padding: 24px;
        margin-top: 40px;
        color: {dark_theme['footer_color']};
        font-size: 14px;
        border-top: 1px solid {dark_theme['footer_border']};
    }}
    """

def get_all_component_styles():
    """
    Get all component styles combined
    
    Returns:
        str: Combined CSS string for all components
    """
    styles = [
        get_container_styles(),
        get_links_bar_styles(),
        get_card_styles(),
        get_task_card_styles(),
        get_button_styles(),
        get_tabs_styles(),
        get_alert_styles(),
        get_footer_styles(),
        get_metric_definition_styles()
    ]
    
    return '\n'.join(styles)

def get_metric_definition_styles():
    """
    Get CSS styles for metric definition component
    
    Returns:
        str: CSS string for metric definition
    """
    return f"""
    /* Metric definition styling */
    .metric-definition {{
        margin-top: 20px;
        background-color: {dark_theme['card_bg']};
        border-radius: 8px;
        padding: 16px 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-left: 4px solid {dark_theme['secondary']};
    }}
    
    .metric-definition h4 {{
        color: {dark_theme['secondary']};
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 600;
    }}
    
    .metric-definition p {{
        color: {dark_theme['text_color']};
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 0;
    }}
    """