Restore default styling for full-only unrated symbols

Author: peritus

CSS-CUSTOMIZATION.md

@@ -2,11 +2,14 @@
 
 This guide explains how to customize the appearance of interactive rating symbols using CSS snippets in Obsidian.
 
-## ⚠️ Important: No Default Visual Styling
+## ⚠️ Important: Minimal Default Styling
 
-**The Interactive Ratings plugin provides NO default visual styling for rating symbols.** All CSS classes are neutral theming hooks that allow complete customization freedom. Without custom CSS, all symbols will appear identical using your theme's default text styling.
+**The Interactive Ratings plugin applies minimal default styling to maintain functionality:**
 
-**To get started quickly, try the "Basic Styling" example below** to add visual distinction between filled, half, and empty symbols.
+- **Regular rating systems** (★☆): No default styling - symbols are visually distinct by character
+- **Full-only rating systems** (★★★★★): Essential default styling preserved - without it, ratings would be unreadable
+
+**To get started with regular rating systems, try the "Basic Styling" example below** to add visual distinction between filled, half, and empty symbols.
 
 ## New Feature: Distinct CSS Classes for Selected/Unselected Symbols
 
@@ -21,16 +24,18 @@ The Interactive Ratings plugin provides distinct CSS classes for selected (fille
 - `.interactive-rating-symbol--normal` - Legacy class (no longer used for filled/empty distinction)
 
 #### For Full-Only Rating Systems (symbols that don't have empty variants):
-- `.interactive-rating-symbol--rated` - Applied to symbols within the rating
-- `.interactive-rating-symbol--unrated` - Applied to symbols beyond the rating (grayed out)
+- `.interactive-rating-symbol--rated` - Applied to symbols within the rating (has default styling)
+- `.interactive-rating-symbol--unrated` - Applied to symbols beyond the rating (has default styling)
+
+**Important:** Full-only systems have essential default styling preserved because without it, all symbols would look identical and ratings would be unreadable. You can still override these defaults with your own CSS.
 
 ### Example CSS Snippets
 
 Here are some examples of how you can customize the appearance of rating symbols:
 
 #### 🚀 Quick Start: Basic Visual Distinction
 ```css
-/* Add this snippet to get started with basic visual distinction */
+/* Add this snippet to get started with basic visual distinction for regular rating systems */
 .interactive-rating-symbol--rated {
   opacity: 1;
   color: inherit;
@@ -44,10 +49,7 @@ Here are some examples of how you can customize the appearance of rating symbols
   opacity: 0.4;
 }
 
-.interactive-rating-symbol--unrated {
-  opacity: 0.3;
-  filter: grayscale(100%);
-}
+/* Note: .interactive-rating-symbol--unrated (full-only systems) already has default styling */
 ```
 
 #### 2. Make Empty Symbols More Subtle
@@ -156,14 +158,19 @@ Here are some examples of how you can customize the appearance of rating symbols
 
 ### Default Styling
 
-**The plugin applies NO default visual styling to symbol states.** All symbol state classes are provided as neutral theming hooks:
+**The plugin applies minimal default styling to maintain functionality:**
 
+**Regular Rating Systems** (★☆ - with distinct filled/empty symbols):
 - **Filled symbols** (`.interactive-rating-symbol--rated`): No default styling - add your own
 - **Half symbols** (`.interactive-rating-symbol--half`): No default styling - add your own  
 - **Empty symbols** (`.interactive-rating-symbol--empty`): No default styling - add your own
-- **Unrated symbols** (`.interactive-rating-symbol--unrated`): No default styling - add your own
 
-**Accessibility styling is preserved:** High contrast mode will automatically apply enhanced contrast styling only when users have high contrast preferences enabled. This ensures accessibility while maintaining theme neutrality in normal viewing modes.
+**Full-Only Rating Systems** (★★★★★ - single symbol type):
+- **Rated symbols** (`.interactive-rating-symbol--rated`): Default styling preserved (opacity: 1, no filter)
+- **Unrated symbols** (`.interactive-rating-symbol--unrated`): Default styling preserved (opacity: 0.5, grayscale filter)
+- **Reason**: Without default styling, full-only systems would be unreadable (all symbols would look identical)
+
+**Accessibility styling is preserved:** High contrast mode will automatically apply enhanced contrast styling only when users have high contrast preferences enabled.
 
 ### Accessibility Considerations
 

styles.css

@@ -159,20 +159,22 @@
  * Full-only unrated symbols (★ beyond rating in full-only systems)
  * Applied to: symbols beyond the current rating in systems with only one symbol type
  * Use for: custom styling of inactive symbols in full-only systems
- * Example: opacity: 0.3; filter: grayscale(100%);
+ * Default styling: Essential for functionality - without this, full-only ratings would be unreadable
  */
 .interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--unrated {
-  /* Add your custom styles here for full-only unrated symbols */
+  opacity: 0.5 !important;
+  filter: grayscale(100%) !important;
 }
 
 /* 
  * Full-only rated symbols (★ within rating in full-only systems)  
  * Applied to: symbols within the current rating in systems with only one symbol type
  * Use for: custom styling of active symbols in full-only systems
- * Example: opacity: 1; filter: none;
+ * Default styling: Ensures rated symbols remain fully visible
  */
 .interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--rated {
-  /* Add your custom styles here for full-only rated symbols */
+  opacity: 1 !important;
+  filter: none !important;
 }
 
 /* Support for display symbol count different from pattern length */