Styling & theming · picola

Tune the appearance through CSS custom properties on the .pcl root:

.pcl {
  --pcl-z: 2000;
  --pcl-backdrop: rgba(10, 10, 16, 0.55);
  --pcl-backdrop-filter: blur(16px);
  --pcl-caption-lines: 3;
}

--pcl-backdrop-filter enables background blur (GPU cost applies — it is none by default). A zero-specificity mini-reset scoped to .pcl ships with the stylesheet, so the chrome renders identically whether or not your app uses a global CSS reset. Transitions respect prefers-reduced-motion.

No `!important` required

Every default rule uses a flat single-class selector (.pcl__button etc.), so your stylesheet overrides them with normal cascade order or one extra class of specificity. The custom-property defaults are declared at zero specificity (:where(.pcl)), so a plain .pcl { --pcl-z: … } in your app always wins regardless of stylesheet order.

Styles deliberately avoid @layer: layered library styles would lose to the unlayered global resets present in most apps.

Custom properties

Property	Default	Description
`--pcl-z`	`1000`	Root stacking context (`z-index`).
`--pcl-backdrop`	`#000`	Backdrop color.
`--pcl-backdrop-filter`	`none`	Backdrop filter, e.g. `blur(16px)` (opt-in; GPU cost).
`--pcl-chrome-color`	`#fff`	Foreground color of buttons, counter and arrows.
`--pcl-chrome-bg`	`rgba(0, 0, 0, 0.35)`	Hover / active background of chrome controls.
`--pcl-button-bg`	`rgba(0, 0, 0, 0.2)`	Idle toolbar-button background.
`--pcl-button-size`	`44px`	Toolbar-button hit area.
`--pcl-arrow-size`	`48px`	Previous / next arrow hit area.
`--pcl-caption-bg`	`rgba(0, 0, 0, 0.55)`	Caption background.
`--pcl-caption-color`	`#fff`	Caption text color.
`--pcl-caption-lines`	`2`	Lines shown before the caption clamps.
`--pcl-dismiss`	(runtime)	Drag-to-dismiss progress, `0`–`1`, written by the core. Read it to fade custom chrome.

Reacting to drag-to-dismiss

While the user drags to dismiss, the core writes --pcl-dismiss (a 0–1 progress value) onto the root and sets a data-pcl-dismissing attribute. Read either from your own chrome to fade it in step with the gesture — no per-frame JavaScript required:

.my-chrome {
  opacity: calc(1 - var(--pcl-dismiss, 0));
}