Spaces:
Runtime error
Runtime error
| :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; | |
| } | |