Use more native html elements

This commit is contained in:
Elias Schriefer
2024-07-06 14:35:30 +02:00
parent e0bebe87e3
commit 467951d0ce
3 changed files with 32 additions and 17 deletions

View File

@@ -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 {