Customisation
Every colour, radius and dimension is a CSS custom property, and every visual element can be replaced with a render fragment. Nothing needs a selector override.
Theme
Overlay
The Overlay fragment receives the scanner itself, so a custom overlay
can read the status, the open camera and the current zoom without extra plumbing.
Generated CSS
--bit-bbscanner-accent:#4fa3f4; --bit-bbscanner-reticle-color:#4fa3f4; --bit-bbscanner-radius:0.75rem; --bit-bbscanner-reticle-thickness:3px; --bit-bbscanner-reticle-length:14%; --bit-bbscanner-overlay:rgba(6,8,12,0.55)
Every custom property
| Property | Default | Controls |
|---|---|---|
| --bit-bbscanner-radius | 0.75rem | Corner radius of the viewport |
| --bit-bbscanner-bg | #0b0d12 | Backdrop behind the video |
| --bit-bbscanner-fg | #f5f7fa | Text colour |
| --bit-bbscanner-muted | #9aa4b2 | Secondary text and idle indicator |
| --bit-bbscanner-accent | #4f8cff | Active controls and starting state |
| --bit-bbscanner-danger | #ff5f57 | Faulted state |
| --bit-bbscanner-success | #35c77c | Scanning state and result highlight |
| --bit-bbscanner-overlay | rgba(6,8,12,0.55) | Dimming outside the scan region |
| --bit-bbscanner-reticle-color | #ffffff | Reticle corners |
| --bit-bbscanner-reticle-thickness | 3px | Reticle stroke width |
| --bit-bbscanner-reticle-length | 14% | Reticle corner arm length |
| --bit-bbscanner-reticle-radius | 0.5rem | Reticle corner rounding |
| --bit-bbscanner-control-bg | rgba(18,22,30,0.72) | Control background |
| --bit-bbscanner-control-fg | #f5f7fa | Control text |
| --bit-bbscanner-control-hover-bg | rgba(40,48,62,0.9) | Control hover background |
| --bit-bbscanner-focus-ring | 0 0 0 3px … | Keyboard focus indicator |
| --bit-bbscanner-font | system-ui, … | Font stack |
| --bit-bbscanner-gap | 0.5rem | Spacing inside the control bars |
| --bit-bbscanner-transition | 160ms ease | Transition timing |
This site tints the accent, the focus ring, the radius and the font of its scanners with one
rule on .bit-bbscanner, which outranks the zero-specificity defaults wherever it is
declared; the style attribute of the scanner above outranks that rule in turn.
Accessibility and direction
The scanner is a labelled region, the controls are real buttons with pressed state, results
are announced through a polite live region, and the layout uses logical properties throughout
so a right to left document needs no extra work. Animation is suppressed under
prefers-reduced-motion, and the reticle and controls switch to system colours
under forced-colors.