mirror of
https://github.com/serratus/quaggaJS.git
synced 2026-08-12 21:21:42 +08:00
examples: CSS cleanup
This commit is contained in:
Christoph Oberhofer
+96
-106
@@ -1,79 +1,109 @@
|
||||
@charset "UTF-8";
|
||||
/* usual styles */
|
||||
/* 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 */
|
||||
/* Main Primary color */
|
||||
/* Main Secondary color (1) */
|
||||
/* Main Secondary color (2) */
|
||||
/* As RGBa codes */
|
||||
/* Main Primary color */
|
||||
/* Main Secondary color (1) */
|
||||
/* Main Secondary color (2) */
|
||||
/* Generated by Paletton.com ├é┬® 2002-2014 */
|
||||
/* http://paletton.com */
|
||||
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
|
||||
/* line 1, ../sass/_viewport.scss */
|
||||
|
||||
body {
|
||||
background-color: #FFF;
|
||||
margin: 0px;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #1e1e1e;
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Cabin Condensed", sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #FFC600;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
header .headline {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header .headline h1 {
|
||||
color: #FFDD69;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header .headline h2 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #0A4DB7;
|
||||
color: #6C9CE8;
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 640px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#interactive.viewport {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
/* line 6, ../sass/_viewport.scss */
|
||||
|
||||
#interactive.viewport canvas, video {
|
||||
float: left;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
/* line 10, ../sass/_viewport.scss */
|
||||
|
||||
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
|
||||
margin-left: -640px;
|
||||
}
|
||||
|
||||
/* line 16, ../sass/_viewport.scss */
|
||||
.controls fieldset {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* line 19, ../sass/_viewport.scss */
|
||||
|
||||
.controls .input-group {
|
||||
float: left;
|
||||
}
|
||||
/* line 21, ../sass/_viewport.scss */
|
||||
|
||||
.controls .input-group input, .controls .input-group button {
|
||||
display: block;
|
||||
}
|
||||
/* line 25, ../sass/_viewport.scss */
|
||||
|
||||
.controls .reader-config-group {
|
||||
float: right;
|
||||
}
|
||||
/* line 28, ../sass/_viewport.scss */
|
||||
|
||||
.controls .reader-config-group label {
|
||||
display: block;
|
||||
}
|
||||
/* line 30, ../sass/_viewport.scss */
|
||||
|
||||
.controls .reader-config-group label span {
|
||||
width: 11rem;
|
||||
width: 9rem;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
/* line 37, ../sass/_viewport.scss */
|
||||
|
||||
.controls:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* line 44, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip {
|
||||
margin: 10px 0;
|
||||
border-top: 1px solid #EEE;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: 10px 0;
|
||||
}
|
||||
/* line 50, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@@ -83,41 +113,41 @@
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* line 59, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul > li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 160px;
|
||||
}
|
||||
/* line 63, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul > li .thumbnail {
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
border: 1px dashed #CCC;
|
||||
}
|
||||
/* line 68, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul > li .thumbnail img {
|
||||
max-width: 140px;
|
||||
}
|
||||
/* line 71, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul > li .thumbnail .caption {
|
||||
white-space: normal;
|
||||
}
|
||||
/* line 73, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul > li .thumbnail .caption h4 {
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
height: 40px;
|
||||
margin: 0px;
|
||||
}
|
||||
/* line 83, ../sass/_viewport.scss */
|
||||
|
||||
#result_strip > ul:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* line 7, ../sass/_overlay.scss */
|
||||
|
||||
.scanner-overlay {
|
||||
display: none;
|
||||
width: 640px;
|
||||
@@ -133,21 +163,21 @@
|
||||
-webkit-box-shadow: #333333 0px 4px 10px;
|
||||
box-shadow: #333333 0px 4px 10px;
|
||||
}
|
||||
/* line 20, ../sass/_overlay.scss */
|
||||
|
||||
.scanner-overlay > .header {
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
/* line 23, ../sass/_overlay.scss */
|
||||
|
||||
.scanner-overlay > .header h4, .scanner-overlay > .header .close {
|
||||
line-height: 16px;
|
||||
}
|
||||
/* line 26, ../sass/_overlay.scss */
|
||||
|
||||
.scanner-overlay > .header h4 {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
/* line 30, ../sass/_overlay.scss */
|
||||
|
||||
.scanner-overlay > .header .close {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
@@ -160,7 +190,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 1, ../sass/_icons.scss */
|
||||
|
||||
i.icon-24-scan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -172,11 +202,8 @@ i.icon-24-scan {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
@media (min-width: 604px) and (max-width: 1024px) {
|
||||
/* tablet styles */
|
||||
}
|
||||
@media (max-width: 603px) {
|
||||
/* line 2, ../sass/phone/_core.scss */
|
||||
|
||||
#container {
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
@@ -184,46 +211,58 @@ i.icon-24-scan {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* line 9, ../sass/phone/_core.scss */
|
||||
|
||||
#container form.voucher-form input.voucher-code {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 603px) {
|
||||
/* line 5, ../sass/phone/_viewport.scss */
|
||||
|
||||
.reader-config-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reader-config-group label > span {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reader-config-group label > select, .reader-config-group label > input {
|
||||
max-width: calc(50% - 2px);
|
||||
}
|
||||
|
||||
#interactive.viewport {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* line 11, ../sass/phone/_viewport.scss */
|
||||
|
||||
#interactive.viewport canvas, video {
|
||||
margin-top: -50px;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
/* line 15, ../sass/phone/_viewport.scss */
|
||||
|
||||
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
|
||||
margin-left: -300px;
|
||||
}
|
||||
|
||||
/* line 20, ../sass/phone/_viewport.scss */
|
||||
|
||||
#result_strip {
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
/* line 24, ../sass/phone/_viewport.scss */
|
||||
|
||||
#result_strip ul.thumbnails > li {
|
||||
width: 150px;
|
||||
}
|
||||
/* line 27, ../sass/phone/_viewport.scss */
|
||||
|
||||
#result_strip ul.thumbnails > li .thumbnail .imgWrapper {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* line 31, ../sass/phone/_viewport.scss */
|
||||
|
||||
#result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
|
||||
margin-top: -25px;
|
||||
width: 130px;
|
||||
@@ -231,7 +270,7 @@ i.icon-24-scan {
|
||||
}
|
||||
}
|
||||
@media (max-width: 603px) {
|
||||
/* line 8, ../sass/phone/_overlay.scss */
|
||||
|
||||
.overlay.scanner {
|
||||
width: 640px;
|
||||
height: 510px;
|
||||
@@ -243,66 +282,17 @@ i.icon-24-scan {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* line 17, ../sass/phone/_overlay.scss */
|
||||
|
||||
.overlay.scanner > .header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
/* line 19, ../sass/phone/_overlay.scss */
|
||||
|
||||
.overlay.scanner > .header h4, .overlay.scanner > .header .close {
|
||||
line-height: 16px;
|
||||
}
|
||||
/* line 22, ../sass/phone/_overlay.scss */
|
||||
|
||||
.overlay.scanner > .header .close {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
/* line 15, ../sass/styles.scss */
|
||||
body {
|
||||
background-color: #FFF;
|
||||
margin: 0px;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #1e1e1e;
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* line 24, ../sass/styles.scss */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Cabin Condensed", sans-serif;
|
||||
}
|
||||
|
||||
/* line 28, ../sass/styles.scss */
|
||||
header {
|
||||
background: #FFC600;
|
||||
padding: 1em;
|
||||
}
|
||||
/* line 31, ../sass/styles.scss */
|
||||
header .headline {
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* line 34, ../sass/styles.scss */
|
||||
header .headline h1 {
|
||||
color: #FFDD69;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* line 39, ../sass/styles.scss */
|
||||
header .headline h2 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
/* line 45, ../sass/styles.scss */
|
||||
footer {
|
||||
background: #0A4DB7;
|
||||
color: #6C9CE8;
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
|
||||
/* line 51, ../sass/styles.scss */
|
||||
#container {
|
||||
width: 640px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user