mirror of
https://github.com/peritus/obsidian-interactive-ratings.git
synced 2026-07-22 05:43:17 +00:00
Replace default visual styles with sophisticated theming placeholder comments
- 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.
This commit is contained in:
Filip Noetzel
parent
9b21e5e6bd
commit
ebcb212610
2 changed files with 113 additions and 33 deletions
|
|
@ -2,9 +2,15 @@
|
|||
|
||||
This guide explains how to customize the appearance of interactive rating symbols using CSS snippets in Obsidian.
|
||||
|
||||
## ⚠️ Important: No Default Visual 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.
|
||||
|
||||
**To get started quickly, 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
|
||||
|
||||
As of this update, the Interactive Ratings plugin now provides distinct CSS classes for selected (filled) and unselected (empty) symbols, making it easy to customize their appearance.
|
||||
The Interactive Ratings plugin provides distinct CSS classes for selected (filled), half-filled, and unselected (empty) symbols, making it easy to customize their appearance.
|
||||
|
||||
### Available CSS Classes
|
||||
|
||||
|
|
@ -22,14 +28,36 @@ As of this update, the Interactive Ratings plugin now provides distinct CSS clas
|
|||
|
||||
Here are some examples of how you can customize the appearance of rating symbols:
|
||||
|
||||
#### 1. Make Empty Symbols More Subtle
|
||||
#### 🚀 Quick Start: Basic Visual Distinction
|
||||
```css
|
||||
/* Add this snippet to get started with basic visual distinction */
|
||||
.interactive-rating-symbol--rated {
|
||||
opacity: 1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.interactive-rating-symbol--half {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.interactive-rating-symbol--empty {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.interactive-rating-symbol--unrated {
|
||||
opacity: 0.3;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. Make Empty Symbols More Subtle
|
||||
```css
|
||||
.interactive-rating-symbol--empty {
|
||||
opacity: 0.3;
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. Add Color to Filled, Half, and Empty Symbols
|
||||
#### 3. Add Color to Filled, Half, and Empty Symbols
|
||||
```css
|
||||
.interactive-rating-symbol--rated {
|
||||
color: #FFD700; /* Gold color for filled stars */
|
||||
|
|
@ -44,7 +72,7 @@ Here are some examples of how you can customize the appearance of rating symbols
|
|||
}
|
||||
```
|
||||
|
||||
#### 3. Create Gradient Effect for Half Symbols
|
||||
#### 4. Create Gradient Effect for Half Symbols
|
||||
```css
|
||||
.interactive-rating-symbol--rated {
|
||||
color: #FFD700;
|
||||
|
|
@ -62,7 +90,7 @@ Here are some examples of how you can customize the appearance of rating symbols
|
|||
}
|
||||
```
|
||||
|
||||
#### 4. Add Hover Effects
|
||||
#### 5. Add Hover Effects
|
||||
```css
|
||||
.interactive-rating-symbol--empty:hover {
|
||||
opacity: 0.7;
|
||||
|
|
@ -81,7 +109,7 @@ Here are some examples of how you can customize the appearance of rating symbols
|
|||
}
|
||||
```
|
||||
|
||||
#### 5. Different Styling for Different Symbol Types
|
||||
#### 6. Different Styling for Different Symbol Types
|
||||
```css
|
||||
/* For star ratings */
|
||||
.interactive-rating-symbol--rated:contains("★") {
|
||||
|
|
@ -102,7 +130,7 @@ Here are some examples of how you can customize the appearance of rating symbols
|
|||
}
|
||||
```
|
||||
|
||||
#### 6. Add Drop Shadow to Filled and Half Symbols
|
||||
#### 7. Add Drop Shadow to Filled and Half Symbols
|
||||
```css
|
||||
.interactive-rating-symbol--rated {
|
||||
text-shadow: 0 0 3px rgba(255, 215, 0, 0.6);
|
||||
|
|
@ -128,15 +156,20 @@ Here are some examples of how you can customize the appearance of rating symbols
|
|||
|
||||
### Default Styling
|
||||
|
||||
By default, the plugin applies:
|
||||
- **Filled symbols** (`.interactive-rating-symbol--rated`): Full opacity, no filters
|
||||
- **Half symbols** (`.interactive-rating-symbol--half`): 80% opacity
|
||||
- **Empty symbols** (`.interactive-rating-symbol--empty`): 50% opacity
|
||||
- **High contrast mode**: Empty symbols get 30% opacity with grayscale filter, half symbols get 60% opacity with enhanced contrast for better accessibility
|
||||
**The plugin applies NO default visual styling to symbol states.** All symbol state classes are provided as neutral theming hooks:
|
||||
|
||||
- **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.
|
||||
|
||||
### Accessibility Considerations
|
||||
|
||||
The plugin includes automatic high contrast support. When users have high contrast mode enabled, empty and half symbols will automatically receive enhanced contrast styling. You can override this by providing your own high contrast styles:
|
||||
**The plugin includes automatic high contrast support as the only built-in styling.** When users have high contrast mode enabled, empty and half symbols will automatically receive enhanced contrast styling for accessibility compliance. This accessibility styling is preserved even though no default visual styling is applied in normal viewing modes.
|
||||
|
||||
You can override the accessibility styling by providing your own high contrast styles:
|
||||
|
||||
```css
|
||||
@media (prefers-contrast: high) {
|
||||
|
|
|
|||
87
styles.css
87
styles.css
|
|
@ -46,32 +46,62 @@
|
|||
transition: opacity 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
/* Active/rated symbol state */
|
||||
/*
|
||||
* THEMING HOOKS - Symbol State Classes
|
||||
* ===================================
|
||||
* The following CSS classes are provided as theming hooks for customizing
|
||||
* the appearance of rating symbols. No default visual styling is applied
|
||||
* to maintain theme neutrality. Add your own styles to customize appearance.
|
||||
*
|
||||
* For comprehensive styling examples and documentation, see CSS-CUSTOMIZATION.md
|
||||
*/
|
||||
|
||||
/*
|
||||
* Filled/Active symbol state (★ in regular systems, active ★ in full-only systems)
|
||||
* Applied to: symbols representing the filled portion of a rating
|
||||
* Use for: styling fully selected symbols (e.g., color, opacity, effects)
|
||||
*/
|
||||
.interactive-rating-symbol--rated {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
/* Add your custom styles here */
|
||||
}
|
||||
|
||||
/* Inactive/unrated symbol state (for full-only symbols) */
|
||||
/*
|
||||
* Unrated symbol state (★ beyond rating in full-only systems)
|
||||
* Applied to: symbols in full-only systems that are beyond the current rating
|
||||
* Use for: styling inactive symbols in systems that only have one symbol type
|
||||
* Note: This is different from 'empty' - these are the same symbol but inactive
|
||||
*/
|
||||
.interactive-rating-symbol--unrated {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(100%);
|
||||
/* Add your custom styles here */
|
||||
}
|
||||
|
||||
/* Normal symbol state (for regular symbols) */
|
||||
/*
|
||||
* Normal symbol state (legacy compatibility)
|
||||
* Applied to: symbols in legacy mode (deprecated)
|
||||
* Note: This class is maintained for backward compatibility only
|
||||
*/
|
||||
.interactive-rating-symbol--normal {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
/* Add your custom styles here */
|
||||
}
|
||||
|
||||
/* Empty symbol state (for unselected symbols in regular rating systems) */
|
||||
/*
|
||||
* Empty symbol state (☆ in regular rating systems)
|
||||
* Applied to: empty/outline symbols representing unselected portions of rating
|
||||
* Use for: styling empty symbols in systems with distinct filled/empty symbols
|
||||
* Note: This is different from 'unrated' - these are different symbol characters
|
||||
*/
|
||||
.interactive-rating-symbol--empty {
|
||||
opacity: 0.5;
|
||||
/* Add your custom styles here */
|
||||
}
|
||||
|
||||
/* Half symbol state (for half-filled symbols in regular rating systems) */
|
||||
/*
|
||||
* Half symbol state (☆★ or similar in regular rating systems)
|
||||
* Applied to: half-filled symbols representing partial ratings
|
||||
* Use for: styling half-symbols (e.g., gradients, special colors, opacity)
|
||||
* Common styling: gradients to show half-fill effect
|
||||
*/
|
||||
.interactive-rating-symbol--half {
|
||||
opacity: 0.8;
|
||||
/* Add your custom styles here */
|
||||
}
|
||||
|
||||
/* Individual symbol spans in editor widget with half-symbol support */
|
||||
|
|
@ -111,21 +141,38 @@
|
|||
/* No visual elements */
|
||||
}
|
||||
|
||||
/* Full-only symbol styles - auto-detected symbols that use grayed-out effect */
|
||||
/*
|
||||
* FULL-ONLY SYMBOL SYSTEM THEMING HOOKS
|
||||
* =====================================
|
||||
* The following selectors target symbols in full-only rating systems specifically.
|
||||
* These provide more granular control when you want different styling for symbols
|
||||
* in full-only systems (which only have one symbol type) vs regular systems.
|
||||
* No default styling is applied - add your own styles as needed.
|
||||
*/
|
||||
|
||||
/* Full-only symbol styles - structural transitions only */
|
||||
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbols span {
|
||||
transition: opacity 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
/* Ensure full-only unrated symbols are properly grayed out - using class-based approach */
|
||||
/*
|
||||
* 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%);
|
||||
*/
|
||||
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--unrated {
|
||||
opacity: 0.5 !important;
|
||||
filter: grayscale(100%) !important;
|
||||
/* Add your custom styles here for full-only unrated symbols */
|
||||
}
|
||||
|
||||
/* Ensure full-only rated symbols are fully visible - using class-based approach */
|
||||
/*
|
||||
* 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;
|
||||
*/
|
||||
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--rated {
|
||||
opacity: 1 !important;
|
||||
filter: none !important;
|
||||
/* Add your custom styles here for full-only rated symbols */
|
||||
}
|
||||
|
||||
/* Support for display symbol count different from pattern length */
|
||||
|
|
|
|||
Loading…
Reference in a new issue