peritus_obsidian-interactive-ratings/styles.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;
}

/* Base symbol styling */
.interactive-rating-symbol {
  position: relative;
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Active/rated symbol state */
.interactive-rating-symbol--rated {
  opacity: 1;
  filter: none;
}

/* Inactive/unrated symbol state (for full-only symbols) */
.interactive-rating-symbol--unrated {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* Normal symbol state (for regular symbols) */
.interactive-rating-symbol--normal {
  opacity: 1;
  filter: none;
}

/* Empty symbol state (for unselected symbols in regular rating systems) */
.interactive-rating-symbol--empty {
  opacity: 0.5;
}

/* Empty symbol state (for unselected symbols in regular rating systems) */
.interactive-rating-symbol--empty {
  opacity: 0.5;
}

/* 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 - using class-based approach */
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--unrated {
  opacity: 0.5 !important;
  filter: grayscale(100%) !important;
}

/* Ensure full-only rated symbols are fully visible - using class-based approach */
.interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--rated {
  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 using class-based approach */
  .interactive-rating-editor-widget[data-full-only="true"] .interactive-rating-symbol--unrated {
    opacity: 0.3 !important;
    filter: grayscale(100%) contrast(0.7) !important;
  }
  
  /* Enhanced contrast for empty symbols in regular rating systems */
  .interactive-rating-symbol--empty {
    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,
  .interactive-rating-symbol {
    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 */
}