redesign: UI Work
This commit is contained in:
@@ -0,0 +1,179 @@
|
||||
# Steam Collections Page Design Update Summary
|
||||
|
||||
## Overview
|
||||
Updated all UI screens (except mod manager) to match Steam Collections page design with modern dark blue theme, improved typography, and Steam-inspired visual elements.
|
||||
|
||||
## Color Scheme Changes
|
||||
|
||||
### New Steam Collections Inspired Colors
|
||||
```python
|
||||
COLORS = {
|
||||
'bg_primary': '#1b2838', # Steam dark blue background
|
||||
'bg_secondary': '#2a475e', # Steam medium blue background
|
||||
'bg_tertiary': '#1e2328', # Steam darker background for cards
|
||||
'bg_card': '#16202d', # Steam card background
|
||||
'bg_hover': '#2a475e', # Steam hover state
|
||||
'text_primary': '#c7d5e0', # Steam primary text (light blue-gray)
|
||||
'text_highlight': '#66c0f4', # Steam blue highlight color
|
||||
'text_body': '#8f98a0', # Steam body text (muted blue-gray)
|
||||
'text_secondary': '#acb2b8', # Steam secondary text
|
||||
'text_muted': '#67707b', # Steam muted text
|
||||
'accent_green': '#5ba32b', # Steam success green
|
||||
'accent_red': '#cd5c5c', # Steam error red
|
||||
'accent_yellow': '#ffa500', # Steam warning orange
|
||||
'accent_blue': '#66c0f4', # Steam signature blue
|
||||
'border_light': '#3c4043', # Steam light border
|
||||
'border_dark': '#0e141b', # Steam dark border
|
||||
}
|
||||
```
|
||||
|
||||
### Previous Colors (Replaced)
|
||||
- Old yellow-green highlights (#f5f5b5) → Steam blue (#66c0f4)
|
||||
- Old gray backgrounds (#424041) → Steam dark blue (#1b2838)
|
||||
- Old bright colors → Muted Steam palette
|
||||
|
||||
## GUI Changes (steam_workshop_gui.py)
|
||||
|
||||
### 1. Main Application Window
|
||||
- **Background**: Updated to Steam dark blue (#1b2838)
|
||||
- **Card System**: Implemented Steam-style cards with rounded corners (12px radius)
|
||||
- **Typography**: Enhanced with Steam blue highlights for titles
|
||||
- **Padding**: Increased from 10px to 15px for better spacing
|
||||
|
||||
### 2. Input Section Redesign
|
||||
- **Card-based Layout**: Each section now uses Steam-style cards
|
||||
- RimWorld Installation card
|
||||
- Workshop Content card
|
||||
- Advanced Configuration card
|
||||
- Steam Workshop Collections card
|
||||
- **Input Fields**:
|
||||
- Dark backgrounds (#1e2328)
|
||||
- Steam blue focus borders (#66c0f4)
|
||||
- Improved padding and spacing
|
||||
- **Buttons**:
|
||||
- Primary button: Steam blue (#66c0f4) with dark text
|
||||
- Secondary button: Steam green (#5ba32b)
|
||||
- Disabled state: Muted colors
|
||||
|
||||
### 3. Output Section (Logs)
|
||||
- **Card Container**: Logs now in Steam-style card
|
||||
- **Color-coded Messages**:
|
||||
- Success: Steam green
|
||||
- Error: Steam red
|
||||
- Warning: Steam orange
|
||||
- Info: Steam blue
|
||||
- **Timestamps**: Added with muted color
|
||||
- **Background**: Dark Steam theme (#1e2328)
|
||||
|
||||
### 4. Loading Screen Updates
|
||||
- **Card Backgrounds**: Updated to Steam styling with subtle borders
|
||||
- **Corner Radius**: Reduced from 20px to 12px for modern look
|
||||
- **Colors**: All text and UI elements use Steam palette
|
||||
- **Error Cards**: Steam red accents for error states
|
||||
|
||||
### 5. Button Styling
|
||||
- **Enable State**: Steam blue primary, Steam green secondary
|
||||
- **Disable State**: Muted Steam colors
|
||||
- **Hover Effects**: Lighter Steam blue on hover
|
||||
- **Cursor**: Hand cursor for better UX
|
||||
|
||||
## TUI Changes (progression_tui.py)
|
||||
|
||||
### 1. Color Scheme
|
||||
- Updated all TUI_COLORS to match GUI Steam palette
|
||||
- Consistent blue theme throughout terminal interface
|
||||
|
||||
### 2. Header Styling
|
||||
- **Border**: Steam blue double border
|
||||
- **Title**: Added "PROGRESSION LOADER" title to panel
|
||||
- **ASCII Art**: Highlighted with Steam blue
|
||||
|
||||
### 3. Menu System
|
||||
- **Table Styling**: Rounded borders with Steam blue accents
|
||||
- **Status Indicators**:
|
||||
- Valid: ✓ with Steam green
|
||||
- Invalid: ⚠ with Steam yellow
|
||||
- Ready: ✓ Ready with Steam green
|
||||
- Disabled: ⚠ Disabled with muted colors
|
||||
|
||||
### 4. Configuration Display
|
||||
- **Path Display**: Added icons and Steam blue labels
|
||||
- **Panel Styling**: Rounded borders with Steam theme
|
||||
- **Status Colors**: Consistent with GUI
|
||||
|
||||
## Font and Styling (font_and_colors_update.py)
|
||||
|
||||
### 1. New Utility Functions
|
||||
- `apply_steam_styling()`: Returns Steam-inspired style dictionaries
|
||||
- `get_steam_button_colors()`: Provides button color schemes by type
|
||||
- Updated color constants to match Steam theme
|
||||
|
||||
### 2. Button Color Schemes
|
||||
- **Default**: Steam secondary background
|
||||
- **Primary**: Steam blue with dark text
|
||||
- **Success**: Steam green
|
||||
- **Warning**: Steam orange
|
||||
- **Danger**: Steam red
|
||||
|
||||
## Visual Improvements
|
||||
|
||||
### 1. Card System
|
||||
- **Rounded Corners**: 12px radius for modern look
|
||||
- **Subtle Borders**: Light Steam borders (#3c4043)
|
||||
- **Inner Highlights**: Very subtle Steam blue inner glow
|
||||
- **Proper Spacing**: Consistent 10-15px padding
|
||||
|
||||
### 2. Typography Hierarchy
|
||||
- **Titles**: Steam blue (#66c0f4) with bold weight
|
||||
- **Labels**: Steam secondary text (#acb2b8)
|
||||
- **Body Text**: Steam body color (#8f98a0)
|
||||
- **Muted Text**: Steam muted (#67707b)
|
||||
|
||||
### 3. Interactive Elements
|
||||
- **Focus States**: Steam blue borders on input fields
|
||||
- **Hover Effects**: Lighter Steam blue on buttons
|
||||
- **Status Indicators**: Color-coded with Steam palette
|
||||
- **Blinking Animation**: Steam blue/muted for invalid states
|
||||
|
||||
## Consistency Improvements
|
||||
|
||||
### 1. Cross-Platform
|
||||
- GUI and TUI now use matching color schemes
|
||||
- Consistent terminology and styling
|
||||
- Same visual hierarchy in both interfaces
|
||||
|
||||
### 2. Error Handling
|
||||
- Consistent error colors (Steam red)
|
||||
- Warning colors (Steam orange)
|
||||
- Success colors (Steam green)
|
||||
- Info colors (Steam blue)
|
||||
|
||||
### 3. Accessibility
|
||||
- Better contrast ratios with Steam's tested palette
|
||||
- Consistent focus indicators
|
||||
- Clear visual hierarchy
|
||||
|
||||
## Files Modified
|
||||
|
||||
1. **steam_workshop_gui.py** - Main GUI application
|
||||
2. **progression_tui.py** - Terminal user interface
|
||||
3. **font_and_colors_update.py** - Color and styling utilities
|
||||
4. **update_checker.py** - Update dialog styling
|
||||
|
||||
## Testing
|
||||
|
||||
- ✅ Syntax validation passed for all Python files
|
||||
- ✅ Color scheme consistency verified
|
||||
- ✅ Both GUI and TUI updated per requirements
|
||||
- ✅ Steam Collections design patterns implemented
|
||||
|
||||
## Result
|
||||
|
||||
The application now features a cohesive Steam Collections inspired design with:
|
||||
- Modern dark blue theme matching Steam's visual identity
|
||||
- Improved card-based layouts for better organization
|
||||
- Consistent typography and color usage
|
||||
- Enhanced user experience with better visual hierarchy
|
||||
- Professional appearance matching Steam's design standards
|
||||
|
||||
All screens except the mod manager have been updated to match the Steam Collections page design as requested.
|
||||
Reference in New Issue
Block a user