Adrien Maston
1f346085b9
* main: (119 commits) Bust comment view cache Update lexxy to bring fixes from https://github.com/basecamp/lexxy/releases/tag/v0.1.24.beta Fix unexpected remove empty line from README Lightbox uses Stimulus target callbacks instead of data-action Add test coverage for the image lightbox Add tests for tenancy middleware and timezone cookie Refactor: Simplify TimeWindowParser using Rails convenience methods SMTP: support SMTPS on port 465 (#2132) Bump fizzy-saas to retain fewer docker images (#2134) Add test coverage for with_golden_first scope (#2130) Refactor: improve query scope composition with merge syntax (#2131) Validate avatar sizes Introduce Vips configuration Tailscale serve support (#2126) Update tests with final method naming: record! -> record CSP config to allow Minio in development Update fizzy-saas to get employee restriction in staging Drop staff restriction in beta and staging Unused Use new FIZZY_GH_TOKEN with limited access ...
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;
|
|
}
|
|
}
|