You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
quaggaJS/stylesheets/example.css

153 lines
3.5 KiB
CSS

@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 */
/* line 1, ../sass/_viewport.scss */
#interactive.viewport {
width: 640px;
}
/* line 6, ../sass/_viewport.scss */
#interactive.viewport canvas, video {
float: left;
width: 640px;
}
/* line 10, ../sass/_viewport.scss */
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
margin-left: -640px;
}
/* line 16, ../sass/_viewport.scss */
.controls .reader-group {
float: right;
border: none;
}
/* line 22, ../sass/_viewport.scss */
#result_strip {
margin: 10px 0;
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
padding: 10px 0;
}
/* line 28, ../sass/_viewport.scss */
#result_strip ul.thumbnails {
padding: 0;
margin: 0;
list-style-type: none;
width: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* line 37, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li {
display: inline-block;
vertical-align: middle;
width: 160px;
}
/* line 41, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail {
padding: 5px;
margin: 4px;
border: 1px dashed #CCC;
}
/* line 46, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail img {
max-width: 140px;
}
/* line 49, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption {
white-space: normal;
}
/* line 51, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption h4 {
text-align: center;
word-wrap: break-word;
height: 40px;
margin: 0px;
}
/* line 61, ../sass/_viewport.scss */
#result_strip ul.thumbnails:after {
content: "";
display: table;
clear: both;
}
@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;
-moz-box-shadow: none;
-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 */
#interactive.viewport {
width: 100%;
height: auto;
overflow: hidden;
}
/* line 11, ../sass/phone/_viewport.scss */
#interactive.viewport canvas, video {
width: 100%;
height: auto;
}
/* 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;
}
#result_strip ul.thumbnails {
width: 100%;
height: auto;
}
/* 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;
height: 180px;
}
}