Have a little fun with CSS variables X JS

This commit is contained in:
Lim Chee Aun 2023-01-07 20:38:05 +08:00
parent 41df88e625
commit 33176c5ea7
2 changed files with 11 additions and 2 deletions

View file

@ -494,6 +494,13 @@ a.mention span {
width: 100vw;
height: 100vh;
height: 100dvh;
background-color: var(--average-color-alpha);
background-image: radial-gradient(
closest-side,
var(--average-color) 10%,
var(--average-color-alpha) 40%,
transparent 100%
);
}
.carousel > * :is(img, video) {
width: auto;

View file

@ -1326,8 +1326,10 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
<InView
class="carousel-item"
style={{
backgroundColor:
rgbAverageColor && `rgba(${rgbAverageColor.join(',')}, .5)`,
'--average-color': `rgb(${rgbAverageColor?.join(',')})`,
'--average-color-alpha': `rgba(${rgbAverageColor?.join(
',',
)}, .5)`,
}}
tabindex="0"
key={media.id}