65 lines
1.8 KiB
CSS
65 lines
1.8 KiB
CSS
/* Manual detection-only correction for phones with OS/browser rotation lock.
|
|
* The camera element, camera cover rectangle and app layout stay untouched.
|
|
* deviceOrientation.ts remaps each rendered EAN detection box into corrected
|
|
* normalized coordinates and publishes them through these custom properties. */
|
|
html[data-detection-rotation='90'] .carton-video-coordinate-space .carton-batch-box,
|
|
html[data-detection-rotation='270'] .carton-video-coordinate-space .carton-batch-box {
|
|
left: var(--fieldlens-box-left) !important;
|
|
top: var(--fieldlens-box-top) !important;
|
|
width: var(--fieldlens-box-width) !important;
|
|
height: var(--fieldlens-box-height) !important;
|
|
}
|
|
|
|
.fieldlens-detection-rotate {
|
|
position: absolute;
|
|
z-index: 12;
|
|
right: max(10px, env(safe-area-inset-right));
|
|
bottom: 10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
min-width: 58px;
|
|
height: 36px;
|
|
padding: 0 9px;
|
|
border: 1px solid rgba(255,255,255,.28);
|
|
border-radius: 5px;
|
|
color: white;
|
|
background: rgba(17,29,25,.82);
|
|
box-shadow: 0 5px 16px rgba(0,0,0,.18);
|
|
backdrop-filter: blur(8px);
|
|
font: inherit;
|
|
}
|
|
|
|
.fieldlens-detection-rotate > span {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.fieldlens-detection-rotate > small {
|
|
color: #d5dfdb;
|
|
font-size: 7px;
|
|
font-weight: 900;
|
|
letter-spacing: .035em;
|
|
}
|
|
|
|
.fieldlens-detection-rotate[data-rotation]:not([data-rotation='0']) {
|
|
color: var(--ink);
|
|
border-color: var(--yellow);
|
|
background: var(--yellow);
|
|
}
|
|
|
|
.fieldlens-detection-rotate[data-rotation]:not([data-rotation='0']) > small {
|
|
color: #493e12;
|
|
}
|
|
|
|
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
|
|
.fieldlens-detection-rotate {
|
|
right: max(8px, env(safe-area-inset-right));
|
|
bottom: 8px;
|
|
height: 32px;
|
|
min-width: 54px;
|
|
padding: 0 8px;
|
|
}
|
|
}
|