Adds demo.
Lars Jung
12 years ago
parent
00b874bcc3
commit
6ed920464a
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,294 @@
|
|||||||
|
/*
|
||||||
|
html5slider - a JS implementation of <input type=range> for Firefox 16 and up
|
||||||
|
https://github.com/fryn/html5slider
|
||||||
|
|
||||||
|
Copyright (c) 2010-2013 Frank Yan, <http://frankyan.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
// test for native support
|
||||||
|
var test = document.createElement('input');
|
||||||
|
try {
|
||||||
|
test.type = 'range';
|
||||||
|
if (test.type == 'range')
|
||||||
|
return;
|
||||||
|
} catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// test for required property support
|
||||||
|
test.style.background = 'linear-gradient(red, red)';
|
||||||
|
if (!test.style.backgroundImage || !('MozAppearance' in test.style))
|
||||||
|
return;
|
||||||
|
|
||||||
|
var scale;
|
||||||
|
var isMac = navigator.platform == 'MacIntel';
|
||||||
|
var thumb = {
|
||||||
|
radius: isMac ? 9 : 6,
|
||||||
|
width: isMac ? 22 : 12,
|
||||||
|
height: isMac ? 16 : 20
|
||||||
|
};
|
||||||
|
var track = 'linear-gradient(transparent ' + (isMac ?
|
||||||
|
'6px, #999 6px, #999 7px, #ccc 8px, #bbb 9px, #bbb 10px, transparent 10px' :
|
||||||
|
'9px, #999 9px, #bbb 10px, #fff 11px, transparent 11px') +
|
||||||
|
', transparent)';
|
||||||
|
var styles = {
|
||||||
|
'min-width': thumb.width + 'px',
|
||||||
|
'min-height': thumb.height + 'px',
|
||||||
|
'max-height': thumb.height + 'px',
|
||||||
|
padding: '0 0 ' + (isMac ? '2px' : '1px'),
|
||||||
|
border: 0,
|
||||||
|
'border-radius': 0,
|
||||||
|
cursor: 'default',
|
||||||
|
'text-indent': '-999999px' // -moz-user-select: none; breaks mouse capture
|
||||||
|
};
|
||||||
|
var options = {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['min', 'max', 'step', 'value']
|
||||||
|
};
|
||||||
|
var onInput = document.createEvent('HTMLEvents');
|
||||||
|
onInput.initEvent('input', true, false);
|
||||||
|
var onChange = document.createEvent('HTMLEvents');
|
||||||
|
onChange.initEvent('change', true, false);
|
||||||
|
|
||||||
|
if (document.readyState == 'loading')
|
||||||
|
document.addEventListener('DOMContentLoaded', initialize, true);
|
||||||
|
else
|
||||||
|
initialize();
|
||||||
|
addEventListener('pageshow', recreate, true);
|
||||||
|
|
||||||
|
function initialize() {
|
||||||
|
// create initial sliders
|
||||||
|
recreate();
|
||||||
|
// create sliders on-the-fly
|
||||||
|
new MutationObserver(function(mutations) {
|
||||||
|
mutations.forEach(function(mutation) {
|
||||||
|
if (mutation.addedNodes)
|
||||||
|
Array.forEach(mutation.addedNodes, function(node) {
|
||||||
|
if (!(node instanceof Element))
|
||||||
|
;
|
||||||
|
else if (node.childElementCount)
|
||||||
|
Array.forEach(node.querySelectorAll('input[type=range]'), check);
|
||||||
|
else if (node.mozMatchesSelector('input[type=range]'))
|
||||||
|
check(node);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).observe(document, { childList: true, subtree: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
function recreate() {
|
||||||
|
Array.forEach(document.querySelectorAll('input[type=range]'), check);
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(input) {
|
||||||
|
if (input.type != 'range')
|
||||||
|
transform(input);
|
||||||
|
}
|
||||||
|
|
||||||
|
function transform(slider) {
|
||||||
|
|
||||||
|
var isValueSet, areAttrsSet, isUI, isClick, prevValue, rawValue, prevX;
|
||||||
|
var min, max, step, range, value = slider.value;
|
||||||
|
|
||||||
|
// lazily create shared slider affordance
|
||||||
|
if (!scale) {
|
||||||
|
scale = document.body.appendChild(document.createElement('hr'));
|
||||||
|
style(scale, {
|
||||||
|
'-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal',
|
||||||
|
display: 'block',
|
||||||
|
visibility: 'visible',
|
||||||
|
opacity: 1,
|
||||||
|
position: 'fixed',
|
||||||
|
top: '-999999px'
|
||||||
|
});
|
||||||
|
document.mozSetImageElement('__sliderthumb__', scale);
|
||||||
|
}
|
||||||
|
|
||||||
|
// reimplement value and type properties
|
||||||
|
var getValue = function() { return '' + value; };
|
||||||
|
var setValue = function setValue(val) {
|
||||||
|
value = '' + val;
|
||||||
|
isValueSet = true;
|
||||||
|
draw();
|
||||||
|
delete slider.value;
|
||||||
|
slider.value = value;
|
||||||
|
slider.__defineGetter__('value', getValue);
|
||||||
|
slider.__defineSetter__('value', setValue);
|
||||||
|
};
|
||||||
|
slider.__defineGetter__('value', getValue);
|
||||||
|
slider.__defineSetter__('value', setValue);
|
||||||
|
Object.defineProperty(slider, 'type', {
|
||||||
|
get: function() { return 'range'; }
|
||||||
|
});
|
||||||
|
|
||||||
|
// sync properties with attributes
|
||||||
|
['min', 'max', 'step'].forEach(function(name) {
|
||||||
|
if (slider.hasAttribute(name))
|
||||||
|
areAttrsSet = true;
|
||||||
|
Object.defineProperty(slider, name, {
|
||||||
|
get: function() {
|
||||||
|
return this.hasAttribute(name) ? this.getAttribute(name) : '';
|
||||||
|
},
|
||||||
|
set: function(val) {
|
||||||
|
val === null ?
|
||||||
|
this.removeAttribute(name) :
|
||||||
|
this.setAttribute(name, val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// initialize slider
|
||||||
|
slider.readOnly = true;
|
||||||
|
style(slider, styles);
|
||||||
|
update();
|
||||||
|
|
||||||
|
new MutationObserver(function(mutations) {
|
||||||
|
mutations.forEach(function(mutation) {
|
||||||
|
if (mutation.attributeName != 'value') {
|
||||||
|
update();
|
||||||
|
areAttrsSet = true;
|
||||||
|
}
|
||||||
|
// note that value attribute only sets initial value
|
||||||
|
else if (!isValueSet) {
|
||||||
|
value = slider.getAttribute('value');
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}).observe(slider, options);
|
||||||
|
|
||||||
|
slider.addEventListener('mousedown', onDragStart, true);
|
||||||
|
slider.addEventListener('keydown', onKeyDown, true);
|
||||||
|
slider.addEventListener('focus', onFocus, true);
|
||||||
|
slider.addEventListener('blur', onBlur, true);
|
||||||
|
|
||||||
|
function onDragStart(e) {
|
||||||
|
isClick = true;
|
||||||
|
setTimeout(function() { isClick = false; }, 0);
|
||||||
|
if (e.button || !range)
|
||||||
|
return;
|
||||||
|
var width = parseFloat(getComputedStyle(this).width);
|
||||||
|
var multiplier = (width - thumb.width) / range;
|
||||||
|
if (!multiplier)
|
||||||
|
return;
|
||||||
|
// distance between click and center of thumb
|
||||||
|
var dev = e.clientX - this.getBoundingClientRect().left - thumb.width / 2 -
|
||||||
|
(value - min) * multiplier;
|
||||||
|
// if click was not on thumb, move thumb to click location
|
||||||
|
if (Math.abs(dev) > thumb.radius) {
|
||||||
|
isUI = true;
|
||||||
|
this.value -= -dev / multiplier;
|
||||||
|
}
|
||||||
|
rawValue = value;
|
||||||
|
prevX = e.clientX;
|
||||||
|
this.addEventListener('mousemove', onDrag, true);
|
||||||
|
this.addEventListener('mouseup', onDragEnd, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDrag(e) {
|
||||||
|
var width = parseFloat(getComputedStyle(this).width);
|
||||||
|
var multiplier = (width - thumb.width) / range;
|
||||||
|
if (!multiplier)
|
||||||
|
return;
|
||||||
|
rawValue += (e.clientX - prevX) / multiplier;
|
||||||
|
prevX = e.clientX;
|
||||||
|
isUI = true;
|
||||||
|
this.value = rawValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDragEnd() {
|
||||||
|
this.removeEventListener('mousemove', onDrag, true);
|
||||||
|
this.removeEventListener('mouseup', onDragEnd, true);
|
||||||
|
slider.dispatchEvent(onInput);
|
||||||
|
slider.dispatchEvent(onChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeyDown(e) {
|
||||||
|
if (e.keyCode > 36 && e.keyCode < 41) { // 37-40: left, up, right, down
|
||||||
|
onFocus.call(this);
|
||||||
|
isUI = true;
|
||||||
|
this.value = value + (e.keyCode == 38 || e.keyCode == 39 ? step : -step);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFocus() {
|
||||||
|
if (!isClick)
|
||||||
|
this.style.boxShadow = !isMac ? '0 0 0 2px #fb0' :
|
||||||
|
'inset 0 0 20px rgba(0,127,255,.1), 0 0 1px rgba(0,127,255,.4)';
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBlur() {
|
||||||
|
this.style.boxShadow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// determines whether value is valid number in attribute form
|
||||||
|
function isAttrNum(value) {
|
||||||
|
return !isNaN(value) && +value == parseFloat(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// validates min, max, and step attributes and redraws
|
||||||
|
function update() {
|
||||||
|
min = isAttrNum(slider.min) ? +slider.min : 0;
|
||||||
|
max = isAttrNum(slider.max) ? +slider.max : 100;
|
||||||
|
if (max < min)
|
||||||
|
max = min > 100 ? min : 100;
|
||||||
|
step = isAttrNum(slider.step) && slider.step > 0 ? +slider.step : 1;
|
||||||
|
range = max - min;
|
||||||
|
draw(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// recalculates value property
|
||||||
|
function calc() {
|
||||||
|
if (!isValueSet && !areAttrsSet)
|
||||||
|
value = slider.getAttribute('value');
|
||||||
|
if (!isAttrNum(value))
|
||||||
|
value = (min + max) / 2;;
|
||||||
|
// snap to step intervals (WebKit sometimes does not - bug?)
|
||||||
|
value = Math.round((value - min) / step) * step + min;
|
||||||
|
if (value < min)
|
||||||
|
value = min;
|
||||||
|
else if (value > max)
|
||||||
|
value = min + ~~(range / step) * step;
|
||||||
|
}
|
||||||
|
|
||||||
|
// renders slider using CSS background ;)
|
||||||
|
function draw(attrsModified) {
|
||||||
|
calc();
|
||||||
|
var wasUI = isUI;
|
||||||
|
isUI = false;
|
||||||
|
if (wasUI && value != prevValue)
|
||||||
|
slider.dispatchEvent(onInput);
|
||||||
|
if (!attrsModified && value == prevValue)
|
||||||
|
return;
|
||||||
|
prevValue = value;
|
||||||
|
var position = range ? (value - min) / range * 100 : 0;
|
||||||
|
var bg = '-moz-element(#__sliderthumb__) ' + position + '% no-repeat, ';
|
||||||
|
style(slider, { background: bg + track });
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function style(element, styles) {
|
||||||
|
for (var prop in styles)
|
||||||
|
element.style.setProperty(prop, styles[prop], 'important');
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="no-js no-browser" lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>{{pkg.displayName}} {{pkg.version}} · Demo</title>
|
||||||
|
<meta name="description" content="demo for the jQuery plug in jQuery.qrcode (http://larsjung.de/qrcode/)">
|
||||||
|
<meta name="author" content="Lars Jung">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<link rel="author" href="http://plus.google.com/106403733398479106535">
|
||||||
|
<link rel="shortcut icon" href="icon-16.ico">
|
||||||
|
<link rel="apple-touch-icon" href="icon-48.png" type="image/png">
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
|
||||||
|
<link href='styles.css' rel='stylesheet'>
|
||||||
|
<script src="jquery-1.10.2.js"></script>
|
||||||
|
<script src="jquery.qrcode.js"></script>
|
||||||
|
<script src="ff-range.js"></script>
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="container"></div>
|
||||||
|
|
||||||
|
<div class="control left">
|
||||||
|
<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} · Demo</a>
|
||||||
|
<hr/>
|
||||||
|
<label for="render">RENDER MODE</label>
|
||||||
|
<select id="render">
|
||||||
|
<option value="canvas" selected="selected">Canvas</option>
|
||||||
|
<option value="image">Image</option>
|
||||||
|
<option value="div">DIV</option>
|
||||||
|
</select>
|
||||||
|
<hr/>
|
||||||
|
<label for="size">SIZE:</label>
|
||||||
|
<input id="size" type="range" value="400" min="100" max="1000" step="50" />
|
||||||
|
<label for="color">COLOR</label>
|
||||||
|
<input id="color" type="color" value="#333333" />
|
||||||
|
<label for="bg-color">BACKGROUND COLOR</label>
|
||||||
|
<input id="bg-color" type="color" value="#ffffff" />
|
||||||
|
<label for="text">CONTENT</label>
|
||||||
|
<textarea id="text">http://larsjung.de/qrcode/</textarea>
|
||||||
|
<hr/>
|
||||||
|
<label for="minversion">MINVERSION:</label>
|
||||||
|
<input id="minversion" type="range" value="5" min="1" max="10" step="1" />
|
||||||
|
<label for="eclevel">ERROR CORRECTION LEVEL</label>
|
||||||
|
<select id="eclevel">
|
||||||
|
<option value="L">L - Low (7%)</option>
|
||||||
|
<option value="M">M - Medium (15%)</option>
|
||||||
|
<option value="Q">Q - Quartile (25%)</option>
|
||||||
|
<option value="H" selected="selected">H - High (30%)</option>
|
||||||
|
</select>
|
||||||
|
<label for="quiet">QUIET ZONE:</label>
|
||||||
|
<input id="quiet" type="range" value="1" min="0" max="4" step="1" />
|
||||||
|
<label for="radius">CORNER RADIUS (not in Opera):</label>
|
||||||
|
<input id="radius" type="range" value="50" min="0" max="50" step="10" />
|
||||||
|
<hr/>
|
||||||
|
<a id="download" download="qrcode.png">DOWNLOAD</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control right">
|
||||||
|
<label for="mode">MODE</label>
|
||||||
|
<select id="mode">
|
||||||
|
<option value="0">0 - Normal</option>
|
||||||
|
<option value="1">1 - Label-Strip</option>
|
||||||
|
<option value="2" selected="selected">2 - Label-Box</option>
|
||||||
|
<option value="3">3 - Image-Strip</option>
|
||||||
|
<option value="4">4 - Image-Box</option>
|
||||||
|
</select>
|
||||||
|
<hr/>
|
||||||
|
<label for="label">LABEL</label>
|
||||||
|
<input id="label" type="text" value="jQuery.qrcode" />
|
||||||
|
<label for="font">FONT</label>
|
||||||
|
<input id="font" type="text" value="Ubuntu" />
|
||||||
|
<label for="fontsize">FONT HEIGHT:</label>
|
||||||
|
<input id="fontsize" type="range" value="11" min="1" max="20" step="1" />
|
||||||
|
<label for="fontcolor">FONT COLOR:</label>
|
||||||
|
<input id="fontcolor" type="color" value="#ff9818" />
|
||||||
|
<hr/>
|
||||||
|
<label for="image">IMAGE</label>
|
||||||
|
<input id="image" type="file" />
|
||||||
|
<label for="imagesize">IMAGE HEIGHT:</label>
|
||||||
|
<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img id="img-buffer" src="dummy.png" />
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,100 @@
|
|||||||
|
|
||||||
|
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
|
||||||
|
|
||||||
|
guiValuePairs = [
|
||||||
|
["size", "px"],
|
||||||
|
["minversion", ""],
|
||||||
|
["quiet", "modules"],
|
||||||
|
["radius", "%"],
|
||||||
|
["fontsize", "%"],
|
||||||
|
["imagesize", "%"]
|
||||||
|
],
|
||||||
|
|
||||||
|
updateGui = function () {
|
||||||
|
|
||||||
|
for (var idx in guiValuePairs) {
|
||||||
|
|
||||||
|
var pair = guiValuePairs[idx],
|
||||||
|
$label = $('label[for="' + pair[0] + '"]');
|
||||||
|
|
||||||
|
$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateQrCode = function () {
|
||||||
|
|
||||||
|
var mode = parseInt($("#mode").val(), 10),
|
||||||
|
options = {
|
||||||
|
render: $("#render").val(),
|
||||||
|
ecLevel: $("#eclevel").val(),
|
||||||
|
minVersion: parseInt($("#minversion").val(), 10),
|
||||||
|
color: $("#color").val(),
|
||||||
|
bgColor: $("#bg-color").val(),
|
||||||
|
text: $("#text").val(),
|
||||||
|
size: parseInt($("#size").val(), 10),
|
||||||
|
radius: parseInt($("#radius").val(), 10) * 0.01,
|
||||||
|
quiet: parseInt($("#quiet").val(), 10),
|
||||||
|
|
||||||
|
label: $("#label").val(),
|
||||||
|
labelsize: parseInt($("#fontsize").val(), 10) * 0.01,
|
||||||
|
fontname: $("#font").val(),
|
||||||
|
fontcolor: $("#fontcolor").val(),
|
||||||
|
|
||||||
|
image: $("#img-buffer")[0],
|
||||||
|
imagesize: parseInt($("#imagesize").val(), 10) * 0.01
|
||||||
|
};
|
||||||
|
|
||||||
|
if (mode === 1 || mode === 2) {
|
||||||
|
options.ext = 'label';
|
||||||
|
options.boxed = mode === 2;
|
||||||
|
} else if (mode === 3 || mode === 4) {
|
||||||
|
options.ext = 'image';
|
||||||
|
options.boxed = mode === 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#container").empty().qrcode(options);
|
||||||
|
},
|
||||||
|
|
||||||
|
update = function () {
|
||||||
|
|
||||||
|
updateGui();
|
||||||
|
updateQrCode();
|
||||||
|
},
|
||||||
|
|
||||||
|
onImageInput = function () {
|
||||||
|
|
||||||
|
var input = $("#image")[0];
|
||||||
|
|
||||||
|
if (input.files && input.files[0]) {
|
||||||
|
|
||||||
|
var reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function (event) {
|
||||||
|
$("#img-buffer").attr("src", event.target.result);
|
||||||
|
$("#mode").val("4");
|
||||||
|
setTimeout(update, 250);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(input.files[0]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
download = function (event) {
|
||||||
|
|
||||||
|
var data = $("#container canvas")[0].toDataURL('image/png');
|
||||||
|
$("#download").attr("href", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
if (isOpera) {
|
||||||
|
$('html').addClass('opera');
|
||||||
|
$('#radius').prop('disabled', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#download").on("click", download);
|
||||||
|
$("#image").on('change', onImageInput);
|
||||||
|
$("input, textarea, select").on("input change", update);
|
||||||
|
$(window).load(update);
|
||||||
|
update();
|
||||||
|
});
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
background: repeat url("back.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgb(29, 119, 194);
|
||||||
|
padding: 12px 0 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 20px auto;
|
||||||
|
box-shadow: 0 0 16px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#container > * {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
top: 0;
|
||||||
|
width: 190px;
|
||||||
|
box-shadow: 0 0 32px rgba(0,0,0,0.5);
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control.left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control.right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 12px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background-color: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #bbb;
|
||||||
|
padding: 12px 4px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.opera label[for="radius"] {
|
||||||
|
color: #e55;
|
||||||
|
}
|
||||||
|
|
||||||
|
#download {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
color: #555;
|
||||||
|
background-color: #ddd;
|
||||||
|
margin: 4px;
|
||||||
|
padding: 8px 0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea, select {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
display: block;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 0 2px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
width: 180px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-buffer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
/* height: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
*/ cursor: pointer;
|
||||||
|
}
|
||||||
|
input::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa) );
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue