Spaces:
Sleeping
Sleeping
File size: 2,542 Bytes
ef78361 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | """CSS Styles for Streamlit Dashboard.
Uses ChainShift Brand Colors (2026 Design System).
Primary: Electric Indigo (#5041FF)
Accent: Neo Aqua (#00D5B5)
"""
# ============================================================================
# Brand Colors (synced with app/core/brand.py)
# ============================================================================
INDIGO_700 = "#5041FF" # Primary
INDIGO_800 = "#3E32CC" # Primary Dark
INDIGO_100 = "#E5E2FF" # Primary Light BG
AQUA_600 = "#00D5B5" # Accent
AQUA_100 = "#B8FFF6" # Accent Light BG
POSITIVE = "#10B981" # Green
NEGATIVE = "#EF4444" # Red
NEUTRAL = "#6B7280" # Gray
WARNING = "#F59E0B" # Amber
DASHBOARD_CSS = f"""
<style>
.insight-card {{
background: linear-gradient(135deg, {INDIGO_800} 0%, {INDIGO_700} 100%);
padding: 20px;
border-radius: 12px;
color: white;
margin-bottom: 20px;
}}
.metric-positive {{ color: {POSITIVE}; font-weight: bold; }}
.metric-negative {{ color: {NEGATIVE}; font-weight: bold; }}
.metric-neutral {{ color: {NEUTRAL}; }}
.highlight-box {{
background: {AQUA_100};
border-left: 4px solid {AQUA_600};
padding: 15px;
margin: 10px 0;
border-radius: 0 8px 8px 0;
}}
.warning-box {{
background: #FEF2F2;
border-left: 4px solid {NEGATIVE};
padding: 15px;
margin: 10px 0;
border-radius: 0 8px 8px 0;
}}
.info-box {{
background: {INDIGO_100};
border-left: 4px solid {INDIGO_700};
padding: 15px;
margin: 10px 0;
border-radius: 0 8px 8px 0;
}}
.big-number {{
font-size: 48px;
font-weight: bold;
line-height: 1;
color: {INDIGO_700};
}}
.filter-section {{
background: #F8FAFC;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
}}
/* Primary button style */
.stButton > button {{
background-color: {INDIGO_700};
color: white;
border: none;
}}
.stButton > button:hover {{
background-color: {INDIGO_800};
}}
</style>
"""
# Tier color mapping for nudge candidates
TIER_BORDER_COLORS = {
"HIGH": NEGATIVE,
"MEDIUM": WARNING,
"LOW": POSITIVE,
}
# Chart colors for Streamlit charts (plotly, altair)
CHART_COLORS = [
INDIGO_700, # Primary
AQUA_600, # Accent
"#9585FF", # Indigo 500
"#3DF1E7", # Aqua 400
"#3E32CC", # Indigo 800
"#06A68D", # Aqua 700
]
|