mirror of
https://github.com/peritus/obsidian-interactive-ratings.git
synced 2026-07-22 12:20:31 +00:00
1218efd3aa
- Added fullOnly flag to SymbolSet interface - Added 10 new full-only symbols (🎥, 🏆, ⭐, 💎, 🔥, ⚡, 🎯, 🚀, 💰, 🎖️) - Visual: rated symbols full color, unrated grey 50% opacity - Disk: only rated symbols saved (e.g., 🎥🎥🎥 (3/5)) - No 0 ratings, no half ratings for full-only symbols - Updated CSS, tests, and documentation Refactor full-only symbols: auto-detect, show denominator count, require rating text - Remove fullOnly flag, auto-detect with isFullOnlySymbol() - Visual: show denominator count (numerator color, rest grey) - Require rating text for denominator info - Disk: save only rated symbols - Updated docs and tests Clarify and verify full-only symbol visual behavior - Added debug test files to verify expected behavior - Confirmed visual display always shows denominator count symbols - Rated symbols in full color, unrated in grey 50% opacity - Implementation already correct: displaySymbolCount uses denominator - Added debug logging capability for troubleshooting
152 lines
No EOL
4.7 KiB
CSS
152 lines
No EOL
4.7 KiB
CSS
/* Interactive Ratings Plugin - Editor Mode Only */
|
|
|
|
/* Editor Widget Styles - For Editing Mode Only */
|
|
.interactive-rating-editor-widget {
|
|
display: inline;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.interactive-rating-editor-widget:hover {
|
|
/* No visual changes on hover */
|
|
}
|
|
|
|
/* Editor widget symbols container */
|
|
.interactive-rating-editor-widget .interactive-rating-symbols {
|
|
display: inline;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Editor widget rating text */
|
|
.interactive-rating-editor-widget .interactive-rating-text {
|
|
display: inline;
|
|
cursor: default;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Individual symbol spans in editor widget with half-symbol support */
|
|
.interactive-rating-editor-widget .interactive-rating-symbols span {
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
transition: opacity 0.2s ease, filter 0.2s ease;
|
|
}
|
|
|
|
/* Enhanced hover effect for symbols with half-symbol visual feedback */
|
|
.interactive-rating-editor-widget .interactive-rating-symbols span:hover {
|
|
/* No visual changes on hover */
|
|
}
|
|
|
|
/* Half-symbol visual feedback - subtle indicator for symbols that support halves */
|
|
.interactive-rating-editor-widget[data-supports-half="true"] .interactive-rating-symbols span {
|
|
/* No visual changes */
|
|
}
|
|
|
|
.interactive-rating-editor-widget[data-supports-half="true"] .interactive-rating-symbols span:hover {
|
|
/* No visual changes */
|
|
}
|
|
|
|
/* Visual hint for half-symbol positioning */
|
|
.interactive-rating-editor-widget[data-supports-half="true"] .interactive-rating-symbols span::before {
|
|
/* No visual elements */
|
|
}
|
|
|
|
/* Show the half-symbol divider on hover when half symbols are supported */
|
|
.interactive-rating-editor-widget[data-supports-half="true"]:hover .interactive-rating-symbols span::before {
|
|
/* No visual elements */
|
|
}
|
|
|
|
/* Additional visual enhancement for half-symbol interactions */
|
|
.interactive-rating-editor-widget[data-supports-half="true"] .interactive-rating-symbols span:hover::after {
|
|
/* No visual elements */
|
|
}
|
|
|
|
/* Full-only symbol styles - auto-detected symbols that use grayed-out effect */
|
|
.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 */
|
|
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbols span[style*="opacity: 0.5"] {
|
|
opacity: 0.5 !important;
|
|
filter: grayscale(100%) !important;
|
|
}
|
|
|
|
/* Ensure full-only rated symbols are fully visible */
|
|
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbols span[style*="opacity: 1"] {
|
|
opacity: 1 !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
/* Support for display symbol count different from pattern length */
|
|
.interactive-rating-editor-widget[data-display-symbol-count] .interactive-rating-symbols {
|
|
/* Styles for symbols with extended display count */
|
|
}
|
|
|
|
/* Mobile/touch enhancements for editor */
|
|
@media (max-width: 768px) {
|
|
.interactive-rating-editor-widget {
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
/* High contrast accessibility for editor */
|
|
@media (prefers-contrast: high) {
|
|
.interactive-rating-editor-widget:hover {
|
|
/* No visual changes */
|
|
}
|
|
|
|
/* Enhanced visibility for half-symbol indicators in high contrast */
|
|
.interactive-rating-editor-widget[data-supports-half="true"] .interactive-rating-symbols span::before {
|
|
/* No visual elements */
|
|
}
|
|
|
|
.interactive-rating-editor-widget[data-supports-half="true"]:hover .interactive-rating-symbols span::before {
|
|
/* No visual elements */
|
|
}
|
|
|
|
/* Enhanced contrast for full-only symbols */
|
|
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbols span[style*="opacity: 0.5"] {
|
|
opacity: 0.3 !important;
|
|
filter: grayscale(100%) contrast(0.7) !important;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion accessibility */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.interactive-rating-editor-widget,
|
|
.interactive-rating-editor-widget .interactive-rating-symbols span,
|
|
.interactive-rating-editor-widget .interactive-rating-symbols span::before,
|
|
.interactive-rating-editor-widget .interactive-rating-symbols span::after {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Animation for rating transitions */
|
|
.interactive-rating-editor-widget .interactive-rating-symbols {
|
|
/* No transitions */
|
|
}
|
|
|
|
.interactive-rating-editor-widget .interactive-rating-text {
|
|
/* No transitions */
|
|
}
|
|
|
|
/* Smooth symbol transitions during preview */
|
|
.interactive-rating-editor-widget .interactive-rating-symbols span {
|
|
/* Transitions defined above */
|
|
} |