mirror of
https://github.com/serratus/quaggaJS.git
synced 2026-08-12 21:21:42 +08:00
Added text-images for EAN and Code128
This commit is contained in:
Christoph Oberhofer
@@ -0,0 +1,10 @@
|
||||
i.icon-24-scan{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 24px;
|
||||
margin-top: 1px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
$overlayWidth: $videoWidth;
|
||||
$overlayHeadline: 16px;
|
||||
$overlayHeadlineMargin: 14px;
|
||||
$overlayPadding: 20px;
|
||||
$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
|
||||
|
||||
.scanner-overlay {
|
||||
display: none;
|
||||
width: $overlayWidth;
|
||||
height: $overlayHeight;
|
||||
position: absolute;
|
||||
padding: $overlayPadding;
|
||||
top: 50%;
|
||||
margin-top: -($overlayHeight)/2 - $overlayPadding;
|
||||
left: 50%;
|
||||
margin-left: -($overlayWidth + 2*$overlayPadding)/2;
|
||||
background-color: $overlayBackground;
|
||||
@include box-shadow(#333333 0px 4px 10px);
|
||||
|
||||
& > .header{
|
||||
position: relative;
|
||||
margin-bottom: $overlayHeadlineMargin;
|
||||
h4, .close{
|
||||
line-height: $overlayHeadline;
|
||||
}
|
||||
h4{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: $overlayHeadline;
|
||||
width: $overlayHeadline;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
& > .body{
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "phone/core";
|
||||
@import "phone/viewport";
|
||||
@import "phone/overlay";
|
||||
@@ -0,0 +1,4 @@
|
||||
@include tablet {
|
||||
/* tablet styles */
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
$tablet_upper: 1024px;
|
||||
$phone_upper: 603px;
|
||||
|
||||
@mixin phone {
|
||||
@media (max-width: $phone_upper) {
|
||||
@content;
|
||||
}
|
||||
|
||||
} // @mixin phone
|
||||
|
||||
@mixin tablet {
|
||||
|
||||
@media (min-width: $phone_upper+1) and (max-width: $tablet_upper) {
|
||||
@content;
|
||||
}
|
||||
|
||||
} // @mixin tablet
|
||||
@@ -0,0 +1,7 @@
|
||||
$background_color: #FFF;
|
||||
$overlayBackground: #FFF;
|
||||
$videoWidth: 640px;
|
||||
$videoHeight: 480px;
|
||||
|
||||
$text-font: Ubuntu, sans-serif;
|
||||
$header-font: 'Cabin Condensed', sans-serif;
|
||||
@@ -0,0 +1,54 @@
|
||||
#interactive.viewport{
|
||||
width: $videoWidth;
|
||||
height: $videoHeight;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas, video{
|
||||
float: left;
|
||||
width: $videoWidth;
|
||||
height: $videoHeight;
|
||||
&.drawingBuffer{
|
||||
margin-left: -$videoWidth;
|
||||
}
|
||||
}
|
||||
|
||||
#result_strip{
|
||||
margin: 10px 0;
|
||||
border-top: 1px solid #EEE;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: 10px 0;
|
||||
overflow: auto;
|
||||
ul.thumbnails{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
|
||||
& > li{
|
||||
float: left;
|
||||
width: $videoWidth/4;
|
||||
.thumbnail{
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
border: 1px dashed #CCC;
|
||||
|
||||
img{
|
||||
max-width: $videoWidth/4 - 20px;
|
||||
}
|
||||
.caption{
|
||||
h4{
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
height: 40px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* LESS - http://lesscss.org style sheet */
|
||||
/* Palette color codes */
|
||||
/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
|
||||
|
||||
/* Feel free to copy&paste color codes to your application */
|
||||
|
||||
|
||||
/* MIXINS */
|
||||
|
||||
/* As hex codes */
|
||||
|
||||
$color-primary-0: #FFC600; /* Main Primary color */
|
||||
$color-primary-1: #FFDD69;
|
||||
$color-primary-2: #FFCE22;
|
||||
$color-primary-3: #B78E00;
|
||||
$color-primary-4: #513F00;
|
||||
|
||||
$color-secondary-1-0: #0A4DB7; /* Main Secondary color (1) */
|
||||
$color-secondary-1-1: #6C9CE8;
|
||||
$color-secondary-1-2: #2E6FD6;
|
||||
$color-secondary-1-3: #073379;
|
||||
$color-secondary-1-4: #021636;
|
||||
|
||||
$color-secondary-2-0: #5809BB; /* Main Secondary color (2) */
|
||||
$color-secondary-2-1: #A36BE9;
|
||||
$color-secondary-2-2: #782DD8;
|
||||
$color-secondary-2-3: #3A077C;
|
||||
$color-secondary-2-4: #190237;
|
||||
|
||||
|
||||
|
||||
/* As RGBa codes */
|
||||
|
||||
$rgba-primary-0: rgba(255,198, 0,1); /* Main Primary color */
|
||||
$rgba-primary-1: rgba(255,221,105,1);
|
||||
$rgba-primary-2: rgba(255,206, 34,1);
|
||||
$rgba-primary-3: rgba(183,142, 0,1);
|
||||
$rgba-primary-4: rgba( 81, 63, 0,1);
|
||||
|
||||
$rgba-secondary-1-0: rgba( 10, 77,183,1); /* Main Secondary color (1) */
|
||||
$rgba-secondary-1-1: rgba(108,156,232,1);
|
||||
$rgba-secondary-1-2: rgba( 46,111,214,1);
|
||||
$rgba-secondary-1-3: rgba( 7, 51,121,1);
|
||||
$rgba-secondary-1-4: rgba( 2, 22, 54,1);
|
||||
|
||||
$rgba-secondary-2-0: rgba( 88, 9,187,1); /* Main Secondary color (2) */
|
||||
$rgba-secondary-2-1: rgba(163,107,233,1);
|
||||
$rgba-secondary-2-2: rgba(120, 45,216,1);
|
||||
$rgba-secondary-2-3: rgba( 58, 7,124,1);
|
||||
$rgba-secondary-2-4: rgba( 25, 2, 55,1);
|
||||
|
||||
|
||||
|
||||
/* Generated by Paletton.com © 2002-2014 */
|
||||
/* http://paletton.com */
|
||||
@@ -0,0 +1 @@
|
||||
@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600');
|
||||
@@ -0,0 +1,15 @@
|
||||
@include phone {
|
||||
#container{
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
@include box-shadow(none);
|
||||
|
||||
form.voucher-form{
|
||||
input{
|
||||
&.voucher-code{
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@include phone {
|
||||
$overlayWidth: $videoWidth;
|
||||
$overlayHeadline: 16px;
|
||||
$overlayHeadlineMargin: 14px;
|
||||
$overlayPadding: 20px;
|
||||
$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
|
||||
|
||||
.overlay.scanner {
|
||||
width: $overlayWidth;
|
||||
height: $overlayHeight;
|
||||
padding: $overlayPadding;
|
||||
margin-top: -($overlayHeight)/2 - $overlayPadding;
|
||||
margin-left: -($overlayWidth + 2*$overlayPadding)/2;
|
||||
background-color: $overlayBackground;
|
||||
@include box-shadow(none);
|
||||
|
||||
& > .header{
|
||||
margin-bottom: $overlayHeadlineMargin;
|
||||
h4, .close{
|
||||
line-height: $overlayHeadline;
|
||||
}
|
||||
.close{
|
||||
height: $overlayHeadline;
|
||||
width: $overlayHeadline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@include phone {
|
||||
$videoWidth: 300px;
|
||||
$videoHeight: 400px;
|
||||
|
||||
#interactive.viewport{
|
||||
width: $videoWidth;
|
||||
height: $videoWidth;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas, video{
|
||||
margin-top: ($videoWidth - $videoHeight)/2;
|
||||
width: $videoWidth;
|
||||
height: $videoHeight;
|
||||
&.drawingBuffer{
|
||||
margin-left: -$videoWidth;
|
||||
}
|
||||
}
|
||||
|
||||
#result_strip{
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
ul.thumbnails{
|
||||
& > li{
|
||||
width: $videoWidth/2;
|
||||
.thumbnail{
|
||||
.imgWrapper{
|
||||
width: $videoWidth/2 - 20px;
|
||||
height: $videoWidth/2 - 20px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
margin-top: (($videoWidth/2 - 20px) - ($videoHeight/2 - 20px))/2;
|
||||
width: $videoWidth/2 - 20px;
|
||||
height: $videoHeight/2 - 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
@import "compass/css3";
|
||||
@import "variables";
|
||||
@import "utility";
|
||||
|
||||
/* usual styles */
|
||||
|
||||
@import "fonts";
|
||||
@import "viewport";
|
||||
@import "overlay";
|
||||
@import "icons";
|
||||
|
||||
@import "tablet";
|
||||
@import "phone";
|
||||
@@ -0,0 +1,56 @@
|
||||
@import "compass/css3";
|
||||
@import "variables";
|
||||
@import "utility";
|
||||
|
||||
/* usual styles */
|
||||
@import "colors";
|
||||
@import "fonts";
|
||||
@import "viewport";
|
||||
@import "overlay";
|
||||
@import "icons";
|
||||
|
||||
@import "tablet";
|
||||
@import "phone";
|
||||
|
||||
body{
|
||||
background-color: #FFF;
|
||||
margin: 0px;
|
||||
font-family: $text-font;
|
||||
color: #1e1e1e;
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-family: $header-font;
|
||||
}
|
||||
|
||||
header {
|
||||
background: $color-primary-0;
|
||||
padding: 1em;
|
||||
.headline {
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
h1 {
|
||||
color: $color-primary-1;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background: $color-secondary-1-0;
|
||||
color: $color-secondary-1-1;
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
|
||||
#container{
|
||||
width: 640px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user