Add comprehensive styles for video streaming and chat interface
- Implement base styles for the application layout and components. - Define color variables for consistent theming. - Style the video player, chat section, and user interface elements. - Add responsive design adjustments for mobile devices. - Include animations for buttons and notifications for enhanced user experience.
This commit is contained in:
Vincent
parent
0dd0dbb834
commit
da1528c529
7 changed files with 3658 additions and 0 deletions
14
.vscode/launch.json
vendored
Normal file
14
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "php",
|
||||
"request": "launch",
|
||||
"name": "Launch PHP Program",
|
||||
"program": "${workspaceFolder}/index.php",
|
||||
"runtimeArgs": [
|
||||
"-dxdebug.start_with_request=yes"
|
||||
],
|
||||
"port": 9003
|
||||
}
|
||||
]
|
||||
}
|
||||
529
UI_UPDATE.MD
Normal file
529
UI_UPDATE.MD
Normal file
|
|
@ -0,0 +1,529 @@
|
|||
# UI Modernization Plan for Dodgers Stream Theater
|
||||
|
||||
## Overview
|
||||
This comprehensive plan focuses exclusively on UI modernization of the Dodgers streaming platform while maintaining all existing functionality. The modernization follows a systematic approach across 6 phases, transforming the current inline-style interface into a modern, maintainable, and visually appealing application.
|
||||
|
||||
---
|
||||
|
||||
## Important Info
|
||||
Always come back and update UI_UPDATE.MD once complete with task and task item. Add any needed notes and if additional tasks are needed for other tasks/sub-tasks/etc add them.
|
||||
|
||||
---
|
||||
|
||||
## **Phase 1: Structural Refactoring (UI Files Only)**
|
||||
*Goal: Separate inline styles and scripts into dedicated files while maintaining PHP backend logic*
|
||||
|
||||
### Sub-task 1.1: CSS Extraction and Modularization
|
||||
|
||||
#### 1.1.1: Inline Styles Extraction
|
||||
- [x] Identify all CSS rules within the `<style>` tag in index.php
|
||||
- [x] Copy all CSS content to temporary backup file
|
||||
- [x] Parse PHP variables used in CSS (if any) for dynamic styling
|
||||
- [x] Test that all current styles are preserved during extraction
|
||||
|
||||
#### 1.1.2: Styles.css Creation and Organization
|
||||
- [ ] Create new styles.css file in project root
|
||||
- [ ] Migrate all inline styles to styles.css maintaining exact formatting
|
||||
- [ ] Verify that PHP dynamic variables are handled correctly in external file
|
||||
- [ ] Test basic page load and styling after migration
|
||||
|
||||
#### 1.1.3: CSS Modularization Setup
|
||||
- [ ] Analyze current CSS structure and identify logical groupings
|
||||
- [ ] Separate reset/normalize styles into separate file
|
||||
- [ ] Group layout-related styles into layout.css
|
||||
- [ ] Group component-specific styles into components.css
|
||||
|
||||
#### 1.1.4: Variables.css Creation and Integration
|
||||
- [ ] Extract all CSS custom properties (--variable) into variables.css
|
||||
- [ ] Expand color palette with Dodgers-themed variables
|
||||
- [ ] Create typography scale variables (font sizes, line heights)
|
||||
- [ ] Establish breakpoint variables for responsive design
|
||||
|
||||
#### 1.1.5: CSS Architecture Implementation
|
||||
- [ ] Implement BEM naming convention throughout CSS
|
||||
- [ ] Establish CSS file import hierarchy
|
||||
- [ ] Create utility classes for common patterns
|
||||
- [ ] Implement mobile-first responsive foundation
|
||||
|
||||
### Sub-task 1.2: JavaScript Separation and Organization
|
||||
|
||||
#### 1.2.1: JavaScript Code Identification
|
||||
- [ ] Locate all JavaScript code within `<script>` tags in index.php
|
||||
- [ ] Identify JavaScript functions, event handlers, and global functions
|
||||
- [ ] Map dependencies between different JavaScript sections
|
||||
- [ ] Document any PHP- generated JavaScript content
|
||||
|
||||
#### 1.2.2: Core App.js Structure Creation
|
||||
- [ ] Create new app.js main file
|
||||
- [ ] Define application configuration object
|
||||
- [ ] Set up basic module loading structure
|
||||
- [ ] Implement global error handling and logging
|
||||
|
||||
#### 1.2.3: Video Player Module Extraction
|
||||
- [ ] Extract Video.js initialization code into video-player.js
|
||||
- [ ] Separate video control functions
|
||||
- [ ] Move stream status management logic
|
||||
- [ ] Maintain error handling for video playback
|
||||
|
||||
#### 1.2.4: Chat System Module Creation
|
||||
- [ ] Extract chat functionality into chat.js
|
||||
- [ ] Separate message handling and UI updates
|
||||
- [ ] Move user authentication and admin functions
|
||||
- [ ] Implement event delegation for chat interactions
|
||||
|
||||
#### 1.2.5: UI Controls Module Development
|
||||
- [ ] Extract UI toggle and control functions into ui-controls.js
|
||||
- [ ] Separate keyboard shortcuts implementation
|
||||
- [ ] Move notification and toast management
|
||||
- [ ] Create utility functions for DOM manipulation
|
||||
|
||||
#### 1.2.6: API Communication Module
|
||||
- [ ] Extract AJAX/Fetch calls into api.js
|
||||
- [ ] Create functions for heartbeat, message sending, and data fetching
|
||||
- [ ] Implement API error handling and retry logic
|
||||
- [ ] Separate WebSocket or polling mechanisms
|
||||
|
||||
### Sub-task 1.3: HTML Structure Refactoring
|
||||
|
||||
#### 1.3.1: Semantic HTML Analysis
|
||||
- [ ] Review current HTML structure and identify semantic improvements
|
||||
- [ ] Map current div structure to proper semantic elements
|
||||
- [ ] Ensure proper heading hierarchy (H1->H6)
|
||||
- [ ] Validate accessibility baseline with semantic markup
|
||||
|
||||
#### 1.3.2: BEM Class Implementation
|
||||
- [ ] Apply BEM (Block-Element-Modifier) naming convention
|
||||
- [ ] Create consistent CSS class naming throughout HTML
|
||||
- [ ] Group related elements with BEM blocks
|
||||
- [ ] Implement modifier classes for component variations
|
||||
|
||||
#### 1.3.3: Component-Based Structure
|
||||
- [ ] Identify reusable HTML component patterns
|
||||
- [ ] Structure HTML for future componentization
|
||||
- [ ] Create logical component boundaries
|
||||
- [ ] Implement consistent component API patterns
|
||||
|
||||
#### 1.3.4: Accessibility Enhancements
|
||||
- [ ] Add ARIA labels to all interactive elements
|
||||
- [ ] Implement proper role attributes for complex components
|
||||
- [ ] Ensure keyboard navigation support structure
|
||||
- [ ] Test semantic structure with screen readers
|
||||
|
||||
#### 1.3.5: Event Handler Removal
|
||||
- [ ] Remove all inline onclick/onchange handlers
|
||||
- [ ] Replace with data attributes for JS targeting
|
||||
- [ ] Implement proper event delegation setup
|
||||
- [ ] Test that all interactions still function correctly
|
||||
|
||||
### Sub-task 1.4: Asset Organization
|
||||
|
||||
#### 1.4.1: Directory Structure Creation
|
||||
- [ ] Create organized subdirectories for different asset types
|
||||
- [ ] Establish version control for asset management
|
||||
- [ ] Set up asset compilation strategy
|
||||
- [ ] Define cache-busting strategy for static files
|
||||
|
||||
#### 1.4.2: CSS Asset Management
|
||||
- [ ] Organize CSS files by component/functionality
|
||||
- [ ] Create import hierarchy and load order
|
||||
- [ ] Implement minification strategy
|
||||
- [ ] Set up development vs production builds
|
||||
|
||||
#### 1.4.3: JavaScript Asset Organization
|
||||
- [ ] Structure JavaScript modules in logical directories
|
||||
- [ ] Implement module loading mechanism
|
||||
- [ ] Create build process for bundling
|
||||
- [ ] Set up source maps for debugging
|
||||
|
||||
#### 1.4.4: Loading Strategy Implementation
|
||||
- [ ] Implement proper CSS and JS loading order
|
||||
- [ ] Add critical CSS inlining for performance
|
||||
- [ ] Create async/defer loading strategies
|
||||
- [ ] Test loading performance and FCP improvements
|
||||
|
||||
---
|
||||
|
||||
## **Phase 2: Visual Design Modernization**
|
||||
*Goal: Implement modern design principles with enhanced aesthetics*
|
||||
|
||||
### Sub-task 2.1: Enhanced Color System and Theming
|
||||
|
||||
#### 2.1.1: Color Palette Expansion
|
||||
- [ ] Analyze current Dodgers color usage
|
||||
- [ ] Create comprehensive color palette with variations
|
||||
- [ ] Implement opacity variants for different states
|
||||
- [ ] Test accessibility compliance with color combinations
|
||||
|
||||
#### 2.1.2: CSS Variables System
|
||||
- [ ] Define global color variables in variables.css
|
||||
- [ ] Implement theme-specific color overrides
|
||||
- [ ] Create semantic color names (primary, secondary, accent)
|
||||
- [ ] Set up dark/light mode foundations
|
||||
|
||||
#### 2.1.3: Gradient Implementation
|
||||
- [ ] Create subtle gradient backgrounds for headers
|
||||
- [ ] Implement button gradient styles
|
||||
- [ ] Add background gradients for visual interest
|
||||
- [ ] Ensure gradients meet accessibility requirements
|
||||
|
||||
#### 2.1.4: Color Token System
|
||||
- [ ] Establish consistent color usage patterns
|
||||
- [ ] Create color utility classes
|
||||
- [ ] Implement dynamic theming capabilities
|
||||
- [ ] Test cross-browser color rendering
|
||||
|
||||
#### 2.1.5: Accessibility Validation
|
||||
- [ ] Verify WCAG AA contrast ratios
|
||||
- [ ] Test colorblind accessibility modes
|
||||
- [ ] Implement color-independent design patterns
|
||||
- [ ] Document color usage guidelines
|
||||
|
||||
### Sub-task 2.2: Typography and Font System
|
||||
|
||||
#### 2.2.1: Font Stack Definition
|
||||
- [ ] Define preferred web fonts with fallbacks
|
||||
- [ ] Create font-loading strategy for performance
|
||||
- [ ] Implement adaptive font loading based on user preferences
|
||||
|
||||
#### 2.2.2: Typography Scale Creation
|
||||
- [ ] Establish modular typography scale (6-8 sizes)
|
||||
- [ ] Implement line height relationships
|
||||
- [ ] Create consistent letter spacing patterns
|
||||
|
||||
#### 2.2.3: Font Weight Variations
|
||||
- [ ] Implement font weight variations for hierarchy
|
||||
- [ ] Define semantic font weights (regular, bold, semi-bold)
|
||||
- [ ] Create consistent weight usage patterns
|
||||
|
||||
#### 2.2.4: Text Truncation Utilities
|
||||
- [ ] Implement ellipsis truncation for long text
|
||||
- [ ] Create multi-line truncation utilities
|
||||
- [ ] Add responsive text truncation
|
||||
|
||||
#### 2.2.5: Accessibility Features
|
||||
- [ ] Test font readability at small sizes
|
||||
- [ ] Implement user font scaling compatibility
|
||||
- [ ] Create high contrast font variations
|
||||
|
||||
### Sub-task 2.3: Shadow and Elevation System
|
||||
|
||||
#### 2.3.1: Elevation Scale Definition
|
||||
- [ ] Create 0-6 level elevation system
|
||||
- [ ] Define shadow properties for each level
|
||||
- [ ] Implement semantic elevation usage
|
||||
|
||||
#### 2.3.2: Component Shadow Implementation
|
||||
- [ ] Apply appropriate shadows to cards
|
||||
- [ ] Add elevation to floating elements
|
||||
- [ ] Create interactive shadow variations
|
||||
|
||||
#### 2.3.3: Visual Hierarchy Enhancement
|
||||
- [ ] Use elevation to create depth
|
||||
- [ ] Implement layered design principles
|
||||
- [ ] Test shadow performance on mobile devices
|
||||
|
||||
### Sub-task 2.4: Modern Icon System
|
||||
|
||||
#### 2.4.1: Icon Replacement Strategy
|
||||
- [ ] Identify current emoji usage
|
||||
- [ ] Replace with semantic SVG icons
|
||||
- [ ] Implement icon sprite system
|
||||
|
||||
#### 2.4.2: Icon Size Variants
|
||||
- [ ] Define icon size scale (xs-xl)
|
||||
- [ ] Create consistent icon sizing proportions
|
||||
- [ ] Implement responsive icon scaling
|
||||
|
||||
#### 2.4.3: Animated Icons
|
||||
- [ ] Create loading spinners and progress indicators
|
||||
- [ ] Implement micro-interaction animations
|
||||
- [ ] Add hover state animations for interactive icons
|
||||
|
||||
#### 2.4.4: Accessibility Implementation
|
||||
- [ ] Add screen reader labels for decorative icons
|
||||
- [ ] Implement focus indicators for icon buttons
|
||||
- [ ] Test keyboard navigation for icon controls
|
||||
|
||||
### Sub-task 2.5: Component Visual Polish
|
||||
|
||||
#### 2.5.1: Button Style Redesign
|
||||
- [ ] Create button component with multiple variants
|
||||
- [ ] Implement consistent button sizing and padding
|
||||
- [ ] Add button state variations (hover, active, disabled)
|
||||
|
||||
#### 2.5.2: Card Design Updates
|
||||
- [ ] Redesign card components with modern styling
|
||||
- [ ] Implement consistent card shadows and borders
|
||||
- [ ] Add card interaction states
|
||||
|
||||
#### 2.5.3: Form Element Updates
|
||||
- [ ] Enhance input field styling
|
||||
- [ ] Create consistent form element design
|
||||
- [ ] Implement form validation states
|
||||
|
||||
#### 2.5.4: Loading States
|
||||
- [ ] Implement skeleton loading patterns
|
||||
- [ ] Create smooth loading transitions
|
||||
- [ ] Add stateful component styling
|
||||
|
||||
---
|
||||
|
||||
## **Phase 3: Layout and Responsiveness Improvements**
|
||||
*Goal: Create fluid, adaptive layouts that work across all devices*
|
||||
|
||||
### Sub-task 3.1: Grid-Based Layout System
|
||||
|
||||
#### 3.1.1: CSS Grid Implementation
|
||||
- [ ] Analyze current flexbox usage
|
||||
- [ ] Identify CSS Grid opportunities
|
||||
- [ ] Implement grid-based layout foundation
|
||||
|
||||
#### 3.1.2: 12-Column System
|
||||
- [ ] Create responsive grid variation classes
|
||||
- [ ] Implement grid gap and spacing system
|
||||
- [ ] Add grid utility classes for common patterns
|
||||
|
||||
#### 3.1.3: Layout Utilities
|
||||
- [ ] Create container and wrapper utilities
|
||||
- [ ] Implement spacing and alignment helpers
|
||||
- [ ] Add responsive layout modifiers
|
||||
|
||||
### Sub-task 3.2: Advanced Breakpoint Management
|
||||
|
||||
#### 3.2.1: Breakpoint Definition
|
||||
- [ ] Establish 6 responsive breakpoints (xs to 2xl)
|
||||
- [ ] Create breakpoint mixin system
|
||||
- [ ] Implement breakpoint-based CSS variables
|
||||
|
||||
#### 3.2.2: Responsive Typography
|
||||
- [ ] Create fluid typography scaling
|
||||
- [ ] Implement responsive font sizing
|
||||
- [ ] Add breakpoint-specific text adjustments
|
||||
|
||||
#### 3.2.3: Component Breakpoint Overrides
|
||||
- [ ] Create component-specific responsive behavior
|
||||
- [ ] Implement container query support
|
||||
- [ ] Test layout at all breakpoints
|
||||
|
||||
### Sub-task 3.3: Mobile-First Redesign
|
||||
|
||||
#### 3.3.1: Mobile Layout Optimization
|
||||
- [ ] Redesign mobile interface prioritizing content
|
||||
- [ ] Implement touch-friendly navigation
|
||||
- [ ] Create mobile-specific component layouts
|
||||
|
||||
#### 3.3.2: Touch Interaction Optimization
|
||||
- [ ] Ensure 44px minimum touch targets
|
||||
- [ ] Implement swipe gesture support
|
||||
- [ ] Add mobile-specific interactive elements
|
||||
|
||||
#### 3.3.3: Mobile Navigation
|
||||
- [ ] Create bottom navigation pattern
|
||||
- [ ] Implement mobile chat controls
|
||||
- [ ] Add mobile-specific UI toggles
|
||||
|
||||
### Sub-task 3.4: Tablet and Desktop Optimizations
|
||||
|
||||
#### 3.4.1: Tablet Layouts
|
||||
- [ ] Design tablet-specific fullscreen layouts
|
||||
- [ ] Implement adaptive component sizing
|
||||
- [ ] Create tablet gesture support
|
||||
|
||||
#### 3.4.2: Desktop Enhancements
|
||||
- [ ] Optimize for large screen viewing
|
||||
- [ ] Create sidebar sizing options
|
||||
- [ ] Implement dashboard-style layouts
|
||||
|
||||
### Sub-task 3.5: Cross-Device Synchronization
|
||||
|
||||
#### 3.5.1: Adaptive Component Behavior
|
||||
- [ ] Ensure consistent scaling across devices
|
||||
- [ ] Implement responsive component states
|
||||
- [ ] Test touch vs mouse interaction patterns
|
||||
|
||||
---
|
||||
|
||||
## **Phase 4: Interactive Enhancements**
|
||||
*Goal: Add engaging micro-interactions and improved user experience*
|
||||
|
||||
### Sub-task 4.1: Animations and Transitions System
|
||||
|
||||
#### 4.1.1: Transition Library
|
||||
- [ ] Implement CSS transition utilities
|
||||
- [ ] Create consistent timing functions
|
||||
- [ ] Define transition duration constants
|
||||
|
||||
#### 4.1.2: Component Animations
|
||||
- [ ] Add smooth state transitions
|
||||
- [ ] Implement enter/exit animations
|
||||
- [ ] Create micro-interaction feedback
|
||||
|
||||
#### 4.1.3: Loading Animations
|
||||
- [ ] Implement spinner and progress indicators
|
||||
- [ ] Add skeleton loading states
|
||||
- [ ] Create engaging loading experiences
|
||||
|
||||
### Sub-task 4.2: Interactive States and Feedback
|
||||
|
||||
#### 4.2.1: State Implementation
|
||||
- [ ] Design comprehensive hover states
|
||||
- [ ] Implement focus indicators meeting WCAG standards
|
||||
- [ ] Add active and pressed state styling
|
||||
|
||||
#### 4.2.2: Form Validation
|
||||
- [ ] Implement visual form validation feedback
|
||||
- [ ] Add error state styling
|
||||
- [ ] Create success confirmation states
|
||||
|
||||
### Sub-task 4.3: Enhanced User Feedback Systems
|
||||
|
||||
#### 4.3.1: Notification Redesign
|
||||
- [ ] Redesign toast notification system
|
||||
- [ ] Implement notification variants
|
||||
- [ ] Add notification queue management
|
||||
|
||||
#### 4.3.2: Loading States
|
||||
- [ ] Implement loading indicators
|
||||
- [ ] Add progress bars for long operations
|
||||
- [ ] Create loading state hierarchies
|
||||
|
||||
### Sub-task 4.4: Gesture and Touch Interactions
|
||||
|
||||
#### 4.4.1: Mobile Gesture Support
|
||||
- [ ] Add swipe gestures for chat toggling
|
||||
- [ ] Implement pull-to-refresh functionality
|
||||
- [ ] Create touch-based video controls
|
||||
|
||||
### Sub-task 4.5: Accessibility Enhancements
|
||||
|
||||
#### 4.5.1: Keyboard Navigation
|
||||
- [ ] Ensure full keyboard accessibility
|
||||
- [ ] Implement proper tab order
|
||||
- [ ] Add focus management for modals
|
||||
|
||||
#### 4.5.2: Screen Reader Support
|
||||
- [ ] Implement ARIA live regions
|
||||
- [ ] Add proper ARIA attributes
|
||||
- [ ] Test dynamic content announcements
|
||||
|
||||
---
|
||||
|
||||
## **Phase 5: Performance and UX Optimization (UI-Focused)**
|
||||
*Goal: Streamline UI performance and enhance user experience*
|
||||
|
||||
### Sub-task 5.1: UI Rendering Performance
|
||||
|
||||
#### 5.1.1: CSS Optimization
|
||||
- [ ] Remove unused CSS rules
|
||||
- [ ] Optimize CSS selectors for faster matching
|
||||
- [ ] Implement hardware acceleration
|
||||
|
||||
#### 5.1.2: Animation Performance
|
||||
- [ ] Use transform and opacity for animations
|
||||
- [ ] Reduce layout thrashing
|
||||
- [ ] Implement virtual scrolling for chat
|
||||
|
||||
### Sub-task 5.2: Content Display Optimization
|
||||
|
||||
#### 5.2.1: Progressive Enhancement
|
||||
- [ ] Implement lazy loading strategies
|
||||
- [ ] Add content placeholders
|
||||
- [ ] Optimize text rendering properties
|
||||
|
||||
### Sub-task 5.3: Interactive Flow Improvements
|
||||
|
||||
#### 5.3.1: User Experience Streamlining
|
||||
- [ ] Improve onboarding flow
|
||||
- [ ] Add smart defaults
|
||||
- [ ] Implement contextual help
|
||||
|
||||
### Sub-task 5.4: Error Handling and Recovery UI
|
||||
|
||||
#### 5.4.1: Error State Design
|
||||
- [ ] Create comprehensive error states
|
||||
- [ ] Implement retry mechanisms
|
||||
- [ ] Add offline-first patterns
|
||||
|
||||
### Sub-task 5.5: Analytics and User Experience Tracking
|
||||
|
||||
#### 5.5.1: Usage Analytics
|
||||
- [ ] Implement interaction tracking
|
||||
- [ ] Add performance monitoring
|
||||
- [ ] Create A/B testing framework
|
||||
|
||||
---
|
||||
|
||||
## **Phase 6: Advanced UI Framework Integration**
|
||||
*Goal: Migrate to modern UI framework for scalability*
|
||||
|
||||
### Sub-task 6.1: Component System Architecture
|
||||
|
||||
#### 6.1.1: Component Library Design
|
||||
- [ ] Define component API patterns
|
||||
- [ ] Create variant system
|
||||
- [ ] Implement documentation
|
||||
|
||||
### Sub-task 6.2: State Management for UI
|
||||
|
||||
#### 6.2.1: Reactive State Implementation
|
||||
- [ ] Implement global state management
|
||||
- [ ] Add component-level state patterns
|
||||
- [ ] Create state persistence
|
||||
|
||||
### Sub-task 6.3: Build and Development Tools
|
||||
|
||||
#### 6.3.1: Modern Build Pipeline
|
||||
- [ ] Set up Hot Module Replacement
|
||||
- [ ] Add CSS preprocessing
|
||||
- [ ] Implement testing framework
|
||||
|
||||
### Sub-task 6.4: Framework Migration Strategy
|
||||
|
||||
#### 6.4.1: Phased Migration
|
||||
- [ ] Create migration plan
|
||||
- [ ] Implement feature flags
|
||||
- [ ] Ensure backward compatibility
|
||||
|
||||
### Sub-task 6.5: Quality Assurance and Testing
|
||||
|
||||
#### 6.5.1: Comprehensive Testing
|
||||
- [ ] Implement unit and integration tests
|
||||
- [ ] Add accessibility compliance testing
|
||||
- [ ] Create performance benchmarking
|
||||
|
||||
## Implementation Considerations
|
||||
|
||||
### Design Principles
|
||||
- Maintain Dodgers brand identity while modernizing aesthetics
|
||||
- Focus on user-centered design with clear visual hierarchy
|
||||
- Ensure maximum accessibility and inclusive design practices
|
||||
- Prioritize performance and responsive design
|
||||
|
||||
### Technical Requirements
|
||||
- Support modern browsers (Chrome 85+, Firefox 80+, Safari 14+, Edge 85+)
|
||||
- Ensure 60fps animations and smooth interactions
|
||||
- Maintain semantic HTML for SEO and accessibility
|
||||
- Implement progressive enhancement strategy
|
||||
|
||||
### Success Metrics
|
||||
- Improved user engagement and session duration
|
||||
- Reduced bounce rate through better UX
|
||||
- Higher accessibility compliance scores
|
||||
- Faster perceived load times through UI optimizations
|
||||
|
||||
### Phase Completion Checklist
|
||||
To mark a phase as complete:
|
||||
- [ ] All sub-tasks completed (100% of checkboxes checked)
|
||||
- [ ] Functionality testing across all devices and browsers
|
||||
- [ ] Accessibility validation (WCAG 2.1 AA compliance)
|
||||
- [ ] Performance benchmarks met (Lighthouse scores >85)
|
||||
- [ ] User acceptance testing passed
|
||||
- [ ] Documentation updated
|
||||
|
||||
## Next Steps
|
||||
1. Review this plan and prioritize phases based on business needs
|
||||
2. Create time estimates and resource allocation for each phase
|
||||
3. Set up development environment and tooling
|
||||
4. Begin with Phase 1.1 CSS extraction and modularization
|
||||
|
||||
This plan provides a complete roadmap for modernizing the Dodgers Stream Theater UI while ensuring no functionality is lost in the process.
|
||||
1
active_viewers.json
Normal file
1
active_viewers.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
[{"user_id":"997d0f","nickname":"Vinny","last_seen":1759104829,"is_admin":true}]
|
||||
1
chat_messages.json
Normal file
1
chat_messages.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
[{"id":"68a12bd4e920d","user_id":"57180a","nickname":"Vinny","message":"FUCK YOU","timestamp":1755392980,"time":"Aug 16, 21:09","is_admin":true},{"id":"68bf61279a772","user_id":"c06cb6","nickname":"ShahOkane","message":"hi","timestamp":1757372711,"time":"Sep 8, 19:05","is_admin":false},{"id":"68bf614053158","user_id":"8c3cd0","nickname":"Vinny","message":"\ud83d\udd95","timestamp":1757372736,"time":"Sep 8, 19:05","is_admin":false},{"id":"68bf6241a36c7","user_id":"8c3cd0","nickname":"Vinny","message":"my crown","timestamp":1757372993,"time":"Sep 8, 19:09","is_admin":true},{"id":"68bf89aa82635","user_id":"c06cb6","nickname":"ShahOkane","message":"lady boy","timestamp":1757383082,"time":"Sep 8, 21:58","is_admin":false}]
|
||||
BIN
placeholder.mp4
Normal file
BIN
placeholder.mp4
Normal file
Binary file not shown.
736
styles_backup_original.txt
Normal file
736
styles_backup_original.txt
Normal file
|
|
@ -0,0 +1,736 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dodgers-blue: #005A9C;
|
||||
--dodgers-dark: #003d6b;
|
||||
--dodgers-light: #1e7ec8;
|
||||
--dodgers-red: #EF3E42;
|
||||
--bg-dark: #0f1419;
|
||||
--bg-darker: #0a0d14;
|
||||
--bg-darkest: #050810;
|
||||
--admin-gold: #FFD700;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #b8c5d6;
|
||||
--text-muted: #8590a0;
|
||||
--border-color: #1a2332;
|
||||
--input-bg: #1a2332;
|
||||
--card-bg: #15202b;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: var(--bg-darkest);
|
||||
color: var(--text-primary);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theater-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-section {
|
||||
flex: 1;
|
||||
background: #000;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.video-section.expanded {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-header {
|
||||
background: linear-gradient(135deg, var(--dodgers-dark) 0%, var(--dodgers-blue) 100%);
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo::before {
|
||||
content: "⚾";
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.stream-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.viewer-count {
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.viewer-count::before {
|
||||
content: "👥";
|
||||
}
|
||||
|
||||
.stream-badge {
|
||||
background: var(--dodgers-red);
|
||||
color: white;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Ensure all header control buttons have identical dimensions */
|
||||
.header-controls > * {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quality-selector {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
/* Standardize select appearance to match buttons */
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.toggle-chat-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-chat-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.manual-refresh-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.manual-refresh-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#video-player {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-js {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
/* Override VideoJS fluid behavior to prevent overflow */
|
||||
.video-js.vjs-fluid {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure the actual video element is properly constrained */
|
||||
.video-js video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
}
|
||||
|
||||
.chat-section {
|
||||
width: 350px;
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -5px 0 20px rgba(0,0,0,0.5);
|
||||
transition: transform 0.3s ease;
|
||||
position: relative;
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.chat-section.collapsed {
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
background: linear-gradient(135deg, var(--dodgers-blue) 0%, var(--dodgers-light) 100%);
|
||||
padding: 16px 20px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-header-left::before {
|
||||
content: "💬";
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.admin-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-btn {
|
||||
background: rgba(255,215,0,0.3);
|
||||
border: 1px solid var(--admin-gold);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.admin-btn:hover {
|
||||
background: rgba(255,215,0,0.5);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: 12px 16px;
|
||||
background: var(--card-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.user-id-display {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.id-badge {
|
||||
background: var(--dodgers-blue);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.id-badge.admin {
|
||||
background: linear-gradient(135deg, var(--admin-gold), #FFB700);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nickname-input input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: var(--input-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nickname-input input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nickname-input input:focus {
|
||||
outline: none;
|
||||
border-color: var(--dodgers-blue);
|
||||
box-shadow: 0 0 0 3px rgba(0,90,156,0.2);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
background: var(--bg-dark);
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 14px;
|
||||
animation: slideIn 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message:hover .message-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.message-nickname {
|
||||
font-weight: 600;
|
||||
color: var(--dodgers-blue);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.message-nickname.admin {
|
||||
color: var(--admin-gold);
|
||||
text-shadow: 0 0 2px rgba(255,215,0,0.5);
|
||||
}
|
||||
|
||||
.message-id {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
background: var(--border-color);
|
||||
padding: 1px 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.delete-btn, .ban-btn {
|
||||
background: rgba(239,62,66,0.9);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ban-btn {
|
||||
background: rgba(255,152,0,0.9);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
padding: 8px 12px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
border-left: 3px solid transparent;
|
||||
color: var(--text-primary);
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.own-message .message-nickname {
|
||||
color: var(--dodgers-red);
|
||||
}
|
||||
|
||||
.own-message .message-text {
|
||||
background: rgba(0,90,156,0.2);
|
||||
border-left-color: var(--dodgers-blue);
|
||||
}
|
||||
|
||||
.admin-message .message-text {
|
||||
background: rgba(255,215,0,0.15);
|
||||
border-left-color: var(--admin-gold);
|
||||
}
|
||||
|
||||
.system-message {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
margin: 10px 0;
|
||||
padding: 8px;
|
||||
background: rgba(0,90,156,0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
padding: 0 16px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.typing-indicator.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
animation: blink 1.4s infinite;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 12px 16px;
|
||||
background: var(--card-bg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-input input {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 24px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: var(--input-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chat-input input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.chat-input input:focus {
|
||||
outline: none;
|
||||
border-color: var(--dodgers-blue);
|
||||
box-shadow: 0 0 0 3px rgba(0,90,156,0.2);
|
||||
}
|
||||
|
||||
.chat-input button {
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, var(--dodgers-blue), var(--dodgers-light));
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2px 8px rgba(0,90,156,0.3);
|
||||
}
|
||||
|
||||
.chat-input button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,90,156,0.4);
|
||||
}
|
||||
|
||||
.chat-input button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.empty-chat {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 40px 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
padding: 6px;
|
||||
background: var(--bg-darker);
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #4caf50;
|
||||
animation: blink 2s infinite;
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: #f44336;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: var(--dodgers-red);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
animation: bounce 0.5s;
|
||||
}
|
||||
|
||||
.notification-badge.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating action buttons */
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--dodgers-blue), var(--dodgers-light));
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.fab.secondary {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
background: rgba(0,90,156,0.9);
|
||||
}
|
||||
|
||||
/* Toast notifications */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 24px;
|
||||
font-size: 14px;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chat-section {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.video-header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.stream-stats {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.quality-selector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-track {
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb {
|
||||
background: var(--dodgers-blue);
|
||||
border-radius: 3px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue