Spaces:
Sleeping
Sleeping
File size: 3,105 Bytes
1d8c2e0 |
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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
"""
Custom CSS styling
"""
import streamlit as st
def apply_custom_css():
"""Apply custom CSS styling to the Streamlit app with dark mode support"""
st.markdown("""
<style>
/* Clean typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Inter', sans-serif;
}
/* Main header - Light & Dark */
.main-header {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.subtitle {
font-size: 1rem;
font-weight: 400;
margin-bottom: 2rem;
}
/* Clean buttons - Adapt to theme */
.stButton > button {
border-radius: 8px;
font-weight: 500;
transition: all 0.2s;
}
.stButton > button:hover {
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59,130,246,0.15);
transform: translateY(-1px);
}
.stButton > button:active {
transform: translateY(0);
}
/* Primary button */
button[kind="primary"] {
background: #3b82f6 !important;
color: white !important;
border: none !important;
}
button[kind="primary"]:hover {
background: #2563eb !important;
}
/* Metrics */
[data-testid="stMetricValue"] {
font-size: 2rem;
font-weight: 600;
}
/* Section headers - Light mode */
[data-theme="light"] .section-header {
font-size: 1.25rem;
font-weight: 600;
color: #1a1a1a;
margin: 1.5rem 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e5e7eb;
}
/* Section headers - Dark mode */
[data-theme="dark"] .section-header {
font-size: 1.25rem;
font-weight: 600;
color: #f3f4f6;
margin: 1.5rem 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid #374151;
}
/* Sidebar - Light mode */
[data-theme="light"] [data-testid="stSidebar"] {
background: #fafafa;
border-right: 1px solid #e5e7eb;
}
/* Sidebar - Dark mode */
[data-theme="dark"] [data-testid="stSidebar"] {
background: #1f2937;
border-right: 1px solid #374151;
}
/* Info boxes */
.stAlert {
border-radius: 8px;
border-left: 3px solid;
}
/* Feedback block - Light mode */
.feedback-block {
padding: 1.25rem;
border-radius: 8px;
border-left: 3px solid #10b981;
}
[data-theme="light"] .feedback-block {
background: linear-gradient(to bottom right, #ecfdf5, #f0fdf4);
border: 1px solid #d1fae5;
color: #064e3b;
}
/* Feedback block - Dark mode */
[data-theme="dark"] .feedback-block {
background: linear-gradient(to bottom right, #064e3b, #065f46);
border: 1px solid #065f46;
color: #d1fae5;
}
/* Center text style */
.center-text {
text-align: center;
padding: 10px;
font-weight: bold;
}
</style>
""", unsafe_allow_html=True)
|