James McCool commited on
Commit
493585c
·
1 Parent(s): a03d7b9

Enhance Streamlit tab styling with gold color scheme and interactive design

Browse files

Refine tab appearance by introducing a gold color palette, improved spacing, and hover effects. The update includes:
- Gold background for tabs
- Increased tab spacing
- Rounded tab edges
- Hover and selection state styling
- Improved visual hierarchy and interactivity

Files changed (1) hide show
  1. app.py +21 -13
app.py CHANGED
@@ -73,25 +73,33 @@ sim_all_hold = pd.DataFrame(columns=['Player', 'Team', 'Book', 'Prop Type', 'Pro
73
 
74
  st.markdown("""
75
  <style>
76
-
77
- .stTabs [data-baseweb="tab-list"] {
78
- gap: 2px;
79
  }
80
 
81
- .stTabs [data-baseweb="tab"] {
82
- height: 50px;
83
  white-space: pre-wrap;
84
- background-color: #F0F2F6;
85
- border-radius: 4px 4px 0px 0px;
86
- gap: 1px;
87
- padding-top: 10px;
88
- padding-bottom: 10px;
 
 
89
  }
90
 
91
- .stTabs [aria-selected="true"] {
92
- background-color: #FFFFFF;
93
- }
 
94
 
 
 
 
 
 
95
  </style>""", unsafe_allow_html=True)
96
 
97
  def calculate_poisson(row):
 
73
 
74
  st.markdown("""
75
  <style>
76
+ .stTabs [data-baseweb="tab-list"] {
77
+ gap: 8px; /* Increased spacing between tabs */
78
+ padding: 4px;
79
  }
80
 
81
+ .stTabs [data-baseweb="tab"] {
82
+ height: 50px;
83
  white-space: pre-wrap;
84
+ background-color: #FFD700; /* Gold background */
85
+ color: white; /* White text */
86
+ border-radius: 10px; /* Rounded edges */
87
+ gap: 1px;
88
+ padding: 10px 20px;
89
+ font-weight: bold;
90
+ transition: all 0.3s ease;
91
  }
92
 
93
+ .stTabs [aria-selected="true"] {
94
+ background-color: #DAA520; /* Darker gold when selected */
95
+ color: white;
96
+ }
97
 
98
+ /* Hover effect */
99
+ .stTabs [data-baseweb="tab"]:hover {
100
+ background-color: #DAA520;
101
+ cursor: pointer;
102
+ }
103
  </style>""", unsafe_allow_html=True)
104
 
105
  def calculate_poisson(row):