diff options
| -rw-r--r-- | views/mods/mod_reviews/rating.phtml | 4 | ||||
| -rw-r--r-- | views/mods/mod_reviews/wpsg_reviews.css | 3 |
2 files changed, 4 insertions, 3 deletions
diff --git a/views/mods/mod_reviews/rating.phtml b/views/mods/mod_reviews/rating.phtml index 5aa665b..63379ff 100644 --- a/views/mods/mod_reviews/rating.phtml +++ b/views/mods/mod_reviews/rating.phtml @@ -2,7 +2,7 @@ /** * Sterne mit Schnitt und Anzahl (Modul Produktbewertungen) * - * Die Sternzeichen sind aria-hidden, den Wert sagt der Text. Modus full: Text sichtbar; compact: sichtbar „4,5 (12)“, + * Die Sternzeichen sind aria-hidden, den Wert sagt der Text. Leere Sterne sind Umrisse, volle Sterne liegen darüber. Modus full: Text sichtbar; compact: sichtbar „4,5 (12)“, * der ganze Text für Screenreader; single: nur Sterne, der Text für Screenreader. * @version 4.6.1 */ @@ -10,4 +10,4 @@ $r = $this->view['wpsg_mod_reviews']['rating']; ?> -<p class="wpsg-rating<?php if ($r['class'] !== '') echo ' '.esc_attr($r['class']); ?>"><span class="wpsg-rating__stars" aria-hidden="true"><span class="wpsg-rating__empty">★★★★★</span><span class="wpsg-rating__fill" style="width:<?php echo intval($r['percent']); ?>%">★★★★★</span></span><?php if ($r['mode'] === 'full') { ?> <span class="wpsg-rating__text"><?php echo esc_html($r['text']); ?></span><?php } else if ($r['mode'] === 'compact') { ?> <span class="wpsg-rating__text" aria-hidden="true"><?php echo esc_html($r['short']); ?></span><span class="screen-reader-text"><?php echo esc_html($r['text']); ?></span><?php } else { ?><span class="screen-reader-text"><?php echo esc_html($r['text']); ?></span><?php } ?></p> +<p class="wpsg-rating<?php if ($r['class'] !== '') echo ' '.esc_attr($r['class']); ?>"><span class="wpsg-rating__stars" aria-hidden="true"><span class="wpsg-rating__empty">☆☆☆☆☆</span><span class="wpsg-rating__fill" style="width:<?php echo intval($r['percent']); ?>%">★★★★★</span></span><?php if ($r['mode'] === 'full') { ?> <span class="wpsg-rating__text"><?php echo esc_html($r['text']); ?></span><?php } else if ($r['mode'] === 'compact') { ?> <span class="wpsg-rating__text" aria-hidden="true"><?php echo esc_html($r['short']); ?></span><span class="screen-reader-text"><?php echo esc_html($r['text']); ?></span><?php } else { ?><span class="screen-reader-text"><?php echo esc_html($r['text']); ?></span><?php } ?></p> diff --git a/views/mods/mod_reviews/wpsg_reviews.css b/views/mods/mod_reviews/wpsg_reviews.css index 91d67a1..eeced31 100644 --- a/views/mods/mod_reviews/wpsg_reviews.css +++ b/views/mods/mod_reviews/wpsg_reviews.css @@ -6,7 +6,8 @@ .wpsg-rating { display:flex; flex-wrap:wrap; align-items:center; gap:0.15em 0.5em; margin:0.25em 0 0.5em; font-size:var(--wpsg-font-size-small, 0.875em); line-height:1.4; } .wpsg-rating__stars { position:relative; display:inline-block; flex:none; line-height:1; font-size:1.15em; letter-spacing:0.05em; white-space:nowrap; } -.wpsg-rating__empty { color:var(--wpsg-color-rating-empty, rgba(127, 127, 127, 0.45)); } +/* Umriss in der Textfarbe, 60 %: hell und dunkel über 3:1 zum Grund; voll und leer unterscheiden sich auch in der Form */ +.wpsg-rating__empty { color:currentColor; color:var(--wpsg-color-rating-empty, color-mix(in srgb, currentColor 60%, transparent)); } .wpsg-rating__fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--wpsg-color-rating, #b07800); } .wpsg-rating .screen-reader-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); clip-path:inset(50%); white-space:nowrap; border:0; } |