Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Lightbox

A full screen dark viewer for one image with a caption, a counter, close and previous or next controls. Uses a <dialog> or :target links.

Navigation and overlays7 classesNo JavaScriptLight and dark

Example

Full

Classes

7 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the lightbox. On a <dialog> in the example. Sets overflow, background, fixed position, offsets, stacking order and hidden by default.
CSS
.modal::backdrop, .lightbox::backdrop {
  background: transparent;
}

.lightbox[open], .lightbox:target {
  display: grid;
  opacity: 1;
}
Part Part of the lightbox. On an <img> in the example. Sets width, height, corner radius, shadow and transition.
CSS
.lightbox-image {
  max-width: min(100%, 72rem);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--m-radius-md);
  box-shadow: 0 24px 64px -12px oklch(0 0 0 / .6);
  transition: transform var(--m-duration-slow) var(--m-ease);
}

@media (prefers-reduced-motion: reduce) {
  .drawer-side,
  .drawer-side > *,
  .drawer-dialog,
  .drawer-dialog::backdrop,
  .modal,
  .modal-box,
  .modal > .command-palette,
  .sheet,
  .sheet::backdrop,
  .popover,
  .dropdown-content,
  .lightbox,
  .lightbox-image,
  .navbar-mobile-panel,
  .mega-menu-panel,
  .sidebar,
  .back-to-top,
  .skip-link {
    transition-duration: 0s;
  }
}
Part Part of the lightbox. On a <p> in the example. Sets width, text size, text style and text color.
CSS
.lightbox-caption {
  max-width: 40rem;
  font-size: .875rem;
  line-height: 1.5;
  text-align: center;
  color: oklch(.97 0 0 / .75);
}
Part Part of the lightbox. On a <span> in the example. Sets absolute position, offsets, text size and text color.
CSS
.lightbox-counter {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: oklch(.97 0 0 / .75);
}
Part Part of the lightbox. On a <button> in the example. Sets absolute position, offsets, grid display, alignment, width and height.
CSS
.lightbox-close {
  top: .875rem;
  right: .875rem;
}

.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  color: inherit;
  background: oklch(1 0 0 / .2);
}
Part Part of the lightbox. On an <a> in the example. Sets generated content, width, height, background, corner radius and text color.
CSS
.lightbox-prev {
  left: 1rem;
}

.lightbox-prev::before {
  width: 1.375rem;
  height: 1.375rem;
  mask-image: var(--m-nav-left);
}
Part Part of the lightbox. On an <a> in the example. Sets generated content, width, height, background, corner radius and text color.
CSS
.lightbox-next {
  right: 1rem;
}

.lightbox-next::before {
  width: 1.375rem;
  height: 1.375rem;
  mask-image: var(--m-nav-right);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Lightbox: start from the base class, then add modifiers -->
<button type="button" commandfor="photo" command="show-modal" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">View photo</button><dialog id="photo" class="lightbox" closedby="any" aria-label="Photo viewer"><img class="lightbox-image" src="https://picsum.photos/seed/monsoon/1200/800" alt="Rain over a mountain lake"><p class="lightbox-caption">Rain over the lake, early morning.</p><span class="lightbox-counter">3 / 12</span><a href="#" class="lightbox-prev" aria-label="Previous photo"></a><a href="#" class="lightbox-next" aria-label="Next photo"></a><button type="button" commandfor="photo" command="close" class="lightbox-close" aria-label="Close"></button></dialog>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Built on the native dialog element. Opened with showModal() (or a command button) it goes to the top layer, makes the rest of the page inert, closes with Escape and returns focus to the button that opened it.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Give meaningful images an alt text and decorative ones alt="". Initials avatars should expose the full name to screen readers.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Navigation and overlaysContext menuThe compact look of a desktop context menu, with labels, separators, shortcuts and a filled highlight. Pair it with a popover to show it.Navigation and overlaysCommand paletteA search box with grouped results and keyboard hints, shown in a top aligned modal dialog.Navigation and overlaysNavbarA top bar with start, center and end slots, optional sticky and blurred glass styles and a <details> based mobile menu that replaces the links below the md breakpoint.Navigation and overlaysMega menuA wide navbar panel on <details name> so only one is open at a time, with sections, icon items with descriptions and a featured card.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.