Use more native html elements
This commit is contained in:
@@ -81,21 +81,34 @@ h1 {
|
||||
|
||||
#rating {
|
||||
color: color-mix(in oklab, var(--text-color) 80%, black);
|
||||
}
|
||||
|
||||
#rating::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
color: transparent;
|
||||
width: 5lh;
|
||||
height: 1lh;
|
||||
vertical-align: bottom;
|
||||
margin-inline: .5ch;
|
||||
mask-image: url("stars.svg");
|
||||
-webkit-mask-image: url("stars.svg");
|
||||
mask-size: 100% 100%;
|
||||
mask-size: contain;
|
||||
mask-mode: alpha;
|
||||
--rating-percent: calc((var(--rating, 0) / 5) * 100%);
|
||||
background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
|
||||
background: var(--bg-color);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#rating::-webkit-meter-bar {
|
||||
background: var(--bg-color);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
#rating::-webkit-meter-optimum-value,
|
||||
#rating::-webkit-meter-suboptimum-value,
|
||||
#rating::-webkit-meter-even-less-good-value {
|
||||
background-color: var(--rating-color);
|
||||
}
|
||||
|
||||
#rating::-moz-meter-bar {
|
||||
background: var(--rating-color);
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
Reference in New Issue
Block a user