You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.4 KiB
37 lines
1.4 KiB
/* QrCode — the module path is generated in the wrapper; CSS owns the frame
|
|
* chrome + the logo overlay. Default fg/bg are fixed-tone (scannability — see
|
|
* the recipe note); `color` / `background` props override the tokens inline. */
|
|
|
|
[data-qr-code] {
|
|
display: block;
|
|
border-radius: var(--qr-code-radius);
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Logo overlay — fills the cleared centre (a foreignObject), centres the
|
|
* media, paints its own light backing so it reads over the modules. */
|
|
/* width/height (physical) — not inline-size/block-size: logical props don't
|
|
* size an <svg> element (it uses width/height as geometry) nor resolve cleanly
|
|
* for HTML inside a viewBox-scaled foreignObject. */
|
|
[data-qr-code-overlay] {
|
|
box-sizing: border-box;
|
|
width: 100%; /* literal: fills its box — identity, not a knob */
|
|
height: 100%; /* literal: fills its box — identity, not a knob */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: var(--qr-code-overlay-bg);
|
|
border-radius: var(--qr-code-overlay-radius);
|
|
/* Padding is set inline (proportional to the cleared centre): a fixed px
|
|
* padding equals that many *modules* inside a viewBox-scaled foreignObject
|
|
* and would collapse the content box. */
|
|
}
|
|
|
|
[data-qr-code-overlay] :where(img, svg) {
|
|
width: 100%; /* literal: fills its box — identity, not a knob */
|
|
height: 100%; /* literal: fills its box — identity, not a knob */
|
|
object-fit: contain;
|
|
}
|