Spaces:
Sleeping
Sleeping
:root { | |
--primary-color: #F2C12E; | |
--background-color: #FFFFFF; | |
--secondary-bg-color: #F0F2F6; | |
--text-color: #1E1E1E; | |
--accent-color: #024959; | |
--success-color: #28A745; | |
--error-color: #DC3545; | |
} | |
body { | |
background-color: var(--background-color); | |
color: var(--text-color); | |
font-family: 'Roboto', sans-serif; | |
} | |
.stApp { | |
max-width: 1200px; | |
margin: 0 auto; | |
} | |
.main-header { | |
font-size: 2.5rem; | |
color: var(--accent-color); | |
text-align: center; | |
margin-bottom: 2rem; | |
padding: 1rem; | |
background-color: var(--primary-color); | |
border-radius: 10px; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
} | |
.sub-header { | |
font-size: 1.8rem; | |
color: var(--accent-color); | |
margin-top: 2rem; | |
margin-bottom: 1rem; | |
padding: 0.5rem; | |
border-bottom: 2px solid var(--primary-color); | |
} | |
.info-box { | |
background-color: var(--secondary-bg-color); | |
color: var(--text-color); | |
padding: 1rem; | |
border-radius: 5px; | |
margin-bottom: 1rem; | |
border-left: 5px solid var(--primary-color); | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.success-box { | |
background-color: #E6F4EA; | |
color: var(--success-color); | |
padding: 1rem; | |
border-radius: 5px; | |
margin-bottom: 1rem; | |
border-left: 5px solid var(--success-color); | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.error-box { | |
background-color: #FCE8E6; | |
color: var(--error-color); | |
padding: 1rem; | |
border-radius: 5px; | |
margin-bottom: 1rem; | |
border-left: 5px solid var(--error-color); | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.stButton>button { | |
background-color: var(--primary-color); | |
color: var(--accent-color); | |
border: none; | |
border-radius: 4px; | |
padding: 0.5rem 1rem; | |
font-weight: bold; | |
transition: all 0.3s ease; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.stButton>button:hover { | |
background-color: var(--accent-color); | |
color: var(--primary-color); | |
transform: translateY(-2px); | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
} | |
.stSelectbox [data-baseweb="select"] { | |
background-color: var(--background-color); | |
border-color: var(--primary-color); | |
border-radius: 4px; | |
color: var(--text-color); | |
} | |
.stCheckbox { | |
color: var(--text-color); | |
} | |
.stFileUploader { | |
background-color: var(--secondary-bg-color); | |
border-color: var(--primary-color); | |
border-radius: 4px; | |
padding: 1rem; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
/* Dashboard-like appearance */ | |
.stApp > header { | |
background-color: var(--accent-color); | |
padding: 1rem; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.stApp > header .decoration { | |
display: none; | |
} | |
.stApp > header #MainMenu { | |
color: var(--primary-color); | |
} | |
.stApp > footer { | |
background-color: var(--secondary-bg-color); | |
border-top: 1px solid var(--primary-color); | |
padding: 1rem; | |
text-align: center; | |
font-size: 0.8rem; | |
color: var(--text-color); | |
} | |
/* Additional dashboard-like elements */ | |
.metric-card { | |
background-color: var(--background-color); | |
border-radius: 8px; | |
padding: 1rem; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
margin-bottom: 1rem; | |
} | |
.metric-card h3 { | |
color: var(--accent-color); | |
font-size: 1.2rem; | |
margin-bottom: 0.5rem; | |
} | |
.metric-card p { | |
font-size: 2rem; | |
font-weight: bold; | |
color: var(--primary-color); | |
margin: 0; | |
} | |