.rating { margin-top: 2vh; margin-bottom: 2vh; position: relative; } .rating * { margin: 0; padding: 0; } .rating h3 small { font-weight: 200; } .rating .display { display: flex; flex: row; vertical-align: bottom; } .rating .display div { align-items: center; justify-content: center; display: flex; } .rating .display div:nth-child(1) { width: max-content; padding-right: 12px; } .rating .display div:nth-child(2) { flex-grow: 100; } .rating .chart { flex-grow: 100; display: table; table-layout: fixed; height: max-content; } .rating .chart li { position: relative; display: table-cell; vertical-align: bottom; height: 6vh; } .rating .chart span { margin: 2%; display: block; background: var(--pico-muted-color); border-radius: 0.5vh 0.5vh 0 0; } .rating .undisplay { position: absolute; display: none; align-items: center; justify-content: center; inset: 0; } .rating.unavailable .undisplay { display: flex; } .rating.unavailable .display { filter: blur(0.5vh); } .rating.unavailable .chart li:nth-child(1) span { height: 10% !important; } .rating.unavailable .chart li:nth-child(2) span { height: 20% !important; } .rating.unavailable .chart li:nth-child(3) span { height: 30% !important; } .rating.unavailable .chart li:nth-child(4) span { height: 40% !important; } .rating.unavailable .chart li:nth-child(5) span { height: 50% !important; } // Rating Star with Font Awesome .rating-star { position: relative; vertical-align: bottom; color: #FDA36E; font-family: FontAwesome; display: inline-block; } .rating-star:before { content: "\f006 \f006 \f006 \f006 \f006"; text-underline-offset: 0.125em; line-height: 1; vertical-align: middle; } .rating-star>div { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; } .rating-star>div:before { content: "\f005 \f005 \f005 \f005 \f005"; text-underline-offset: 0.125em; line-height: 1; vertical-align: middle; } .rating-star .yellow { color: #F68127; text-shadow: 0 0 1px #FFE205, 0 0 2px #FFE205, 0 0 6px #EDD205; // color: #FFE205; } .rating-editor { cursor: pointer !important; border: none !important; }