/* Définition des variables personnalisées pour les images embarquées */
[class*="five-rate-"], .rating-scale, figure[class*="notation"] {
/* angles 0°
--rating-mask-full: url('data:image/svg+xml,');
--rating-mask-half: url('data:image/svg+xml,');
--rating-mask-empty: url('data:image/svg+xml,');
*/
/*
Angles arrondis */
--rating-mask-full: url('data:image/svg+xml,');
--rating-mask-half: url('data:image/svg+xml,');
--rating-mask-empty: url('data:image/svg+xml,');
--foreground-outline: var(--primary-color, gray);
}
figure.mask-bullets[class*="notation"] {
--rating-mask-empty: url('data:image/svg+xml,');
--rating-mask-full: url('data:image/svg+xml,');
--foreground-outline: rgb(102,156,49);
}
@media (prefers-color-scheme: dark) {
figure.mask-bullets[class*="notation"] {
--foreground-outline: yellowgreen;
}
}
:root.contrast [class*="five-rate-"], :root.contrast .rating-scale, :root.contrast figure[class*="notation"] {
--foreground-outline: var(--basic-color, black);
}
@media (prefers-color-scheme: dark) {
:root.contrast [class*="five-rate-"], :root.contrast .rating-scale, :root.contrast figure[class*="notation"] {
--foreground-outline: var(--basic-color, white);
}
}
@media (max-width: 63.9375rem) {
[class*="five-rate-"] {
--size-small: 1rem;
--size-medium: 1.5rem;
--size-large: 2rem;
}
}
@media (min-width: 64rem) {
[class*="five-rate-"] {
--size-small: 1.5rem;
--size-medium: 2rem;
--size-large: 2.5rem;
}
}
[class*="five-rate-"] {
display: inline-flex;
flex: none;
flex-flow: row;
text-align: center;
margin: auto;
white-space: nowrap;
}
[class*="rate-value"] {
width: var(--size-medium);
height: var(--size-medium);
font-size: inherit;
position: relative;
margin: 0 !important;
}
[class*="rate-value"]:before,
[class*="rate-value"]:after {
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
position: absolute;
content: '';
inset: 0;
}
[class*="rate-value"]:before {
background-color: var(--foreground-outline);
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
}
[class*="five-rate-"].larger [class*="rate-value"] {
width: var(--size-large);
height: var(--size-large);
}
[class*="five-rate-"].smaller [class*="rate-value"] {
width: var(--size-small);
height: var(--size-small);
}
[class*="five-rate-"] button [aria-hidden="true"] {
white-space: nowrap;
overflow: hidden;
width: 0 !important;
height: 0 !important;
text-indent: -6.25rem;
line-height: 0;
padding: 0 !important;
margin: 0 !important;
font-size: 0;
}
.rate-value-half:before {
-webkit-mask-image: var(--rating-mask-half);
mask-image: var(--rating-mask-half);
background-color: var(--yellow, orange);
}
/* ajout d'une bordure de contraste en mode clair pour les demies étoiles */
.rate-value-half:after {
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
background-color: var(--foreground-outline);
}
@media (prefers-color-scheme: dark) {
/* bordure de contraste en arrière en mode dark */
.rate-value-half:before {
z-index: 1;
}
.rate-value-half:after {
z-index: 0;
}
}
.rate-value-full:before {
-webkit-mask-image: var(--rating-mask-full);
mask-image: var(--rating-mask-full);
background-color: var(--yellow, orange);
}
.five-rate-active:focus-within button:before {
-webkit-mask-image: var(--rating-mask-full);
mask-image: var(--rating-mask-full);
background-color: var(--link-color, rgb(93,63,224));
}
/*
Gestion des changements visuels à la navigation clavier = :hover
*/
.five-rate-active button:focus ~ [class*="rate-value"]:before {
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
background-color: var(--foreground-outline);
}
@media (prefers-color-scheme: light) {
/* ajout d'une bordure de contraste en mode clair */
.rate-value-full:after, .five-rate-active:focus-within button:after {
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
background-color: var(--foreground-outline);
}
.five-rate-active:focus-within button:after {
background-color: transparent;
}
}
@media (any-hover: hover) {
.five-rate-active:hover button:before {
-webkit-mask-image: var(--rating-mask-full);
mask-image: var(--rating-mask-full);
background-color: var(--link-color, rgb(93,63,224));
}
.five-rate-active:hover button:after {
background-color: transparent;
}
.five-rate-active button:hover ~ [class*="rate-value"]:before {
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
background-color: var(--foreground-outline);
}
}
.five-rate-inactive * {
cursor: default !important;
}
/*
*
*
*
Affichage alternatif de la note en pourcentage
Exemples :
noté 3,3 sur 5
noté 2,55 sur 5
*
*/
figure[class*="notation"] {
position: relative;
display: inline-block;
width: 10rem; /* 160px */
height: 2rem; /* 32px */
vertical-align: middle;
}
figure[class*="notation"]:before {
-webkit-mask-image: var(--rating-mask-empty);
-webkit-mask-repeat: repeat-x;
mask-image: var(--rating-mask-empty);
mask-repeat: repeat-x;
content: "\A0" / "";
inset: 0;
position: absolute;
background-color: var(--foreground-outline);
}
figure.notation-s {
width: 5rem; /* 80px */
height: 1rem; /* 16px */
}
figure.notation-xs {
width: 3.125rem; /* 50px */
height: 0.625rem; /* 10px */
}
figure[class*="notation"] [role='img'] {
position: absolute;
inset: 0;
}
figure[class*="notation"] [role='img']:after {
-webkit-mask-image: var(--rating-mask-full);
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: contain;
mask-image: var(--rating-mask-full);
mask-repeat: repeat-x;
mask-size: contain;
content: "\A0" / "";
position: absolute;
inset: 0;
background-color: rgb(102,156,49);
}
figure[class*="notation"][data-rate-value^="0.1"] [role='img']:after {
-webkit-mask-size: cover;
mask-size: cover;
}
@media (prefers-color-scheme: dark) {
figure[class*="notation"] [role='img']:after {
background-color: yellowgreen;
}
}
/*
afficher les blocs en noir sans mode contrasté
*/
figure[class*="notation"]:before, figure[class*="notation"].monochrome [role='img']:after {
background-color: var(--basic-color, black);
}
/*
afficher les blocs en blanc en mode sombre sans mode contrasté
*/
@media (prefers-color-scheme: dark) {
figure[class*="notation"]:before, figure[class*="notation"].monochrome [role='img']:after {
background-color: var(--basic-color, white);
}
}
:root.contrast figure[class*="notation"] [role='img']:after {
background-color: var(--basic-color);
}
/***********************
* Restitution des votes
**********************/
.rating-scale {
padding: var(--size-large) calc(var(--size-large) / 2) calc(var(--size-large) / 2);
max-width: 100%;
width: 25rem; /* 400px */
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: var(--background-color-secondary);
border-radius: var(--radius, 0.625rem);
text-align: left;
margin: auto;
}
:root.contrast .rating-scale {
box-shadow: 0 0 0 1px var(--box-shadow, grey) inset;
}
@media (max-width: 63.9375rem) {
.rating-scale {
--size-small: 1rem;
--size-medium: 1.5rem;
--size-large: 2rem;
}
}
@media (min-width: 64rem) {
.rating-scale {
--size-small: 1.5rem;
--size-medium: 2rem;
--size-large: 2.75rem;
}
}
.outer-line .rating-scale {
background-color: var(--background-color-hero);
}
.rating-scale[aria-label] {
padding-top: 2.5rem; /* 40px */
position: relative;
}
.rating-scale[aria-label]:before {
content: attr(aria-label);
position: absolute;
left: calc(var(--size-large) / 2);
top: 0;
line-height: 2.5rem; /* 40px */
font-size: inherit;
}
.rating-scale > * {
height: var(--size-small);
line-height: var(--size-small);
font-size: smaller;
margin-bottom: 0.1875em;
}
.rating-scale dt {
width: 2.5rem; /* 40px */
position: relative;
margin: 0 !important;
}
.rating-scale dt:before, .rating-scale dt:after {
content: "";
position: absolute;
height: var(--size-small);
width: calc(var(--size-medium) / 2);
top: 50%;
right: 0.625rem; /* 10px */
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center center;
transform: translateY(-50%);
}
.rating-scale dt:not([aria-hidden]):before {
-webkit-mask-image: var(--rating-mask-full);
mask-image: var(--rating-mask-full);
background-color: var(--yellow, orange);
}
.rating-scale dt[aria-hidden]:before {
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
background-color: var(--foreground-outline);
}
@media (prefers-color-scheme: light) {
.rating-scale dt:after {
-webkit-mask-image: var(--rating-mask-empty);
mask-image: var(--rating-mask-empty);
background-color: var(--foreground-outline);
}
}
.rating-scale dd {
display: inline-block;
width: calc(100% - 2.5rem); /* 100% - 40px */
position: relative;
}
.rating-scale dd span.scale {
background-color: rgba(0, 0, 0, 0.05);
width: calc(100% - 4.375rem); /* 100% - 70px */
border-radius: var(--radius);
position: absolute;
left: 0;
top: 51%;
transform: translateY(-50%);
height: calc(var(--size-medium) / 2);
}
@media (prefers-color-scheme: dark) {
.rating-scale dd span.scale {
background-color: rgba(0, 0, 0, 0.3);
}
}
/* si gestion du mode « contrast » */
:root.contrast .rating-scale dd span.scale {
box-shadow: 0 0 0 1px var(--basic-color, grey);
}
.rating-scale dd .scale span {
display: block;
background-color: var(--yellow, orange);
height: calc(var(--size-medium) / 2);
border-radius: var(--radius, 0.625rem);
position: absolute;
left: 0;
top: 0;
overflow: hidden;
font-size: 1px;
color: transparent;
}
/* si gestion du mode « contrast » */
@media (prefers-color-scheme: light) {
:root.contrast .rating-scale dd span.scale span {
box-shadow: 0 0 0 1px var(--basic-color, black);
}
}
.rating-scale dd > span:not(.scale) {
position: absolute;
color: var(--foreground-outline);
line-height: var(--size-small);
height: var(--size-small);
top: 50%;
width: 3.75rem; /* 60px */
text-align: right;
right: 0;
transform: translateY(-50%);
}
@media (any-hover: none) {
[class*="five-rate-active"] button {
width: var(--size-medium, 2rem) !important;
height: var(--size-medium, 2rem) !important;
}
}