billerickson/be-comment-rating

A lean and AMP-compatible star rating field for WordPress comments

be-comment-rating's Issues

Stars don't look aligned in a row

hi,

I installed this but I could not see the stars in a row,
have deactivated temporarily may be the CSS needs a correction.

Thanks

start inline-block fix

Hello
i find the problem with start inline-block and i also fix it .
can u edit it for all bro
that is the css file after edit :

be-comment-rating {
--star-size: 1; /* use CSS variables to calculate dependent dimensions later /
display: inline-flex;
padding: 0; / to prevent flicker when mousing over padding /
border: none; / to prevent flicker when mousing over border /
unicode-bidi: bidi-override; direction: rtl; / for CSS-only style change on hover /
text-align: left; / revert the RTL direction /
user-select: none; / disable mouse/touch selection /
font-size: 3em; / fallback - IE doesn't support CSS variables /
font-size: calc(var(--star-size) * 1em); / because var(--star-size)em would be too good to be true /
cursor: pointer;
/ disable touch feedback on cursor: pointer - http://stackoverflow.com/q/25704650/1269037 /
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
margin-bottom: 1em;
}
/ the stars /
.be-comment-rating > label {
display: inline-block;
position: relative;
margin: 0;
width: 1.1em; / magic number to overlap the radio buttons on top of the stars */
width: calc(var(--star-size) / 1 * 1.1em);
}
.be-comment-rating > *:hover,
.be-comment-rating > :hover ~ label,
.be-comment-rating:not(:hover) > input:checked ~ label {
color: transparent; / reveal the contour/white star from the HTML markup /
cursor: inherit; / avoid a cursor transition from arrow/pointer to text selection */
}
.be-comment-rating > *:hover:before,
.be-comment-rating > :hover ~ label:before,
.be-comment-rating:not(:hover) > input:checked ~ label:before {
content: "★";
position: absolute;
left: 0;
color: black;
}
.be-comment-rating > input {
position: relative;
transform: scale(3); / make the radio buttons big; they don't inherit font-size /
transform: scale(var(--star-size));
/ the magic numbers below correlate with the font-size /
top: -0.5em; / margin-top doesn't work /
top: calc(var(--star-size) / 6 * -1em);
margin-left: -2.5em; / overlap the radio buttons exactly under the stars /
margin-left: calc(var(--star-size) / 6 * -5em);
z-index: 2; / bring the button above the stars so it captures touches/clicks /
opacity: 0; / comment to see where the radio buttons are /
font-size: initial; / reset to default */

}

I add that line only display: inline-flex;
Screen shot

start dosent show

Hello
after i asked the last issue :
#3
i installed the plugin and activated it and i added the filters in my functions.php
still my comment field without the starts .

can yo explain more please ?

How to add?

Hello!!
How can I add it to my WordPress site while it's not zip files?
Sorry but I never add similar plugins and I'm a beginner with AMP !!