Apply custom CSS to the Streamlit app.
()
| 2 | |
| 3 | |
| 4 | def apply_styles(): |
| 5 | """Apply custom CSS to the Streamlit app.""" |
| 6 | st.markdown(""" |
| 7 | <style> |
| 8 | /* Adjust the gap between tabs */ |
| 9 | .stTabs [data-baseweb="tab-list"] { |
| 10 | gap: 2px; |
| 11 | display: flex; |
| 12 | flex-wrap: wrap; /* Allow wrapping when space is limited */ |
| 13 | justify-content: space-between; /* Distribute tabs evenly */ |
| 14 | } |
| 15 | /* Style each individual tab */ |
| 16 | .stTabs [data-baseweb="tab"] { |
| 17 | height: 50px; |
| 18 | background-color: #F0F2F6; /* Light gray background */ |
| 19 | border-radius: 8px 8px 0 0; /* Rounded top corners */ |
| 20 | padding: 12px 24px; /* More padding for better spacing */ |
| 21 | font-size: 16px; /* Slightly larger text */ |
| 22 | font-weight: 600; /* Make the text semi-bold */ |
| 23 | text-align: center; |
| 24 | transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */ |
| 25 | cursor: pointer; |
| 26 | flex: 1; /* Make tabs grow equally */ |
| 27 | min-width: 0; /* Allow tabs to shrink if needed */ |
| 28 | margin: 0 1px; /* Small margin between tabs */ |
| 29 | } |
| 30 | /* Active tab styles */ |
| 31 | .stTabs [aria-selected="true"] { |
| 32 | background-color: #4CAF50; /* Green background for active tab */ |
| 33 | color: white; /* White text for active tab */ |
| 34 | transform: translateY(-3px); /* Slight "lift" effect for active tab */ |
| 35 | } |
| 36 | /* Hover effect for tabs */ |
| 37 | .stTabs [data-baseweb="tab"]:hover { |
| 38 | background-color: #E8E8E8; /* Light hover effect */ |
| 39 | transform: translateY(-2px); /* Lift effect on hover */ |
| 40 | color: black; |
| 41 | } |
| 42 | /* Style for the tab list container */ |
| 43 | .stTabs [data-baseweb="tab-list"] { |
| 44 | display: flex; |
| 45 | justify-content: space-evenly; /* Even spacing between tabs */ |
| 46 | margin-bottom: 20px; /* Space between tabs and content */ |
| 47 | width: 100%; /* Ensure full width */ |
| 48 | } |
| 49 | /* Adjust the tab content area */ |
| 50 | .stTabs [data-baseweb="tab-panel"] { |
| 51 | padding: 20px; |
| 52 | background-color: #fafafa; /* Light background for tab content */ |
| 53 | border-radius: 8px; /* Rounded corners for content */ |
| 54 | box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow around content */ |
| 55 | } |
| 56 | /* Text input style */ |
| 57 | .stTextInput > div > input { |
| 58 | background-color: #f4f4f9; /* Light background */ |
| 59 | border: 2px solid #0073e6; /* Blue border */ |
| 60 | border-radius: 12px; /* Rounded corners */ |
| 61 | font-size: 16px; /* Font size */ |