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

Enhance Streamlit UI with advanced table header styling and gold color scheme

Browse files

Extend the existing tab styling to include table header customization:
- Add gold background and white text for table headers
- Implement hover effects for table headers
- Maintain consistent design language with tab styling
- Improve overall visual hierarchy and interactivity

Files changed (1) hide show
  1. app.py +22 -6
app.py CHANGED
@@ -73,17 +73,18 @@ sim_all_hold = pd.DataFrame(columns=['Player', 'Team', 'Book', 'Prop Type', 'Pro
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;
@@ -91,15 +92,30 @@ st.markdown("""
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):
 
73
 
74
  st.markdown("""
75
  <style>
76
+ /* Tab styling */
77
  .stTabs [data-baseweb="tab-list"] {
78
+ gap: 8px;
79
  padding: 4px;
80
  }
81
 
82
  .stTabs [data-baseweb="tab"] {
83
  height: 50px;
84
  white-space: pre-wrap;
85
+ background-color: #FFD700;
86
+ color: white;
87
+ border-radius: 10px;
88
  gap: 1px;
89
  padding: 10px 20px;
90
  font-weight: bold;
 
92
  }
93
 
94
  .stTabs [aria-selected="true"] {
95
+ background-color: #DAA520;
96
  color: white;
97
  }
98
 
 
99
  .stTabs [data-baseweb="tab"]:hover {
100
  background-color: #DAA520;
101
  cursor: pointer;
102
  }
103
+
104
+ /* Table header styling */
105
+ th[role="columnheader"] {
106
+ background-color: #FFD700 !important;
107
+ color: white !important;
108
+ font-weight: bold !important;
109
+ border-radius: 10px !important;
110
+ padding: 10px 20px !important;
111
+ text-align: center !important;
112
+ }
113
+
114
+ /* Hover effect for table headers */
115
+ th[role="columnheader"]:hover {
116
+ background-color: #DAA520 !important;
117
+ cursor: pointer;
118
+ }
119
  </style>""", unsafe_allow_html=True)
120
 
121
  def calculate_poisson(row):