Open
Description
Need to extract and organize CSS styles from app.py into a dedicated stylesheet to improve code maintainability and separation of concerns.
Current State:
- CSS styles are currently embedded in app.py using st.markdown()
- Styles include VWC brand colors, sidebar styling, code block formatting, and chat input styling
- Styles are mixed with application logic
Required Changes:
-
Create new directory structure:
-
Extract existing styles:
- Move all CSS from st.markdown() into main.css
- Organize styles into logical sections (layout, components, utilities)
- Create variables.css for brand colors and theming
- Document styling conventions and usage
- Create style loading utility:
- Implement function to read CSS files
- Add error handling for file operations
- Cache CSS content to avoid repeated file reads
- Update app.py:
- Remove inline styles
- Import and use new style loading utility
- Update style application method
Technical Notes:
- Ensure CSS specificity matches current implementation
- Maintain existing Streamlit element targeting
- Keep current functionality of dynamic styling
- Consider adding CSS minification
Acceptance Criteria:
- All styles successfully moved to dedicated CSS files
- No visual regressions in the application
- Styles properly applied through new loading mechanism
- Documentation added for style organization
- No duplicate style definitions
- All Streamlit-specific selectors preserved
Testing:
- Verify styles load correctly
- Check all components retain current styling
- Test style loading performance
- Validate error handling
Related Files:
- app.py
- (new) ui/styles/main.css
- (new) ui/styles/variables.css
- (new) ui/utils/style_loader.py
Metadata
Metadata
Assignees
Labels
No labels