commit
d8e6e62923
@ -0,0 +1,3 @@
|
||||
/node_modules
|
||||
/.idea
|
||||
/package-lock.json
|
||||
@ -0,0 +1,6 @@
|
||||
Gruntfile.js
|
||||
tasks
|
||||
node_modules
|
||||
test
|
||||
.travis.yml
|
||||
appveyor.yml
|
||||
@ -0,0 +1,7 @@
|
||||
os:
|
||||
- linux
|
||||
language: node_js
|
||||
node_js:
|
||||
- '4'
|
||||
- '8'
|
||||
- '10'
|
||||
@ -0,0 +1,193 @@
|
||||
// To use this file in WebStorm, right click on the file name in the Project Panel (normally left) and select "Open Grunt Console"
|
||||
|
||||
/** @namespace __dirname */
|
||||
/* jshint -W097 */// jshint strict:false
|
||||
/*jslint node: true */
|
||||
"use strict";
|
||||
|
||||
function getAppName() {
|
||||
var parts = __dirname.replace(/\\/g, '/').split('/');
|
||||
return parts[parts.length - 1].split('.')[0].toLowerCase();
|
||||
}
|
||||
|
||||
module.exports = function (grunt) {
|
||||
|
||||
var srcDir = __dirname + '/';
|
||||
var pkg = grunt.file.readJSON('package.json');
|
||||
var iopackage = grunt.file.readJSON('io-package.json');
|
||||
var version = (pkg && pkg.version) ? pkg.version : iopackage.common.version;
|
||||
var appName = getAppName();
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: pkg,
|
||||
replace: {
|
||||
core: {
|
||||
options: {
|
||||
patterns: [
|
||||
{
|
||||
match: /var version = *'[\.0-9]*';/g,
|
||||
replacement: "var version = '" + version + "';"
|
||||
},
|
||||
{
|
||||
match: /"version"\: *"[\.0-9]*",/g,
|
||||
replacement: '"version": "' + version + '",'
|
||||
}
|
||||
]
|
||||
},
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [
|
||||
srcDir + 'controller.js',
|
||||
srcDir + 'package.json',
|
||||
srcDir + 'io-package.json'
|
||||
],
|
||||
dest: srcDir
|
||||
}
|
||||
]
|
||||
},
|
||||
name: {
|
||||
options: {
|
||||
patterns: [
|
||||
{
|
||||
match: /yunkong2/gi,
|
||||
replacement: appName
|
||||
}
|
||||
]
|
||||
},
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [
|
||||
srcDir + '*.*',
|
||||
srcDir + '.travis.yml'
|
||||
],
|
||||
dest: srcDir
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [
|
||||
srcDir + 'admin/*.*',
|
||||
'!' + srcDir + 'admin/*.png'
|
||||
],
|
||||
dest: srcDir + 'admin'
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [
|
||||
srcDir + 'lib/*.*'
|
||||
],
|
||||
dest: srcDir + 'lib'
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [
|
||||
srcDir + 'example/*.*'
|
||||
],
|
||||
dest: srcDir + 'example'
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [
|
||||
srcDir + 'www/*.*'
|
||||
],
|
||||
dest: srcDir + 'www'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// Javascript code styler
|
||||
jscs: require(__dirname + '/tasks/jscs.js'),
|
||||
// Lint
|
||||
jshint: require(__dirname + '/tasks/jshint.js'),
|
||||
http: {
|
||||
get_hjscs: {
|
||||
options: {
|
||||
url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.js-controller/master/tasks/jscs.js'
|
||||
},
|
||||
dest: 'tasks/jscs.js'
|
||||
},
|
||||
get_jshint: {
|
||||
options: {
|
||||
url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.js-controller/master/tasks/jshint.js'
|
||||
},
|
||||
dest: 'tasks/jshint.js'
|
||||
},
|
||||
get_gruntfile: {
|
||||
options: {
|
||||
url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.build/master/adapters/Gruntfile.js'
|
||||
},
|
||||
dest: 'Gruntfile.js'
|
||||
},
|
||||
get_utilsfile: {
|
||||
options: {
|
||||
url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.build/master/adapters/utils.js'
|
||||
},
|
||||
dest: 'lib/utils.js'
|
||||
},
|
||||
get_jscsRules: {
|
||||
options: {
|
||||
url: 'https://raw.githubusercontent.com/' + appName + '/' + appName + '.js-controller/master/tasks/jscsRules.js'
|
||||
},
|
||||
dest: 'tasks/jscsRules.js'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.registerTask('updateReadme', function () {
|
||||
var readme = grunt.file.read('README.md');
|
||||
var pos = readme.indexOf('## Changelog\n');
|
||||
if (pos != -1) {
|
||||
var readmeStart = readme.substring(0, pos + '## Changelog\n'.length);
|
||||
var readmeEnd = readme.substring(pos + '## Changelog\n'.length);
|
||||
|
||||
if (readme.indexOf(version) == -1) {
|
||||
var timestamp = new Date();
|
||||
var date = timestamp.getFullYear() + '-' +
|
||||
('0' + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' +
|
||||
('0' + (timestamp.getDate()).toString(10)).slice(-2);
|
||||
|
||||
var news = "";
|
||||
if (iopackage.common.whatsNew) {
|
||||
for (var i = 0; i < iopackage.common.whatsNew.length; i++) {
|
||||
if (typeof iopackage.common.whatsNew[i] == 'string') {
|
||||
news += '* ' + iopackage.common.whatsNew[i] + '\n';
|
||||
} else {
|
||||
news += '* ' + iopackage.common.whatsNew[i].en + '\n';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
grunt.file.write('README.md', readmeStart + '### ' + version + ' (' + date + ')\n' + (news ? news + '\n\n' : '\n') + readmeEnd);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-replace');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-jscs');
|
||||
grunt.loadNpmTasks('grunt-http');
|
||||
|
||||
grunt.registerTask('default', [
|
||||
'http',
|
||||
'replace:core',
|
||||
'updateReadme',
|
||||
'jshint',
|
||||
'jscs'
|
||||
]);
|
||||
|
||||
grunt.registerTask('p', [
|
||||
'replace:core',
|
||||
'updateReadme'
|
||||
]);
|
||||
grunt.registerTask('rename', [
|
||||
'replace:name'
|
||||
]);
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013-2018 bluefox <dogafox@gmail.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.
|
||||
|
||||
@ -0,0 +1,123 @@
|
||||
|
||||
yunkong2.vis-hqWidgets
|
||||
============
|
||||
|
||||
[](https://www.npmjs.com/package/yunkong2.vis-hqwidgets)
|
||||
[](https://www.npmjs.com/package/yunkong2.vis-hqwidgets)
|
||||
|
||||
[](https://nodei.co/npm/yunkong2.vis-hqwidgets/)
|
||||
|
||||
hqWidgets - High quality widgets for yunkong2.vis
|
||||
|
||||
|
||||
For one widget the jQuery.knob plugin (MIT) from Anthony Terrien is used.
|
||||
http://anthonyterrien.com/knob/ or https://git.spacen.net/aterrien/jQuery-Knob
|
||||
|
||||
## Changelog
|
||||
### 1.1.2 (2018-06-09)
|
||||
* (bluefox) Odometer was fixed while rendering in invisible state
|
||||
|
||||
### 1.1.1 (2017-10-18)
|
||||
* (bluefox) Fix interval description for russian
|
||||
|
||||
### 1.0.11 (2017-09-18)
|
||||
* (bluefox) Hide left description
|
||||
* (Sebastian Rosenberg) added feature to select shutter popup window position.
|
||||
|
||||
### 1.0.10 (2017-08-12)
|
||||
* (bluefox) Fix the window handle update
|
||||
|
||||
### 1.0.9 (2017-07-22)
|
||||
* (bluefox) Small fixes for empty images
|
||||
|
||||
### 1.0.8 (2016-11-24)
|
||||
* (bluefox) Reduce render interval
|
||||
|
||||
### 1.0.7 (2016-11-11)
|
||||
* (bluefox) Allow set of padding for description
|
||||
|
||||
### 1.0.6 (2016-10-11)
|
||||
* (bluefox) Fix circle Knob if negative limits
|
||||
* (bluefox) Fix first switch by checkbox
|
||||
|
||||
### 1.0.5 (2016-09-14)
|
||||
* (bluefox) show "last action" fixed
|
||||
|
||||
### 1.0.4 (2016-09-13)
|
||||
* (bluefox) fix problem in inner temperature if knob widget set installed
|
||||
* (Jens Maus) removed all special IE5/6 CSS hacky statements with prepending asterisk (*) characters which are just producing CSS warnings on browsers like Safari.
|
||||
|
||||
### 1.0.3 (2016-05-30)
|
||||
* (bluefox) fix initial value of shutter if inverted
|
||||
|
||||
### 1.0.2 (2016-05-30)
|
||||
* (bluefox) change "last changed" to ms
|
||||
|
||||
### 1.0.1 (2016-05-26)
|
||||
* (bluefox) add odometer widget
|
||||
|
||||
### 1.0.0 (2016-04-12)
|
||||
* (bluefox) fix blinds - control z-index of widgets if popup window opened
|
||||
* (bluefox) add colorOn for checkbox
|
||||
|
||||
### 0.2.5 (2015-12-19)
|
||||
* (bluefox) fix hqWidgets on/off
|
||||
|
||||
### 0.2.4 (2015-12-19)
|
||||
* (bluefox) fix height of graphic dialog
|
||||
|
||||
### 0.2.3 (2015-12-19)
|
||||
* (bluefox) add green and blue colors to checkbox
|
||||
* (bluefox) working on lock
|
||||
* (bluefox) add readOnly option to "on/off"
|
||||
|
||||
### 0.2.2 (2015-11-10)
|
||||
(bluefox) fix checkbox
|
||||
|
||||
### 0.2.1 (2015-10-17)
|
||||
(bluefox) enable description for door and shutter
|
||||
|
||||
### 0.2.0 (2015-10-14)
|
||||
(bluefox) fix problem with temperature if it was as string
|
||||
(bluefox) make popup window (shutter) with most z-index when showing them
|
||||
|
||||
### 0.1.10 (2015-10-12)
|
||||
* (bluefox) fix door widget
|
||||
|
||||
### 0.1.9 (2015-10-05)
|
||||
* (bluefox) fix update of temperature on widgets
|
||||
|
||||
### 0.1.8 (2015-10-03)
|
||||
* (bluefox) fix On/Off Icon if changed while invisible
|
||||
* (bluefox) fix error with style in OutTemp
|
||||
|
||||
### 0.1.7 (2015-10-02)
|
||||
* (bluefox) fix "working" icon
|
||||
* (bluefox) fix on/Off button
|
||||
|
||||
### 0.1.6 (2015-09-30)
|
||||
* (bluefox) draw widgets first when the view is visible
|
||||
|
||||
### 0.1.5 (2015-09-26)
|
||||
* (bluefox) add push-button feature to on/off
|
||||
|
||||
### 0.1.4 (2015-09-24)
|
||||
* (bluefox) add outdoor temperature widget
|
||||
* (bluefox) auto fill of OIDs
|
||||
* (bluefox) add colors for texts
|
||||
* (bluefox) add door widget
|
||||
|
||||
### 0.1.3 (2015-09-17)
|
||||
* (bluefox) try to fix feedback in hqWidgets/Dimmer
|
||||
|
||||
### 0.1.2 (2015-09-13)
|
||||
* (bluefox) add step to dimmer and temperature
|
||||
* (bluefox) add "is comma" and "digits after comma" to circle
|
||||
* (bluefox) show waves when ack=true, even if widget itself set the value.
|
||||
|
||||
### 0.1.0 (2015-07-09)
|
||||
- (bluefox) initial checkin
|
||||
|
||||
## License
|
||||
Copyright (c) 2013-2018 bluefox https://git.spacen.net/GermanBluefox
|
||||
MIT
|
||||
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,61 @@
|
||||
<html>
|
||||
|
||||
<!-- these 4 files always have to be included -->
|
||||
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../lib/css/jquery.multiselect-1.13.css"/>
|
||||
|
||||
<script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
|
||||
<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
|
||||
|
||||
<!-- these two file always have to be included -->
|
||||
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
|
||||
<script type="text/javascript" src="../../js/translate.js"></script>
|
||||
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
|
||||
|
||||
<style>
|
||||
.table_header {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
.ip {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<!-- you have to define 2 functions in the global scope: -->
|
||||
<script type="text/javascript">
|
||||
systemDictionary = {
|
||||
"High quality Widgets settings": {
|
||||
"en": "High quality Widgets settings",
|
||||
"de": "High quality Widgets Einstellungen",
|
||||
"ru": "Настройки High quality Widgets"
|
||||
},
|
||||
"There is nothing to setup": {
|
||||
"en": "There is nothing to setup",
|
||||
"de": "Es gibt nichts einzustellen",
|
||||
"ru": "Нечего настраивать"
|
||||
},
|
||||
};
|
||||
|
||||
function load(settings, onChange) {
|
||||
if (!settings) return;
|
||||
|
||||
onChange(false);
|
||||
}
|
||||
|
||||
function save(callback) {
|
||||
callback(null);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="adapter-container">
|
||||
|
||||
<table><tr>
|
||||
<td><img src="hqwidgets.png"></td>
|
||||
<td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">High quality Widgets settings</h3></td>
|
||||
</tr></table>
|
||||
|
||||
<div class="translate">There is nothing to setup</h4>
|
||||
</div>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "yunkong2.vis-hqwidgets",
|
||||
"description": "hqwidgets Widgets for yunkong2.vis",
|
||||
"version": "1.1.2",
|
||||
"author": {
|
||||
"name": "bluefox",
|
||||
"email": "dogafox@gmail.com"
|
||||
},
|
||||
"contributors": [
|
||||
"bluefox <dogafox@gmail.com>"
|
||||
],
|
||||
"homepage": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets/blob/master/LICENSE"
|
||||
}
|
||||
],
|
||||
"keywords": [
|
||||
"yunkong2",
|
||||
"GUI",
|
||||
"DashUI",
|
||||
"web interface",
|
||||
"home automation",
|
||||
"SCADA",
|
||||
"hqwidgets GUI"
|
||||
],
|
||||
"devDependencies": {
|
||||
"grunt": "^1.0.1",
|
||||
"grunt-replace": "^1.0.1",
|
||||
"grunt-contrib-jshint": "^1.1.0",
|
||||
"grunt-jscs": "^3.0.1",
|
||||
"grunt-http": "^2.2.0",
|
||||
"mocha": "^4.1.0",
|
||||
"chai": "^4.1.2"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://git.spacen.net/yunkong2/yunkong2.vis-hqwidgets/issues"
|
||||
},
|
||||
"main": "widgets/hqwidgets.html",
|
||||
"scripts": {
|
||||
"test": "node node_modules/mocha/bin/mocha --exit"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
var srcDir = __dirname + "/../";
|
||||
|
||||
module.exports = {
|
||||
all: {
|
||||
src: [
|
||||
srcDir + "*.js",
|
||||
srcDir + "lib/*.js",
|
||||
srcDir + "adapter/example/*.js",
|
||||
srcDir + "tasks/**/*.js",
|
||||
srcDir + "www/**/*.js",
|
||||
'!' + srcDir + "www/lib/**/*.js",
|
||||
'!' + srcDir + 'node_modules/**/*.js',
|
||||
'!' + srcDir + 'adapter/*/node_modules/**/*.js'
|
||||
],
|
||||
options: require('./jscsRules.js')
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
module.exports = {
|
||||
force: true,
|
||||
"requireCurlyBraces": ["else", "for", "while", "do", "try", "catch"], /*"if",*/
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
|
||||
"requireSpaceBeforeBlockStatements": true,
|
||||
"requireParenthesesAroundIIFE": true,
|
||||
"disallowSpacesInFunctionDeclaration": {"beforeOpeningRoundBrace": true},
|
||||
"disallowSpacesInNamedFunctionExpression": {"beforeOpeningRoundBrace": true},
|
||||
"requireSpacesInFunctionExpression": {"beforeOpeningCurlyBrace": true},
|
||||
"requireSpacesInAnonymousFunctionExpression": {"beforeOpeningRoundBrace": true, "beforeOpeningCurlyBrace": true},
|
||||
"requireSpacesInNamedFunctionExpression": {"beforeOpeningCurlyBrace": true},
|
||||
"requireSpacesInFunctionDeclaration": {"beforeOpeningCurlyBrace": true},
|
||||
"disallowMultipleVarDecl": true,
|
||||
"requireBlocksOnNewline": true,
|
||||
"disallowEmptyBlocks": true,
|
||||
"disallowSpacesInsideObjectBrackets": true,
|
||||
"disallowSpacesInsideArrayBrackets": true,
|
||||
"disallowSpaceAfterObjectKeys": true,
|
||||
"disallowSpacesInsideParentheses": true,
|
||||
"requireCommaBeforeLineBreak": true,
|
||||
//"requireAlignedObjectValues": "all",
|
||||
"requireOperatorBeforeLineBreak": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||
// "disallowLeftStickedOperators": ["?", "+", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||
// "requireRightStickedOperators": ["!"],
|
||||
// "requireSpaceAfterBinaryOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||
//"disallowSpaceAfterBinaryOperators": [","],
|
||||
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
|
||||
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
|
||||
"requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
|
||||
"requireSpaceAfterBinaryOperators": ["?", ">", ",", ">=", "<=", "<", "+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
|
||||
//"validateIndentation": 4,
|
||||
//"validateQuoteMarks": { "mark": "\"", "escape": true },
|
||||
"disallowMixedSpacesAndTabs": true,
|
||||
"disallowKeywordsOnNewLine": ["else", "catch"]
|
||||
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
var srcDir = __dirname + "/../";
|
||||
|
||||
module.exports = {
|
||||
options: {
|
||||
force: true
|
||||
},
|
||||
all: [
|
||||
srcDir + "*.js",
|
||||
srcDir + "lib/*.js",
|
||||
srcDir + "adapter/example/*.js",
|
||||
srcDir + "tasks/**/*.js",
|
||||
srcDir + "www/**/*.js",
|
||||
'!' + srcDir + "www/lib/**/*.js",
|
||||
'!' + srcDir + 'node_modules/**/*.js',
|
||||
'!' + srcDir + 'adapter/*/node_modules/**/*.js'
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,91 @@
|
||||
/* jshint -W097 */
|
||||
/* jshint strict:false */
|
||||
/* jslint node: true */
|
||||
/* jshint expr: true */
|
||||
var expect = require('chai').expect;
|
||||
var fs = require('fs');
|
||||
|
||||
describe('Test package.json and io-package.json', function() {
|
||||
it('Test package files', function (done) {
|
||||
console.log();
|
||||
|
||||
var fileContentIOPackage = fs.readFileSync(__dirname + '/../io-package.json', 'utf8');
|
||||
var ioPackage = JSON.parse(fileContentIOPackage);
|
||||
|
||||
var fileContentNPMPackage = fs.readFileSync(__dirname + '/../package.json', 'utf8');
|
||||
var npmPackage = JSON.parse(fileContentNPMPackage);
|
||||
|
||||
expect(ioPackage).to.be.an('object');
|
||||
expect(npmPackage).to.be.an('object');
|
||||
|
||||
expect(ioPackage.common.version, 'ERROR: Version number in io-package.json needs to exist').to.exist;
|
||||
expect(npmPackage.version, 'ERROR: Version number in package.json needs to exist').to.exist;
|
||||
|
||||
expect(ioPackage.common.version, 'ERROR: Version numbers in package.json and io-package.json needs to match').to.be.equal(npmPackage.version);
|
||||
|
||||
if (!ioPackage.common.news || !ioPackage.common.news[ioPackage.common.version]) {
|
||||
console.log('WARNING: No news entry for current version exists in io-package.json, no rollback in Admin possible!');
|
||||
console.log();
|
||||
}
|
||||
|
||||
expect(npmPackage.author, 'ERROR: Author in package.json needs to exist').to.exist;
|
||||
expect(ioPackage.common.authors, 'ERROR: Authors in io-package.json needs to exist').to.exist;
|
||||
|
||||
if (ioPackage.common.name.indexOf('template') !== 0) {
|
||||
if (Array.isArray(ioPackage.common.authors)) {
|
||||
expect(ioPackage.common.authors.length, 'ERROR: Author in io-package.json needs to be set').to.not.be.equal(0);
|
||||
if (ioPackage.common.authors.length === 1) {
|
||||
expect(ioPackage.common.authors[0], 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name <my@email.com>');
|
||||
}
|
||||
}
|
||||
else {
|
||||
expect(ioPackage.common.authors, 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name <my@email.com>');
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log('WARNING: Testing for set authors field in io-package skipped because template adapter');
|
||||
console.log();
|
||||
}
|
||||
expect(fs.existsSync(__dirname + '/../README.md'), 'ERROR: README.md needs to exist! Please create one with description, detail information and changelog. English is mandatory.').to.be.true;
|
||||
if (!ioPackage.common.titleLang || typeof ioPackage.common.titleLang !== 'object') {
|
||||
console.log('WARNING: titleLang is not existing in io-package.json. Please add');
|
||||
console.log();
|
||||
}
|
||||
if (
|
||||
ioPackage.common.title.indexOf('yunkong2') !== -1 ||
|
||||
ioPackage.common.title.indexOf('yunkong2') !== -1 ||
|
||||
ioPackage.common.title.indexOf('adapter') !== -1 ||
|
||||
ioPackage.common.title.indexOf('Adapter') !== -1
|
||||
) {
|
||||
console.log('WARNING: title contains Adapter or yunkong2. It is clear anyway, that it is adapter for yunkong2.');
|
||||
console.log();
|
||||
}
|
||||
|
||||
if (ioPackage.common.name.indexOf('vis-') !== 0) {
|
||||
if (!ioPackage.common.materialize || !fs.existsSync(__dirname + '/../admin/index_m.html') || !fs.existsSync(__dirname + '/../gulpfile.js')) {
|
||||
console.log('WARNING: Admin3 support is missing! Please add it');
|
||||
console.log();
|
||||
}
|
||||
if (ioPackage.common.materialize) {
|
||||
expect(fs.existsSync(__dirname + '/../admin/index_m.html'), 'Admin3 support is enabled in io-package.json, but index_m.html is missing!').to.be.true;
|
||||
}
|
||||
}
|
||||
|
||||
var licenseFileExists = fs.existsSync(__dirname + '/../LICENSE');
|
||||
var fileContentReadme = fs.readFileSync(__dirname + '/../README.md', 'utf8');
|
||||
if (fileContentReadme.indexOf('## Changelog') === -1) {
|
||||
console.log('Warning: The README.md should have a section ## Changelog');
|
||||
console.log();
|
||||
}
|
||||
expect((licenseFileExists || fileContentReadme.indexOf('## License') !== -1), 'A LICENSE must exist as LICENSE file or as part of the README.md').to.be.true;
|
||||
if (!licenseFileExists) {
|
||||
console.log('Warning: The License should also exist as LICENSE file');
|
||||
console.log();
|
||||
}
|
||||
if (fileContentReadme.indexOf('## License') === -1) {
|
||||
console.log('Warning: The README.md should also have a section ## License to be shown in Admin3');
|
||||
console.log();
|
||||
}
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,343 @@
|
||||
<!--
|
||||
yunkong2.vis high quality Widget-Set
|
||||
|
||||
version: "1.1.2"
|
||||
|
||||
Copyright 6'2014-2018 bluefox<dogafox@gmail.com>
|
||||
|
||||
-->
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/hqwidgets.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/hqwidgetsButtons.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/checkbox.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/glossy.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-car.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-default.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-digital.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-minimal.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-plaza.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-slot-machine.css" />
|
||||
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/odometer-theme-train-station.css" />
|
||||
|
||||
<script type="text/javascript" src="widgets/hqwidgets/js/jquery.knob.js"></script>
|
||||
<script type="text/javascript" src="widgets/hqwidgets/js/odometer.min.js"></script>
|
||||
<script type="text/javascript" src="widgets/hqwidgets/js/hqwidgets.js"></script>
|
||||
|
||||
<style>
|
||||
.odometer-leading .odometer-inside .odometer-digit:first-child,
|
||||
/*, .odometer-leading .odometer-inside .odometer-formatting-mark:nth-child(2),*/
|
||||
.odometer-leading .odometer-inside .odometer-digit:last-child {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="tplHqButton"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="On/Off"
|
||||
data-vis-update-style="true"
|
||||
data-vis-type="ctrl,bool,button,state"
|
||||
data-vis-prev='<div id="prev_tplHqButton" style="position: relative; text-align: initial;padding: 10px !important"><div class="vis-widget_prev vis-hq-button-base" style="overflow: visible; width: 64px; height: 64px; border-radius: 64px; left: 543px; top: 37px; position: absolute;"><div class="vis-hq-main vis-hq-button-base-on" style="z-index: 1; border-radius: 64px;"><div class="vis-hq-middle"><table class="vis-hq-table hq-no-space" style="position: absolute; left: 4px; top: 2px;"><tbody><tr class="hq-no-space"><td class="hq-no-space"><div class="vis-hq-icon" style="text-align: center;"><img class="vis-hq-icon-img" style="height: 56px; width: auto;" src="img/bulb_off.png"></div></td></tr></tbody></table></div></div></div></div>'
|
||||
data-vis-attrs="oid[nothing_selected]/id/changedButtonId;oid-working;oid-battery;oid-signal;readOnly/checkbox;"
|
||||
data-vis-attrs0="group.value;min[false];max[true];pushButton/checkbox;"
|
||||
data-vis-attrs1="group.center;caption;captionOn;iconName[img~bulb_off.png]/image;iconOn/image;btIconWidth[56]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[15]/slider,0,100,1;topOffset[55]/slider,0,100,1;"
|
||||
data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoRight;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;infoRightPaddingLeft/slider,0,100,1;infoRightPaddingRight[15]/slider,0,100,1;"
|
||||
data-vis-attrs3="group.styles;styleNormal/style,hqwidgetsButtons glossy,-button,background;styleActive/style,hqwidgetsButtons glossy,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;"
|
||||
data-vis-attrs4="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;"
|
||||
data-vis-filter="HM-LC-Sw1-Pl,HM-LC-Sw1-FM,HM-Dis-TD-T,HM-LC-Sw2-FM,HM-LC-Sw1PBU-FM,HM-LC-Sw1-SM,HM-LC-Sw1-FM,HM-LC-Sw2-FM,HM-LC-Sw4-PCB,HM-LC-Sw4-SM,HM-LC-Sw4-DR,HM-LC-Sw4-WM,HM-Sec-SFA-SM,HM-OU-CF-Pl,HM-OU-CFM-Pl,HMW-LC-Sw2-DR,HM-LC-Sw1-PB-FM,HM-LC-Sw2-PB-FM,HMW-IO-12-Sw14-DR,HMW-IO-12-Sw7-DR,HM-ES-PMSw1-Pl">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style);
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqDimmer"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="Dimmer"
|
||||
data-vis-type="ctrl,dimmer,button"
|
||||
data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_hqwidgetsDimmer.png"></img>'
|
||||
data-vis-update-style="true"
|
||||
data-vis-attrs="oid[nothing_selected]/id/changedButtonId;oid-working;oid-battery;oid-signal;"
|
||||
data-vis-attrs0="group.value;unit[%];min[0];max[100];digits[0]/number;step[1];is_comma[true]/checkbox;"
|
||||
data-vis-attrs1="group.center;caption;iconName[img~bulb_off.png]/image;iconOn/image;btIconWidth[56]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[15]/slider,0,100,1;topOffset[55]/slider,0,100,1;circleWidth[50]/slider,1,200,1;showValue[true]/checkbox;alwaysShow/checkbox;"
|
||||
data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;infoRightPaddingLeft/slider,0,100,1;infoRightPaddingRight[15]/slider,0,100,1;"
|
||||
data-vis-attrs3="group.styles;styleNormal/style,hqwidgetsButtons glossy,-button,background;styleActive/style,hqwidgetsButtons glossy,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox"
|
||||
data-vis-filter="light.dimmer">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style, 'number');
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqInTemp"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="Inner temperature"
|
||||
data-vis-type="ctrl,temperature"
|
||||
data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_hqwidgetsInTemp.png"></img>'
|
||||
data-vis-update-style="true"
|
||||
data-vis-attrs="oid[nothing_selected]/id,level.temperature/changedTempId;oid-humidity/id,value.humidity;oid-actual/id,value.temperature/changedTemperatureId;oid-drive/id,value.valve;valveBinary/checkbox;oid-battery/id,indicator.battery;"
|
||||
data-vis-attrs0="group.value;unit[°C];min[6];max[30];digits[0]/number;step[1];is_comma[true]/checkbox;"
|
||||
data-vis-attrs1="group.center;caption;iconName[img~Heating.png]/image;btIconWidth[45]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[25]/slider,0,100,1;topOffset[55]/slider,0,100,1;circleWidth[50]/slider,1,100,1;showValue[true]/checkbox;alwaysShow/checkbox;midTextColor/color;"
|
||||
data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;infoRightPaddingLeft/slider,0,100,1;infoRightPaddingRight[15]/slider,0,100,1;"
|
||||
data-vis-attrs3="group.styles;styleNormal[hq-button-base-intemp]/style,hqwidgetsButtons,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;"
|
||||
data-vis-attrs4="group.chart;url;dialog_title;dialog_width;dialog_height;dialog_effect/effect;dialog_timeout/number,0,3600000,100;dialog_modal/checkbox;dialog_open/checkbox"
|
||||
>
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
|
||||
this.data.temperature = true;
|
||||
vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style, 'number');
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqOutTemp"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="Outdoor temperature"
|
||||
data-vis-type="value,temperature"
|
||||
data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_hqwidgetsOutTemp.png"></img>'
|
||||
data-vis-update-style="true"
|
||||
data-vis-attrs="oid-actual/id,value.temperature/changedTempId;oid-humidity/id,value.humidity;oid-battery/id,indicator.battery;"
|
||||
data-vis-attrs0="group.value;unit[°C];min[6];max[30];digits[0]/number;step[1];is_comma[true]/checkbox;"
|
||||
data-vis-attrs1="group.center;caption;iconName[img~Heating.png]/image;btIconWidth[45]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[25]/slider,0,100,1;topOffset[55]/slider,0,100,1;circleWidth[50]/slider,1,100,1;showValue[true]/checkbox;alwaysShow/checkbox;midTextColor/color;"
|
||||
data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;infoRightPaddingLeft/slider,0,100,1;infoRightPaddingRight[15]/slider,0,100,1;"
|
||||
data-vis-attrs3="group.styles;styleNormal[hq-button-base-outtemp]/style,hqwidgetsButtons,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;"
|
||||
data-vis-attrs4="group.chart;url;dialog_title;dialog_width;dialog_height;dialog_effect/effect;dialog_timeout/number,0,3600000,100;dialog_modal/checkbox;dialog_open/checkbox"
|
||||
>
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
|
||||
this.data.temperature = true;
|
||||
vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style, 'number');
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqShutter"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-type="ctrl;window;shutter"
|
||||
data-vis-name="Window and Shutter"
|
||||
data-vis-prev='<div id="prev_tplHqShutter" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev hq-blind-base vis-hq-button-base" style="overflow: visible; width: 110px; height: 90px; left: 109px; top: 74px; position: absolute; padding: 3px 4px 2px;"><table class="hq-blind hq-no-space" style="width: 100%; height: 100%"><tbody><tr><td><div class="hq-blind-blind1" style="border-width: 3px;border-color: #a9a7a8;"><div class="hq-blind-blind2" style="border-width: 3px; "><div class="hq-blind-blind3"><table class="hq-no-space" style="width: 100%; height: 100%; position: absolute"><tbody><tr class="hq-no-space hq-blind-position" style="height: 20%"><td class="hq-no-space hq-blind-blind"></td></tr><tr class="hq-no-space"><td class="hq-no-space"></td></tr></tbody></table><div class="hq-blind-blind4" style="border-width: 3px;border-color: #a5aaad;"><div class="hq-blind-handle hq-blind-handle-bg" style="border-width: 1px;top: 50%; width: 3px; height: 15%;left: calc(100% - 5px);"></div></div></div></div></div></td><td><div class="hq-blind-blind1" style="border-width: 3px;border-color: #a9a7a8;"><div class="hq-blind-blind2" style="border-width: 3px; "><div class="hq-blind-blind3"><table class="hq-no-space" style="width: 100%; height: 100%; position: absolute"><tbody><tr class="hq-no-space hq-blind-position" style="height: 20%"><td class="hq-no-space hq-blind-blind"></td></tr><tr class="hq-no-space"><td class="hq-no-space"></td></tr></tbody></table><div class="hq-blind-blind4 hq-blind-blind4-opened-left" style="border-width: 3px;border-color: #a5aaad;"><div class="hq-blind-handle hq-blind-handle-bg" style="border-width: 1px;top: 50%; width: 3px; height: 15%;-moz-transform-origin: 3px 3px;-ms-transform-origin: 3px 3px;-o-transform-origin: 3px 3px;-webkit-transform-origin: 3px 3px;transform-origin: 3px 3px;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);"></div></div></div></div></div></td></tr></tbody></table></div></div>'
|
||||
data-vis-attrs="oid/id,level.blind/changedWindowId;oid-working/id,indicator.working;min[0];max[100];border_width/slider,0,10,1;slide_count[1]/nselect,1,2,3,4,5,6;invert/checkbox;hide_timeout[2000];noAnimate/checkbox;popupHorizontalPos[center]/select,top,center,bottom;popupVerticalPos[center]/select,left,center,right;"
|
||||
data-vis-attrs0="group.leftRight;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;show_value/checkbox;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;infoRightPaddingLeft/slider,0,100,1;infoRightPaddingRight[15]/slider,0,100,1;"
|
||||
data-vis-attrs1="group.slides/byindex;slide_type(1-slide_count)/select,,left,right,top,bottom;oid-slide-sensor(1-slide_count)/id/changedSensorId;oid-slide-sensor-lowbat(1-slide_count)/id,indicator.battery;oid-slide-handle(1-slide_count)/id/changedSensorId;oid-slide-handle-lowbat(1-slide_count)/id,indicator.battery;"
|
||||
>
|
||||
<div class="vis-widget hq-blind-base <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.hqwidgets.window.init(this.data.wid, this.view, this.data, this.style);
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqDoor"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-type="state;door"
|
||||
data-vis-name="Door"
|
||||
data-vis-prev='<div id="prev_tplHqDoor" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev hq-blind-base vis-hq-button-base" style="overflow: visible; width: 47px; height: 93px; padding: 3px 4px 2px;"><table class="vis-hq-main vis-hq-door vis-hq-no-space" style="border: 2px #8E8D8D solid;"><tbody><tr class="vis-hq-no-space"><td class="vis-hq-no-space vis-hq-door-empty-right"></td><td class="vis-hq-no-space vis-hq-door-sheet" style="width: 100%;"><div class="vis-hq-door-handle" style="left: 75%;"></div></td><td class="vis-hq-no-space vis-hq-door-empty-left" style="width: 0px; background: rgb(81, 81, 81);"></td></tr></tbody></table></div></div></div>'
|
||||
data-vis-attrs="oid/id,state/changedButtonId;oid-battery/id,indicator.battery;border_width/slider,0,10,1;invert/checkbox;door_type/select,,left,right;noAnimate/checkbox;"
|
||||
data-vis-attrs0="group.leftRight;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;"
|
||||
>
|
||||
<div class="vis-widget hq-blind-base <%== this.data.attr('class') %>" style="overflow:visible; width: 50px; height: 100px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.hqwidgets.door.init(this.data.wid, this.view, this.data, this.style);
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqLock"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-prev='<div id="prev_tplHqLock" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-hq-lock-base vis-hq-button-base hq-button-no-background" style="overflow: visible; width: 30px; height: 30px;" ><img src="widgets/hqwidgets/img/lockUnlocked.png" class="vis-hq-lock1" style="width: 100%; height:100%;"></div></div>'
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-type="control;lock"
|
||||
data-vis-name="Lock"
|
||||
data-vis-attrs="oid/id,state/changedLockId;oid-open/id;oid-battery/id,indicator.battery;noAnimate/checkbox;"
|
||||
data-vis-attrs0="group.image;closedIcon[widgets~hqwidgets~img~lockLocked.png]/image;openedIcon[widgets~hqwidgets~img~lockUnlocked.png]/image;"
|
||||
data-vis-attrs1="group.popup;popupRadius[75]/slider,50,150,1;buttonRadius[50]/slider,0,150,1;closeIcon[widgets~hqwidgets~img~lockLocked.png]/image;closeValue;closeStyle/style,hqwidgetsButtons glossy,-button,background;"
|
||||
data-vis-attrs2="openIcon[widgets~hqwidgets~img~lockUnlocked.png]/image;openValue;openStyle/style,hqwidgetsButtons glossy,-button,background;"
|
||||
data-vis-attrs3="openDoorIcon[widgets~hqwidgets~img~openDoor.png]/image;openDoorValue;openDoorStyle/style,hqwidgetsButtons glossy,-button,background;showTimeout[5000]/slider,0,30000,100;"
|
||||
data-vis-attrs4="group.leftRight;descriptionLeftDisabled/checkbox;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;infoLeftPaddingLeft[15]/slider,0,100,1;infoLeftPaddingRight[50]/slider,0,100,1;infoRightPaddingLeft/slider,0,100,1;infoRightPaddingRight[15]/slider,0,100,1;"
|
||||
data-vis-attrs5="group.styles;styleNormal[hq-button-no-background]/style,hqwidgetsButtons glossy,-button,background;styleActive[hq-button-no-background]/style,hqwidgetsButtons glossy,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;"
|
||||
>
|
||||
<div class="vis-widget vis-hq-lock-base <%== this.data.attr('class') %>" style="overflow:visible; width: 30px; height: 30px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.hqwidgets.lock.init(this.data.wid, this.view, this.data, this.style);
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
|
||||
<!--script type="text/ejs" id="tplHqText" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Text" data-vis-render-visible="true" data-vis-attrs="hqoptions">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqText", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqInfo" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Info" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqInfo", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqImage" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Image" data-vis-render-visible="true" data-vis-attrs="hqoptions">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqImage", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqCam" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="IpCamera" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions" data-hqwidgets-filter="HM-OU-CFM-Pl,HM-Sec-SFA-SM,HM-OU-CF-Pl,HM-Sec-SC,HM-SCI-3-FM,HMW-Sen-SC-12-DR,HMW-IO-12-Sw14-DR;.STATE,.OPEN,HM-Sec-Key-S,HM-LC-Sw4-WM,HM-LC-Sw1-Pl,HM-LC-SW1-FM,HM-LC-Sw2-FM,HM-LC-Sw1-SM,HM-LC-Sw4-PCB,HM-LC-Sw4-PCB,HM-LC-Sw4-SM,HM-LC-Sw1-BA-PCB">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqCam", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqGong" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Gong" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions" data-hqwidgets-filter="HM-OU-CFM-Pl,HM-Sec-SFA-SM,HM-OU-CF-Pl,HM-Sec-SC,HM-SCI-3-FM,HMW-Sen-SC-12-DR,HMW-IO-12-Sw14-DR;.STATE,.OPEN,HM-Sec-Key-S,HM-LC-Sw4-WM,HM-LC-Sw1-Pl,HM-LC-SW1-FM,HM-LC-Sw2-FM,HM-LC-Sw1-SM,HM-LC-Sw4-PCB,HM-LC-Sw4-SM,HM-LC-Sw1-BA-PCB">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqGong", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqGauge" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Gauge" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqGauge", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqMotion" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Motion Detector" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions" data-hqwidgets-filter=".STATE,.MOTION;">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqMotion", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqLowbat" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Battery Indicator" data-vis-render-visible="true" data-vis-attrs="hqoptions" data-hqwidgets-filter=".LOWBAT">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
}
|
||||
else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqLowbat", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqIp" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Ping device" data-vis-render-visible="true" data-vis-attrs="hqoptions" data-hqwidgets-filter="PING">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
} else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqIp", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqCharts" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Charts" data-vis-render-visible="true" data-vis-attrs="hqoptions">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
} else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqCharts", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
<script type="text/ejs" id="tplHqEventlist" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Eventlist" data-vis-render-visible="true" data-vis-attrs="hqoptions">
|
||||
<%
|
||||
if (this && this.data && this.data.attr) {
|
||||
if (this.data.attr('hqoptions')){
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
|
||||
} else {
|
||||
vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqEventlist", this.view);
|
||||
}
|
||||
}
|
||||
%>
|
||||
</script-->
|
||||
|
||||
<script id="tplHqCheckbox"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="Checkbox"
|
||||
data-vis-type="ctrl,checkbox"
|
||||
data-vis-prev='<div id="prev_tplHqCheckbox" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="overflow: visible; width: 108px; height: 35px"><div class="checkbox-small-orange-wrap"><div class="checkbox-small-orange-button"><input type="checkbox" style="display: none;"></div></div></div></div>'
|
||||
data-vis-update-style="true"
|
||||
data-vis-attrs="oid[nothing_selected]/id;val_false[false];val_true[true];staticValue;"
|
||||
data-vis-attrs0="checkboxSize[big]/select,big,small;checkboxColor[grey]/select,orange,blue,green,grey;checkboxColorOn[orange]/select,orange,blue,green,grey;readOnly/checkbox"
|
||||
>
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 216px; height: 68px" id="<%= this.data.attr('wid') %>" data-vis-resizable='{"disabled":true, "handles":"e"}'><%
|
||||
vis.binds.hqwidgets.checkbox.init(this.data.wid, this.view, this.data, this.style);
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
<script id="tplHqCircle"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="CircleKnob"
|
||||
data-vis-update-style="true"
|
||||
data-vis-type="ctrl,number,dimmer,knob"
|
||||
data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_hqwidgetsCircleKnob.png"></img>'
|
||||
data-vis-attrs="oid[nothing_selected]/id/changedButtonId;oid-working;oid-battery;oid-signal;"
|
||||
data-vis-attrs0="group.value;unit;min[0];max[100];digits[0]/number;step[1];is_comma[true]/checkbox;readOnly/checkbox;"
|
||||
data-vis-attrs1="group.center;caption;hideNumber/checkbox;"
|
||||
data-vis-attrs2="group.arc;angleOffset/slider,0,360,1;angleArc/slider,0,360,1;displayPrevious[true]/checkbox;"
|
||||
data-vis-attrs3="group.style;cursor/slider,1,350,1;thickness/slider,0.05,1,0.05;color/color;bgcolor/color;linecap/checkbox;anticlockwise/checkbox"
|
||||
>
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.hqwidgets.circle.init(this.data.wid, this.view, this.data);
|
||||
%><input type="text" style="display: none"/></div>
|
||||
</script>
|
||||
<script id="tplHqOdometer"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-set="hqwidgets"
|
||||
data-vis-name="Odometer"
|
||||
data-vis-beta="true"
|
||||
data-vis-update-style="true"
|
||||
data-vis-type="val,number"
|
||||
data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_hqOdometer.png"></img>'
|
||||
data-vis-attrs="oid;style[car]/nselect,car,default,digital,minimal,plaza,slot-machine,train-station;group.extended;format[(ddd),dd];factor[1];leadingZeros[true]/checkbox"
|
||||
>
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="width: 125px; height: 42px; font-size: 24px" id="<%= this.data.attr('wid') %>"></div>
|
||||
<% vis.binds.hqwidgets.odometer(this.view, this.data) %>
|
||||
</script>
|
||||
@ -0,0 +1,632 @@
|
||||
.checkbox-big-orange-wrap{
|
||||
width: 216px;
|
||||
height: 68px;
|
||||
background: #fff;
|
||||
border-radius: 34px;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-big-orange-wrap:before{
|
||||
content:"";
|
||||
width: 206px;
|
||||
height:58px;
|
||||
border-radius: 29px;
|
||||
background: #e9d7be;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.checkbox-big-orange-wrap:after{
|
||||
content:"";
|
||||
width: 200px;
|
||||
height:52px;
|
||||
border-radius: 26px;
|
||||
background: -webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%);
|
||||
box-shadow:
|
||||
inset 0 3px 20px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-orange-button{
|
||||
display: inline-block;
|
||||
width: 115px;
|
||||
height: 52px;
|
||||
border-radius: 30px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #ada39d;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-orange-button:before{
|
||||
content: "";
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.checkbox-big-orange-button:hover{
|
||||
border-bottom: none;
|
||||
top: 6px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-big-orange-button-active {
|
||||
left: 94px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-orange-wrap{
|
||||
width: 108px;
|
||||
height: 34px;
|
||||
background: #fff;
|
||||
border-radius: 17px;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-small-orange-wrap:before{
|
||||
content:"";
|
||||
width: 103px;
|
||||
height:29px;
|
||||
border-radius: 15px;
|
||||
background: #e9d7be;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.checkbox-small-orange-wrap:after {
|
||||
content:"";
|
||||
width: 100px;
|
||||
height:26px;
|
||||
border-radius: 13px;
|
||||
background: -webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-orange-button{
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
border-radius: 15px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #ada39d;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-orange-button:before{
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.checkbox-small-orange-button:hover{
|
||||
border-bottom: none;
|
||||
top: 3px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-small-orange-button-active {
|
||||
left: 47px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
/* --------------------------- BLUE ------------------------- */
|
||||
.checkbox-big-blue-wrap{
|
||||
width: 216px;
|
||||
height: 68px;
|
||||
background: #fff;
|
||||
border-radius: 34px;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-big-blue-wrap:before{
|
||||
content:"";
|
||||
width: 206px;
|
||||
height:58px;
|
||||
border-radius: 29px;
|
||||
background: #e9d7be;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.checkbox-big-blue-wrap:after{
|
||||
content:"";
|
||||
width: 200px;
|
||||
height:52px;
|
||||
border-radius: 26px;
|
||||
background: -webkit-linear-gradient(top, #558abd 0%, #5488ba 31%, #46729d 61%, #2a4661 100%);
|
||||
box-shadow:
|
||||
inset 0 3px 20px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-blue-button{
|
||||
display: inline-block;
|
||||
width: 115px;
|
||||
height: 52px;
|
||||
border-radius: 30px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #ada39d;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-blue-button:before{
|
||||
content: "";
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.checkbox-big-blue-button:hover{
|
||||
border-bottom: none;
|
||||
top: 6px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-big-blue-button-active {
|
||||
left: 94px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-blue-wrap{
|
||||
width: 108px;
|
||||
height: 34px;
|
||||
background: #fff;
|
||||
border-radius: 17px;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-small-blue-wrap:before{
|
||||
content:"";
|
||||
width: 103px;
|
||||
height:29px;
|
||||
border-radius: 15px;
|
||||
background: #e9d7be;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.checkbox-small-blue-wrap:after {
|
||||
content:"";
|
||||
width: 100px;
|
||||
height:26px;
|
||||
border-radius: 13px;
|
||||
background: -webkit-linear-gradient(top, #558abd 0%, #5488ba 31%, #46729d 61%, #2a4661 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-blue-button{
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
border-radius: 15px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #ada39d;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-blue-button:before{
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.checkbox-small-blue-button:hover{
|
||||
border-bottom: none;
|
||||
top: 3px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-small-blue-button-active {
|
||||
left: 47px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
/* --------------------------- GREEN ------------------------- */
|
||||
.checkbox-big-green-wrap{
|
||||
width: 216px;
|
||||
height: 68px;
|
||||
background: #fff;
|
||||
border-radius: 34px;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-big-green-wrap:before{
|
||||
content:"";
|
||||
width: 206px;
|
||||
height:58px;
|
||||
border-radius: 29px;
|
||||
background: #e9d7be;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.checkbox-big-green-wrap:after{
|
||||
content:"";
|
||||
width: 200px;
|
||||
height:52px;
|
||||
border-radius: 26px;
|
||||
background: -webkit-linear-gradient(top, #00fe37 0%, #00e771 61%, #009f00 91%, #12a71f 100%);
|
||||
box-shadow:
|
||||
inset 0 3px 20px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-green-button{
|
||||
display: inline-block;
|
||||
width: 115px;
|
||||
height: 52px;
|
||||
border-radius: 30px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #ada39d;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-green-button:before{
|
||||
content: "";
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.checkbox-big-green-button:hover{
|
||||
border-bottom: none;
|
||||
top: 6px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-big-green-button-active {
|
||||
left: 94px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-green-wrap{
|
||||
width: 108px;
|
||||
height: 34px;
|
||||
background: #fff;
|
||||
border-radius: 17px;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-small-green-wrap:before{
|
||||
content:"";
|
||||
width: 103px;
|
||||
height:29px;
|
||||
border-radius: 15px;
|
||||
background: #e9d7be;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.checkbox-small-green-wrap:after {
|
||||
content:"";
|
||||
width: 100px;
|
||||
height:26px;
|
||||
border-radius: 13px;
|
||||
background: -webkit-linear-gradient(top, #00fe37 0%, #00e771 61%, #009f00 91%, #12a71f 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-green-button{
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
border-radius: 15px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #ada39d;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-green-button:before{
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.checkbox-small-green-button:hover{
|
||||
border-bottom: none;
|
||||
top: 3px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-small-green-button-active{
|
||||
left: 47px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* ---------------------------------- GREY -------------------------------- */
|
||||
.checkbox-big-grey-wrap{
|
||||
width: 216px;
|
||||
height: 68px;
|
||||
background: #fff;
|
||||
border-radius: 34px;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-big-grey-wrap:before{
|
||||
content:"";
|
||||
width: 206px;
|
||||
height:58px;
|
||||
border-radius: 29px;
|
||||
background: #d4d4d4;
|
||||
box-shadow:
|
||||
inset 0 30px 50px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.checkbox-big-grey-wrap:after{
|
||||
content:"";
|
||||
width: 200px;
|
||||
height:52px;
|
||||
border-radius: 26px;
|
||||
background: -webkit-linear-gradient(top, #898989 0%, #696969 61%, #696969 91%, #808080 100%);
|
||||
box-shadow:
|
||||
inset 0 3px 20px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-grey-button{
|
||||
display: inline-block;
|
||||
width: 115px;
|
||||
height: 52px;
|
||||
border-radius: 30px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #a4a4a4;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-big-grey-button:before{
|
||||
content: "";
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.checkbox-big-grey-button:hover{
|
||||
border-bottom: none;
|
||||
top: 6px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-big-grey-button-active {
|
||||
left: 94px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-grey-wrap{
|
||||
width: 108px;
|
||||
height: 34px;
|
||||
background: #fff;
|
||||
border-radius: 17px;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #d1d1d1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-small-grey-wrap:before{
|
||||
content:"";
|
||||
width: 103px;
|
||||
height:29px;
|
||||
border-radius: 15px;
|
||||
background: #d4d4d4;
|
||||
box-shadow:
|
||||
inset 0 15px 25px #a5a4a4;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.checkbox-small-grey-wrap:after {
|
||||
content:"";
|
||||
width: 100px;
|
||||
height:26px;
|
||||
border-radius: 13px;
|
||||
background: -webkit-linear-gradient(top, #898989 0%, #696969 61%, #696969 91%, #808080 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.8);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-grey-button{
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 26px;
|
||||
border-radius: 15px;
|
||||
background: -webkit-linear-gradient(top, #efeeee 0%, #b9b9b9 100%);
|
||||
border-top: solid 2px #fafafa;
|
||||
border-bottom: solid 2px #a5a5a5;
|
||||
box-shadow:
|
||||
1px 6px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 5px rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
z-index: 99;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.checkbox-small-grey-button:before{
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.checkbox-small-grey-button:hover{
|
||||
border-bottom: none;
|
||||
top: 3px;
|
||||
box-shadow:
|
||||
1px 4px 7px rgba(0, 0, 0, 0.5),
|
||||
0 0 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.checkbox-small-grey-button-active {
|
||||
left: 47px !important;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
@ -0,0 +1,202 @@
|
||||
|
||||
/* -------------------------------------- COMBINED STYLES ---------------------------------------------------*/
|
||||
.glossy-button-grey,
|
||||
.glossy-button-blue,
|
||||
.glossy-button-green,
|
||||
.glossy-button-pink,
|
||||
.glossy-button-orange,
|
||||
.glossy-button-grey-active,
|
||||
.glossy-button-blue-active,
|
||||
.glossy-button-green-active,
|
||||
.glossy-button-pink-active,
|
||||
.glossy-button-orange-active
|
||||
{
|
||||
background: #777777;
|
||||
cursor: pointer;
|
||||
/* text */
|
||||
text-decoration: none;
|
||||
font: 24px/1em 'Droid Sans', sans-serif;
|
||||
font-weight: bold;
|
||||
text-shadow: rgba(255,255,255,.5) 0 1px 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
/* layout */
|
||||
/*padding: .5em .6em .4em .6em;
|
||||
margin: .5em;*/
|
||||
display: inline-block;
|
||||
|
||||
/* effects */
|
||||
border-top: 1px solid rgba(255,255,255,0.8);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
|
||||
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(../img/noise.png);
|
||||
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(../img/noise.png);
|
||||
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(../img/noise.png);
|
||||
|
||||
-webkit-transition: background .2s ease-in-out;
|
||||
-moz-transition: background .2s ease-in-out;
|
||||
transition: background .2s ease-in-out;
|
||||
|
||||
}
|
||||
.glossy-button-grey:active,
|
||||
.glossy-button-blue:active,
|
||||
.glossy-button-green:active,
|
||||
.glossy-button-pink:active,
|
||||
.glossy-button-orange:active,
|
||||
.glossy-button-grey-active:active,
|
||||
.glossy-button-blue-active:active,
|
||||
.glossy-button-green-active:active,
|
||||
.glossy-button-pink-active:active,
|
||||
.glossy-button-orange-active:active
|
||||
{
|
||||
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
|
||||
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
|
||||
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
|
||||
|
||||
-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em,
|
||||
rgba(0,0,0,0.4) 0 .1em 1px,
|
||||
rgba(0,0,0,0.2) 0 .2em 6px;
|
||||
-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em,
|
||||
rgba(0,0,0,0.4) 0 .1em 1px,
|
||||
rgba(0,0,0,0.2) 0 .2em 6px;
|
||||
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em,
|
||||
rgba(0,0,0,0.4) 0 .1em 1px,
|
||||
rgba(0,0,0,0.2) 0 .2em 6px;
|
||||
|
||||
-webkit-transform: translateY(.2em);
|
||||
-moz-transform: translateY(.2em);
|
||||
transform: translateY(.2em);
|
||||
}
|
||||
|
||||
.glossy-button-grey,
|
||||
.glossy-button-grey-active
|
||||
{
|
||||
/* color */
|
||||
color: hsl(0, 0%, 40%) !important;
|
||||
background-color: hsl(0, 0%, 75%);
|
||||
|
||||
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
}
|
||||
|
||||
.glossy-button-grey:hover,
|
||||
.glossy-button-grey-active:hover
|
||||
{ background-color: hsl(0, 0%, 83%); }
|
||||
|
||||
/* -------------- colours -------------- */
|
||||
.glossy-button-orange,
|
||||
.glossy-button-orange-active
|
||||
{
|
||||
color: hsl(39, 100%, 30%) !important;
|
||||
background-color: hsl(39, 100%, 50%);
|
||||
|
||||
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
}
|
||||
|
||||
.glossy-button-orange:hover,
|
||||
.glossy-button-orange-active:hover
|
||||
{ background-color: hsl(39, 100%, 65%); }
|
||||
|
||||
|
||||
.glossy-button-blue,
|
||||
.glossy-button-blue-active
|
||||
{
|
||||
color: hsl(208, 50%, 40%) !important;
|
||||
background-color: hsl(208, 100%, 75%);
|
||||
|
||||
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
}
|
||||
.glossy-button-blue:hover,
|
||||
.glossy-button-blue-active:hover
|
||||
{ background-color: hsl(208, 100%, 83%); }
|
||||
|
||||
.glossy-button-green,
|
||||
.glossy-button-green-active
|
||||
{
|
||||
color: hsl(88, 70%, 30%) !important;
|
||||
background-color: hsl(88, 70%, 60%);
|
||||
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
}
|
||||
|
||||
.glossy-button-green:hover,
|
||||
.glossy-button-green-active:hover
|
||||
{ background-color: hsl(88, 70%, 75%); }
|
||||
|
||||
|
||||
.glossy-button-pink,
|
||||
.glossy-button-pink-active
|
||||
{
|
||||
color: hsl(340, 100%, 30%) !important;
|
||||
background-color: hsl(340, 100%, 75%);
|
||||
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
||||
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
|
||||
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
||||
}
|
||||
|
||||
.glossy-button-pink:hover,
|
||||
.glossy-button-pink-active:hover
|
||||
{ background-color: hsl(340, 100%, 83%); }
|
||||
|
||||
.glossy-button-grey-active,
|
||||
.glossy-button-blue-active,
|
||||
.glossy-button-green-active,
|
||||
.glossy-button-pink-active,
|
||||
.glossy-button-orange-active
|
||||
{
|
||||
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png);
|
||||
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png);
|
||||
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png);
|
||||
|
||||
-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
|
||||
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
|
||||
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
||||
-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
|
||||
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
|
||||
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
||||
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
|
||||
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
|
||||
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
||||
|
||||
-webkit-transform: translateY(.2em);
|
||||
-moz-transform: translateY(.2em);
|
||||
transform: translateY(.2em);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,544 @@
|
||||
|
||||
/* -------------- Button base --------------------- */
|
||||
.hq-button-base-normal {
|
||||
background-image: -ms-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
||||
background-image: -moz-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
||||
background-image: -o-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ADADAD), color-stop(1, #333333));
|
||||
background-image: -webkit-linear-gradient(top, #ADADAD 0%, #333333 100%);
|
||||
background-image: linear-gradient(to bottom, #ADADAD 0%, #333333 100%);
|
||||
border: 1px solid rgba(0,0,0,0.9) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
||||
0 0 1px 1px rgba(128,128,128,0.8),
|
||||
0 0 0 6px rgba(0,0,0,0.06),
|
||||
0 0 0 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.hq-button-base-normal:hover {
|
||||
background-image: -ms-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
||||
background-image: -moz-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
||||
background-image: -o-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E0E0E0), color-stop(1, #8F8F8F));
|
||||
background-image: -webkit-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
|
||||
background-image: linear-gradient(to bottom, #E0E0E0 0%, #8F8F8F 100%);
|
||||
border: 1px solid rgba(0,0,0,0.4) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
|
||||
0 0 1px 1px rgba(128,128,128,0.8),
|
||||
0 0 0 6px rgba(0,0,0,0.06),
|
||||
0 0 0 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.hq-button-base-on {
|
||||
background: rgb(255,214,94);
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
||||
background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
|
||||
border: 1px solid rgba(0,0,0,0.4) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
|
||||
0 0 1px 1px rgba(255,255,255,0.8),
|
||||
0 0 0 6px rgba(0,0,0,0.06),
|
||||
0 0 0 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.hq-button-base-on:hover {
|
||||
background-image: -ms-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
||||
background-image: -moz-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
||||
background-image: -o-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDCB28), color-stop(1, #E08600));
|
||||
background-image: -webkit-linear-gradient(top, #FDCB28 0%, #E08600 100%);
|
||||
background-image: linear-gradient(to bottom, #FDCB28 0%, #E08600 100%);
|
||||
border: 1px solid rgba(0,0,0,0.4) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
|
||||
0 0 1px 1px rgba(255,255,255,0.8),
|
||||
0 0 0 6px rgba(0,0,0,0.06),
|
||||
0 0 0 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* ---------------------- Button outdoor temperature */
|
||||
.hq-button-base-outtemp {
|
||||
background: #e0f3fa; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(100%,#b6dffd)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #e0f3fa 0%,#b6dffd 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */
|
||||
border: 1px solid rgba(182,223,253,0.9) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5),
|
||||
0 0 1px 1px rgba(182,223,253,0.8),
|
||||
0 0 0 6px rgba(182,223,253,0.06),
|
||||
0 0 0 3px rgba(182,223,253,0.1);
|
||||
}
|
||||
.hq-button-base-outtemp:hover {
|
||||
background: #bbe9f9; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbe9f9), color-stop(100%,#94d1fc)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #bbe9f9 0%,#94d1fc 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbe9f9', endColorstr='#94d1fc',GradientType=0 ); /* IE6-9 */
|
||||
border: 1px solid rgba(182,223,253,0.9) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5),
|
||||
0 0 1px 1px rgba(182,223,253,0.8),
|
||||
0 0 0 6px rgba(182,223,253,0.06),
|
||||
0 0 0 3px rgba(182,223,253,0.1);
|
||||
}
|
||||
|
||||
/* ---------------------- Button indoor temperature */
|
||||
.hq-button-base-intemp {
|
||||
background: #f6e6b4; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#eaac60)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #f6e6b4 0%,#eaac60 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eaac60',GradientType=0 ); /* IE6-9 */
|
||||
border: 1px solid rgba(232,158,69,0.9) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5),
|
||||
0 0 1px 1px rgba(232,158,69,0.8),
|
||||
0 0 0 6px rgba(232,158,69,0.06),
|
||||
0 0 0 3px rgba(232,158,69,0.1);
|
||||
}
|
||||
.hq-button-base-intemp:hover {
|
||||
background: #f4d169; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4d169), color-stop(100%,#e89e45)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, #f4d169 0%,#e89e45 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d169', endColorstr='#e89e45',GradientType=0 ); /* IE6-9 */
|
||||
border: 1px solid rgba(232,158,69,0.9) ;
|
||||
box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5),
|
||||
0 0 1px 1px rgba(232,158,69,0.8),
|
||||
0 0 0 6px rgba(232,158,69,0.06),
|
||||
0 0 0 3px rgba(232,158,69,0.1);
|
||||
}
|
||||
|
||||
/* -------------- Button red --------------------- */
|
||||
.hq-button-red-normal {
|
||||
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
|
||||
background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
|
||||
background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
|
||||
background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
|
||||
background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
|
||||
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
|
||||
background-color:#ededed;
|
||||
}
|
||||
|
||||
.hq-button-red-active {
|
||||
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
|
||||
background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
|
||||
background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
|
||||
background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
|
||||
background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
|
||||
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
|
||||
|
||||
background-color:#fe1a00;
|
||||
}
|
||||
.hq-button-red-normal, .hq-button-red-active {
|
||||
-moz-box-shadow:inset 0px 1px 0px 0px #333333;
|
||||
-webkit-box-shadow:inset 0px 1px 0px 0px #333333;
|
||||
box-shadow:inset 0px 1px 0px 0px #333333;
|
||||
|
||||
border:1px solid #dcdcdc;
|
||||
|
||||
display:inline-block;
|
||||
color:#777777;
|
||||
font-family:arial;
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
text-decoration:none;
|
||||
|
||||
text-shadow:0px 1px 0px #ffffff;
|
||||
}
|
||||
|
||||
.hq-button-red-normal:hover {
|
||||
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
|
||||
background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
|
||||
background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
|
||||
background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
|
||||
background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
|
||||
background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
|
||||
|
||||
background-color:#dfdfdf;
|
||||
}
|
||||
.hq-button-red-active:hover {
|
||||
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
|
||||
background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
|
||||
background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
|
||||
background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
|
||||
background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
|
||||
background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
|
||||
|
||||
background-color:#ce0100;
|
||||
}
|
||||
/* -------------- Button no background --------------------- */
|
||||
|
||||
.hq-button-no-background {
|
||||
background:none;
|
||||
}
|
||||
|
||||
/* -------------- Button green --------------------- */
|
||||
.hq-button-green-normal, .hq-button-green-active {
|
||||
-moz-box-shadow:inset 3px 2px 7px 0px #d9fbbe;
|
||||
-webkit-box-shadow:inset 3px 2px 7px 0px #d9fbbe;
|
||||
box-shadow:inset 3px 2px 7px 0px #d9fbbe;
|
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52) );
|
||||
background:-moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% );
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52');
|
||||
background-color:#b8e356;
|
||||
border:1px solid #83c41a;
|
||||
display:inline-block;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
.hq-button-green-active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
|
||||
.hq-button-green-normal:hover,
|
||||
.hq-button-green-active:hover{
|
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) );
|
||||
background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% );
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356');
|
||||
background-color:#a5cc52;
|
||||
}
|
||||
|
||||
/* most of them taken here: http://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations*/
|
||||
/* ---------------------------- Button metall ----------------------------- */
|
||||
.hq-button-metall-normal {
|
||||
/*display: block;*/
|
||||
background: #434343;
|
||||
}
|
||||
.hq-button-metall-active {
|
||||
/*display: block;*/
|
||||
background: #434343;
|
||||
}
|
||||
|
||||
.hq-button-metall-normal, .hq-button-metall-active {
|
||||
/*display: block;*/
|
||||
background-color: #434343;
|
||||
background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
|
||||
background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
|
||||
background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
|
||||
background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
|
||||
background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151));
|
||||
border: none;
|
||||
border-top: 3px solid #c2c2c2;
|
||||
/*border-radius*/
|
||||
-webkit-border-radius: 40px;
|
||||
-moz-border-radius: 40px;
|
||||
border-radius: 40px;
|
||||
/*box-shadow*/
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
|
||||
box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
|
||||
padding: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
color: #242424;
|
||||
background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
|
||||
-webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
|
||||
-webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
|
||||
-webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
|
||||
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%),
|
||||
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
|
||||
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
|
||||
-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
|
||||
}
|
||||
|
||||
.hq-button-metall-active {
|
||||
border-top: 0px solid #dde1e7;
|
||||
/*box-shadow*/
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
|
||||
box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
|
||||
/*transform*/
|
||||
-webkit-transform: translateY(4px);
|
||||
-moz-transform: translateY(4px);
|
||||
-ms-transform: translateY(4px);
|
||||
-o-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.hq-button-metall-normal:hover, .hq-button-metall-active:hover {
|
||||
color: #00aeff;
|
||||
text-shadow: -1px -2px 1px #000;
|
||||
}
|
||||
|
||||
.hq-button-metall-normal:before,
|
||||
.hq-button-metall-normal:after,
|
||||
.hq-button-metall-active:before,
|
||||
.hq-button-metall-active:after {
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
/*border-radius*/
|
||||
-webkit-border-radius: inherit;
|
||||
-moz-border-radius: inherit;
|
||||
border-radius: inherit;
|
||||
/* fake conical gradients */
|
||||
background-image: -webkit-radial-gradient( 50% 0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
|
||||
-webkit-radial-gradient( 50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
|
||||
-webkit-radial-gradient( 0% 50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
|
||||
-webkit-radial-gradient( 100% 50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
|
||||
}
|
||||
|
||||
.hq-button-metall-normal:before, .hq-button-metall-active:before{
|
||||
/*transform*/
|
||||
-webkit-transform: rotate( 65deg);
|
||||
-moz-transform: rotate( 65deg);
|
||||
-ms-transform: rotate( 65deg);
|
||||
-o-transform: rotate( 65deg);
|
||||
transform: rotate( 65deg);
|
||||
}
|
||||
.hq-button-metall-normal:after, .hq-button-metall-active:after {
|
||||
/*transform*/
|
||||
-webkit-transform: rotate(-65deg);
|
||||
-moz-transform: rotate(-65deg);
|
||||
-ms-transform: rotate(-65deg);
|
||||
-o-transform: rotate(-65deg);
|
||||
transform: rotate(-65deg);
|
||||
}
|
||||
|
||||
/* ------------------------------ Glossy buttons -------------------------------------- */
|
||||
.hq-button-glossy-blue {
|
||||
background: #94c4fe;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe));
|
||||
background: -webkit-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
|
||||
background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
|
||||
background: -o-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
|
||||
background: -ms-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
|
||||
background: linear-gradient(to bottom, #94c4fe 31%,#d3f6fe 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );
|
||||
border: 1px solid #4864a9;
|
||||
}
|
||||
|
||||
.hq-button-glossy-green {
|
||||
background: #54bc3e;
|
||||
background: -moz-linear-gradient(top, #54bc3e 0%, #aee850 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54bc3e), color-stop(100%,#aee850));
|
||||
background: -webkit-linear-gradient(top, #54bc3e 0%,#aee850 100%);
|
||||
background: -o-linear-gradient(top, #54bc3e 0%,#aee850 100%);
|
||||
background: -ms-linear-gradient(top, #54bc3e 0%,#aee850 100%);
|
||||
background: linear-gradient(to bottom, #54bc3e 0%,#aee850 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bc3e', endColorstr='#aee850',GradientType=0 );
|
||||
border: 1px solid #1d6511;
|
||||
}
|
||||
|
||||
.hq-button-glossy-blue,
|
||||
.hq-button-glossy-green {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-border-radius: 25px;
|
||||
-moz-border-radius: 25px;
|
||||
border-radius: 25px;
|
||||
|
||||
color: #000;
|
||||
text-shadow: 1px 1px 0px rgba(255,255,255,.5);
|
||||
|
||||
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.hq-button-glossy-blue:hover,
|
||||
.hq-button-glossy-green:hover {
|
||||
-webkit-filter: brightness(.9);
|
||||
-moz-filter: brightness(.9);
|
||||
-ms-filter: brightness(.9);
|
||||
filter: brightness(.9);
|
||||
}
|
||||
|
||||
.hq-button-glossy-blue:before,
|
||||
.hq-button-glossy-green:before {
|
||||
content: "";
|
||||
width: calc(100% - 10px);
|
||||
height: 50%;
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
|
||||
}
|
||||
|
||||
/* ---------------- Nice buttons ---------------------------------- */
|
||||
.hq-button-nice-blue {
|
||||
background: #108FE8;
|
||||
box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
|
||||
}
|
||||
.hq-button-nice-blue:hover {
|
||||
background: #333;
|
||||
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
|
||||
}
|
||||
.hq-button-nice-red {
|
||||
background: #E53030;
|
||||
box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
|
||||
}
|
||||
.hq-button-nice-red:hover {
|
||||
background: #333;
|
||||
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
|
||||
}
|
||||
.hq-button-nice-green {
|
||||
background: #0EC518;
|
||||
box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
|
||||
}
|
||||
.hq-button-nice-green:hover {
|
||||
background: #333;
|
||||
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
|
||||
}
|
||||
.hq-button-nice-yellow {
|
||||
background: #FFC334;
|
||||
box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
|
||||
}
|
||||
.hq-button-nice-yellow:hover {
|
||||
background: #333;
|
||||
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
|
||||
}
|
||||
.hq-button-nice-grey {
|
||||
background: #555555;
|
||||
box-shadow: 0 -2px 0 3px #3b3b3b inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
|
||||
}
|
||||
.hq-button-nice-grey:hover {
|
||||
background: #333;
|
||||
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
|
||||
}
|
||||
.hq-button-nice-blue, .hq-button-nice-red, .hq-button-nice-green, .hq-button-nice-yellow, .hq-button-nice-grey {
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
|
||||
/* ------------------------- Push butons ------------------------------------- */
|
||||
.hq-button-push-red {
|
||||
text-shadow:-1px -1px 0 #A84155;
|
||||
background: #D25068;
|
||||
border:1px solid #D25068;
|
||||
|
||||
background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
|
||||
background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
|
||||
background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
|
||||
background-image:-o-linear-gradient(top, #F66C7B, #D25068);
|
||||
background-image:linear-gradient(to bottom, #F66C7B, #D25068);
|
||||
|
||||
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
|
||||
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.hq-button-push-green {
|
||||
text-shadow:-1px -1px 0 #2C7982;
|
||||
background: #3EACBA;
|
||||
border:1px solid #379AA4;
|
||||
|
||||
background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
|
||||
background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
|
||||
background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
|
||||
background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
|
||||
background-image:linear-gradient(top, #48C6D4, #3EACBA);
|
||||
|
||||
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
|
||||
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.hq-button-push-red,
|
||||
.hq-button-push-green
|
||||
{
|
||||
text-align:center;
|
||||
color:#FFF;
|
||||
text-decoration:none;
|
||||
font-family:'Oswald', Helvetica;
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.hq-button-push-red:before,
|
||||
.hq-button-push-green:before
|
||||
{
|
||||
background:#f0f0f0;
|
||||
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
|
||||
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
border-radius:5px;
|
||||
|
||||
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
|
||||
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
|
||||
box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
|
||||
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -6px; right: -6px;
|
||||
top: -6px; bottom: -10px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hq-button-push-red:active,
|
||||
.hq-button-push-green:active
|
||||
{
|
||||
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.hq-button-push-red:active:before,
|
||||
.hq-button-push-green:active:before{
|
||||
top: -6px;
|
||||
bottom: -11px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.hq-button-push-red:hover {
|
||||
background: #F66C7B;
|
||||
background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
|
||||
background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
|
||||
background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
|
||||
background-image:-o-linear-gradient(top, #D25068, #F66C7B);
|
||||
background-image:linear-gradient(top, #D25068, #F66C7B);
|
||||
}
|
||||
|
||||
.hq-button-push-green:hover {
|
||||
background: #48C6D4;
|
||||
background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
|
||||
background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
|
||||
background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
|
||||
background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
|
||||
background-image:linear-gradient(top, #3EACBA, #48C6D4);
|
||||
}
|
||||
|
||||
.hq-button-base-normal:active,
|
||||
.hq-button-base-on:active,
|
||||
.hq-button-base-outtemp:active,
|
||||
.hq-button-base-intemp:active,
|
||||
.hq-button-red-normal:active,
|
||||
.hq-button-red-active:active,
|
||||
.hq-button-green-normal:active,
|
||||
.hq-button-green-active:active,
|
||||
.hq-button-no-background:active
|
||||
{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Arimo");
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
|
||||
-moz-border-radius: 0.34em;
|
||||
-webkit-border-radius: 0.34em;
|
||||
-o-border-radius: 0.34em;
|
||||
-ms-border-radius: 0.34em;
|
||||
-khtml-border-radius: 0.34em;
|
||||
border-radius: 0.34em;
|
||||
font-family: "Arimo", monospace;
|
||||
padding: 0.15em;
|
||||
background: black;
|
||||
color: #eee0d3;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
|
||||
-moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
|
||||
-webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
|
||||
-o-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
|
||||
box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333));
|
||||
background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
|
||||
background-image: -moz-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
|
||||
background-image: -o-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
|
||||
background-image: -ms-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
|
||||
background-image: linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
|
||||
padding: 0 0.15em;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child {
|
||||
-moz-border-radius: 0.2em 0 0 0.2em;
|
||||
-webkit-border-radius: 0.2em 0 0 0.2em;
|
||||
-o-border-radius: 0.2em 0 0 0.2em;
|
||||
-ms-border-radius: 0.2em 0 0 0.2em;
|
||||
-khtml-border-radius: 0.2em 0 0 0.2em;
|
||||
border-radius: 0.2em 0 0 0.2em;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child {
|
||||
-moz-border-radius: 0 0.2em 0.2em 0;
|
||||
-webkit-border-radius: 0 0.2em 0.2em 0;
|
||||
-o-border-radius: 0 0.2em 0.2em 0;
|
||||
-ms-border-radius: 0 0.2em 0.2em 0;
|
||||
-khtml-border-radius: 0 0.2em 0.2em 0;
|
||||
border-radius: 0 0.2em 0.2em 0;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3));
|
||||
background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
|
||||
background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
|
||||
background-image: -o-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
|
||||
background-image: -ms-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
|
||||
background-image: linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
|
||||
background-color: #eee0d3;
|
||||
color: black;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
|
||||
left: 0.15em;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition-timing-function: linear;
|
||||
-moz-transition-timing-function: linear;
|
||||
-ms-transition-timing-function: linear;
|
||||
-o-transition-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
|
||||
*display: inline;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
|
||||
*display: inline;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
|
||||
*display: inline;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Wallpoet");
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(139, 245, 165, 0.4)), color-stop(100%, #000000));
|
||||
background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
|
||||
background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
|
||||
background-image: -o-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
|
||||
background-image: -ms-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
|
||||
background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000);
|
||||
background-color: black;
|
||||
font-family: "Wallpoet", monospace;
|
||||
padding: 0 0.2em;
|
||||
line-height: 1.1em;
|
||||
color: #8bf5a5;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit {
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {
|
||||
*display: inline;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {
|
||||
*display: inline;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
|
||||
*display: inline;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Arimo");
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
|
||||
-moz-border-radius: 0.15em;
|
||||
-webkit-border-radius: 0.15em;
|
||||
-o-border-radius: 0.15em;
|
||||
-ms-border-radius: 0.15em;
|
||||
-khtml-border-radius: 0.15em;
|
||||
border-radius: 0.15em;
|
||||
background-color: #f0f8ff;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
font-weight: 100;
|
||||
padding: 0 0.12em;
|
||||
line-height: 1.2em;
|
||||
font-size: 1.2em;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
|
||||
-moz-border-radius: 0.1em;
|
||||
-webkit-border-radius: 0.1em;
|
||||
-o-border-radius: 0.1em;
|
||||
-ms-border-radius: 0.1em;
|
||||
-khtml-border-radius: 0.1em;
|
||||
border-radius: 0.1em;
|
||||
padding: 0 0.03em;
|
||||
color: #648baf;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
|
||||
left: 0.03em;
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Rye");
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {
|
||||
-moz-border-radius: 0.34em;
|
||||
-webkit-border-radius: 0.34em;
|
||||
-o-border-radius: 0.34em;
|
||||
-ms-border-radius: 0.34em;
|
||||
-khtml-border-radius: 0.34em;
|
||||
border-radius: 0.34em;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500));
|
||||
background-image: -webkit-linear-gradient(#ffff00, #ffa500);
|
||||
background-image: -moz-linear-gradient(#ffff00, #ffa500);
|
||||
background-image: -o-linear-gradient(#ffff00, #ffa500);
|
||||
background-image: -ms-linear-gradient(#ffff00, #ffa500);
|
||||
background-image: linear-gradient(#ffff00, #ffa500);
|
||||
background-color: #ffcc00;
|
||||
font-family: "Rye", monospace;
|
||||
padding: 0.15em;
|
||||
color: #f80000;
|
||||
line-height: 1.35em;
|
||||
border: 0.03em solid black;
|
||||
-webkit-text-stroke: 0.05em black;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {
|
||||
-moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-moz-border-radius: 0.2em;
|
||||
-webkit-border-radius: 0.2em;
|
||||
-o-border-radius: 0.2em;
|
||||
-ms-border-radius: 0.2em;
|
||||
-khtml-border-radius: 0.2em;
|
||||
border-radius: 0.2em;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc));
|
||||
background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
|
||||
background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
|
||||
background-image: -o-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
|
||||
background-image: -ms-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
|
||||
background-image: linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
|
||||
border: 0.03em solid #444444;
|
||||
padding: 0.1em 0.15em 0;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child {
|
||||
-moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child {
|
||||
-moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em white, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit {
|
||||
margin-left: 0.15em;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {
|
||||
padding-top: 0.08em;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Economica");
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station {
|
||||
font-family: "Economica", sans-serif;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-moz-border-radius: 0.1em;
|
||||
-webkit-border-radius: 0.1em;
|
||||
-o-border-radius: 0.1em;
|
||||
-ms-border-radius: 0.1em;
|
||||
-khtml-border-radius: 0.1em;
|
||||
border-radius: 0.1em;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(35%, #111111), color-stop(55%, #333333), color-stop(55%, #111111), color-stop(100%, #111111));
|
||||
background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
|
||||
background-image: -moz-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
|
||||
background-image: -o-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
|
||||
background-image: -ms-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
|
||||
background-image: linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
|
||||
background-color: #222222;
|
||||
padding: 0 0.15em;
|
||||
color: white;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit + .odometer-digit {
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner {
|
||||
left: 0.15em;
|
||||
}
|
||||
|
After Width: | Height: | Size: 342 B |
|
After Width: | Height: | Size: 328 B |
|
After Width: | Height: | Size: 326 B |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,820 @@
|
||||
/*!jQuery Knob*/
|
||||
/**
|
||||
* Downward compatible, touchable dial
|
||||
*
|
||||
* Version: 1.2.11
|
||||
* Requires: jQuery v1.7+
|
||||
*
|
||||
* Copyright (c) 2012 Anthony Terrien
|
||||
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
|
||||
*
|
||||
* small modifications by bluefox in this version
|
||||
*
|
||||
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
|
||||
*/
|
||||
(function (factory) {
|
||||
if (typeof exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
/**
|
||||
* Kontrol library
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Definition of globals and core
|
||||
*/
|
||||
var k = {}, // kontrol
|
||||
max = Math.max,
|
||||
min = Math.min;
|
||||
|
||||
k.c = {};
|
||||
k.c.d = $(document);
|
||||
k.c.t = function (e) {
|
||||
return e.originalEvent.touches.length - 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Kontrol Object
|
||||
*
|
||||
* Definition of an abstract UI control
|
||||
*
|
||||
* Each concrete component must call this one.
|
||||
* <code>
|
||||
* k.o.call(this);
|
||||
* </code>
|
||||
*/
|
||||
k.o = function () {
|
||||
var s = this;
|
||||
|
||||
this.o = null; // array of options
|
||||
this.$ = null; // jQuery wrapped element
|
||||
this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
|
||||
this.g = null; // deprecated 2D graphics context for 'pre-rendering'
|
||||
this.v = null; // value ; mixed array or integer
|
||||
this.cv = null; // change value ; not commited value
|
||||
this.x = 0; // canvas x position
|
||||
this.y = 0; // canvas y position
|
||||
this.w = 0; // canvas width
|
||||
this.h = 0; // canvas height
|
||||
this.$c = null; // jQuery canvas element
|
||||
this.c = null; // rendered canvas context
|
||||
this.t = 0; // touches index
|
||||
this.isInit = false;
|
||||
this.fgColor = null; // main color
|
||||
this.pColor = null; // previous color
|
||||
this.dH = null; // draw hook
|
||||
this.cH = null; // change hook
|
||||
this.eH = null; // cancel hook
|
||||
this.rH = null; // release hook
|
||||
this.scale = 1; // scale factor
|
||||
this.relative = false;
|
||||
this.relativeWidth = false;
|
||||
this.relativeHeight = false;
|
||||
this.$div = null; // component div
|
||||
|
||||
this.run = function () {
|
||||
var cf = function (e, conf) {
|
||||
var k;
|
||||
for (k in conf) {
|
||||
s.o[k] = conf[k];
|
||||
}
|
||||
s._carve().init();
|
||||
s._configure()
|
||||
._draw();
|
||||
};
|
||||
|
||||
if (this.$.data('kontroled')) return;
|
||||
this.$.data('kontroled', true);
|
||||
|
||||
this.extend();
|
||||
this.o = $.extend({
|
||||
// Config
|
||||
min: this.$.data('min') !== undefined ? this.$.data('min') : 0,
|
||||
max: this.$.data('max') !== undefined ? this.$.data('max') : 100,
|
||||
stopper: true,
|
||||
readOnly: this.$.data('readonly') || (this.$.attr('readonly') === 'readonly'),
|
||||
|
||||
// UI
|
||||
cursor: this.$.data('cursor') === true && 30
|
||||
|| this.$.data('cursor') || 0,
|
||||
thickness: this.$.data('thickness')
|
||||
&& Math.max(Math.min(this.$.data('thickness'), 1), 0.01)
|
||||
|| 0.35,
|
||||
lineCap: this.$.data('linecap') || 'butt',
|
||||
width: this.$.data('width') || 200,
|
||||
height: this.$.data('height') || 200,
|
||||
displayInput: this.$.data('displayinput') == null || this.$.data('displayinput'),
|
||||
displayPrevious: this.$.data('displayprevious'),
|
||||
fgColor: this.$.data('fgcolor') || '#87CEEB',
|
||||
inputColor: this.$.data('inputcolor'),
|
||||
font: this.$.data('font') || 'Arial',
|
||||
fontWeight: this.$.data('font-weight') || 'bold',
|
||||
inline: false,
|
||||
step: this.$.data('step') || 1,
|
||||
rotation: this.$.data('rotation'),
|
||||
|
||||
// Hooks
|
||||
draw: null, // function () {}
|
||||
change: null, // function (value) {}
|
||||
cancel: null, // function () {}
|
||||
release: null, // function (value) {}
|
||||
|
||||
// Output formatting, allows to add unit: %, ms ...
|
||||
format: function(v) {
|
||||
return v;
|
||||
},
|
||||
parse: function (v) {
|
||||
return parseFloat(v);
|
||||
},
|
||||
colorize: function (color, v) {
|
||||
return color;
|
||||
}
|
||||
}, this.o
|
||||
);
|
||||
|
||||
// finalize options
|
||||
this.o.flip = this.o.rotation === 'anticlockwise' || this.o.rotation === 'acw';
|
||||
if (!this.o.inputColor) {
|
||||
this.o.inputColor = this.o.fgColor;
|
||||
}
|
||||
|
||||
// routing value
|
||||
if (this.$.is('fieldset')) {
|
||||
|
||||
// fieldset = array of integer
|
||||
this.v = {};
|
||||
this.i = this.$.find('input');
|
||||
this.i.each(function(k) {
|
||||
var $this = $(this);
|
||||
s.i[k] = $this;
|
||||
s.v[k] = s.o.parse($this.val());
|
||||
|
||||
$this.bind(
|
||||
'change blur',
|
||||
function () {
|
||||
var val = {};
|
||||
var setByUser = false;
|
||||
val[k] = $this.val();
|
||||
if ($this.data('setByUser')) {
|
||||
$this.data('setByUser', false);
|
||||
setByUser = true;
|
||||
}
|
||||
s.val(s._validate(val), undefined, setByUser);
|
||||
}
|
||||
);
|
||||
});
|
||||
this.$.find('legend').remove();
|
||||
} else {
|
||||
|
||||
// input = integer
|
||||
this.i = this.$;
|
||||
this.v = this.o.parse(this.$.val());
|
||||
this.v === '' && (this.v = this.o.min);
|
||||
this.$.bind(
|
||||
'change blur',
|
||||
function () {
|
||||
var setByUser = false;
|
||||
if (s.$.data('setByUser')) {
|
||||
s.$.data('setByUser', false);
|
||||
setByUser = true;
|
||||
}
|
||||
s.val(s._validate(s.o.parse(s.$.val())), undefined, setByUser);
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
!this.o.displayInput && this.$.hide();
|
||||
|
||||
// adds needed DOM elements (canvas, div)
|
||||
this.$c = $(document.createElement('canvas')).attr({
|
||||
width: this.o.width,
|
||||
height: this.o.height
|
||||
});
|
||||
|
||||
// wraps all elements in a div
|
||||
// add to DOM before Canvas init is triggered
|
||||
this.$div = $('<div style="'
|
||||
+ (this.o.inline ? 'display:inline;' : '')
|
||||
+ 'width:' + this.o.width + 'px;height:' + this.o.height + 'px;'
|
||||
+ '"></div>');
|
||||
|
||||
this.$.wrap(this.$div).before(this.$c);
|
||||
this.$div = this.$.parent();
|
||||
|
||||
if (typeof G_vmlCanvasManager !== 'undefined') {
|
||||
G_vmlCanvasManager.initElement(this.$c[0]);
|
||||
}
|
||||
|
||||
this.c = this.$c[0].getContext ? this.$c[0].getContext('2d') : null;
|
||||
|
||||
if (!this.c) {
|
||||
throw {
|
||||
name: "CanvasNotSupportedException",
|
||||
message: "Canvas not supported. Please use excanvas on IE8.0.",
|
||||
toString: function(){return this.name + ": " + this.message}
|
||||
}
|
||||
}
|
||||
|
||||
// hdpi support
|
||||
this.scale = (window.devicePixelRatio || 1) / (
|
||||
this.c.webkitBackingStorePixelRatio ||
|
||||
this.c.mozBackingStorePixelRatio ||
|
||||
this.c.msBackingStorePixelRatio ||
|
||||
this.c.oBackingStorePixelRatio ||
|
||||
this.c.backingStorePixelRatio || 1
|
||||
);
|
||||
|
||||
// detects relative width / height
|
||||
this.relativeWidth = this.o.width % 1 !== 0
|
||||
&& this.o.width.indexOf('%');
|
||||
this.relativeHeight = this.o.height % 1 !== 0
|
||||
&& this.o.height.indexOf('%');
|
||||
this.relative = this.relativeWidth || this.relativeHeight;
|
||||
|
||||
// computes size and carves the component
|
||||
this._carve();
|
||||
|
||||
// prepares props for transaction
|
||||
if (this.v instanceof Object) {
|
||||
this.cv = {};
|
||||
this.copy(this.v, this.cv);
|
||||
} else {
|
||||
this.cv = this.v;
|
||||
}
|
||||
|
||||
// binds configure event
|
||||
this.$
|
||||
.bind("configure", cf)
|
||||
.parent()
|
||||
.bind("configure", cf);
|
||||
|
||||
// finalize init
|
||||
this._listen()
|
||||
._configure()
|
||||
._xy()
|
||||
.init();
|
||||
|
||||
this.isInit = true;
|
||||
|
||||
this.$.val(this.o.format(this.v));
|
||||
this._draw();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._carve = function() {
|
||||
if (this.relative) {
|
||||
var w = this.relativeWidth ?
|
||||
this.$div.parent().width() *
|
||||
parseInt(this.o.width) / 100
|
||||
: this.$div.parent().width(),
|
||||
h = this.relativeHeight ?
|
||||
this.$div.parent().height() *
|
||||
parseInt(this.o.height) / 100
|
||||
: this.$div.parent().height();
|
||||
|
||||
// apply relative
|
||||
this.w = this.h = Math.min(w, h);
|
||||
} else {
|
||||
this.w = this.o.width;
|
||||
this.h = this.o.height;
|
||||
}
|
||||
|
||||
// finalize div
|
||||
this.$div.css({
|
||||
'width': this.w + 'px',
|
||||
'height': this.h + 'px'
|
||||
});
|
||||
|
||||
// finalize canvas with computed width
|
||||
this.$c.attr({
|
||||
width: this.w,
|
||||
height: this.h
|
||||
});
|
||||
|
||||
// scaling
|
||||
if (this.scale !== 1) {
|
||||
this.$c[0].width = this.$c[0].width * this.scale;
|
||||
this.$c[0].height = this.$c[0].height * this.scale;
|
||||
this.$c.width(this.w);
|
||||
this.$c.height(this.h);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
this._draw = function () {
|
||||
|
||||
// canvas pre-rendering
|
||||
var d = true;
|
||||
|
||||
s.g = s.c;
|
||||
|
||||
s.clear();
|
||||
|
||||
s.dH && (d = s.dH());
|
||||
|
||||
d !== false && s.draw();
|
||||
};
|
||||
|
||||
this._touch = function (e, x, y) {
|
||||
var touchMove = function (e) {
|
||||
var v = s.xy2val(
|
||||
e.originalEvent.touches[s.t].pageX,
|
||||
e.originalEvent.touches[s.t].pageY
|
||||
);
|
||||
|
||||
if (v == s.cv) return;
|
||||
|
||||
if (s.cH && s.cH(v) === false) return;
|
||||
|
||||
s.change(s._validate(v));
|
||||
s._draw();
|
||||
};
|
||||
|
||||
// get touches index
|
||||
this.t = k.c.t(e);
|
||||
|
||||
// First touch
|
||||
touchMove(e);
|
||||
|
||||
// Touch events listeners
|
||||
k.c.d
|
||||
.bind("touchmove.k", touchMove)
|
||||
.bind(
|
||||
"touchend.k",
|
||||
function () {
|
||||
k.c.d.unbind('touchmove.k touchend.k');
|
||||
s.val(s.cv, undefined, true);
|
||||
}
|
||||
);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._mouse = function (e) {
|
||||
var mouseMove = function (e) {
|
||||
var v = s.xy2val(e.pageX, e.pageY);
|
||||
|
||||
if (v == s.cv) return;
|
||||
|
||||
if (s.cH && (s.cH(v) === false)) return;
|
||||
|
||||
s.change(s._validate(v));
|
||||
s._draw();
|
||||
};
|
||||
|
||||
// First click
|
||||
mouseMove(e);
|
||||
|
||||
// Mouse events listeners
|
||||
k.c.d
|
||||
.bind("mousemove.k", mouseMove)
|
||||
.bind(
|
||||
// Escape key cancel current change
|
||||
"keyup.k",
|
||||
function (e) {
|
||||
if (e.keyCode === 27) {
|
||||
k.c.d.unbind("mouseup.k mousemove.k keyup.k");
|
||||
|
||||
if (s.eH && s.eH() === false)
|
||||
return;
|
||||
|
||||
s.cancel();
|
||||
}
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"mouseup.k",
|
||||
function (e) {
|
||||
k.c.d.unbind('mousemove.k mouseup.k keyup.k');
|
||||
s.val(s.cv, undefined, true);
|
||||
}
|
||||
);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._xy = function () {
|
||||
var o = this.$c.offset();
|
||||
this.x = o.left;
|
||||
this.y = o.top;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._listen = function () {
|
||||
if (!this.o.readOnly) {
|
||||
this.$c
|
||||
.bind(
|
||||
"mousedown",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
s._xy()._mouse(e);
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"touchstart",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
s._xy()._touch(e);
|
||||
}
|
||||
);
|
||||
|
||||
this.listen();
|
||||
} else {
|
||||
this.$.attr('readonly', 'readonly');
|
||||
}
|
||||
|
||||
if (this.relative) {
|
||||
$(window).resize(function() {
|
||||
s._carve().init();
|
||||
s._draw();
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._configure = function () {
|
||||
|
||||
// Hooks
|
||||
if (this.o.draw) this.dH = this.o.draw;
|
||||
if (this.o.change) this.cH = this.o.change;
|
||||
if (this.o.cancel) this.eH = this.o.cancel;
|
||||
if (this.o.release) this.rH = this.o.release;
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
this.pColor = this.h2rgba(this.o.fgColor, "0.4");
|
||||
this.fgColor = this.h2rgba(this.o.fgColor, "0.6");
|
||||
} else {
|
||||
this.fgColor = this.o.fgColor;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._clear = function () {
|
||||
this.$c[0].width = this.$c[0].width;
|
||||
};
|
||||
|
||||
this._validate = function (v) {
|
||||
var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
|
||||
return Math.round(val * 100) / 100;
|
||||
};
|
||||
|
||||
// Abstract methods
|
||||
this.listen = function () {}; // on start, one time
|
||||
this.extend = function () {}; // each time configure triggered
|
||||
this.init = function () {}; // each time configure triggered
|
||||
this.change = function (v) {}; // on change
|
||||
this.val = function (v) {}; // on release
|
||||
this.xy2val = function (x, y) {}; //
|
||||
this.draw = function () {}; // on change / on release
|
||||
this.clear = function () { this._clear(); };
|
||||
|
||||
// Utils
|
||||
this.h2rgba = function (h, a) {
|
||||
var rgb;
|
||||
h = h.substring(1,7)
|
||||
rgb = [
|
||||
parseInt(h.substring(0,2), 16),
|
||||
parseInt(h.substring(2,4), 16),
|
||||
parseInt(h.substring(4,6), 16)
|
||||
];
|
||||
|
||||
return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
|
||||
};
|
||||
|
||||
this.copy = function (f, t) {
|
||||
for (var i in f) {
|
||||
t[i] = f[i];
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* k.Dial
|
||||
*/
|
||||
k.Dial = function () {
|
||||
k.o.call(this);
|
||||
|
||||
this.startAngle = null;
|
||||
this.xy = null;
|
||||
this.radius = null;
|
||||
this.lineWidth = null;
|
||||
this.cursorExt = null;
|
||||
this.w2 = null;
|
||||
this.PI2 = 2*Math.PI;
|
||||
|
||||
this.extend = function () {
|
||||
this.o = $.extend({
|
||||
bgColor: this.$.data('bgcolor') || '#EEEEEE',
|
||||
angleOffset: this.$.data('angleoffset') || 0,
|
||||
angleArc: this.$.data('anglearc') || 360,
|
||||
inline: true
|
||||
}, this.o);
|
||||
};
|
||||
|
||||
this.val = function (v, triggerRelease, setByUser) {
|
||||
if (null != v) {
|
||||
|
||||
// reverse format
|
||||
v = this.o.parse(v);
|
||||
|
||||
if (triggerRelease !== false
|
||||
&& v != this.v
|
||||
&& this.rH
|
||||
&& this.rH(v, setByUser) === false) { return; }
|
||||
|
||||
this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
|
||||
this.v = this.cv;
|
||||
this.$.val(this.o.format(this.v));
|
||||
this._draw();
|
||||
} else {
|
||||
return this.v;
|
||||
}
|
||||
};
|
||||
|
||||
this.xy2val = function (x, y) {
|
||||
var a, ret;
|
||||
|
||||
a = Math.atan2(
|
||||
x - (this.x + this.w2),
|
||||
- (y - this.y - this.w2)
|
||||
) - this.angleOffset;
|
||||
|
||||
if (this.o.flip) {
|
||||
a = this.angleArc - a - this.PI2;
|
||||
}
|
||||
|
||||
if (this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
|
||||
|
||||
// if isset angleArc option, set to min if .5 under min
|
||||
a = 0;
|
||||
} else if (a < 0) {
|
||||
a += this.PI2;
|
||||
}
|
||||
|
||||
ret = (a * (this.o.max - this.o.min) / this.angleArc) + this.o.min;
|
||||
|
||||
this.o.stopper && (ret = max(min(ret, this.o.max), this.o.min));
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
this.listen = function () {
|
||||
|
||||
// bind MouseWheel
|
||||
var s = this, mwTimerStop,
|
||||
mwTimerRelease,
|
||||
mw = function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var ori = e.originalEvent,
|
||||
deltaX = ori.detail || ori.wheelDeltaX,
|
||||
deltaY = ori.detail || ori.wheelDeltaY,
|
||||
v = s._validate(s.o.parse(s.$.val()))
|
||||
+ (
|
||||
deltaX > 0 || deltaY > 0
|
||||
? s.o.step
|
||||
: deltaX < 0 || deltaY < 0 ? -s.o.step : 0
|
||||
);
|
||||
|
||||
v = max(min(v, s.o.max), s.o.min);
|
||||
|
||||
s.val(v, false);
|
||||
|
||||
if (s.rH) {
|
||||
// Handle mousewheel stop
|
||||
clearTimeout(mwTimerStop);
|
||||
mwTimerStop = setTimeout(function () {
|
||||
s.rH(v, true);
|
||||
mwTimerStop = null;
|
||||
}, 100);
|
||||
|
||||
// Handle mousewheel releases
|
||||
if (!mwTimerRelease) {
|
||||
mwTimerRelease = setTimeout(function () {
|
||||
if (mwTimerStop)
|
||||
s.rH(v, true);
|
||||
mwTimerRelease = null;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
},
|
||||
kval,
|
||||
to,
|
||||
m = 1,
|
||||
kv = {
|
||||
37: -s.o.step,
|
||||
38: s.o.step,
|
||||
39: s.o.step,
|
||||
40: -s.o.step
|
||||
};
|
||||
|
||||
this.$
|
||||
.bind(
|
||||
"keydown",
|
||||
function (e) {
|
||||
var kc = e.keyCode;
|
||||
|
||||
// numpad support
|
||||
if (kc >= 96 && kc <= 105) {
|
||||
kc = e.keyCode = kc - 48;
|
||||
}
|
||||
|
||||
kval = parseInt(String.fromCharCode(kc));
|
||||
|
||||
if (isNaN(kval)) {
|
||||
(kc !== 13) // enter
|
||||
&& kc !== 8 // bs
|
||||
&& kc !== 9 // tab
|
||||
&& kc !== 189 // -
|
||||
&& (kc !== 190
|
||||
|| s.$.val().match(/\./)) // . allowed once
|
||||
&& e.preventDefault();
|
||||
|
||||
// arrows
|
||||
if ($.inArray(kc,[37,38,39,40]) > -1) {
|
||||
e.preventDefault();
|
||||
|
||||
var v = s.o.parse(s.$.val()) + kv[kc] * m;
|
||||
s.o.stopper && (v = max(min(v, s.o.max), s.o.min));
|
||||
|
||||
s.change(s._validate(v));
|
||||
s._draw();
|
||||
|
||||
// long time keydown speed-up
|
||||
to = window.setTimeout(function () {
|
||||
m *= 2;
|
||||
}, 30);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"keyup",
|
||||
function (e) {
|
||||
if (isNaN(kval)) {
|
||||
if (to) {
|
||||
window.clearTimeout(to);
|
||||
to = null;
|
||||
m = 1;
|
||||
s.val(s.$.val(), undefined, true);
|
||||
}
|
||||
} else {
|
||||
// kval postcond
|
||||
(s.$.val() > s.o.max && s.$.val(s.o.max))
|
||||
|| (s.$.val() < s.o.min && s.$.val(s.o.min));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.$c.bind("mousewheel DOMMouseScroll", mw);
|
||||
this.$.bind("mousewheel DOMMouseScroll", mw)
|
||||
};
|
||||
|
||||
this.init = function () {
|
||||
if (this.v < this.o.min
|
||||
|| this.v > this.o.max) { this.v = this.o.min; }
|
||||
|
||||
this.$.val(this.o.format(this.v));
|
||||
this.w2 = this.w / 2;
|
||||
this.cursorExt = this.o.cursor / 100;
|
||||
this.xy = this.w2 * this.scale;
|
||||
this.lineWidth = this.xy * this.o.thickness;
|
||||
this.lineCap = this.o.lineCap;
|
||||
this.radius = this.xy - this.lineWidth / 2;
|
||||
|
||||
this.o.angleOffset
|
||||
&& (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
|
||||
|
||||
this.o.angleArc
|
||||
&& (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
|
||||
|
||||
// deg to rad
|
||||
this.angleOffset = this.o.angleOffset * Math.PI / 180;
|
||||
this.angleArc = this.o.angleArc * Math.PI / 180;
|
||||
|
||||
// compute start and end angles
|
||||
this.startAngle = 1.5 * Math.PI + this.angleOffset;
|
||||
this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
|
||||
|
||||
var s = max(
|
||||
String(Math.abs(this.o.max)).length,
|
||||
String(Math.abs(this.o.min)).length,
|
||||
2
|
||||
) + 2;
|
||||
|
||||
this.o.displayInput
|
||||
&& this.i.css({
|
||||
'width' : ((this.w / 2 + 4) >> 0) + 'px',
|
||||
'height' : ((this.w / 3) >> 0) + 'px',
|
||||
'position' : 'absolute',
|
||||
'vertical-align' : 'middle',
|
||||
'margin-top' : ((this.w / 3) >> 0) + 'px',
|
||||
'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px',
|
||||
'border' : 0,
|
||||
'background' : 'none',
|
||||
'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font,
|
||||
'text-align' : 'center',
|
||||
'color' : this.o.inputColor || this.o.fgColor,
|
||||
'padding' : '0px',
|
||||
'-webkit-appearance': 'none'
|
||||
}) || this.i.css({
|
||||
'width': '0px',
|
||||
'visibility': 'hidden'
|
||||
});
|
||||
};
|
||||
|
||||
this.change = function (v) {
|
||||
this.cv = v;
|
||||
this.$.val(this.o.format(v));
|
||||
};
|
||||
|
||||
this.angle = function (v) {
|
||||
return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
|
||||
};
|
||||
|
||||
this.arc = function (v) {
|
||||
var sa, ea;
|
||||
v = this.angle(v);
|
||||
if (this.o.flip) {
|
||||
sa = this.endAngle + 0.00001;
|
||||
ea = sa - v - 0.00001;
|
||||
} else {
|
||||
sa = this.startAngle - 0.00001;
|
||||
ea = sa + v + 0.00001;
|
||||
}
|
||||
this.o.cursor
|
||||
&& (sa = ea - this.cursorExt)
|
||||
&& (ea = ea + this.cursorExt);
|
||||
|
||||
return {
|
||||
s: sa,
|
||||
e: ea,
|
||||
d: this.o.flip && !this.o.cursor
|
||||
};
|
||||
};
|
||||
|
||||
this.draw = function () {
|
||||
var c = this.g, // context
|
||||
a = this.arc(this.cv), // Arc
|
||||
pa, // Previous arc
|
||||
r = 1;
|
||||
|
||||
c.lineWidth = this.lineWidth;
|
||||
c.lineCap = this.lineCap;
|
||||
|
||||
if (this.o.bgColor !== "none") {
|
||||
c.beginPath();
|
||||
c.strokeStyle = this.o.bgColor;
|
||||
c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true);
|
||||
c.stroke();
|
||||
}
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
pa = this.arc(this.v);
|
||||
c.beginPath();
|
||||
c.strokeStyle = this.o.colorize(this.pColor, this.v, true);
|
||||
c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d);
|
||||
c.stroke();
|
||||
r = this.cv == this.v;
|
||||
}
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = r ? this.o.colorize(this.o.fgColor, this.cv, true) : this.o.colorize(this.o.fgColor, this.cv, false);
|
||||
c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
|
||||
c.stroke();
|
||||
};
|
||||
|
||||
this.cancel = function () {
|
||||
this.val(this.v);
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.dial = $.fn.knobHQ = function (o) {
|
||||
return this.each(
|
||||
function () {
|
||||
var d = new k.Dial();
|
||||
d.o = o;
|
||||
d.$ = $(this);
|
||||
d.run();
|
||||
}
|
||||
).parent();
|
||||
};
|
||||
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue