76 lines
1.7 KiB
SCSS
76 lines
1.7 KiB
SCSS
$scannerBackgroundColor: #060d2d;
|
|
|
|
#tab-scan {
|
|
color: #fff;
|
|
text-align: center;
|
|
background: transparent none;
|
|
.bar-header {
|
|
opacity: .9;
|
|
}
|
|
.zero-state-cta {
|
|
padding-bottom: 6vh;
|
|
}
|
|
&-has-problems,
|
|
&-loading-camera {
|
|
background-color: $scannerBackgroundColor;
|
|
}
|
|
&-loading-camera {
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
&-camera-ready {
|
|
// view background is transparent to show video preview
|
|
background: none transparent;
|
|
.scanner-controls {
|
|
width: 100%;
|
|
text-align: center;
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
.guides {
|
|
display: flex;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.qr-scan-guides {
|
|
width: 60%;
|
|
max-width: 400px;
|
|
margin-bottom: 8em;
|
|
max-height: 50%;
|
|
}
|
|
.icon-flash, .icon-camera-toggle {
|
|
border-radius: 50%;
|
|
width: 4em;
|
|
height: 4em;
|
|
background-color: rgba(13, 13, 13, 0.79);
|
|
background-repeat: no-repeat;
|
|
background-clip: padding-box;
|
|
background-size: 100%;
|
|
display: inline-block;
|
|
margin: 2em 1em;
|
|
cursor: pointer;
|
|
// hover for desktop only
|
|
body:not(.platform-cordova) &:hover {
|
|
background-color: rgba(31, 40, 78, 0.79);
|
|
}
|
|
&.active, &:active {
|
|
background-color: rgba(100, 124, 232, 0.79);
|
|
}
|
|
}
|
|
.icon-flash {
|
|
background-image: url("../img/icon-flash.svg");
|
|
}
|
|
.icon-camera-toggle {
|
|
background-image: url("../img/icon-camera-toggle.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
#cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
|
|
background-color: $scannerBackgroundColor !important;
|
|
}
|