Mike Dalessio
e9cb2956ee
Remove data-action from the sanitizer allowlist to disallow injection of potentially malicious Stimulus actions in user-provided content. The lightbox controller now uses imageTarget callbacks to handle clicks on image links. Also add the file name as a caption in the light box, and fix the caption color for dark mode visibility.
87 lines
1.6 KiB
CSS
87 lines
1.6 KiB
CSS
@layer components {
|
|
.lightbox {
|
|
--dialog-duration: 350ms;
|
|
--lightbox-padding: 3vmin;
|
|
|
|
background-color: transparent;
|
|
block-size: 100dvh;
|
|
border: 0;
|
|
inline-size: 100dvw;
|
|
inset: 0;
|
|
margin: auto;
|
|
max-height: unset;
|
|
max-width: unset;
|
|
overflow: hidden;
|
|
padding: var(--lightbox-padding);
|
|
text-align: center;
|
|
|
|
&::backdrop {
|
|
-webkit-backdrop-filter: blur(16px);
|
|
backdrop-filter: blur(16px);
|
|
background-color: oklch(var(--lch-black) / 50%);
|
|
}
|
|
|
|
/* Closed state */
|
|
&,
|
|
&::backdrop {
|
|
opacity: 0;
|
|
transition: var(--dialog-duration) allow-discrete;
|
|
transition-property: display, opacity, overlay;
|
|
}
|
|
|
|
/* Open state */
|
|
&[open],
|
|
&[open]::backdrop {
|
|
opacity: 1;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
|
|
.lightbox__figure {
|
|
animation: slide-up var(--dialog-duration);
|
|
}
|
|
}
|
|
}
|
|
|
|
.lightbox__actions {
|
|
display: flex;
|
|
gap: 1ch;
|
|
inset: var(--lightbox-padding) var(--lightbox-padding) auto auto;
|
|
position: absolute;
|
|
}
|
|
|
|
.lightbox__figure {
|
|
align-self: stretch;
|
|
animation-fill-mode: forwards;
|
|
animation: slide-down var(--dialog-duration);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--lightbox-padding);
|
|
margin: 0 auto;
|
|
max-block-size: 100%;
|
|
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.lightbox__caption {
|
|
color: var(--color-white);
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.lightbox__image {
|
|
flex: 1;
|
|
min-block-size: 0;
|
|
}
|
|
|
|
/* Prevent body from scrolling when lightbox is open */
|
|
html:has(.lightbox[open]) {
|
|
overflow: clip;
|
|
}
|
|
}
|