/* 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 */ }