- Replaced all default visual styling (opacity, filters) with comprehensive theming hook comments
- Updated main symbol state classes with detailed documentation for their purpose and usage
- Updated full-only symbol system styling with sophisticated placeholder comments
- Preserved accessibility styling for high contrast mode only
- Updated CSS-CUSTOMIZATION.md to reflect no default styling approach
- Added prominent warning about no default styling and provided quick start example
- Updated example numbering and added basic visual distinction example
- Enhanced accessibility section to clarify it's the only built-in styling
The plugin now provides pure theming hooks without imposing any visual choices, while maintaining comprehensive accessibility support and detailed documentation for users and developers.
- Updated applySymbolState.ts to support 'half' state for half-filled symbols
- Modified renderRating.ts to apply 'half' state to half symbols (instead of 'rated')
- Updated previewRating.ts to use distinct states during hover preview for consistency
- Added CSS styling for .interactive-rating-symbol--half class with 80% opacity
- Added high contrast accessibility support for half symbols (60% opacity with enhanced contrast)
- Enhanced CSS-CUSTOMIZATION.md with comprehensive examples for half symbols including:
* Basic color styling for filled/half/empty symbols
* Gradient effects for half symbols
* Enhanced hover effects for all three states
* Different styling examples for various symbol types
* Updated default styling documentation
* Enhanced accessibility considerations
* Updated migration guide
This completes the full CSS customization system with distinct classes for:
- .interactive-rating-symbol--rated (filled symbols)
- .interactive-rating-symbol--half (half symbols)
- .interactive-rating-symbol--empty (empty symbols)
- .interactive-rating-symbol--unrated (full-only grayed symbols)
- Updated applySymbolState.ts to support 'empty' state for unselected symbols
- Modified renderRating.ts to apply 'rated' state to filled symbols and 'empty' state to empty symbols
- Added CSS styling for .interactive-rating-symbol--empty class with 50% opacity
- Added high contrast accessibility support for empty symbols
- Created comprehensive CSS-CUSTOMIZATION.md guide with examples
This enables users to customize the appearance of filled vs empty symbols using CSS snippets, addressing the original request for better visual distinction between selected and non-selected symbols.
- Removed all inline style assignments from RatingWidget.ts
- Added semantic CSS classes for symbol states (rated, unrated, normal)
- Implemented clean CSS class management with applySymbolState() method
- Updated styles.css with proper semantic class definitions
Remove all reading mode support - edit mode only plugin
- Deleted markdown-postprocessor.ts (reading mode widgets)
- Deleted inline-rating-widget.ts (reading mode custom elements)
- Updated plugin to only register editor extension
- Cleaned CSS to only include editor widget styles
- Updated README to clarify edit-mode-only functionality
- Bundle size reduced from 24.1kb to 16.1kb
- Enhanced editor widget with click position detection for half vs full symbols
- Added hover preview with proper half-symbol rendering
- Expanded symbol patterns with more half-symbol definitions
- Improved CSS styling with visual feedback for half-symbol interactions
- Added comprehensive test file with examples
move all the static css (not the one calculated at runtime) to the styles.css file
```git-revs
77478de (Base revision)
5b3d66e Remove static CSS from ratings-overlay.ts and only keep dynamic styles
142a142 Remove static CSS from symbol span elements
c72fd23 Update the overlay CSS with static styles that were previously in JS
HEAD Update symbol styles with static styles that were previously in JS
```
codemcp-id: 52-refactor-move-static-css-to-styles-css-file
