bit-bbscanner.css

/*
 * BbScanner default styles.
 *
 * Everything visual is driven by the custom properties in the :where(.bit-bbscanner) block below, so an
 * application can restyle the scanner completely without overriding a single selector. Layout
 * uses logical properties throughout, so the component is correct in right to left documents
 * without any extra work.
 */

/* Defaults live in a zero specificity block so that any rule an application writes, whatever
   its order in the document, wins over them. */
:where(.bit-bbscanner) {
    --bit-bbscanner-radius: 0.75rem;
    --bit-bbscanner-bg: #0b0d12;
    --bit-bbscanner-fg: #f5f7fa;
    --bit-bbscanner-muted: #9aa4b2;
    --bit-bbscanner-accent: #4f8cff;
    --bit-bbscanner-danger: #ff5f57;
    --bit-bbscanner-success: #35c77c;
    --bit-bbscanner-overlay: rgba(6, 8, 12, 0.55);
    --bit-bbscanner-reticle-color: #ffffff;
    --bit-bbscanner-reticle-thickness: 3px;
    --bit-bbscanner-reticle-length: 14%;
    --bit-bbscanner-reticle-radius: 0.5rem;
    --bit-bbscanner-control-bg: rgba(18, 22, 30, 0.72);
    --bit-bbscanner-control-fg: #f5f7fa;
    --bit-bbscanner-control-hover-bg: rgba(40, 48, 62, 0.9);
    --bit-bbscanner-focus-ring: 0 0 0 3px rgba(79, 140, 255, 0.55);
    --bit-bbscanner-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bit-bbscanner-gap: 0.5rem;
    --bit-bbscanner-transition: 160ms ease;
}

.bit-bbscanner {
    position: relative;
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    /* The component sets --bit-bbscanner-aspect to the camera's negotiated ratio once it is open, so
       nothing is cropped and overlays line up with the frame exactly. */
    aspect-ratio: var(--bit-bbscanner-aspect, 4 / 3);
    overflow: hidden;
    border-radius: var(--bit-bbscanner-radius);
    background: var(--bit-bbscanner-bg);
    color: var(--bit-bbscanner-fg);
    font-family: var(--bit-bbscanner-font);
    contain: layout paint;
}

/* An image file dragged over a scanner that takes still images: the whole scanner is the drop target. */
.bit-bbscanner[data-drop="true"] {
    outline: 3px dashed var(--bit-bbscanner-accent);
    outline-offset: -3px;
}

.bit-bbscanner[data-fill="contain"] {
    aspect-ratio: auto;
    block-size: 100%;
}

.bit-bbscanner__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    background: #000;
    forced-color-adjust: none;
}

.bit-bbscanner__video[data-mirrored="true"] {
    transform: scaleX(-1);
}

/* The dimmed surround is drawn with a single element and a hole punched by clip-path, which
   keeps the overlay to one composited layer no matter how the region is configured. */
.bit-bbscanner__mask {
    position: absolute;
    inset: 0;
    background: var(--bit-bbscanner-overlay);
    pointer-events: none;
    transition: clip-path var(--bit-bbscanner-transition);
    forced-color-adjust: none;
}

/* The reticle box, the mask hole and the result highlight are positioned in camera frame
   coordinates, which do not flip with the writing direction: a symbol on the left of the frame
   is on the left of the video whatever the document's direction. Their geometry therefore uses
   physical properties, set inline by the component; everything else in the file is logical. */
.bit-bbscanner__reticle {
    position: absolute;
    pointer-events: none;
}

.bit-bbscanner__corner {
    position: absolute;
    inline-size: var(--bit-bbscanner-reticle-length);
    block-size: var(--bit-bbscanner-reticle-length);
    border: 0 solid var(--bit-bbscanner-reticle-color);
}

.bit-bbscanner__corner--tl {
    inset-block-start: 0;
    inset-inline-start: 0;
    border-block-start-width: var(--bit-bbscanner-reticle-thickness);
    border-inline-start-width: var(--bit-bbscanner-reticle-thickness);
    border-start-start-radius: var(--bit-bbscanner-reticle-radius);
}

.bit-bbscanner__corner--tr {
    inset-block-start: 0;
    inset-inline-end: 0;
    border-block-start-width: var(--bit-bbscanner-reticle-thickness);
    border-inline-end-width: var(--bit-bbscanner-reticle-thickness);
    border-start-end-radius: var(--bit-bbscanner-reticle-radius);
}

.bit-bbscanner__corner--bl {
    inset-block-end: 0;
    inset-inline-start: 0;
    border-block-end-width: var(--bit-bbscanner-reticle-thickness);
    border-inline-start-width: var(--bit-bbscanner-reticle-thickness);
    border-end-start-radius: var(--bit-bbscanner-reticle-radius);
}

.bit-bbscanner__corner--br {
    inset-block-end: 0;
    inset-inline-end: 0;
    border-block-end-width: var(--bit-bbscanner-reticle-thickness);
    border-inline-end-width: var(--bit-bbscanner-reticle-thickness);
    border-end-end-radius: var(--bit-bbscanner-reticle-radius);
}

.bit-bbscanner[data-status="scanning"] .bit-bbscanner__corner {
    animation: bit-bbscanner-pulse 2.4s ease-in-out infinite;
}

@keyframes bit-bbscanner-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .bit-bbscanner[data-status="scanning"] .bit-bbscanner__corner {
        animation: none;
    }

    .bit-bbscanner__mask,
    .bit-bbscanner__hit,
    .bit-bbscanner__button {
        transition: none;
    }
}

/* The highlight drawn over a decoded symbol. Position and size come from inline custom
   properties set by the component, so updating it never re-renders the rest of the tree. */
.bit-bbscanner__hit {
    position: absolute;
    top: var(--bit-bbscanner-hit-top, 0);
    left: var(--bit-bbscanner-hit-left, 0);
    width: var(--bit-bbscanner-hit-width, 0);
    height: var(--bit-bbscanner-hit-height, 0);
    border: 2px solid var(--bit-bbscanner-success);
    border-radius: 0.35rem;
    pointer-events: none;
    transition: top var(--bit-bbscanner-transition), left var(--bit-bbscanner-transition),
        width var(--bit-bbscanner-transition), height var(--bit-bbscanner-transition);
    forced-color-adjust: none;
}

.bit-bbscanner__controls {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bit-bbscanner-gap);
    padding: var(--bit-bbscanner-gap);
    background: linear-gradient(to top, rgba(6, 8, 12, 0.75), transparent);
}

.bit-bbscanner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--bit-bbscanner-control-bg);
    color: var(--bit-bbscanner-control-fg);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--bit-bbscanner-transition);
}

.bit-bbscanner__button:hover:not(:disabled) {
    background: var(--bit-bbscanner-control-hover-bg);
}

/* A transparent outline is invisible normally but becomes a system colour under forced
   colours, where box shadows are dropped. */
.bit-bbscanner__button:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--bit-bbscanner-focus-ring);
}

.bit-bbscanner__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bit-bbscanner__button[aria-pressed="true"] {
    background: var(--bit-bbscanner-accent);
}

.bit-bbscanner__select {
    max-inline-size: 12rem;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--bit-bbscanner-control-bg);
    color: var(--bit-bbscanner-control-fg);
    font: inherit;
    font-size: 0.875rem;
}

.bit-bbscanner__select:focus-visible,
.bit-bbscanner__range:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--bit-bbscanner-focus-ring);
}

.bit-bbscanner__range {
    inline-size: 7rem;
    accent-color: var(--bit-bbscanner-accent);
}

.bit-bbscanner__status {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    gap: var(--bit-bbscanner-gap);
    padding: var(--bit-bbscanner-gap) 0.75rem;
    background: linear-gradient(to bottom, rgba(6, 8, 12, 0.75), transparent);
    font-size: 0.875rem;
}

.bit-bbscanner__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--bit-bbscanner-muted);
    flex: none;
}

.bit-bbscanner[data-status="scanning"] .bit-bbscanner__dot { background: var(--bit-bbscanner-success); }
.bit-bbscanner[data-status="starting"] .bit-bbscanner__dot { background: var(--bit-bbscanner-accent); }
.bit-bbscanner[data-status="paused"] .bit-bbscanner__dot { background: #e6b800; }
.bit-bbscanner[data-status="faulted"] .bit-bbscanner__dot { background: var(--bit-bbscanner-danger); }

.bit-bbscanner__message {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 1rem;
    transform: translateY(-50%);
    padding: 1rem;
    border-radius: var(--bit-bbscanner-radius);
    background: var(--bit-bbscanner-control-bg);
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
}

.bit-bbscanner__message--error {
    border: 1px solid var(--bit-bbscanner-danger);
}

.bit-bbscanner__file {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.bit-bbscanner__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (forced-colors: active) {
    .bit-bbscanner[data-drop="true"] {
        outline-color: Highlight;
    }

    .bit-bbscanner__corner {
        border-color: CanvasText;
    }

    .bit-bbscanner__hit {
        border-color: Highlight;
    }

    .bit-bbscanner__button,
    .bit-bbscanner__select {
        border: 1px solid ButtonText;
    }

    .bit-bbscanner__button:focus-visible,
    .bit-bbscanner__select:focus-visible,
    .bit-bbscanner__range:focus-visible {
        outline-color: Highlight;
    }
}