| """ |
| Unified styling module for both Streamlit UI and matplotlib plots. |
| Contains all styling definitions to ensure consistency across the application. |
| |
| Note: When used outside of Streamlit environment (e.g., in Jupyter notebooks), |
| you may see warnings about missing ScriptRunContext or Session state. These |
| warnings are harmless and can be safely ignored - the core plotting functions |
| (get_plot_style, set_plot_style, PLOT_COLORS) work correctly regardless. |
| """ |
|
|
| import warnings |
| import logging |
| import matplotlib.pyplot as plt |
| import seaborn as sns |
| import matplotlib.font_manager as fm |
|
|
| |
| warnings.filterwarnings('ignore', category=UserWarning, module='streamlit') |
| warnings.filterwarnings('ignore', message='.*ScriptRunContext.*') |
| warnings.filterwarnings('ignore', message='.*Session state.*') |
| warnings.filterwarnings('ignore', message='.*missing ScriptRunContext.*') |
| warnings.filterwarnings('ignore', message='.*does not function when running.*') |
| warnings.filterwarnings('ignore', module='streamlit.runtime.*') |
| warnings.filterwarnings('ignore', module='streamlit.runtime.scriptrunner_utils.*') |
| warnings.filterwarnings('ignore', module='streamlit.runtime.state.*') |
|
|
| |
| logging.getLogger('streamlit.runtime.scriptrunner_utils.script_run_context').setLevel(logging.ERROR) |
| logging.getLogger('streamlit.runtime.state.session_state_proxy').setLevel(logging.ERROR) |
| logging.getLogger('streamlit').setLevel(logging.ERROR) |
|
|
| try: |
| |
| for logger_name in ['streamlit', 'streamlit.runtime', 'streamlit.runtime.scriptrunner_utils', |
| 'streamlit.runtime.state', 'streamlit.runtime.scriptrunner_utils.script_run_context', |
| 'streamlit.runtime.state.session_state_proxy']: |
| logging.getLogger(logger_name).setLevel(logging.ERROR) |
| |
| import streamlit as st |
| _STREAMLIT_AVAILABLE = True |
| except ImportError: |
| _STREAMLIT_AVAILABLE = False |
| |
| class MockStreamlit: |
| class session_state: |
| dark_theme = False |
| st = MockStreamlit() |
|
|
| def _suppress_streamlit_warnings(func): |
| """Decorator to suppress streamlit warnings in functions.""" |
| def wrapper(*args, **kwargs): |
| with warnings.catch_warnings(): |
| warnings.simplefilter('ignore') |
| return func(*args, **kwargs) |
| return wrapper |
|
|
| |
| |
| |
|
|
| |
| LIGHT_COLORS = { |
| 'background': '#F7FAFC', |
| 'figure_background': '#FFFFFF', |
| 'sidebar_bg_start': '#F0F4F8', |
| 'sidebar_bg_end': '#E4EBF3', |
| 'border_light': '#E2E8F0', |
| 'border_medium': '#CBD5E1', |
| 'text_primary': '#1F2933', |
| 'text_secondary': '#334E68', |
| 'text_tertiary': '#52606D', |
| 'text_light': '#829AB1', |
| 'card_background': '#FFFFFF', |
| 'code_background': '#EEF2FF', |
| 'code_text': '#1E3A8A', |
| 'button_bg_start': '#2563EB', |
| 'button_bg_end': '#1D4ED8', |
| 'button_hover_start': '#1D4ED8', |
| 'button_hover_end': '#1E40AF', |
| 'alert_error_bg': '#FDE8E8', |
| 'alert_error_border': '#F76B6B', |
| 'alert_error_text': '#B91C1C', |
| 'alert_info_bg': '#E0F2FE', |
| 'alert_info_border': '#3B82F6', |
| 'alert_info_text': '#1E3A8A', |
| 'warning_bg': '#FEF3C7', |
| 'warning_border': '#F59E0B', |
| 'success_bg': '#DCFCE7', |
| 'success_border': '#16A34A', |
| 'generate_button_bg': '#047857', |
| 'generate_button_hover': '#0F9D58', |
| 'panel_background': '#FFFFFF', |
| 'panel_border': '#E2E8F0', |
| 'panel_shadow': '0 8px 24px rgba(15, 23, 42, 0.08)', |
| |
| 'axes_background': '#FFFFFF', |
| 'grid_color': '#E2E8F0', |
| 'spine_color': '#CBD5E1', |
| } |
|
|
| |
| PAPER_COLORS = { |
| 'background': '#FFFFFF', |
| 'figure_background': '#FFFFFF', |
| 'sidebar_bg_start': '#F5F7FA', |
| 'sidebar_bg_end': '#E4EBF3', |
| 'border_light': '#E2E8F0', |
| 'border_medium': '#CBD5E1', |
| 'text_primary': '#1F2933', |
| 'text_secondary': '#334E68', |
| 'text_tertiary': '#52606D', |
| 'text_light': '#829AB1', |
| 'card_background': '#FFFFFF', |
| 'code_background': '#EEF2FF', |
| 'code_text': '#1E3A8A', |
| 'button_bg_start': '#2563EB', |
| 'button_bg_end': '#1D4ED8', |
| 'button_hover_start': '#1D4ED8', |
| 'button_hover_end': '#1E40AF', |
| 'alert_error_bg': '#FDE8E8', |
| 'alert_error_border': '#F76B6B', |
| 'alert_error_text': '#B91C1C', |
| 'alert_info_bg': '#E0F2FE', |
| 'alert_info_border': '#3B82F6', |
| 'alert_info_text': '#1E3A8A', |
| 'warning_bg': '#FEF3C7', |
| 'warning_border': '#F59E0B', |
| 'success_bg': '#DCFCE7', |
| 'success_border': '#16A34A', |
| 'generate_button_bg': '#047857', |
| 'generate_button_hover': '#0F9D58', |
| 'panel_background': '#FFFFFF', |
| 'panel_border': '#E2E8F0', |
| 'panel_shadow': '0 8px 24px rgba(15, 23, 42, 0.08)', |
| |
| 'axes_background': '#FFFFFF', |
| 'grid_color': '#E2E8F0', |
| 'spine_color': '#CBD5E1', |
| } |
|
|
| |
| DARK_COLORS = { |
| 'background': '#0F172A', |
| 'figure_background': '#1E293B', |
| 'sidebar_bg_start': '#111C2E', |
| 'sidebar_bg_end': '#1B2537', |
| 'border_light': '#27364C', |
| 'border_medium': '#334155', |
| 'text_primary': '#F8FAFC', |
| 'text_secondary': '#CBD5F5', |
| 'text_tertiary': '#94A3B8', |
| 'text_light': '#64748B', |
| 'card_background': '#1F2937', |
| 'code_background': '#1E3A5F', |
| 'code_text': '#C7D2FE', |
| 'button_bg_start': '#3B82F6', |
| 'button_bg_end': '#2563EB', |
| 'button_hover_start': '#2563EB', |
| 'button_hover_end': '#1D4ED8', |
| 'alert_error_bg': '#451A1A', |
| 'alert_error_border': '#F87171', |
| 'alert_error_text': '#FCA5A5', |
| 'alert_info_bg': '#1E293B', |
| 'alert_info_border': '#60A5FA', |
| 'alert_info_text': '#BFDBFE', |
| 'warning_bg': '#3D2D12', |
| 'warning_border': '#FBBF24', |
| 'success_bg': '#163225', |
| 'success_border': '#34D399', |
| 'generate_button_bg': '#10B981', |
| 'generate_button_hover': '#34D399', |
| 'panel_background': '#1F2937', |
| 'panel_border': '#334155', |
| 'panel_shadow': '0 18px 36px rgba(2, 6, 23, 0.55)', |
| |
| 'axes_background': '#0F172A', |
| 'grid_color': '#27364C', |
| 'spine_color': '#334155', |
| } |
|
|
| @_suppress_streamlit_warnings |
| def get_current_colors(): |
| """Return the active color scheme, defaulting to the light palette.""" |
| try: |
| dark_mode = getattr(st.session_state, 'dark_theme', False) |
| except Exception: |
| dark_mode = False |
|
|
| return DARK_COLORS if dark_mode else LIGHT_COLORS |
|
|
| |
| |
| |
|
|
| |
| DEFAULT_FONT_FAMILY = 'sans-serif' |
|
|
| try: |
| fm.fontManager.addfont('/usr/share/fonts/truetype/msttcorefonts/Arial.ttf') |
| PLOT_STYLE_FONT_FAMILY = 'Arial' |
| print("Successfully loaded Arial font.") |
| except FileNotFoundError: |
| print("Arial.ttf not found. Using default system font.") |
| PLOT_STYLE_FONT_FAMILY = DEFAULT_FONT_FAMILY |
| except Exception as e: |
| print(f"An error occurred while trying to load Arial font: {e}. Using default system font.") |
| PLOT_STYLE_FONT_FAMILY = DEFAULT_FONT_FAMILY |
|
|
| |
| PLOT_COLORS = { |
| 'input_similarity': sns.color_palette('rocket', as_cmap=True), |
| 'output_difference': sns.cubehelix_palette(start=.2, rot=-.3, dark=0, light=0.85, |
| reverse=True, as_cmap=True), |
| 'conflict': sns.cubehelix_palette(start=2, rot=0, dark=0, light=0.85, |
| reverse=True, as_cmap=True), |
| 'output_biomechanical': sns.cubehelix_palette(start=2.8, rot=0.4, dark=0, light=0.85, |
| reverse=True, as_cmap=True) |
| } |
|
|
| |
| purple_helix = sns.cubehelix_palette(start=.2, rot=-.4, dark=0, light=0.85, |
| reverse=True, as_cmap=True) |
| my_purple_helix = sns.cubehelix_palette(start=.2, rot=-.1, dark=0, light=0.85, |
| reverse=True, as_cmap=True) |
|
|
| def get_plot_style(style='default'): |
| """Get plot style with specified color theme. |
| |
| Args: |
| style: 'default' for cream theme, 'paper' for pure white backgrounds, 'dark' for dark theme |
| """ |
| if style == 'paper': |
| theme_colors = PAPER_COLORS |
| elif style == 'dark': |
| theme_colors = DARK_COLORS |
| else: |
| theme_colors = get_current_colors() |
| |
| return { |
| 'font_family': PLOT_STYLE_FONT_FAMILY, |
| 'font_size': 18, |
| 'title_size': 20, |
| 'label_size': 18, |
| 'tick_size': 15, |
| 'tick_length': 5, |
| 'tick_width': 0.5, |
| 'tick_pad': 5, |
| 'label_pad_x': -15, |
| 'label_pad_y': -35, |
| 'figure_dpi': 300, |
| 'aspect_ratio': 'equal', |
| 'subplot_wspace': 0.05, |
| 'subplot_hspace': 0.1, |
| |
| 'figure_facecolor': theme_colors['figure_background'], |
| 'axes_facecolor': theme_colors['axes_background'], |
| 'text_color': theme_colors['text_primary'], |
| 'grid_color': theme_colors['grid_color'], |
| 'spine_color': theme_colors['spine_color'], |
| } |
|
|
| def set_plot_style(style='default'): |
| """Set consistent plot styling across all figures. |
| |
| Args: |
| style: 'default' for cream theme, 'paper' for pure white backgrounds, 'dark' for dark theme |
| """ |
| plot_style = get_plot_style(style=style) |
| |
| plt.rcParams['font.family'] = plot_style['font_family'] |
| plt.rcParams['font.size'] = plot_style['font_size'] |
| plt.rcParams['axes.labelsize'] = plot_style['label_size'] |
| plt.rcParams['axes.titlesize'] = plot_style['title_size'] |
| plt.rcParams['xtick.labelsize'] = plot_style['tick_size'] |
| plt.rcParams['ytick.labelsize'] = plot_style['tick_size'] |
| plt.rcParams['xtick.major.pad'] = plot_style['tick_pad'] |
| plt.rcParams['ytick.major.pad'] = plot_style['tick_pad'] |
| plt.rcParams['figure.dpi'] = plot_style['figure_dpi'] |
| plt.rcParams['figure.subplot.wspace'] = plot_style['subplot_wspace'] |
| plt.rcParams['figure.subplot.hspace'] = plot_style['subplot_hspace'] |
| |
| |
| plt.rcParams['figure.facecolor'] = plot_style['figure_facecolor'] |
| plt.rcParams['axes.facecolor'] = plot_style['axes_facecolor'] |
| plt.rcParams['text.color'] = plot_style['text_color'] |
| plt.rcParams['axes.labelcolor'] = plot_style['text_color'] |
| plt.rcParams['xtick.color'] = plot_style['text_color'] |
| plt.rcParams['ytick.color'] = plot_style['text_color'] |
| plt.rcParams['axes.edgecolor'] = plot_style['spine_color'] |
| plt.rcParams['grid.color'] = plot_style['grid_color'] |
| plt.rcParams['grid.alpha'] = 0.7 |
|
|
| def apply_theme_to_figure(fig, ax=None): |
| """Apply current theme to an existing figure and axes""" |
| theme_colors = get_current_colors() |
| |
| if fig: |
| fig.patch.set_facecolor(theme_colors['figure_background']) |
| |
| if ax is not None: |
| |
| if hasattr(ax, 'flatten'): |
| axes_list = ax.flatten() |
| elif isinstance(ax, (list, tuple)): |
| axes_list = ax |
| elif hasattr(ax, '__iter__'): |
| axes_list = list(ax) |
| else: |
| axes_list = [ax] |
| |
| for axis in axes_list: |
| if axis is not None: |
| axis.set_facecolor(theme_colors['axes_background']) |
| |
| |
| axis.title.set_color(theme_colors['text_primary']) |
| axis.xaxis.label.set_color(theme_colors['text_primary']) |
| axis.yaxis.label.set_color(theme_colors['text_primary']) |
| |
| |
| axis.tick_params(colors=theme_colors['text_primary']) |
| |
| |
| for spine in axis.spines.values(): |
| spine.set_color(theme_colors['spine_color']) |
| |
| |
| axis.grid(True, color=theme_colors['grid_color'], alpha=0.7) |
| |
| return fig, ax |
|
|
| def set_paper_plot_style(): |
| """Convenience function to set pure white backgrounds for paper publication.""" |
| set_plot_style(style='paper') |
|
|
| |
| def apply_cream_theme_to_figure(fig, ax=None): |
| """Apply current theme to an existing figure and axes (legacy function name)""" |
| return apply_theme_to_figure(fig, ax) |
|
|
| |
| |
| |
|
|
| def get_base_css(): |
| """Returns the base CSS styling used across all pages.""" |
| return f""" |
| <style> |
| /* Main background styling */ |
| .stApp {{ |
| background: {get_current_colors()['background']}; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| header[role="banner"] {{ |
| display: none !important; |
| }} |
| |
| |
| header[data-testid="stHeader"] {{ |
| display: none !important; |
| }} |
| |
| div[data-testid="stDecoration"] {{ |
| display: none !important; |
| }} |
| |
| div[data-testid="stToolbar"] {{ |
| display: none !important; |
| }} |
| |
| .main .block-container {{ |
| padding-top: 6rem; |
| padding-bottom: 2rem; |
| background-color: {get_current_colors()['background']}; |
| border-radius: 15px; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
| margin-top: 1rem; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| /* Explicit text color styling for all elements */ |
| .stApp, .stApp * {{ |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| code {{ |
| background: {get_current_colors()['code_background']}; |
| color: {get_current_colors()['code_text']} !important; |
| padding: 0.15rem 0.45rem; |
| border-radius: 6px; |
| font-weight: 600; |
| }} |
| |
| pre code {{ |
| display: block; |
| padding: 0.75rem 1rem; |
| border-radius: 10px; |
| }} |
| |
| /* Button styling */ |
| .stButton>button {{ |
| width: 100%; |
| margin-top: 1rem; |
| margin-bottom: 1rem; |
| background: linear-gradient(45deg, {get_current_colors()['button_bg_start']}, {get_current_colors()['button_bg_end']}); |
| color: white !important; |
| border: none; |
| border-radius: 10px; |
| padding: 0.75rem 1rem; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| box-shadow: 0 2px 10px rgba(107, 107, 107, 0.2); |
| }} |
| |
| .stButton>button:hover {{ |
| background: linear-gradient(45deg, {get_current_colors()['button_hover_start']}, {get_current_colors()['button_hover_end']}); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 15px rgba(107, 107, 107, 0.3); |
| color: white !important; |
| }} |
| |
| /* Sidebar styling */ |
| section[data-testid="stSidebar"] {{ |
| background: linear-gradient(180deg, {get_current_colors()['sidebar_bg_start']} 0%, {get_current_colors()['figure_background']} 85%); |
| border-right: 1px solid {get_current_colors()['border_medium']}; |
| color: {get_current_colors()['text_primary']} !important; |
| margin-top: 5.5rem; |
| height: calc(100vh - 5.5rem); |
| }} |
| |
| section[data-testid="stSidebar"] > div {{ |
| background: transparent; |
| padding: 1.75rem 1.2rem 2.3rem 1.2rem; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| /* Headers styling */ |
| h1 {{ |
| padding-bottom: 1rem; |
| border-bottom: 3px solid {get_current_colors()['border_medium']}; |
| color: {get_current_colors()['text_primary']} !important; |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); |
| }} |
| |
| h2 {{ |
| margin-top: 2rem; |
| padding-bottom: 0.5rem; |
| color: {get_current_colors()['text_secondary']} !important; |
| font-weight: 600; |
| }} |
| |
| h3 {{ |
| margin-top: 1.5rem; |
| color: {get_current_colors()['text_tertiary']} !important; |
| font-weight: 600; |
| }} |
| |
| /* Alert box styling */ |
| .auth-alert {{ |
| background: {get_current_colors()['alert_error_bg']}; |
| color: {get_current_colors()['alert_error_text']} !important; |
| padding: 15px; |
| border-radius: 10px; |
| margin: 15px 0; |
| border: 1px solid {get_current_colors()['alert_error_border']}; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); |
| }} |
| |
| .auth-info {{ |
| background: {get_current_colors()['alert_info_bg']}; |
| color: {get_current_colors()['alert_info_text']} !important; |
| padding: 15px; |
| border-radius: 10px; |
| margin: 15px 0; |
| border: 1px solid {get_current_colors()['alert_info_border']}; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); |
| }} |
| |
| /* Hide default multipage navigation */ |
| section[data-testid="stSidebar"] nav[data-testid="stSidebarNav"] {{ |
| display: none !important; |
| }} |
| |
| section[data-testid="stSidebar"] div[data-testid="stSidebarNav"] {{ |
| display: none !important; |
| }} |
| |
| section[data-testid="stSidebarNav"] {{ |
| display: none !important; |
| }} |
| |
| nav[data-testid="stSidebarNav"] {{ |
| display: none !important; |
| }} |
| |
| /* Top navigation */ |
| .top-nav-outer {{ |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| z-index: 1000; |
| padding: 0.85rem 1.5rem; |
| background: linear-gradient(180deg, {get_current_colors()['background']} 0%, {get_current_colors()['figure_background']} 100%); |
| border-bottom: 1px solid {get_current_colors()['border_medium']}; |
| box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); |
| }} |
| |
| .top-nav-inner {{ |
| max-width: 1100px; |
| margin: 0 auto; |
| display: flex; |
| gap: 0.75rem; |
| justify-content: center; |
| flex-wrap: wrap; |
| }} |
| |
| .top-nav-inner .nav-link {{ |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 150px; |
| padding: 0.55rem 1rem; |
| font-weight: 600; |
| border-radius: 12px; |
| text-decoration: none; |
| background: linear-gradient(180deg, {get_current_colors()['figure_background']} 0%, {get_current_colors()['background']} 100%) !important; |
| border: 2px solid {get_current_colors()['border_medium']} !important; |
| color: {get_current_colors()['text_secondary']} !important; |
| box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); |
| transition: all 0.2s ease; |
| }} |
| |
| .top-nav-inner .nav-link:hover {{ |
| background: linear-gradient(180deg, {get_current_colors()['background']} 0%, {get_current_colors()['figure_background']} 100%) !important; |
| color: {get_current_colors()['text_primary']} !important; |
| border-color: {get_current_colors()['text_secondary']} !important; |
| transform: translateY(-2px); |
| }} |
| |
| .nav-active {{ |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 160px; |
| padding: 0.65rem 1.1rem; |
| border-radius: 14px; |
| border: 2px solid {get_current_colors()['text_secondary']}; |
| background: linear-gradient(180deg, {get_current_colors()['figure_background']} 0%, {get_current_colors()['background']} 100%); |
| font-weight: 700; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); |
| color: {get_current_colors()['text_primary']} !important; |
| text-align: center; |
| }} |
| |
| </style> |
| """ |
|
|
| def get_home_page_css(): |
| """Returns additional CSS specific to the home page.""" |
| return f""" |
| <style> |
| /* Hide sidebar affordance on the landing page where it is unused */ |
| [data-testid="stSidebar"] {{ |
| display: none !important; |
| }} |
| |
| /* Navigation button styling */ |
| .nav-button {{ |
| border: 2px solid {get_current_colors()['border_medium']}; |
| border-radius: 12px; |
| padding: 20px; |
| text-align: center; |
| margin-bottom: 15px; |
| background: {get_current_colors()['background']}; |
| transition: all 0.3s ease; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .nav-button:hover {{ |
| background: {get_current_colors()['figure_background']}; |
| transform: translateY(-3px); |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); |
| border-color: {get_current_colors()['text_secondary']}; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .nav-button h3 {{ |
| color: {get_current_colors()['text_secondary']} !important; |
| margin-bottom: 0.5rem; |
| }} |
| |
| /* Description boxes */ |
| .description-box {{ |
| text-align: center; |
| padding: 15px; |
| border-radius: 10px; |
| margin-top: -10px; |
| background: {get_current_colors()['card_background']}; |
| border: 1px solid {get_current_colors()['border_medium']}; |
| box-shadow: none; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| /* Hero banner */ |
| .hero {{ |
| background: linear-gradient(135deg, {get_current_colors()['figure_background']}, {get_current_colors()['background']}); |
| border: 2px solid {get_current_colors()['border_medium']}; |
| border-radius: 18px; |
| padding: 2.5rem 3rem; |
| margin-bottom: 2.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .hero-overline {{ |
| text-transform: uppercase; |
| letter-spacing: 0.28rem; |
| font-size: 0.75rem; |
| font-weight: 700; |
| color: {get_current_colors()['text_tertiary']} !important; |
| display: inline-block; |
| margin-bottom: 0.8rem; |
| }} |
| |
| .hero-subtext {{ |
| font-size: 1.1rem; |
| line-height: 1.7rem; |
| color: {get_current_colors()['text_secondary']} !important; |
| margin-top: 1rem; |
| max-width: 720px; |
| }} |
| |
| /* Grid layouts for value props and steps */ |
| .value-grid {{ |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 1.25rem; |
| margin-top: 1.5rem; |
| }} |
| |
| .value-card {{ |
| background: {get_current_colors()['card_background']}; |
| border: 1px solid {get_current_colors()['border_medium']}; |
| border-radius: 12px; |
| padding: 1.25rem; |
| box-shadow: none; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .value-card h3 {{ |
| margin-bottom: 0.6rem; |
| color: {get_current_colors()['text_secondary']} !important; |
| font-size: 1.1rem; |
| }} |
| |
| .checklist {{ |
| list-style: none; |
| padding: 0; |
| margin: 1rem 0 0 0; |
| }} |
| |
| .checklist li {{ |
| display: flex; |
| align-items: flex-start; |
| gap: 0.6rem; |
| margin-bottom: 0.75rem; |
| color: {get_current_colors()['text_secondary']} !important; |
| }} |
| |
| .checklist span {{ |
| font-weight: 600; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .step-grid {{ |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); |
| gap: 1.5rem; |
| margin-top: 1.5rem; |
| }} |
| |
| .step-card {{ |
| background: {get_current_colors()['card_background']}; |
| border: 1px solid {get_current_colors()['border_medium']}; |
| border-radius: 12px; |
| padding: 1.5rem; |
| box-shadow: none; |
| position: relative; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .step-number {{ |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: {get_current_colors()['text_secondary']}; |
| color: {get_current_colors()['background']} !important; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| }} |
| |
| .deliverables-grid {{ |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); |
| gap: 1.25rem; |
| margin-top: 1.5rem; |
| }} |
| |
| .deliverable-card {{ |
| background: {get_current_colors()['card_background']}; |
| border: 1px solid {get_current_colors()['border_medium']}; |
| border-radius: 12px; |
| padding: 1.25rem; |
| box-shadow: none; |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .auth-help {{ |
| margin-top: 1.5rem; |
| color: {get_current_colors()['text_secondary']} !important; |
| text-align: center; |
| font-size: 0.95rem; |
| }} |
| |
| .auth-help a {{ |
| color: {get_current_colors()['text_secondary']} !important; |
| font-weight: 600; |
| }} |
| </style> |
| """ |
|
|
| def get_documentation_page_css(): |
| """Returns additional CSS specific to the documentation page.""" |
| return f""" |
| <style> |
| /* Reduce sidebar padding so controls sit right below the nav */ |
| [data-testid="stSidebar"] > div {{ |
| padding: 1.05rem 1.1rem 1.8rem 1.1rem !important; |
| }} |
| |
| .gaussian-explanation-container {{ |
| padding: 20px; |
| background: {get_current_colors()['background']}; |
| border-radius: 12px; |
| margin-bottom: 20px; |
| border: 2px solid {get_current_colors()['border_medium']}; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .metric-card {{ |
| background: {get_current_colors()['background']}; |
| padding: 15px; |
| border-radius: 10px; |
| border: 2px solid {get_current_colors()['border_medium']}; |
| margin: 10px 0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .glossary-term {{ |
| background: {get_current_colors()['background']}; |
| padding: 15px; |
| border-radius: 10px; |
| border-left: 4px solid {get_current_colors()['text_secondary']}; |
| margin: 10px 0; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| </style> |
| """ |
|
|
| def get_tool_page_css(): |
| """Returns additional CSS specific to the analysis tool page.""" |
| return f""" |
| <style> |
| /* Reduce sidebar padding so controls sit right below the nav */ |
| [data-testid="stSidebar"] > div {{ |
| padding: 1.05rem 1.1rem 1.8rem 1.1rem !important; |
| }} |
| |
| /* Expander styling */ |
| .streamlit-expanderHeader {{ |
| background-color: {get_current_colors()['figure_background']}; |
| border: 2px solid {get_current_colors()['border_medium']}; |
| border-radius: 8px; |
| color: {get_current_colors()['text_primary']} !important; |
| font-weight: 600; |
| box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); |
| }} |
| |
| /* Generate button special styling */ |
| div[data-testid="stButton"] button {{ |
| background: linear-gradient(45deg, {get_current_colors()['generate_button_bg']}, {get_current_colors()['generate_button_hover']}) !important; |
| color: white !important; |
| border: none !important; |
| font-weight: 700 !important; |
| font-size: 1.1rem !important; |
| padding: 1rem !important; |
| box-shadow: 0 3px 15px rgba(34, 139, 34, 0.3) !important; |
| }} |
| |
| div[data-testid="stButton"] button:hover {{ |
| background: linear-gradient(45deg, {get_current_colors()['generate_button_hover']}, #7CFC00) !important; |
| transform: translateY(-3px) !important; |
| box-shadow: 0 5px 20px rgba(34, 139, 34, 0.4) !important; |
| color: white !important; |
| }} |
| |
| .quick-start {{ |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| }} |
| |
| .quick-step {{ |
| background: linear-gradient(135deg, {get_current_colors()['card_background']}, {get_current_colors()['figure_background']}); |
| border: 1px solid {get_current_colors()['border_medium']}; |
| border-radius: 14px; |
| padding: 1rem 1.25rem; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); |
| color: {get_current_colors()['text_primary']} !important; |
| }} |
| |
| .quick-step .step-index {{ |
| display: inline-block; |
| margin-bottom: 0.45rem; |
| font-size: 0.85rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| background: {get_current_colors()['text_secondary']}; |
| color: {get_current_colors()['background']} !important; |
| padding: 0.2rem 0.75rem; |
| border-radius: 999px; |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); |
| }} |
| |
| .sidebar-step-title {{ |
| font-size: 0.85rem; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| font-weight: 700; |
| margin: 1.1rem 0 0.5rem 0; |
| color: {get_current_colors()['text_secondary']} !important; |
| }} |
| |
| .tooltip-container {{ |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| background: {get_current_colors()['figure_background']}; |
| border: 1px solid {get_current_colors()['border_medium']}; |
| border-radius: 16px; |
| padding: 1rem; |
| box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); |
| margin-bottom: 1rem; |
| }} |
| |
| .tooltip-content {{ |
| background: {get_current_colors()['background']}; |
| border-radius: 12px; |
| padding: 0.75rem 1rem; |
| box-shadow: inset 0 0 0 1px {get_current_colors()['border_light']}; |
| display: flex; |
| flex-direction: column; |
| gap: 0.45rem; |
| }} |
| |
| .tooltip-content .color-legend {{ |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| color: {get_current_colors()['text_secondary']} !important; |
| }} |
| |
| .tooltip-content .color-box {{ |
| width: 14px; |
| height: 14px; |
| border-radius: 4px; |
| border: 1px solid {get_current_colors()['border_light']}; |
| }} |
| </style> |
| """ |
|
|
| def apply_base_styling(): |
| """Apply the base styling to the current Streamlit page.""" |
| if not _STREAMLIT_AVAILABLE: |
| return |
| st.markdown(get_base_css(), unsafe_allow_html=True) |
|
|
| def apply_home_page_styling(): |
| """Apply styling specific to the home page.""" |
| if not _STREAMLIT_AVAILABLE: |
| return |
| st.markdown(get_base_css(), unsafe_allow_html=True) |
| st.markdown(get_home_page_css(), unsafe_allow_html=True) |
|
|
| def apply_documentation_page_styling(): |
| """Apply styling specific to the documentation page.""" |
| if not _STREAMLIT_AVAILABLE: |
| return |
| st.markdown(get_base_css(), unsafe_allow_html=True) |
| st.markdown(get_documentation_page_css(), unsafe_allow_html=True) |
|
|
| def apply_tool_page_styling(): |
| """Apply styling specific to the analysis tool page.""" |
| if not _STREAMLIT_AVAILABLE: |
| return |
| st.markdown(get_base_css(), unsafe_allow_html=True) |
| st.markdown(get_tool_page_css(), unsafe_allow_html=True) |
|
|
