Reference

CSS reference

The custom properties, parts and state attributes of @ogdakke/fluidbox/styles.css, filmstrip.css and sheet.css, read from the stylesheets and the runtime. Styling explains how to use them. The stylesheets use other --fluidbox-* properties and data attributes internally; anything not listed here can change without notice.

styles.css wraps the viewer's rules in :where([data-fluidbox-overlay], [data-fluidbox-flight]), so a rule of yours on the same part wins when it comes later. The filmstrip's and the sheet's defaults, declared on the dialog, sit wholly inside :where(), so [data-fluidbox-dialog] { … } overrides them in any order. When the viewer opens, it copies every --fluidbox-* property on the trigger onto the overlay as inline styles. So you can set most inputs on :root, on the trigger or an ancestor of it, or on [data-fluidbox-overlay]; set the ones declared on the dialog on [data-fluidbox-dialog].

Theme variables#

Variable Default Used for
--fluidbox-background #111 The backdrop (through --fluidbox-backdrop-background), the close button, error messages.
--fluidbox-color white Text and icons.
--fluidbox-control-background rgb(20 20 20 / 0.72) The Previous and Next buttons; the close button on hover.
--fluidbox-focus-color currentColor Focus rings on the controls, filmstrip items, the dialog and <fluidbox-item> triggers.
--fluidbox-filmstrip-item-radius 3px The corners of filmstrip thumbnails.

An error message without --fluidbox-background and --fluidbox-color set is black on white.

Inputs#

Properties you set. Each is read where the table says, and inherits there from any ancestor.

Property Default Read on What it does
--fluidbox-stage-top, --fluidbox-stage-right, --fluidbox-stage-bottom, --fluidbox-stage-left 0px Dialog Insets of the stage the media fits into. Registered <length>s, so zoom reads them as pixels and they can transition.
--layer-fluidbox 7 Overlay The overlay's z-index.
--layer-fluidbox-flight 8 Flight The z-index of flights and travelling overlays.
--fluidbox-preview-width 100% <fluidbox-item> trigger The closed trigger's width.
--fluidbox-preview-height auto <fluidbox-item> trigger The closed trigger's height.
--fluidbox-transition-content-opacity fades in near the thumbnail Travelling overlay copy The copy's opacity during a flight.
--fluidbox-backdrop-background var(--fluidbox-background, #111) Backdrop The backdrop's background.
--fluidbox-backdrop-filter none Backdrop The backdrop's backdrop-filter, such as blur(24px).
--fluidbox-backdrop-opacity 1 Backdrop The backdrop's resting opacity.
--fluidbox-slide-gap 0px Slides Space between slides, seen only while swiping.
--fluidbox-image-placeholder-background rgb(127 127 127 / 0.12) Image frames Shown behind an image before anything has loaded.
--fluidbox-transition-layer-opacity var(--fluidbox-closed) [data-fluidbox-transition-layer] The layer's opacity during a flight.
--fluidbox-layer-color transparent [data-fluidbox-transition-layer] A colour behind the layer's content.
--fluidbox-layer-mask-opacity 1 [data-fluidbox-transition-layer] The opacity of that colour.
--fluidbox-gallery-control-opacity 1; 0.35 when disabled Previous, Next, Close The default controls' opacity.
--fluidbox-zoom-bleed the browser's bar height on touch screens, else 0px Zoom viewport How far a zoomed image pans past the window's top and bottom. 0px keeps it inside.
--fluidbox-zoom-clip none Dialog Keeps a zoomed image inside the stage insets: stage, or sides such as right or top bottom. The runtime reads it.
--fluidbox-filmstrip-axis x Dialog y runs the filmstrip as a column. The add-on reads it, so a media query can change it.
--fluidbox-filmstrip-item-size 52px; 38px on touch Dialog The thumbnails' size. The strip's height and its end padding follow it, so the first and last thumbnails centre.
--fluidbox-filmstrip-gap 5px; 3px on touch Dialog Space between thumbnails.
--fluidbox-filmstrip-space the item size plus 32px (30px on touch) and the bottom safe area Dialog The room a row keeps below the photo. 0px lets the photo run under it.
--fluidbox-filmstrip-zoom-duration 180ms Filmstrip How fast the strip hides and returns, as on zoom.
--fluidbox-filmstrip-zoom-travel 18px Filmstrip How far the strip drops as it hides.

Sheet inputs#

From sheet.css, declared on the dialog at zero specificity. Override them on [data-fluidbox-dialog].

Property Default What it does
--fluidbox-sheet-enabled 1 0 turns the sheet off, as for wide screens with a sidebar instead. The runtime reads it.
--fluidbox-sheet-photo push push slides the photo up ahead of the sheet; fit shrinks it into the room above. The runtime reads it.
--fluidbox-sheet-peek 0px How much of the sheet shows at rest. Also sets --fluidbox-stage-bottom. The runtime reads it.
--fluidbox-sheet-gap 12px Space between the photo and the sheet. The runtime reads it.
--fluidbox-sheet-fit-inset 0px With fit, space the photo keeps clear above and beside it as it shrinks. The runtime reads it.
--fluidbox-sheet-fit-limit 55% With fit, how much the sheet covers before the photo stops shrinking and rises: a length, or a percentage of the stage. The runtime reads it.
--fluidbox-sheet-top calc(env(safe-area-inset-top, 0px) + 56px) Space above the sheet at its tallest.
--fluidbox-sheet-radius 18px The sheet's top corners.
--fluidbox-sheet-max-width 640px The sheet's widest.
--fluidbox-sheet-background Canvas The sheet's background.
--fluidbox-sheet-color CanvasText The sheet's text colour.
--fluidbox-sheet-fade 1 How much the photo fades between the first stop and the top one. 0 keeps it.

Published values#

Set by the runtime. Read them for your own effects; don't set them.

Property On Value
--fluidbox-closed Thumbnail overlays, travelling copies, transition layers 1 at the thumbnail, 0 fully open. A registered <number>.
--fluidbox-dismiss-progress Overlay 0 to 1 during a drag to dismiss; at most 0.6 for a wheel.
--fluidbox-drag-x, --fluidbox-drag-y Overlay The drag's offset in pixels.
--fluidbox-media-width, --fluidbox-media-height Dialog The current media's drawn size, without flight or zoom.
--fluidbox-height Overlay The window's inner height in pixels.
--fluidbox-scroll-top Overlay The page's scroll position, where the container sits.
--fluidbox-content-height Dialog The stage's height: --fluidbox-height less the stage insets and the filmstrip space.
--fluidbox-sheet-visible Overlay Pixels of the sheet showing.
--fluidbox-sheet-progress Overlay 0 at rest to 1 at the first stop.
--fluidbox-sheet-expand Overlay 0 at the first stop to 1 at the top stop.
--fluidbox-sheet-dismiss Overlay 1 with the photo scrolled away to 0 at rest, with dismiss: "scroll".
--fluidbox-sheet-keyboard Overlay Pixels the software keyboard covers, while a sheet field has focus.

The sheet values follow the scroll on the compositor and inherit to everything in the viewer.

Parts#

Selector Part
[data-fluidbox-overlay] The viewer's root, at the end of <body> while open.
[data-fluidbox-static] On the overlay's copy a server renders when the page starts open. It sits absolute at the top of the page until the viewer takes over, then hides.
[data-fluidbox-backdrop] The backdrop. A click on it closes the viewer.
[data-fluidbox-container] The viewport-sized box at the page's scroll position.
[data-fluidbox-dialog] The dialog, with role="dialog" and aria-modal="true". It carries the state attributes.
[data-fluidbox-slides] The horizontal scroller of slides.
[data-fluidbox-slide] A slide. aria-hidden="false" on the current one.
[data-fluidbox-frame] The box that crops and rounds the media.
[data-fluidbox-image-frame] A frame that holds an image.
[data-fluidbox-media] The <img>, <video>, <iframe> or custom content element.
[data-fluidbox-item-content] A custom slide's content element.
[data-fluidbox-mount] A framework binding's wrapper inside custom content, with display: contents.
[data-fluidbox-slide-placeholder] The item's placeholder image.
[data-fluidbox-slide-preview] The item's thumbnail image.
[data-fluidbox-media-cover] The still over an iframe until it loads.
[data-fluidbox-error] The "Unable to load media." message with its Retry button.
[data-fluidbox-announcer] A visually hidden live region.
[data-fluidbox-portal] The viewer's layer, where your controls and captions go.
[data-fluidbox-addons] Beside the viewer's layer. The filmstrip goes here, so the layer holds only your content. It takes no box.
[data-fluidbox-close], [data-fluidbox-previous], [data-fluidbox-next] The controls. On a button of yours in the viewer, it runs that command.
[data-fluidbox-icon] The SVG inside a default control.
[data-fluidbox-chrome] A layer outside the viewer's layer that shows and hides with the controls. Content in the layer does this already.
[data-fluidbox-owns-input] Content that keeps its own touches, wheel and arrow keys, as the filmstrip and the sheet do. The viewer doesn't swipe, dismiss or step from them. Mark your own scrubbers and sliders with it.
[data-fluidbox-zoom-viewport] The scroller a zoomed image pans in. data-grabbing while dragged.
[data-fluidbox-filmstrip-dock] The filmstrip's box, in [data-fluidbox-addons]. Place it with your own CSS.
[data-fluidbox-filmstrip] The filmstrip.
[data-fluidbox-filmstrip-scroll] Its scroller, role="listbox".
[data-fluidbox-filmstrip-item] A thumbnail button, role="option", with data-index.
[data-fluidbox-flight] A flight layer at the end of <body>, during opening and closing.
[data-fluidbox-transition-content] A travelling overlay's copy, in the flight.
[data-fluidbox-transition-layer] Mark a travel overlay's frameLayer with it to get the layer inputs.
[data-fluidbox-trigger] A trigger, on the page.
[data-fluidbox-origin] On an element inside a trigger: the flight starts and ends there instead.
[data-fluidbox-thumbnail-overlay] A thumbnail overlay inside a trigger. The value travel makes it fly with the photo.
[data-fluidbox-frame-layer] A travelling overlay's frame layer. It moves into the flying frame and scales with it.
[data-fluidbox-ghost] The still copy of a frame layer the page shows in the thumbnail while a flight starts.
[data-fluidbox-item-id] In a <fluidbox-gallery> with items set, makes the element a trigger of the item with that id.

Sheet parts#

Selector Part
[data-fluidbox-sheet-scroller] The scroller the photo and the sheet share.
[data-fluidbox-sheet-stage] The photos' room inside it.
[data-fluidbox-sheet-slot] Where the sheet element goes.
[data-fluidbox-sheet] The sheet, a <section> that render fills.
[data-fluidbox-sheet-handle] Draws a grab bar. Make it the sheet's first child.
[data-fluidbox-sheet-scroll] The part that scrolls once the sheet is at its top stop. Without one, the whole sheet does.
[data-fluidbox-sheet-stop] A button that moves the sheet to the stop in its value.

State attributes#

Attribute On Meaning
data-fluidbox-status Overlay, dialog closed, opening, open or closing.
data-open, data-closed Overlay, dialog Not closed, or closed.
data-starting-style, data-opening Overlay, dialog Opening.
data-ending-style Overlay, dialog Closing.
data-dragging Overlay, dialog A drag to dismiss is under way.
data-dismissing Overlay, dialog Closing, or a drag to dismiss is under way.
data-zoomed Dialog An image is zoomed.
data-gallery Dialog There is more than one item.
data-sheet Dialog The sheet's stop number.
data-sheet-raised, data-sheet-expanded Dialog The sheet is above stop 0; at its top stop.
data-sheet-peeking, data-sheet-off Dialog The sheet peeks at rest; the sheet is turned off.
data-sheet-dismiss Overlay The sheet's dismiss option.
data-sheet-dismissed Overlay A scroll dismiss is committed.
data-fluidbox-status, data-open, data-closed, aria-expanded The active trigger The trigger's item is open.
data-fluidbox-thumbnail-hidden The trigger's image Its item is open, so it is hidden.
data-fluidbox-phase Thumbnail overlays idle, opening, open, dragging or closing.
aria-selected, data-fluidbox-selected Filmstrip items The current item.

Events#

The sheet's stop changes arrive as the sheetchange event on the fluidbox and on <fluidbox-gallery>, not on an element in the viewer. See Filmstrip and sheet.