commit ee02b95f4da7afb1411c225396a6541a61cabef8 Author: zhongjin Date: Sat Sep 22 07:55:32 2018 +0800 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2307702 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/node_modules +/nbproject \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..d00629d --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +Gruntfile.js +tasks +node_modules \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..3c0252b --- /dev/null +++ b/.travis.yml @@ -0,0 +1,6 @@ +os: + - linux +language: node_js +node_js: + - '4' + - '8' diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..6aaee37 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,212 @@ +// 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"; + +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 newname = grunt.option('name'); + var author = grunt.option('author') || 'nisiode'; + var email = grunt.option('email') || 'email@mail.com'; + var fs = require('fs'); + + // check arguments + if (process.argv[2] == 'rename') { + console.log('Try to rename to "' + newname + '"'); + if (!newname) { + console.log('Please write the new material name, like: "grunt rename --name=mywidgetset" --author="Author Name"'); + process.exit(); + } + if (newname.indexOf(' ') != -1) { + console.log('Name may not have space in it.'); + process.exit(); + } + if (newname.toLowerCase() != newname) { + console.log('Name must be lower case.'); + process.exit(); + } + if (fs.existsSync(__dirname + '/admin/material.png')) { + fs.renameSync(__dirname + '/admin/material.png', __dirname + '/admin/' + newname + '.png'); + } + if (fs.existsSync(__dirname + '/widgets/material.html')) { + fs.renameSync(__dirname + '/widgets/material.html', __dirname + '/widgets/' + newname + '.html'); + } + if (fs.existsSync(__dirname + '/widgets/material/js/material.js')) { + fs.renameSync(__dirname + '/widgets/material/js/material.js', __dirname + '/widgets/material/js/' + newname + '.js'); + } + if (fs.existsSync(__dirname + '/widgets/material')) { + fs.renameSync(__dirname + '/widgets/material', __dirname + '/widgets/' + newname); + } + } + + // Project configuration. + grunt.initConfig({ + pkg: pkg, + + replace: { + version: { + options: { + patterns: [ + { + match: /version: *"[\.0-9]*"/, + replacement: 'version: "' + version + '"' + }, + { + match: /"version": *"[\.0-9]*",/g, + replacement: '"version": "' + version + '",' + }, + { + match: /version: *"[\.0-9]*",/g, + replacement: 'version: "' + version + '",' + } + ] + }, + files: [ + { + expand: true, + flatten: true, + src: [ + srcDir + 'package.json', + srcDir + 'io-package.json' + ], + dest: srcDir + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '.html' + ], + dest: srcDir + 'widgets' + } + ] + }, + name: { + options: { + patterns: [ + { + match: /material/g, + replacement: newname + }, + { + match: /Material/g, + replacement: newname ? (newname[0].toUpperCase() + newname.substring(1)) : 'Material' + }, + { + match: /nisiode/g, + replacement: author + }, + { + match: /email@mail.com/g, + replacement: email + } + ] + }, + files: [ + { + expand: true, + flatten: true, + src: [ + srcDir + 'io-package.json', + srcDir + 'LICENSE', + srcDir + 'package.json', + srcDir + 'README.md', + srcDir + 'io-package.json', + srcDir + 'Gruntfile.js' + ], + dest: srcDir + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'widgets/' + newname +'.html' + ], + dest: srcDir + 'widgets' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'admin/index.html' + ], + dest: srcDir + 'admin' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'widgets/' + newname + '/js/' + newname +'.js' + ], + dest: srcDir + 'widgets/' + newname + '/js' + }, + { + expand: true, + flatten: true, + src: [ + srcDir + 'widgets/' + newname + '/css/*.css' + ], + dest: srcDir + 'widgets/' + newname + '/css' + } + ] + } + }, + // 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/yunkong2/yunkong2.js-controller/master/tasks/jscs.js' + }, + dest: 'tasks/jscs.js' + }, + get_jshint: { + options: { + url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.js-controller/master/tasks/jshint.js' + }, + dest: 'tasks/jshint.js' + }, + get_jscsRules: { + options: { + url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.js-controller/master/tasks/jscsRules.js' + }, + dest: 'tasks/jscsRules.js' + } + } + }); + + grunt.loadNpmTasks('grunt-replace'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-jscs'); + grunt.loadNpmTasks('grunt-http'); + + grunt.registerTask('default', [ + 'http', + 'replace:version', + 'jshint', + 'jscs' + ]); + + grunt.registerTask('prepublish', [ + 'http', + 'replace:version' + ]); + + grunt.registerTask('p', [ + 'http', + 'replace:version' + ]); + + grunt.registerTask('rename', [ + 'replace:name' + ]); +}; diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..19aaa0e --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015, nisiode + +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. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..0bae79b --- /dev/null +++ b/README.md @@ -0,0 +1,48 @@ +![Logo](admin/material.png) +# yunkong2.vis-material +============ + +[![NPM version](http://img.shields.io/npm/v/yunkong2.vis-material.svg)](https://www.npmjs.com/package/yunkong2.vis-material) +[![Downloads](https://img.shields.io/npm/dm/yunkong2.vis-material.svg)](https://www.npmjs.com/package/yunkong2.vis-material) +[![Travis-CI](http://img.shields.io/travis/nisiode/yunkong2.vis-material/master.svg)](https://travis-ci.org/nisiode/yunkong2.vis-material) + +[![NPM](https://nodei.co/npm/yunkong2.vis-material.png?downloads=true)](https://nodei.co/npm/yunkong2.vis-material/) + + +material - Material widgets for yunkong2.vis. + +You can read instructions in material.js, material.html files + +These widgets are in addition to the material design style of Uhula, which you can find here: +https://github.com/Uhula/yunkong2-Material-Design-Style + + +![Example](img/widgets.png) + + +## Changelog + +### 0.1.5 (2018-07-11) +- (pix) feat: new window shutter widget + +### 0.1.4 (2018-07-10) +- (pix) feat: new humidity widget + +### 0.1.3 (2018-01-21) +- (nisio) feat: new dimmer widget + +### 0.1.2 (2018-01-20) +- (nisio) feat: switch added to light widget + +### 0.1.1 (2018-01-14) +- (nisio) feat: temperature and light widget + +### 0.1.0 (2018-01-13) +- (nisio) Initial version for public testing (includes css from material design styles V1.8) + +### 0.0.1 (2018-01-01) +- (nisio) Initial version for internal testing + +## License + Copyright (c) 2018-2018 nisiode + MIT diff --git a/admin/material.png b/admin/material.png new file mode 100644 index 0000000..44bd77c Binary files /dev/null and b/admin/material.png differ diff --git a/img/widgets.png b/img/widgets.png new file mode 100644 index 0000000..aefb519 Binary files /dev/null and b/img/widgets.png differ diff --git a/io-package.json b/io-package.json new file mode 100644 index 0000000..6c12941 --- /dev/null +++ b/io-package.json @@ -0,0 +1,78 @@ +{ + "common": { + "name": "vis-material", + "version": "0.1.5", + "news": { + "0.1.5": { + "en": "feat: new window shutter widget", + "de": "feat: neues Fenster-Rollladen widget", + "ru": "feat: new window shutter widget" + }, + "0.1.4": { + "en": "feat: new humidity widget", + "de": "feat: neues Luftfeuchte widget", + "ru": "feat: new humidity widget" + }, + "0.1.3": { + "en": "feat: new dimmer widget", + "de": "feat: new dimmer widget", + "ru": "feat: new dimmer widget" + }, + "0.1.2": { + "en": "feat: switch added to light widget", + "de": "feat: switch added to light widget", + "ru": "feat: switch added to light widget" + }, + "0.1.1": { + "en": "feat: temperature and light widget", + "de": "feat: temperature and light widget", + "ru": "feat: temperature and light widget" + }, + "0.1.0": { + "en": "feat: include material css from uhula", + "de": "feat: include material css from uhula", + "ru": "feat: include material css from uhula" + }, + "0.0.1": { + "en": "initial adapter", + "de": "Initiale Version", + "ru": "Первоначальный адаптер", + "pt": "Versão inicial", + "fr": "Version initiale", + "nl": "Eerste release" + } + }, + "title": "material widgets", + "desc": { + "en": "material Widgets for yunkong2.vis", + "de": "material Widgets für yunkong2.vis", + "ru": "material Widgets для yunkong2.vis", + "pt": "molde de Widgets para o yunkong2.vis", + "fr": "modèle de Widgets pour yunkong2.vis", + "nl": "sjabloon widgets voor yunkong2.vis" + }, + "platform": "Javascript/Node.js", + "icon": "material.png", + "enabled": true, + "mode": "once", + "extIcon": "https://git.spacen.net/nisiode/yunkong2.vis-material/raw/master/admin/material.png", + "keywords": ["material", "vis", "GUI", "graphical", "scada"], + "readme": "https://github.com/nisiode/yunkong2.vis-material/blob/master/README.md", + "authors": [ + "nisiode " + ], + "localLink": "%web_protocol%://%ip%:%web_port%/vis/edit.html", + "license": "MIT", + "dependencies": ["vis"], + "onlyWWW": true, + "noConfig": true, + "singleton": true, + "type": "visualization-widgets", + "restartAdapters": ["vis"] + }, + "native": { + "dependencies": [] + }, + "instanceObjects": [ + ] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..8c98b73 --- /dev/null +++ b/package.json @@ -0,0 +1,52 @@ +{ + "name": "yunkong2.vis-material", + "description": "material widgets for yunkong2.vis", + "version": "0.1.5", + "author": { + "name": "nisiode", + "email": "nisio.air@gmail.com" + }, + "contributors": [ + "nisiode ", + "pix " + ], + "homepage": "https://github.com/nisiode/yunkong2.vis-material.git", + "repository": { + "type": "git", + "url": "https://github.com/nisiode/yunkong2.vis-material.git" + }, + "licenses": [ + { + "type": "MIT", + "url": "https://github.com/nisiode/yunkong2.vis-material/blob/master/LICENSE" + } + ], + "keywords": [ + "yunkong2", + "GUI", + "material vis" + ], + "devDependencies": { + "grunt": "^0.4.5", + "grunt-cli": "^1.2.0", + "grunt-contrib-clean": "^0.6.0", + "grunt-contrib-compress": "^0.13.0", + "grunt-contrib-copy": "^0.8.0", + "grunt-contrib-jshint": "^0.11.3", + "grunt-exec": "^0.4.6", + "grunt-http": "^1.6.0", + "grunt-jscs": "^2.8.0", + "grunt-replace": "^0.9.3", + "mocha": "^4.1.0", + "chai": "^4.1.2" + }, + "bugs": { + "url": "https://github.com/nisiode/yunkong2.vis-material/issues" + }, + "readmeFilename": "README.md", + "main": "widgets/material.html", + "scripts": { + "test": "node node_modules/mocha/bin/mocha --exit" + }, + "license": "MIT" +} diff --git a/tasks/jscs.js b/tasks/jscs.js new file mode 100644 index 0000000..588b6f2 --- /dev/null +++ b/tasks/jscs.js @@ -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') + } +}; \ No newline at end of file diff --git a/tasks/jscsRules.js b/tasks/jscsRules.js new file mode 100644 index 0000000..ded301d --- /dev/null +++ b/tasks/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"] + +}; diff --git a/tasks/jshint.js b/tasks/jshint.js new file mode 100644 index 0000000..f823ebc --- /dev/null +++ b/tasks/jshint.js @@ -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' + ] +}; \ No newline at end of file diff --git a/test/testPackageFiles.js b/test/testPackageFiles.js new file mode 100644 index 0000000..a85d1e3 --- /dev/null +++ b/test/testPackageFiles.js @@ -0,0 +1,47 @@ +/* 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) { + var fileContentIOPackage = fs.readFileSync(__dirname + '/../io-package.json'); + var ioPackage = JSON.parse(fileContentIOPackage); + + var fileContentNPMPackage = fs.readFileSync(__dirname + '/../package.json'); + var npmPackage = JSON.parse(fileContentNPMPackage); + + expect(ioPackage).to.be.an('object'); + expect(npmPackage).to.be.an('object'); + + expect(ioPackage.common.version).to.exist; + expect(npmPackage.version).to.exist; + + if (!expect(ioPackage.common.version).to.be.equal(npmPackage.version)) { + console.log('ERROR: Version numbers in package.json and io-package.json differ!!'); + } + + 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!'); + } + + expect(ioPackage.common.authors).to.exist; + if (ioPackage.common.name.indexOf('template') !== 0) { + if (Array.isArray(ioPackage.common.authors)) { + expect(ioPackage.common.authors.length).to.not.be.equal(0); + if (ioPackage.common.authors.length === 1) { + expect(ioPackage.common.authors[0]).to.not.be.equal('my Name '); + } + } + else { + expect(ioPackage.common.authors).to.not.be.equal('my Name '); + } + } + else { + console.log('Testing for set authors field in io-package skipped because template adapter'); + } + done(); + }); +}); diff --git a/widgets/material.html b/widgets/material.html new file mode 100644 index 0000000..cdc29db --- /dev/null +++ b/widgets/material.html @@ -0,0 +1,229 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/widgets/material/css/material.css b/widgets/material/css/material.css new file mode 100644 index 0000000..171ffa7 --- /dev/null +++ b/widgets/material/css/material.css @@ -0,0 +1,2244 @@ +/* ----- + Material Design CSS for yunkong2.vis + (c) 2017 Uhula, MIT License + https://github.com/Uhula/yunkong2-Material-Design-Style + ----- + V1.8 04.01.2018 + + mdui-(color)-glow für red, yellow, blue und green hinzugefügt + o der active-State der Buttons in tnav/bnav wird nun mit box-shadow + statt border gezeichnet + + V1.7 22.12.2017 + + mdui-state: Anzeige von Textstati mit Vorder-/Hintergrundfarbe (basic ValueList HTML) + + mdui-cols-X: Grid-System (152px) für responsive design + o mdui-raisedbutton, mdui-flatbutton Texte werden nun horz/vert zentriert + + V1.6 16.10.2017 + o mdui-dialog z-index korrigiert, damit Dialoge auch im yunkong2 fullscreen Mode sichtbar sind + + V1.5 11.10.2017 + + mdui-table-xxxx hinzu, fertig + + V1.3 24.09.2017 + + mdui-transparent-acc für mdui-slider hinzu + + mdui-(color)-acc für input mit btn + + mdui-slider ohne focus-Rahmen + + Designtime: bei [Mouse-down] > 3 Sek alle Widgets mit einem Rahmen versehen und die ID anzeigen + + Designtime: bei [Mouse-over] > 0.5 Sek das Widget mit einem Rahmen versehen und die ID anzeigen + + V1.2 19.09.2017 + + mdui-select hinzu + o mdui-input angepasst + o mdui-flash/blink/pulse mit filter:drop-shadow (not IE Browser!) + o mdui-(color) für input/select ermöglicht + + V1.0 01.09.2017 + ----- */ + +/* ----- + Generell + ----- */ + +/* nur zur Laufzeit anwenden, nicht im Editor */ +.mdui-runtime .mdui-hide { + display:none !important; +} + +.mdui-toggle img { + transition: transform 0.3s ease; +} + +.mdui-toggle.ui-state-active img { + transform: rotate(180deg); +} + +.mdui-float { + position:relative !important; + left:auto !important; + top:auto !important; + float: left !important; +} + +.mdui-float-right { + float: right !important; +} + + +.vis-view, +.vis-view .ui-widget { + font-family: Roboto, Arial; + font-size: 16px !important; + color:#ffffff; +} + +.vis_container_edit>.vis-view { + background:#000; + color:#ffffff; + font-family: Roboto, Arial; + font-size: 16px !important; +} + + + +/* ----- + application bar + ----- */ + +.mdui-abar { + background:#1A237E !important; + + z-index:99; + border:none !important; +} +.mdui-abar .vis-view{ + background:none !important; +} + +/* ----- + top navigation + ----- */ +.mdui-tnav { + background:#1A237E !important; + + border:none !important; + z-index:98; + box-shadow:0px 2px 4px 0px rgba(0,0,0,0.85); + overflow-y:hidden !important; + overflow-x:auto !important; +} +.mdui-tnav .vis-view { + background:none !important; +} + +/* ----- + content + ----- */ +.mdui-content { + background:#303030 !important; + overflow-y:auto !important; + overflow-x:auto !important; +} + +/* ----- + bottom navigation + ----- */ +.mdui-bnav { + background:#1A237E !important; + z-index:98; + border:none; + box-shadow:0px -2px 4px -1px rgba(0,0,0,0.8); +} +.mdui-bnav .vis-view { + background:none !important; +} + +/* ----- + left navigation + ----- +// Binden des click() Events an den #vis_container mit der Delegation +// für die mdui-l/rbar Klassen. Ein direktes Binding funktioniert durch +// den view-Aufbau nicht, da dieses Script dann beim zurück-Navigieren +// nicht mehr aufgerufen wird. +setTimeout(function () { + // click-Event für das left-nav Element zum Öffnen + $("#vis_container").on( "click", ".mdui-lnavbutton", function() { + $( ".mdui-lnav" ).addClass( "mdui-lnav-open" ); + } ); + // click-Event für die left-nav zum Schließen + $("#vis_container").on( "click", ".mdui-lnav", function() { + $( ".mdui-lnav" ).removeClass( "mdui-lnav-open" ); + } ); + + // click-Event für das right-nav Element zum Öffnen + $("#vis_container").on( "click", ".mdui-rnavbutton", function() { + $( ".mdui-rnav" ).addClass( "mdui-rnav-open" ); + } ); + // click-Event für die right-nav zum Schließen + $("#vis_container").on( "click", ".mdui-rnav", function() { + $( ".mdui-rnav" ).removeClass( "mdui-rnav-open" ); + } ); +}, 1000); +*/ + +.mdui-lnav { + background: #283593 !important; +} + +.mdui-runtime .mdui-lnav { + position: absolute !important; + top: 0px !important; + left: 0px !important; + width: 0px !important; + height: 100% !important; + background: #283593 !important; + border:none !important; + z-index:200; + overflow-x:hidden; + overflow-y:auto; + box-shadow: 0 10px 20px rgba(0,0,0,0.39), 0 6px 6px rgba(0,0,0,0.43); +} + +.mdui-runtime .mdui-lnav.mdui-lnav-open { + transition: width 0.5s ease; + width: 288px !important; +} + +/* zum Abfangen der click-Events zum Schließen den ganzen Bildschirm + trabnsparent überlagern */ +.mdui-runtime .mdui-lnav.mdui-lnav-open:before { + position:fixed; + content:""; + left:0px; + top:0px; + height:100%; + width:100%; + background: rgba(0,0,0,0.3) !important; +} + + +/* ----- + right navigation + ----- */ + +.mdui-rnav { + background: #283593 !important; +} +.mdui-runtime .mdui-rnav { + position: absolute !important; + top: 0 !important; + left: 100% !important; + width: 0 !important; + height: 100% !important; + background: #283593 !important; + border:none !important; + z-index:200; + box-shadow: 0 10px 20px rgba(0,0,0,0.39), 0 6px 6px rgba(0,0,0,0.43); + overflow-x:hidden; + overflow-y:auto; +} + +.mdui-runtime .mdui-rnav.mdui-rnav-open { + transition: all 0.5s ease; + width: 288px !important; + left: calc(100% - 288px) !important; +} + +/* zum Abfangen der click-Events zum Schließen den ganzen Bildschirm + trabnsparent überlagern */ +.mdui-runtime .mdui-rnav.mdui-rnav-open:before { + position:fixed; + content:""; + left:0px; + top:0px; + height:100%; + width:100%; + background: rgba(0,0,0,0.3) !important; +} + +/* +13er Raster, 52er Block, 156er Col +---------------------------------- + 1 col 156 + 2 cols 312 320 + 3 cols 468 480 + 4 cols 624 640 + 5 cols 780 800 + 6 cols 936 960 + 7 cols 1092 1120 + 8 cols 1248 1280 + 9 cols 1404 1440 +10 cols 1560 1600 +*/ + +@media (min-width: 0px) { + .mdui-cols-1, + .mdui-cols-2, + .mdui-cols-3, + .mdui-cols-4, + .mdui-cols-5, + .mdui-cols-6, + .mdui-cols-7, + .mdui-cols-8, + .mdui-cols-9, + .mdui-cols-10 { width:calc(100% - 8px) !important; margin:4px !important; } + + .mdui-cols-1.mdui-card, + .mdui-cols-2.mdui-card, + .mdui-cols-3.mdui-card, + .mdui-cols-4.mdui-card, + .mdui-cols-5.mdui-card, + .mdui-cols-6.mdui-card, + .mdui-cols-7.mdui-card, + .mdui-cols-8.mdui-card, + .mdui-cols-9.mdui-card, + .mdui-cols-10.mdui-card { width:calc(100% - 8px) !important; } +} +@media (min-width: 360px) { + .mdui-cols-1, + .mdui-cols-1.mdui-card { width:calc(50% - 8px) !important; } +} +@media (min-width: 480px) { + .mdui-cols-1, + .mdui-cols-1.mdui-card { width:calc(33.3% - 8px) !important; } + .mdui-cols-2, + .mdui-cols-2.mdui-card { width:calc(66.6% - 8px) !important; } +} + +@media (min-width: 640px) { + .mdui-cols-1, + .mdui-cols-1.mdui-card { width:calc(25% - 8px) !important; } + .mdui-cols-2, + .mdui-cols-2.mdui-card { width:calc(50% - 8px) !important; } + .mdui-cols-3, + .mdui-cols-3.mdui-card { width:calc(75% - 8px) !important; } +} +@media (min-width: 960px) { + .mdui-cols-1, + .mdui-cols-1.mdui-card { width:calc(16.6% - 8px) !important; } + .mdui-cols-2, + .mdui-cols-2.mdui-card { width:calc(33.3% - 8px) !important; } + .mdui-cols-3, + .mdui-cols-3.mdui-card { width:calc(50% - 8px) !important; } + .mdui-cols-4, + .mdui-cols-4.mdui-card { width:calc(66.6% - 8px) !important; } + .mdui-cols-5, + .mdui-cols-5.mdui-card { width:calc(83.3% - 8px) !important; } +} +@media (min-width: 1280px) { + .mdui-cols-1, + .mdui-cols-1.mdui-card { width:calc(12.5% - 8px) !important; } + .mdui-cols-2, + .mdui-cols-2.mdui-card { width:calc(25% - 8px) !important; } + .mdui-cols-3, + .mdui-cols-3.mdui-card { width:calc(37.5% - 8px) !important; } + .mdui-cols-4, + .mdui-cols-4.mdui-card { width:calc(50% - 8px) !important; } + .mdui-cols-5, + .mdui-cols-5.mdui-card { width:calc(62.5% - 8px) !important; } + .mdui-cols-6, + .mdui-cols-6.mdui-card { width:calc(75% - 8px) !important; } + .mdui-cols-7, + .mdui-cols-7.mdui-card { width:calc(87.5% - 8px) !important; } +} + +@media (min-width: 1560px) { + .mdui-cols-1, + .mdui-cols-1.mdui-card { width:calc(10% - 8px) !important; } + .mdui-cols-2, + .mdui-cols-2.mdui-card { width:calc(20% - 8px) !important; } + .mdui-cols-3, + .mdui-cols-3.mdui-card { width:calc(30% - 8px) !important; } + .mdui-cols-4, + .mdui-cols-4.mdui-card { width:calc(40% - 8px) !important; } + .mdui-cols-5, + .mdui-cols-5.mdui-card { width:calc(50% - 8px) !important; } + .mdui-cols-6, + .mdui-cols-6.mdui-card { width:calc(60% - 8px) !important; } + .mdui-cols-7, + .mdui-cols-7.mdui-card { width:calc(70% - 8px) !important; } + .mdui-cols-8, + .mdui-cols-8.mdui-card { width:calc(80% - 8px) !important; } + .mdui-cols-9, + .mdui-cols-9.mdui-card { width:calc(90% - 8px) !important; } +} + + +/* ----- + Buttons + ----- */ +.mdui-input .ui-button, +.mdui-flatbutton, +.mdui-flatbutton .ui-button, +.mdui-flatbutton a, +.mdui-flatbutton div, +.mdui-flatbutton button { + background:none !important; + border:none !important; + color:#FFFFFF !important; + font-size:1em !important; + font-weight: normal !important; + border-radius:2px !important; +} + +.mdui-flatbutton, +.mdui-flatbutton * { + color:#2196F3 !important; +} + +.mdui-flatbutton.mdui-center .vis-widget-body { + display:flex; + justify-content: center; + align-items: center; +} + +.mdui-runtime.mdui-notouch .mdui-flatbutton:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + transition: all 0.3s ease; +} + +.mdui-flatbutton .vis-widget-body, +.mdui-flatbutton .vis-widget-body * { + display:flex; + align-items: center; +} + +.mdui-center-vertical .vis-widget-body { + display:flex; + align-items: center; +} +.mdui-center-horizontal .vis-widget-body { + display:flex; + justify-content: center; +} + + +/* Minimum width: 88dp Height: 36dp +Normal color: 500 Pressed color: 700 +Disabled text: 30% #FFFFFF Disabled button: 12% #FFFFFF +*/ +.mdui-raisedbutton { + font-size:1em !important; + background: #212121 !important; + border:none !important; + border-radius:2px !important; +} + +.mdui-raisedbutton .vis-widget-body { + display:flex; + justify-content: center; + align-items: center; +} + + +.mdui-raisedbutton { + box-shadow: 0 1px 3px rgba(0,0,0,0.27), 0 1px 2px rgba(0,0,0,0.54); +} + +.mdui-runtime.mdui-notouch .mdui-raisedbutton:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + transition: all 0.3s ease; +} + +.mdui-raisedbutton a, +.mdui-raisedbutton div, +.mdui-raisedbutton .ui-button { + color:#ffffff !important; + background: none !important; + border:none !important; + font-weight: normal !important; +} + + +/* floating button */ +.mdui-floatingbutton { + background: #212121 !important; + position: fixed !important; + z-index:1000; + border-radius:50% !important; + box-shadow: 0 10px 20px rgba(0,0,0,0.49), 0 6px 6px rgba(0,0,0,0.53); + border:none !important; +} + +.mdui-floatingbutton * { + background: none !important; + border:none !important; + color:#ffffff !important; +} + +.mdui-floatingbutton.ui-button { + padding:12px !important; +} + +.mdui-runtime.mdui-notouch .mdui-floatingbutton:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + transition: all 0.3s ease; +} + + +/* ----- + Buttons in AppBar / Tabs / BottomNavigation + ----- */ +.mdui-tnav .mdui-flatbutton, +.mdui-bnav .mdui-flatbutton { + padding-left:6px !important; + padding-right:6px !important; + z-index:100; +} + +.mdui-tnav .mdui-flatbutton .vis-widget-body, +.mdui-bnav .mdui-flatbutton .vis-widget-body { + display:flex; + width:100%; + height:100%; + justify-content: center; + align-items: center; +} + +.mdui-tnav .mdui-flatbutton, +.mdui-tnav .mdui-flatbutton *, +.mdui-bnav .mdui-flatbutton, +.mdui-bnav .mdui-flatbutton * { + background:none !important; + border:none !important; + border-radius:0px !important; + color:rgba(255,255,255,1) !important; + font-size:1em !important; + font-weight:normal !important; +} + +.mdui-tnav .mdui-flatbutton, +.mdui-bnav .mdui-flatbutton { + opacity:0.689; +} + +.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-bnav .mdui-flatbutton.ui-state-active *{ + color: #FFFFFF !important; + opacity:1; +} + +.mdui-tnav .mdui-flatbutton { + border-bottom:3px solid rgba(0,0,0,0) !important; +} + +.mdui-bnav .mdui-flatbutton { + border-top:3px solid rgba(0,0,0,0) !important; +} + + +.mdui-tnav .mdui-flatbutton.ui-state-active { + box-shadow: inset 0px -3px 0px 0px #FFFFFF; +} + +.mdui-bnav .mdui-flatbutton.ui-state-active { + box-shadow: inset 0px 3px 0px 0px #FFFFFF; +} + +.mdui-runtime.mdui-notouch .mdui-tnav .mdui-flatbutton:hover, +.mdui-runtime.mdui-notouch .mdui-bnav .mdui-flatbutton:hover { + opacity:1; +} + + + + + +/* ----- + Cards + ----- */ +.mdui-card { + background: #424242; + box-shadow: 0 0 0 1px rgba(255,255,255,0.025) inset, 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + border-radius:2px; + z-index:0; + margin:4px; +} + +.mdui-card.mdui-title:after { + content:""; + position:absolute; + left:0; + top:0; + width:100%; + height:50px; + background: rgba(0,0,0,0.2); +} + + +/* ----- + Tiles + ----- */ +.mdui-tile { + background: #424242; + border-radius:0px; + z-index:0; +} + +.mdui-tile:not([class*='mdui-cols']) { + box-shadow:-1px -1px 0px 0px rgba(0,0,0,0.75) inset; +} + +.mdui-tile.mdui-title:after { + content:""; + position:absolute; + left:0; + top:0; + width:100%; + height:50px; + background: rgba(0,0,0,0.2); +} + +/* ----- + tables + ----- + HMTL-Tabellen (tables), die mit mdui-table versehen werden, können in zwei + Arten angezeigt werden: (a) als normale Table und (b) als responsive Table, + wobei aus Zeile dann Cards/Tiles werden und aus Spalten dann Zeilen. + + mdui-table-bordered + mdui-table-striped + + mdui-table-response-(width)-(type)[-w(colwidth)][-c(colcount)][-l] + (width) = 0000 .. 9999 + (type) = card | tile | list + (colwidth) = 0000 .. 9999 + (colcount) = 0 .. 99 + + + + +*/ +.mdui-table, +.mdui-table table { + border-collapse: collapse; +} + +.mdui-table tr th { + color:#ffffff; + opacity:0.54 !important; + font-weight:normal; + font-size:0.8em; + padding:6px; + border-bottom: 1px solid rgba(255,255,255,0.1); +} +.mdui-table.mdui-table-bordered tr th { + border-bottom-width: 2px; +} +.mdui-table.mdui-table-striped tr:nth-child(even) { + box-shadow:0 0px 0px 1000px rgba(255,255,255,0.05) inset; +} + +.mdui-table tr td { + padding:6px; + color:#ffffff; +} +.mdui-table.mdui-table-bordered tr td { + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +/* responsive: cards or tiles */ + +.mdui-table.mdui-table-card, +.mdui-table.mdui-table-tile, +.mdui-table.mdui-table-list { + display: block; +} +.mdui-table.mdui-table-card thead, +.mdui-table.mdui-table-tile thead, +.mdui-table.mdui-table-list thead { + display: none; +} + +.mdui-table.mdui-table-card tbody, +.mdui-table.mdui-table-tile tbody, +.mdui-table.mdui-table-list tbody{ + display: block; + width:100%; +} + +.mdui-table.mdui-table-card tbody tr, +.mdui-table.mdui-table-tile tbody tr, +.mdui-table.mdui-table-list tbody tr{ + display: block; + border:none; + padding: 6px; + overflow: hidden; +} +.mdui-table.mdui-table-card tbody tr td, +.mdui-table.mdui-table-tile tbody tr td, +.mdui-table.mdui-table-list tbody tr td { + display: block; + padding:0; + padding-bottom:4px; + border-bottom-width: 0px; +} +.mdui-table.mdui-table-card tbody tr td:before, +.mdui-table.mdui-table-tile tbody tr td:before, +.mdui-table.mdui-table-list tbody tr td:before { + color:#ffffff; + display:block; + font-size:9pt; + content: attr(label) attr(labelth); + opacity:0.7; +} + +/* table-card */ +.mdui-table.mdui-table-card tbody tr { + margin:4px; + float:left; + box-shadow: + 0 0px 0px 1000px rgba(255,255,255,0.1) inset, + 0 0 0 1px rgba(255,255,255,0.025) inset, + 0 3px 6px rgba(0,0,0,0.36), + 0 3px 6px rgba(0,0,0,0.43); + border-radius:2px; +} +.mdui-table.mdui-table-card.mdui-table-striped tr:nth-child(even) { + box-shadow: + 0 0px 0px 1000px rgba(255,255,255,0.2) inset, + 0 0 0 1px rgba(255,255,255,0.025) inset, + 0 3px 6px rgba(0,0,0,0.36), + 0 3px 6px rgba(0,0,0,0.43); +} + +/* table-tile */ +.mdui-table.mdui-table-tile tbody tr { + margin-top: 2px; + margin-left: 2px; + float:left; + box-shadow: + 0 0px 0px 1000px rgba(255,255,255,0.1) inset, + 0 0px 0px 1px rgba(255,255,255,0.025) inset; +} +.mdui-table.mdui-table-tile.mdui-table-striped tr:nth-child(even) { + box-shadow: + 0 0px 0px 1000px rgba(255,255,255,0.2) inset, + 0 0px 0px 1px rgba(255,255,255,0.025) inset; +} + +/* table-list */ +.mdui-table.mdui-table-list tbody tr { + padding:8px 8px 4px 8px; +} +.mdui-table.mdui-table-list:not(.mdui-table-striped) tbody tr { + box-shadow: + 0 1px 0px 0px rgba(255,255,255,0.5); +} +.mdui-table.mdui-table-list.mdui-table-striped tr:nth-child(even) { + box-shadow: + 0 0px 0px 1000px rgba(255,255,255,0.1) inset; +} +.mdui-table.mdui-table-list tbody tr td:first-child { + font-weight:bold; +} +.mdui-table.mdui-table-list tbody tr td:first-child:before { + display:none; +} +.mdui-table.mdui-table-list tbody tr td:not(:first-child) { + padding-left:16px; +} + + +/* ------ + Labels + ------ */ +.mdui-title { + z-index:2; + color: rgba(255,255,255,1) !important; + font-size: 1.1em !important; + text-shadow:none !important; + letter-spacing: 0px !important; + width:auto; + height:auto; + opacity:0.9; +} + +.mdui-subtitle { + z-index:2; + color: rgba(255,255,255,1); + font-size: 0.8em; + text-shadow:none !important; + letter-spacing: 0px !important; + width:auto; + height:auto; + opacity:0.5; +} + +.mdui-label { + z-index:2; + color:rgba(255,255,255,1) !important; + font-weight:normal !important; + font-size:0.9em !important; + text-shadow:none !important; + letter-spacing: 0px !important; + width:auto; + height:auto; + opacity:0.7; +} + +.mdui-value { + z-index:2; + color:rgba(255,255,255,1) !important; + font-weight:bold !important; + font-size:1em !important; + text-shadow:none !important; + letter-spacing: 0px !important; + width:auto; + height:auto; + opacity:1; +} + +/* ------ + States + ------ */ +.mdui-state { + z-index:2; + color:rgba(255,255,255,1) !important; + font-weight:bold !important; + font-size:1em !important; + text-shadow:none !important; + letter-spacing: 0px !important; + width:auto; + height:auto; + border-radius:2em; + overflow:visible; +} + +.mdui-state .vis-widget-body div { + width:100%; + height:100%; +} + +.mdui-state .vis-widget-body div * { + /*background:rgba(0,0,0,0.01);*/ + border-radius:2em; + display:flex; + align-items: center; + width:100%; + height:100%; + /*box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);*/ +} + +/* horizontal zentrieren */ +.mdui-state .vis-widget-body div *[class*='-bg'] { + justify-content: center; +} + + +/* ----- + input + ----- +
+
+ + + Stk + +
+
+*/ + +.mdui-input { + color:rgba(255,255,255,0.7) !important; + z-index:2; + font-weight:normal !important; + text-align: left !important; + letter-spacing: 0px !important; +} + +.mdui-input label { + font-size:0.9em; +} + + +.mdui-input input[type="text"] { + border-bottom : 2px solid rgba(255,255,255,0.54) !important; + color : rgba(255,255,255,1) !important; + background: rgba(0,0,0,0) !important; + height:calc(100% - 2px) !important; + border-radius:0px !important; + margin:0px !important; + padding:0px !important; + _line-height:2em !important; + _min-height:0px !important; +} + +.mdui-input input[type="button"] { + top:-2px; + color: #2196F3 !important; +} + +.mdui-runtime.mdui-notouch .mdui-input input[type="text"]:hover, +.mdui-input input[type="text"]:focus { + border-bottom-color : #2196F3 !important; + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + transition: all 0.3s ease; +} +/* ----- + select + ----- +*/ + +.mdui-select { + z-index:2; + font-weight:normal !important; + text-shadow:none !important; + text-align: left !important; + letter-spacing: 0px !important; +} + +.mdui-select select { + color : rgba(255,255,255,1); + height:100% !important; + font-size:1em !important; + background: rgba(0,0,0,0); + border: none; + outline: none; + border-bottom : 2px solid rgba(255,255,255,0.54); + width:100%; +} + +.vis_container_edit .mdui-select select { + pointer-events: none; +} + +.mdui-select select option { + background: #212121 !important; + font-weight:normal !important; + font-size:1.5em !important; +} + +.mdui-select:before { + position: absolute; + top: calc(50% - 0.22em); + right: 0.22em; + width: 0px; + height: 0px; + padding: 0px; + content: ""; + border-left: .4em solid transparent; + border-right: .4em solid transparent; + border-top: .4em solid #FFFFFF; + pointer-events: none; +} + +.mdui-runtime.mdui-notouch .mdui-select select:hover, +.mdui-select select:focus { + border-bottom-color : #2196F3; + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + transition: all 0.3s ease; +} + + + +/* ----- + Slider + ----- +Der folgende CSS Code wandelt das jqui Control "Slider" +so um, dass es sich im Stil eines Slider Controls im Material Design +zeigt und so bedienbar ist. + +
+
+ +
+
+*/ + + +.mdui-slider { + overflow:hidden; + padding:0px !important; +} + +.mdui-slider .ui-slider { + border:none !important; + z-index:2; + padding:0px !important; + margin:0px !important; + background:none !important; +} + +.mdui-slider .ui-slider-horizontal { + top:calc(50% - 8px); + height:16px !important; + width:calc(100% - 16px) !important; + left:0px !important; +} + +.mdui-slider .ui-slider-horizontal:before { + content: ""; + position: absolute; + top: calc(50% - 2px); + left: 0px; + width: calc(100% + 20px); + height: 4px; + background:#ffffff !important; + border-radius: 2px; + pointer-events: none; +} + +.mdui-slider .ui-slider-vertical { + left:calc(50% - 8px) !important; + width:16px !important; + height:calc(100% - 16px) !important; + top:16px !important; +} +.mdui-slider .ui-slider-vertical:before { + content: ""; + position: absolute; + left: calc(50% - 2px); + top: -16px; + width: 4px; + height: calc(100% + 16px); + background:#ffffff !important; + border-radius: 2px; + pointer-events: none; +} + + +.mdui-slider .ui-slider-handle { + padding:0px !important; + margin:0px !important; + width:16px !important; + height:16px !important; + background: #ffffff !important; + border:none !important; + border-radius: 50% !important; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.27), + 0 2px 2px 0 rgba(0, 0, 0, 0.27), + 0 1px 5px 0 rgba(0, 0, 0, 0.54); +} + +.mdui-slider .ui-slider-handle:focus { + outline: none; +} +.mdui-notouch .mdui-slider .ui-slider-handle:focus { + box-shadow: 0 0 4px 2px rgba(33,150,243,0.39), 0 10px 20px rgba(33,150,243,0.39), 0 6px 6px rgba(33,150,243,0.43); +} + +.mdui-slider .ui-slider-horizontal .ui-slider-handle:before { + content: ""; + position: absolute; + top: calc(50% - 2px); + left: 100%; + width: 1000px; + height: 4px; + background:rgba(0,0,0,.5) !important; + border-radius: 2px; + pointer-events: none; +} +.mdui-slider .ui-slider-vertical .ui-slider-handle:before { + content: ""; + position: absolute; + left: calc(50% - 2px); + top: -1000px; + width: 4px; + height: 1000px; + background:rgba(0,0,0,.7) !important; + border-radius: 2px; + pointer-events: none; +} + +.mdui-slider .ui-slider-horizontal .ui-slider-handle { + top:calc(50% - 8px) !important; +} + +.mdui-slider .ui-slider-vertical .ui-slider-handle { + left:calc(50% - 8px) !important; +} + +.mdui-runtime.mdui-notouch .mdui-slider:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + border-radius:2px; + transition: all 0.3s ease; +} + + + +/* ----- + Radio Buttons + ----- */ +.mdui-radio { + z-index:2; +} + +.mdui-radio.mdui-vertical td { +display: block; +} + +.mdui-radio *[id*="_radio"] { + background:none !important; + border:none !important; + color:rgba(0,0,0,1) !important; +} +.mdui-radio *[id*="_radio"] * { + padding-top:2px !important; + padding-bottom:2px !important; + padding-left:4px !important; + padding-right:4px !important; + font-size:1em; + font-weight:bold; +} +.mdui-radio *[id*="_radio"] label { + background:none !important; + border:none !important; + color:rgba(255,255,255,0.87) !important; + border-radius:0px; + border-bottom:2px solid rgba(0,0,0,0) !important; +} +.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#2196F3 !important; + color:#2196F3 !important; +} +.mdui-runtime.mdui-notouch .mdui-radio *[id*="_radio"] label:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + border-radius:2px; + transition: all 0.3s ease; +} + +/* Radiobuttons vertikal darstellen */ +.mdui-radio.mdui-vertical td { + display: block; +} + + +/* ----- + Switch + ----- +*/ +.mdui-switch { + z-index:2; + xheight:36px; + xwidth:48px; + xpadding:6px; +} + + +.mdui-switch input[type="checkbox"] { + display: none; +} + +.mdui-switch input[type="checkbox"]~label { + position: relative; + display: inline-block; + cursor: pointer; + z-index:2; + height:100%; + width:100%; +} +.mdui-switch input[type="checkbox"]~label:before, +.mdui-switch input[type="checkbox"]~label:after { + content: ""; + position: absolute; + outline: 0; + top: 50%; + -ms-transform: translate(0, -50%); + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} +.mdui-switch input[type="checkbox"]~label:before { + left: 0px; + width: 48px; + height: 16px; + background-color: #808080; + border-radius: 100px; +} + +.mdui-switch input[type="checkbox"]~label:after { + left: 0px; + width: 24px; + height: 24px; + background-color: #c0c0c0; + border-radius: 50%; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.27), + 0 2px 2px 0 rgba(0, 0, 0, 0.27), + 0 1px 5px 0 rgba(0, 0, 0, 0.54); +} +.mdui-runtime.mdui-notouch .mdui-switch:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + border-radius:2px; + transition: all 0.3s ease; +} + +.mdui-switch input[type="checkbox"]:checked~label:before { + background-color: #1E88E5; +} + + +.mdui-switch input[type="checkbox"]:checked~label:after { + background-color: #2196F3 ; + -ms-transform: translate(100%, -50%); + -webkit-transform: translate(100%, -50%); + transform: translate(100%, -50%); +} + + + + +/* ----- + Dialog + ----- */ +.mdui-runtime .ui-dialog { + box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 14px 28px rgba(0,0,0,0.65), 0 10px 10px rgba(0,0,0,0.62); + border:none; + background:#303030; + border-radius:2px; + position:absolute; + z-index: 2147483647 !important; +} + +.mdui-runtime .ui-dialog .vis-view { + border:none !important; + background:none !important; + color: #ffffff !important; +} + + +.mdui-runtime .ui-dialog .ui-widget-content { + padding:0px; + margin:0px; +} + +.mdui-runtime .ui-dialog .ui-widget-header { + border:none; + background:none; +} + +.mdui-runtime .ui-dialog .ui-widget-header .ui-button { + border:none !important; + background:none !important; + color: #ffffff !important; +} + + +/* ----- + DatePicker + ----- */ +.ui-datepicker { + background: #303030 !important; + color: rgba(255,255,255,0.87) !important; + box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 14px 28px rgba(0,0,0,0.65), 0 10px 10px rgba(0,0,0,0.62); + border:none; + border-radius:2px; +} + +.ui-datepicker-header, +.ui-datepicker td, +.ui-datepicker td a { + background: #303030 !important; + color: rgba(255,255,255,0.87) !important; + border:none !important; +} + +.mdui-runtime.mdui-notouch .ui-datepicker td a:hover { + box-shadow: 0 0 0 1000px rgba(255,255,255,0.2) inset; + transition: all 0.3s ease; +} + +.ui-datepicker td a.ui-state-active { + color: rgba(0,255,0,1) !important; +} +.ui-datepicker td a.ui-state-highlight { + color: rgba(255,0,0,1) !important; +} + +.ui-datepicker th { + color: rgba(255,255,255,0.54) !important; +} + +.ui-datepicker button { + background: #303030 !important; + border:none !important; + color: rgba(255,255,0,1) !important; +} + + + +/* ----- + Mediaqueries + ----- +*/ + +.mdui-show480 { + display:none !important; +} +@media screen and (max-width: 480px) { + .mdui-hide480 { + display:none !important; + } + .mdui-show480 { + display:initial !important; + } +} + +/* ----- + script + ----- + Zur Laufzeit verstecken, im Design-Mode anzeigen +*/ + +.mdui-script { + display:none; +} + +.vis_container_edit .mdui-script { + display:initial; + background: rgba(255,0,0,0.5) !important; + color: #ffffff; +} + +/* ----- + glow + ----- */ +.mdui-red-glow { + filter: drop-shadow(0px 0px 2px #F44336) drop-shadow(0px 0px 2px #F44336) drop-shadow(0px 0px 4px #F44336); +} +.mdui-yellow-glow { + filter: drop-shadow(0px 0px 2px #FFDB3B) drop-shadow(0px 0px 2px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); +} +.mdui-blue-glow { + filter: drop-shadow(0px 0px 2px #2B95F3) drop-shadow(0px 0px 2px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) +} +.mdui-green-glow { + filter: drop-shadow(0px 0px 2px #4CAF50) drop-shadow(0px 0px 2px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) +} + +/* ----- + flash + ----- */ +.mdui-red-flash { + animation: mdui-red-flash-ani 1s linear infinite; +} +@keyframes mdui-red-flash-ani { + 0%, + 10% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); + } + 11% { filter:none; } +} +.mdui-yellow-flash { + animation: mdui-yellow-flash-ani 1s linear infinite; +} +@keyframes mdui-yellow-flash-ani { + 0%, + 10% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); } + 11% { filter: none; } +} +.mdui-blue-flash { + animation: mdui-blue-flash-ani 1s linear infinite; +} +@keyframes mdui-blue-flash-ani { + 0%, + 10% {filter: drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) } + 11% { filter: none; } +} +.mdui-green-flash { + animation: mdui-green-flash-ani 1s linear infinite; +} +@keyframes mdui-green-flash-ani { + 0%, + 10% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) } + 11% { filter: none; } +} + +/* ----- + blink + ----- */ + +.mdui-red-blink { + animation: mdui-red-blink-ani 1s linear infinite; +} +@keyframes mdui-red-blink-ani { + 0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); } + 51% {filter: none;} + +} +.mdui-yellow-blink { + animation: mdui-yellow-blink-ani 1s linear infinite; +} +@keyframes mdui-yellow-blink-ani { + 0%,50% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); } + 51% {filter: none;} + +} +.mdui-blue-blink { + animation: mdui-blue-blink-ani 1s linear infinite; +} +@keyframes mdui-blue-blink-ani { + 0%,50% {filter: drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3); } + 51% {filter: none;} +} +.mdui-green-blink { + animation: mdui-green-blink-ani 1s linear infinite; +} +@keyframes mdui-green-blink-ani { + 0%,50% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50); } + 51% {filter: none;} +} + +/* ----- + pulse + ----- */ +.mdui-red-pulse { + animation: mdui-red-pulse-ani 3s linear infinite; +} +@keyframes mdui-red-pulse-ani { + 50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); } + 0%,100% {filter: drop-shadow(0px 0px 4px #F44336) ; } + +} +.mdui-yellow-pulse { + animation: mdui-yellow-pulse-ani 3s linear infinite; +} +@keyframes mdui-yellow-pulse-ani { + 50% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); } + 0%,100% {filter: drop-shadow(0px 0px 4px #FFDB3B) } + +} +.mdui-blue-pulse { + animation: mdui-blue-pulse-ani 3s linear infinite; +} +@keyframes mdui-blue-pulse-ani { + 50% {filter: drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3) drop-shadow(0px 0px 4px #2B95F3); } + 0%,100% {filter: drop-shadow(0px 0px 4px #2B95F3); } + +} +.mdui-green-pulse { + animation: mdui-green-pulse-ani 3s linear infinite; +} +@keyframes mdui-green-pulse-ani { + 50% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50); } + 0%,100% {filter: drop-shadow(0px 0px 4px #4CAF50) ; } +} + + +/* ----- + bargraph + ----- */ + +.mdui-h-flip { transform: scaleX(-1); } +.mdui-v-flip { transform: scaleY(-1); } +.mdui-h-flip.mdui-v-flip { transform: scale(-1); } + + +/* Hintergrund und Border */ +.mdui-h-bargraph, +.mdui-v-bargraph { + background-position: -1000px !important; + background-repeat: no-repeat !important; + box-shadow:0 0 0 1000px rgba(255,255,255,0.1) inset; + border:none !important; +} + +.mdui-h-bargraph>*, +.mdui-v-bargraph>* { + background-image:inherit !important; +} + +.mdui-h-bargraph:after, +.mdui-v-bargraph:after { + content:""; + position:absolute; + left:0; + top:0; + width:100%; + height:100%; + background-image:inherit !important; + opacity:0.1; +} + +.mdui-h-bargraph.mdui-segment-10 { + clip-path: polygon( + 0% 100%, 0% 0%, 9% 0%, 9% 100%, + 10% 100%, 10% 0%, 19% 0%, 19% 100%, + 20% 100%, 20% 0%, 29% 0%, 29% 100%, + 30% 100%, 30% 0%, 39% 0%, 39% 100%, + 40% 100%, 40% 0%, 49% 0%, 49% 100%, + 50% 100%, 50% 0%, 59% 0%, 59% 100%, + 60% 100%, 60% 0%, 69% 0%, 69% 100%, + 70% 100%, 70% 0%, 79% 0%, 79% 100%, + 80% 100%, 80% 0%, 89% 0%, 89% 100%, + 90% 100%, 90% 0%, 100% 0%, 100% 100% + ) ; +} + +.mdui-h-bargraph.mdui-triangle { + clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 60%); +} +.mdui-h-bargraph.mdui-ramp { + clip-path: polygon(0% 80%, 100% 0%, 100% 100%, 0% 100%); +} + +.mdui-h-bargraph.mdui-segment-10.mdui-ramp { + clip-path: polygon( + 9% 100%, 9% 71%, 0% 80%, 0% 100%, + 19% 100%, 19% 63%, 10% 72%, 10% 100%, + 29% 100%, 29% 55%, 20% 64%, 20% 100%, + 39% 100%, 39% 47%, 30% 56%, 30% 100%, + 49% 100%, 49% 39%, 40% 48%, 40% 100%, + 59% 100%, 59% 31%, 50% 40%, 50% 100%, + 69% 100%, 69% 23%, 60% 32%, 60% 100%, + 79% 100%, 79% 15%, 70% 24%, 70% 100%, + 89% 100%, 89% 7%, 80% 16%, 80% 100%, + 100% 100%,100% 0%, 90% 8%, 90% 100% + ); +} +.mdui-h-bargraph.mdui-segment-10.mdui-triangle { + clip-path: polygon( + 9% 37%, 9% 63%, 0% 60%, 0% 40%, + 19% 33%, 19% 67%, 10% 64%, 10% 36%, + 29% 29%, 29% 71%, 20% 68%, 20% 32%, + 39% 25%, 39% 75%, 30% 72%, 30% 28%, + 49% 21%, 49% 79%, 40% 76%, 40% 24%, + 59% 17%, 59% 83%, 50% 80%, 50% 20%, + 69% 13%, 69% 87%, 60% 84%, 60% 16%, + 79% 9%, 79% 91%, 70% 88%, 70% 12%, + 89% 5%, 89% 95%, 80% 92%, 80% 8%, + 100% 0%, 100% 100%, 90% 96%, 90% 4% + ); +} + +.mdui-v-bargraph.mdui-segment-10 { + clip-path: polygon( + 100% 0%, 0% 0%, 0% 9%,100% 9% , + 100% 10%, 0% 10%, 0% 19%,100% 19% , + 100% 20%, 0% 20%, 0% 29%,100% 29% , + 100% 30%, 0% 30%, 0% 39%,100% 39% , + 100% 40%, 0% 40%, 0% 49%,100% 49% , + 100% 50%, 0% 50%, 0% 59%,100% 59% , + 100% 60%, 0% 60%, 0% 69%,100% 69% , + 100% 70%, 0% 70%, 0% 79%,100% 79% , + 100% 80%, 0% 80%, 0% 89%,100% 89% , + 100% 90%, 0% 90%, 0% 100%,100% 100% + ) ; +} + +.mdui-v-bargraph.mdui-triangle { + clip-path: polygon(60% 0%, 100% 100%, 0% 100%, 40% 0%); +} +.mdui-v-bargraph.mdui-ramp { + clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 80% 0%); +} + +.mdui-v-bargraph.mdui-segment-10.mdui-ramp { + clip-path: polygon( + 100% 9%, 71% 9%, 80% 0%, 100% 0%, + 100% 19%, 63% 19%, 72% 10%, 100% 10%, + 100% 29%, 55% 29%, 64% 20%, 100% 20%, + 100% 39%, 47% 39%, 56% 30%, 100% 30%, + 100% 49%, 39% 49%, 48% 40%, 100% 40%, + 100% 59%, 31% 59%, 40% 50%, 100% 50%, + 100% 69%, 23% 69%, 32% 60%, 100% 60%, + 100% 79%, 15% 79%, 24% 70%, 100% 70%, + 100% 89%, 7% 89%, 16% 80%, 100% 80%, + 100% 100%, 0% 100%, 8% 90%, 100% 90% + ); +} +.mdui-v-bargraph.mdui-segment-10.mdui-triangle { + clip-path: polygon( + 37% 9%, 63% 9%, 60% 0%, 40% 0%, + 33% 19%, 67% 19%, 64% 10%, 36% 10%, + 29% 29%, 71% 29%, 68% 20%, 32% 20%, + 25% 39%, 75% 39%, 72% 30%, 28% 30%, + 21% 49%, 79% 49%, 76% 40%, 24% 40%, + 17% 59%, 83% 59%, 80% 50%, 20% 50%, + 13% 69%, 87% 69%, 84% 60%, 16% 60%, + 9% 79%, 91% 79%, 88% 70%, 12% 70%, + 5% 89%, 95% 89%, 92% 80%, 8% 80%, + 0% 100%,100% 100%,96% 90%, 4% 90% + ); +} + + + +/* ----- + Farben + ----- */ + + +/* 500 */ +.mdui-teal-bg { background-color: #009688 !important; } +.mdui-amber-bg { background-color: #FFCA28 !important; } +.mdui-indigo-bg { background-color: #3F51B5 !important; } +.mdui-blue-bg { background-color: #2196F3 !important; } +.mdui-lime-bg { background-color: #CDDC39 !important; } +.mdui-red-bg { background-color: #F44336 !important; } +.mdui-green-bg { background-color: #4CAF50 !important; } +.mdui-yellow-bg { background-color: #FFEB3B !important; } +.mdui-brown-bg { background-color: #795548 !important; } +.mdui-grey-bg { background-color: #9E9E9E !important; } +.mdui-bluegrey-bg { background-color: #607D8B !important; } +.mdui-white-bg { background-color: #FFFFFF !important; } +.mdui-black-bg { background-color: #000000 !important; } + + +.mdui-teal-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-teal-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-teal-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-teal-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #009688 !important; + color: #009688 !important; +} +.mdui-amber-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-amber-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-amber-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-amber-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + color: #FFCA28 !important; + border-color: #FFCA28 !important; +} +.mdui-indigo-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-indigo-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-indigo-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-indigo-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #3F51B5 !important; + color: #3F51B5 !important; +} +.mdui-blue-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-blue-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-blue-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-blue-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #2196F3 !important; + color: #2196F3 !important; +} +.mdui-lime-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-lime-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-lime-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-lime-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #CDDC39 !important; + color: #CDDC39 !important; +} +.mdui-red-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-red-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-red-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-red-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #F44336 !important; + color: #F44336 !important; +} +.mdui-green-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-green-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-green-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-green-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #4CAF50 !important; + color: #4CAF50 !important; +} +.mdui-yellow-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-yellow-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-yellow-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-yellow-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #FFEB3B !important; + color: #FFEB3B !important; +} +.mdui-brown-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-brown-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-brown-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-brown-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #795548 !important; + color: #795548 !important; +} +.mdui-grey-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-grey-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-grey-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-grey-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #9E9E9E !important; + color: #9E9E9E !important; +} +.mdui-bluegrey-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-bluegrey-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-bluegrey-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-bluegrey-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #607D8B !important; + color: #607D8B !important; +} +.mdui-white-acc.mdui-tnav .mdui-flatbutton.ui-state-active, +.mdui-white-acc-acc.mdui-tnav .mdui-flatbutton.ui-state-active *, +.mdui-white-acc-acc-acc.mdui-bnav .mdui-flatbutton.ui-state-active, +.mdui-white-acc-acc-acc-acc.mdui-bnav .mdui-flatbutton.ui-state-active *{ + border-color: #FFFFFF !important; + color: #FFFFFF !important; +} + +/* 500 color */ +.mdui-teal, +.mdui-teal select, .mdui-teal input, +.mdui-teal-acc.mdui-input input[type="button"], +.mdui-teal-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-teal.mdui-radio *[id*="_radio"] label, +.mdui-teal.mdui-label, .mdui-teal.mdui-value, +.mdui-teal.mdui-title, .mdui-teal.mdui-subtitle, +.mdui-teal.mdui-flatbutton div, +.mdui-teal.mdui-flatbutton a, +.mdui-teal.mdui-flatbutton .ui-button, +.mdui-teal.mdui-flatbutton .ui-button-text, +.mdui-teal.mdui-flatbutton.ui-button, +.mdui-teal.mdui-floatingbutton.ui-button { + color: #009688 !important; +} +.mdui-amber, +.mdui-amber select, .mdui-amber input, +.mdui-amber-acc.mdui-input input[type="button"], +.mdui-amber-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-amber.mdui-radio *[id*="_radio"] label, +.mdui-amber.mdui-label, .mdui-amber.mdui-value, +.mdui-amber.mdui-title, .mdui-amber.mdui-subtitle, +.mdui-amber.mdui-flatbutton div, +.mdui-amber.mdui-flatbutton a, +.mdui-amber.mdui-flatbutton .ui-button, +.mdui-amber.mdui-flatbutton .ui-button-text, +.mdui-amber.mdui-flatbutton.ui-button, +.mdui-floatingbutton.mdui-amber.ui-button { + color: #FFCA28 !important; +} +.mdui-indigo, +.mdui-indigo select, .mdui-indigo input, +.mdui-indigo-acc.mdui-input input[type="button"], +.mdui-indigo-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-indigo.mdui-radio *[id*="_radio"] label, +.mdui-indigo.mdui-label, .mdui-indigo.mdui-value, +.mdui-indigo.mdui-title, .mdui-indigo.mdui-subtitle, +.mdui-indigo.mdui-flatbutton div, +.mdui-indigo.mdui-flatbutton a, +.mdui-indigo.mdui-flatbutton .ui-button, +.mdui-indigo.mdui-flatbutton .ui-button-text, +.mdui-indigo.mdui-flatbutton.ui-button, +.mdui-indigo.mdui-floatingbutton.ui-button { + color: #7986CB !important; +} +.mdui-blue, +.mdui-blue select, .mdui-blue input, +.mdui-blue-acc.mdui-input input[type="button"], +.mdui-blue-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-blue.mdui-radio *[id*="_radio"] label, +.mdui-blue.mdui-label, .mdui-blue.mdui-value, +.mdui-blue.mdui-title, .mdui-blue.mdui-subtitle, +.mdui-blue.mdui-flatbutton div, +.mdui-blue.mdui-flatbutton a, +.mdui-blue.mdui-flatbutton .ui-button, +.mdui-blue.mdui-flatbutton .ui-button-text, +.mdui-blue.mdui-flatbutton.ui-button, +.mdui-blue.mdui-floatingbutton.ui-button { + color: #2196F3 !important; +} +.mdui-lime, +.mdui-lime select, .mdui-lime input, +.mdui-lime-acc.mdui-input input[type="button"], +.mdui-lime-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-lime.mdui-radio *[id*="_radio"] label, +.mdui-lime.mdui-label, .mdui-lime.mdui-value, +.mdui-lime.mdui-title, .mdui-lime.mdui-subtitle, +.mdui-lime.mdui-flatbutton div, +.mdui-lime.mdui-flatbutton a, +.mdui-lime.mdui-flatbutton .ui-button-text, +.mdui-lime.mdui-flatbutton .ui-button, +.mdui-lime.mdui-flatbutton.ui-button, +.mdui-lime.mdui-floatingbutton.ui-button { + color: #CDDC39 !important; +} +.mdui-red, +.mdui-red select, .mdui-red input, +.mdui-red-acc.mdui-input input[type="button"], +.mdui-red-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-red.mdui-radio *[id*="_radio"] label, +.mdui-red.mdui-label, .mdui-red.mdui-value, +.mdui-red.mdui-title, .mdui-red.mdui-subtitle, +.mdui-red.mdui-flatbutton div, +.mdui-red.mdui-flatbutton a, +.mdui-red.mdui-flatbutton .ui-button, +.mdui-red.mdui-flatbutton .ui-button-text, +.mdui-red.mdui-flatbutton.ui-button { + color: #F44336 !important; +} +.mdui-green, +.mdui-green select, .mdui-green input, +.mdui-green-acc.mdui-input input[type="button"], +.mdui-green-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-green.mdui-radio *[id*="_radio"] label, +.mdui-green.mdui-label, .mdui-green.mdui-value, +.mdui-green.mdui-title, .mdui-green.mdui-subtitle, +.mdui-green.mdui-flatbutton div, +.mdui-green.mdui-flatbutton a, +.mdui-green.mdui-flatbutton .ui-button, +.mdui-green.mdui-flatbutton .ui-button-text, +.mdui-green.mdui-flatbutton.ui-button { + color: #4CAF50 !important; +} +.mdui-yellow, +.mdui-yellow select, .mdui-yellow input, +.mdui-yellow-acc.mdui-input input[type="button"], +.mdui-yellow-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-yellow.mdui-radio *[id*="_radio"] label, +.mdui-yellow.mdui-label, .mdui-yellow.mdui-value, +.mdui-yellow.mdui-title, .mdui-yellow.mdui-subtitle, +.mdui-yellow.mdui-flatbutton div, +.mdui-yellow.mdui-flatbutton a, +.mdui-yellow.mdui-flatbutton .ui-button, +.mdui-yellow.mdui-flatbutton .ui-button-text, +.mdui-yellow.mdui-flatbutton.ui-button { + color: #FFEB3B !important; +} +.mdui-brown, +.mdui-brown select, .mdui-brown input, +.mdui-brown-acc.mdui-input input[type="button"], +.mdui-brown-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-brown.mdui-radio *[id*="_radio"] label, +.mdui-brown.mdui-label, .mdui-brown.mdui-value, +.mdui-brown.mdui-title, .mdui-brown.mdui-subtitle, +.mdui-brown.mdui-flatbutton div, +.mdui-brown.mdui-flatbutton a, +.mdui-brown.mdui-flatbutton .ui-button-text, +.mdui-brown.mdui-flatbutton .ui-button, +.mdui-brown.mdui-flatbutton.ui-button { + color: #795548 !important; +} +.mdui-grey, +.mdui-grey select, .mdui-grey input, +.mdui-grey-acc.mdui-input input[type="button"], +.mdui-grey-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-grey.mdui-radio *[id*="_radio"] label, +.mdui-grey.mdui-label, .mdui-grey.mdui-value, +.mdui-grey.mdui-title, .mdui-grey.mdui-subtitle, +.mdui-grey.mdui-flatbutton div, +.mdui-grey.mdui-flatbutton a, +.mdui-grey.mdui-flatbutton .ui-button, +.mdui-grey.mdui-flatbutton .ui-button-text, +.mdui-grey.mdui-flatbutton.ui-button { + color: #9E9E9E !important; +} +.mdui-bluegrey, +.mdui-bluegrey select, .mdui-bluegrey input, +.mdui-bluegrey-acc.mdui-input input[type="button"], +.mdui-bluegrey-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-bluegrey.mdui-radio *[id*="_radio"] label, +.mdui-bluegrey.mdui-label, .mdui-bluegrey.mdui-value, +.mdui-bluegrey.mdui-title, .mdui-bluegrey.mdui-subtitle, +.mdui-bluegrey.mdui-flatbutton div, +.mdui-bluegrey.mdui-flatbutton a, +.mdui-bluegrey.mdui-flatbutton .ui-button, +.mdui-bluegrey.mdui-flatbutton .ui-button-text, +.mdui-bluegrey.mdui-flatbutton.ui-button { + color: #607D8B !important; +} +.mdui-white, +.mdui-white select, .mdui-white input, +.mdui-white-acc.mdui-input input[type="button"], +.mdui-white-acc.mdui-radio *[id*="_radio"] label.ui-state-active, +.mdui-white.mdui-radio *[id*="_radio"] label, +.mdui-white.mdui-label, .mdui-bluegrey.mdui-value, +.mdui-white.mdui-title, .mdui-bluegrey.mdui-subtitle, +.mdui-white.mdui-flatbutton div, +.mdui-white.mdui-flatbutton a, +.mdui-white.mdui-flatbutton .ui-button, +.mdui-white.mdui-flatbutton .ui-button-text, +.mdui-white.mdui-flatbutton.ui-button { + color: #FFFFFF !important; +} + +/* 500 slider */ +.mdui-transparent-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-transparent-acc.mdui-slider .ui-slider-vertical:before, +.mdui-transparent-acc.mdui-slider .ui-slider-handle:before { + background: none !important; +} +.mdui-teal-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-teal-acc.mdui-slider .ui-slider-vertical:before, +.mdui-teal-acc.mdui-slider .ui-slider-handle { + background: #009688 !important; +} +.mdui-amber-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-amber-acc.mdui-slider .ui-slider-vertical:before, +.mdui-amber-acc.mdui-slider .ui-slider-handle { + background: #FFC107 !important; +} +.mdui-indigo-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-indigo-acc.mdui-slider .ui-slider-vertical:before, +.mdui-indigo-acc.mdui-slider .ui-slider-handle { + background: #3F51B5 !important; +} +.mdui-blue-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-blue-acc.mdui-slider .ui-slider-vertical:before, +.mdui-blue-acc.mdui-slider .ui-slider-handle { + background: #2196F3 !important; +} +.mdui-lime-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-lime-acc.mdui-slider .ui-slider-vertical:before, +.mdui-lime-acc.mdui-slider .ui-slider-handle { + background: #CDDC39 !important; +} +.mdui-red-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-red-acc.mdui-slider .ui-slider-vertical:before, +.mdui-red-acc.mdui-slider .ui-slider-handle { + background: #F44336 !important; +} +.mdui-green-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-green-acc.mdui-slider .ui-slider-vertical:before, +.mdui-green-acc.mdui-slider .ui-slider-handle { + background: #4CAF50 !important; +} +.mdui-yellow-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-yellow-acc.mdui-slider .ui-slider-vertical:before, +.mdui-yellow-acc.mdui-slider .ui-slider-handle { + background: #FFEB3B !important; +} +.mdui-brown-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-brown-acc.mdui-slider .ui-slider-vertical:before, +.mdui-brown-acc.mdui-slider .ui-slider-handle { + background: #795548 !important; +} +.mdui-grey-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-grey-acc.mdui-slider .ui-slider-vertical:before, +.mdui-grey-acc.mdui-slider .ui-slider-handle { + background: #9E9E9E !important; +} +.mdui-bluegrey-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-bluegrey-acc.mdui-slider .ui-slider-vertical:before, +.mdui-bluegrey-acc.mdui-slider .ui-slider-handle { + background: #607D8B !important; +} +.mdui-white-acc.mdui-slider .ui-slider-horizontal:before, +.mdui-white-acc.mdui-slider .ui-slider-vertical:before, +.mdui-white-acc.mdui-slider .ui-slider-handle { + background: #FFFFFF !important; +} + + +/* 500 Radio */ +.mdui-teal-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#009688 !important; + color:#009688 !important; +} +.mdui-amber-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#FFCA28 !important; + color:#FFCA28 !important; +} +.mdui-indigo-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#7986CB !important; + color:#7986CB !important; +} +.mdui-blue-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#2196F3 !important; + color:#2196F3 !important; +} +.mdui-lime-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#CDDC39 !important; + color:#CDDC39 !important; +} +.mdui-red-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#F44336 !important; + color:#F44336 !important; +} +.mdui-green-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#4CAF50 !important; + color:#4CAF50 !important; +} +.mdui-yellow-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#FFEB3B !important; + color:#FFEB3B !important; +} +.mdui-brown-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#795548 !important; + color:#795548 !important; +} +.mdui-grey-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#795548 !important; + color:#9E9E9E !important; +} +.mdui-bluegrey-acc.mdui-radio *[id*="_radio"] label.ui-state-active { + border-bottom-color:#607D8B !important; + color:#607D8B !important; +} + +/* 500 Switch */ +.mdui-teal-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #009688 ; } +.mdui-amber-acc input[type="checkbox"]:checked~label:after { background-color: #FFC107 ; } +.mdui-indigo-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #3F51B5 ; } +.mdui-blue-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #64B5F6; } +.mdui-lime-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #CDDC39 ; } +.mdui-red-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #F44336 ; } +.mdui-green-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #4CAF50 ; } +.mdui-yellow-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #FFEB3B ; } +.mdui-brown-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #795548 ; } +.mdui-grey-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #9E9E9E ; } +.mdui-bluegrey-acc.mdui-switch input[type="checkbox"]:checked~label:after { background-color: #607D8B ; } + + +/* 600 Switch */ +.mdui-teal-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #00897B; } +.mdui-amber-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #FFB300; } +.mdui-indigo-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #3949AB; } +.mdui-blue-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #1E88E5; } +.mdui-lime-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #C0CA33; } +.mdui-red-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #E53935; } +.mdui-green-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #43A047; } +.mdui-yellow-acc.mdui-switch input[type="checkbox"]:checked~label:before{ background-color: #FDD835; } +.mdui-brown-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #6D4C41; } +.mdui-grey-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #757575; } +.mdui-bluegrey-acc.mdui-switch input[type="checkbox"]:checked~label:before { background-color: #546E7A; } + + +/* 800 */ +.mdui-teal-bg.mdui-lnav, .mdui-teal-bg.mdui-rnav, +.mdui-teal-bg.mdui-card, .mdui-teal-bg.mdui-tile { + background-color : #00695C !important; +} +.mdui-amber-bg.mdui-lnav, .mdui-amber-bg.mdui-rnav, +.mdui-amber-bg.mdui-card, .mdui-amber-bg.mdui-tile { + background-color : #FF8F00 !important; +} +.mdui-indigo-bg.mdui-lnav, .mdui-indigo-bg.mdui-rnav, +.mdui-indigo-bg.mdui-card, .mdui-indigo-bg.mdui-tile { + background-color : #283593 !important; +} +.mdui-blue-bg.mdui-lnav, .mdui-blue-bg.mdui-rnav, +.mdui-blue-bg.mdui-card, .mdui-blue-bg.mdui-tile { + background-color : #1565C0 !important; +} +.mdui-lime-bg.mdui-lnav, .mdui-lime-bg.mdui-rnav, +.mdui-lime-bg.mdui-card, .mdui-lime-bg.mdui-tile { + background-color : #9E9D24 !important; +} +.mdui-red-bg.mdui-lnav, .mdui-red-bg.mdui-rnav, +.mdui-red-bg.mdui-card, .mdui-red-bg.mdui-tile { + background-color : #C62828 !important; +} +.mdui-green-bg.mdui-lnav, .mdui-green-bg.mdui-rnav, +.mdui-green-bg.mdui-card, .mdui-green-bg.mdui-tile { + background-color : #2E7D32 !important; +} +.mdui-yellow-bg.mdui-lnav, .mdui-yellow-bg.mdui-rnav, +.mdui-yellow-bg.mdui-card, .mdui-yellow-bg.mdui-tile { + background-color : #F9A825 !important; +} +.mdui-brown-bg.mdui-lnav, .mdui-brown-bg.mdui-rnav, +.mdui-brown-bg.mdui-card, .mdui-brown-bg.mdui-tile { + background-color : #4E342E !important; +} +.mdui-grey-bg.mdui-lnav, .mdui-grey-bg.mdui-rnav, +.mdui-grey-bg.mdui-card, .mdui-grey-bg.mdui-tile { + background-color : #424242 !important; +} +.mdui-bluegrey-bg.mdui-lnav, .mdui-bluegrey-bg.mdui-rnav, +.mdui-bluegrey-bg.mdui-card, .mdui-bluegrey-bg.mdui-tile { + background-color : #37474F !important; +} + +/* 850 */ +.mdui-teal-bg.mdui-content { + background-color : #005b4e !important; +} +.mdui-amber-bg.mdui-content { + background-color : #FF7F00 !important; +} +.mdui-indigo-bg.mdui-content { + background-color : #212c88 !important; +} +.mdui-blue-bg.mdui-content { + background-color : #1156B0 !important; +} +.mdui-lime-bg.mdui-content { + background-color : #908a1d !important; +} +.mdui-red-bg.mdui-content { + background-color : #be2222 !important; +} +.mdui-green-bg.mdui-content { + background-color : #246d29 !important; +} +.mdui-yellow-bg.mdui-content { + background-color : #f7931e !important; +} +.mdui-brown-bg.mdui-content { + background-color : #462d28 !important; +} +.mdui-grey-bg.mdui-content { + background-color : #303030 !important; +} +.mdui-bluegrey-bg.mdui-content { + background-color : #2e3c43 !important; +} + + +/* 900 */ +.mdui-teal-bg.mdui-tnav, .mdui-teal-bg.mdui-bnav, +.mdui-teal-bg.mdui-abar { + background : #004D40 !important; +} +.mdui-amber-bg.mdui-tnav, .mdui-amber-bg.mdui-bnav, +.mdui-amber-bg.mdui-abar { + xbackground : #FF6F00 !important; + background: hsl(45, 50%, 50%) !important; +} +.mdui-indigo-bg.mdui-tnav, .mdui-indigo-bg.mdui-bnav, +.mdui-indigo-bg.mdui-abar { + background : #1A237E !important; +} +.mdui-blue-bg.mdui-tnav, .mdui-blue-bg.mdui-bnav, +.mdui-blue-bg.mdui-abar { + background : #0D47A1 !important; +} +.mdui-lime-bg.mdui-tnav, .mdui-lime-bg.mdui-bnav, +.mdui-lime-bg.mdui-abar { + background : #827717 !important; +} +.mdui-red-bg.mdui-tnav, .mdui-red-bg.mdui-bnav, +.mdui-red-bg.mdui-abar { + xbackground : #B71C1C !important; + background: hsl(0, 50%, 40%) !important; +} +.mdui-green-bg.mdui-tnav, .mdui-green-bg.mdui-bnav, +.mdui-green-bg.mdui-abar { + background : #1B5E20 !important; +} +.mdui-yellow-bg.mdui-tnav, .mdui-yellow-bg.mdui-bnav, +.mdui-yellow-bg.mdui-abar { + xbackground : #F57F17 !important; + background: hsl(60, 50%, 40%) !important; +} +.mdui-brown-bg.mdui-tnav, .mdui-brown-bg.mdui-bnav, +.mdui-brown-bg.mdui-abar { + background : #3E2723 !important; +} +.mdui-grey-bg.mdui-tnav, .mdui-grey-bg.mdui-bnav, +.mdui-grey-bg.mdui-abar { + background : #212121 !important; +} +.mdui-bluegrey-bg.mdui-tnav, .mdui-bluegrey-bg.mdui-bnav, +.mdui-bluegrey-bg.mdui-abar { + background : #263238 !important; +} + + + +/* ----- + Design + ----- */ + +/* Weißes Raster mit 52x52 156x156 als Hintergrund */ +.vis-grid:before { + content:""; + position:absolute; + left:0; + top:0; + width:100%; + height:100%; + background-image: + repeating-linear-gradient( + transparent, + transparent 155px, + rgba(255,255,255,1) 155px, + rgba(255,255,255,1) 156px + ), + + repeating-linear-gradient(to right, + transparent, + transparent 155px, + rgba(255,255,255,1) 155px, + rgba(255,255,255,1) 156px + ) + !important; +} +.vis-grid:after { + content:""; + position:absolute; + left:0; + top:0; + width:100%; + height:100%; + background-image: + repeating-linear-gradient( + transparent, + transparent 51px, + rgba(255,255,255,1) 52px, + rgba(255,255,255,1) 52px + ), + + repeating-linear-gradient(to right, + transparent, + transparent 51px, + rgba(255,255,255,1) 52px, + rgba(255,255,255,1) 52px + ) + !important; +} + +/* Sichtbarkeit des Grids verringern */ +.vis-grid { + opacity: 0.2; + z-index:100; +} + + + +/* bei [Klick] nach 3 Sek je Widget einen Rahmen zeichnen und die ID +einblenden */ +.vis_container_edit .vis-view:active .vis-widget:after { + animation: vis-view-hover-ani 5s; + animation-delay: 3s; + color:#000; +} + +/* beim :hover nach 0.5 Sek hervorheben und die ID einblenden */ +.vis_container_edit .vis-view .vis-widget:hover:after { + animation: vis-view-hover-ani 3s; + animation-delay: 1s; + color:#000; +} + +@keyframes vis-view-hover-ani { + 0%,100% { + position:absolute; + left:0px; + top:0px; + width:calc(100% - 2px); + height:calc(100% - 2px); + text-align:left; + border:1px dotted #ffff00; + font-size:0.6em; + background: linear-gradient(yellow 0%, yellow 100%); + background-size: 48px 12px; + background-repeat: no-repeat; + content:attr(id); + pointer-events: none; + } + +} + +.widget-helper { + border: 1px dashed transparent; +} + +.widget_inner_helper { + outline: 1px dashed black; + border: 1px dashed white; + pointer-events: none; + top:1px; + left:0px; + position:absolute; + width: calc(100% - 3px); + height: calc(100% - 3px); +} + + +/* container-bezeichnungen anzeigen */ +.vis_container_edit .mdui-content:before, +.vis_container_edit .mdui-rnav:before, +.vis_container_edit .mdui-lnav:before, +.vis_container_edit .mdui-tnav:before, +.vis_container_edit .mdui-abar:before { + position:absolute; + top:0px; + left:0px; + content:"content"; + background: #ffff00; + color:#000; + font-size:12px; + font-weight:bold; + height:1.2em; + width:5em; + opacity:0.66; +} + +.vis_container_edit .mdui-abar:before { content:"app-bar"; } +.vis_container_edit .mdui-tnav:before { content:"top-nav"; } +.vis_container_edit .mdui-lnav:before { content:"left-nav"; } +.vis_container_edit .mdui-rnav:before { content:"right-nav"; } +.vis_container_edit .mdui-content:hover:before, +.vis_container_edit .mdui-rnav:hover:before, +.vis_container_edit .mdui-lnav:hover:before, +.vis_container_edit .mdui-tnav:hover:before, +.vis_container_edit .mdui-abar:hover:before { + opacity:1; +} + +.vis_container_edit .mdui-cols-1 { width:156px !important;} +.vis_container_edit .mdui-cols-2 { width:312px !important;} +.vis_container_edit .mdui-cols-3 { width:468px !important; } +.vis_container_edit .mdui-cols-4 { width:624px !important;} +.vis_container_edit .mdui-cols-5 { width:780px !important;} +.vis_container_edit .mdui-cols-6 { width:924px !important;} +.vis_container_edit .mdui-cols-7 { width:1092px !important;} +.vis_container_edit .mdui-cols-8 { width:1248px !important;} +.vis_container_edit .mdui-cols-9 { width:1404px !important;} +.vis_container_edit .mdui-cols-10 { width:1560px !important;} diff --git a/widgets/material/css/style.css b/widgets/material/css/style.css new file mode 100644 index 0000000..6a47227 --- /dev/null +++ b/widgets/material/css/style.css @@ -0,0 +1,34 @@ +.md-list{ + width: 100%; + height: 56px; +} +.md-list-icon{ + float: left; + width: 72px; + height: 56px; +} +.md-list-icon img{ + margin-left: 8px; + width: 48px; + height: 48px; +} + +.md-list-desc{ + float: left; + width: calc(100% - 72px - 100px - 16px); + height: 56px; + margin-top: 10px; +} + +.md-list-value{ + float: left; + width: 100px !important; + text-align: right; + margin-top: 16px; +} + +.md-list-value .mdui-switch{ + width: 48px; + height: 24px; + margin-left: 52px; +} \ No newline at end of file diff --git a/widgets/material/img/fts_door.png b/widgets/material/img/fts_door.png new file mode 100644 index 0000000..7577d0a Binary files /dev/null and b/widgets/material/img/fts_door.png differ diff --git a/widgets/material/img/fts_door_open.png b/widgets/material/img/fts_door_open.png new file mode 100644 index 0000000..a0e23ca Binary files /dev/null and b/widgets/material/img/fts_door_open.png differ diff --git a/widgets/material/img/fts_shutter_00.png b/widgets/material/img/fts_shutter_00.png new file mode 100644 index 0000000..aa48435 Binary files /dev/null and b/widgets/material/img/fts_shutter_00.png differ diff --git a/widgets/material/img/fts_shutter_10.png b/widgets/material/img/fts_shutter_10.png new file mode 100644 index 0000000..64c2886 Binary files /dev/null and b/widgets/material/img/fts_shutter_10.png differ diff --git a/widgets/material/img/fts_shutter_100.png b/widgets/material/img/fts_shutter_100.png new file mode 100644 index 0000000..a3e1cac Binary files /dev/null and b/widgets/material/img/fts_shutter_100.png differ diff --git a/widgets/material/img/fts_shutter_20.png b/widgets/material/img/fts_shutter_20.png new file mode 100644 index 0000000..a7c391c Binary files /dev/null and b/widgets/material/img/fts_shutter_20.png differ diff --git a/widgets/material/img/fts_shutter_30.png b/widgets/material/img/fts_shutter_30.png new file mode 100644 index 0000000..64dda84 Binary files /dev/null and b/widgets/material/img/fts_shutter_30.png differ diff --git a/widgets/material/img/fts_shutter_40.png b/widgets/material/img/fts_shutter_40.png new file mode 100644 index 0000000..0804333 Binary files /dev/null and b/widgets/material/img/fts_shutter_40.png differ diff --git a/widgets/material/img/fts_shutter_50.png b/widgets/material/img/fts_shutter_50.png new file mode 100644 index 0000000..c1c1286 Binary files /dev/null and b/widgets/material/img/fts_shutter_50.png differ diff --git a/widgets/material/img/fts_shutter_60.png b/widgets/material/img/fts_shutter_60.png new file mode 100644 index 0000000..9939fe1 Binary files /dev/null and b/widgets/material/img/fts_shutter_60.png differ diff --git a/widgets/material/img/fts_shutter_70.png b/widgets/material/img/fts_shutter_70.png new file mode 100644 index 0000000..f1b8a78 Binary files /dev/null and b/widgets/material/img/fts_shutter_70.png differ diff --git a/widgets/material/img/fts_shutter_80.png b/widgets/material/img/fts_shutter_80.png new file mode 100644 index 0000000..2a1a37c Binary files /dev/null and b/widgets/material/img/fts_shutter_80.png differ diff --git a/widgets/material/img/fts_shutter_90.png b/widgets/material/img/fts_shutter_90.png new file mode 100644 index 0000000..78c5ae3 Binary files /dev/null and b/widgets/material/img/fts_shutter_90.png differ diff --git a/widgets/material/img/fts_window_1w.png b/widgets/material/img/fts_window_1w.png new file mode 100644 index 0000000..8e684bb Binary files /dev/null and b/widgets/material/img/fts_window_1w.png differ diff --git a/widgets/material/img/fts_window_1w_open.png b/widgets/material/img/fts_window_1w_open.png new file mode 100644 index 0000000..003cdd9 Binary files /dev/null and b/widgets/material/img/fts_window_1w_open.png differ diff --git a/widgets/material/img/fts_window_1w_tilt.png b/widgets/material/img/fts_window_1w_tilt.png new file mode 100644 index 0000000..7e90b21 Binary files /dev/null and b/widgets/material/img/fts_window_1w_tilt.png differ diff --git a/widgets/material/img/fts_window_2w.png b/widgets/material/img/fts_window_2w.png new file mode 100644 index 0000000..aa48435 Binary files /dev/null and b/widgets/material/img/fts_window_2w.png differ diff --git a/widgets/material/img/fts_window_2w_open.png b/widgets/material/img/fts_window_2w_open.png new file mode 100644 index 0000000..eb1e873 Binary files /dev/null and b/widgets/material/img/fts_window_2w_open.png differ diff --git a/widgets/material/img/fts_window_2w_tilt_lr.png b/widgets/material/img/fts_window_2w_tilt_lr.png new file mode 100644 index 0000000..4447d0d Binary files /dev/null and b/widgets/material/img/fts_window_2w_tilt_lr.png differ diff --git a/widgets/material/img/humid_humidity.png b/widgets/material/img/humid_humidity.png new file mode 100644 index 0000000..7f3d244 Binary files /dev/null and b/widgets/material/img/humid_humidity.png differ diff --git a/widgets/material/img/license.txt b/widgets/material/img/license.txt new file mode 100644 index 0000000..aa54f9b --- /dev/null +++ b/widgets/material/img/license.txt @@ -0,0 +1,2 @@ +http://creativecommons.org/licenses/by-sa/3.0/de/ +Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz \ No newline at end of file diff --git a/widgets/material/img/light_light_dim_00.png b/widgets/material/img/light_light_dim_00.png new file mode 100644 index 0000000..5df5538 Binary files /dev/null and b/widgets/material/img/light_light_dim_00.png differ diff --git a/widgets/material/img/light_light_dim_10.png b/widgets/material/img/light_light_dim_10.png new file mode 100644 index 0000000..6f64274 Binary files /dev/null and b/widgets/material/img/light_light_dim_10.png differ diff --git a/widgets/material/img/light_light_dim_100.png b/widgets/material/img/light_light_dim_100.png new file mode 100644 index 0000000..76b33c7 Binary files /dev/null and b/widgets/material/img/light_light_dim_100.png differ diff --git a/widgets/material/img/light_light_dim_20.png b/widgets/material/img/light_light_dim_20.png new file mode 100644 index 0000000..c846f67 Binary files /dev/null and b/widgets/material/img/light_light_dim_20.png differ diff --git a/widgets/material/img/light_light_dim_30.png b/widgets/material/img/light_light_dim_30.png new file mode 100644 index 0000000..a40b202 Binary files /dev/null and b/widgets/material/img/light_light_dim_30.png differ diff --git a/widgets/material/img/light_light_dim_40.png b/widgets/material/img/light_light_dim_40.png new file mode 100644 index 0000000..e09969d Binary files /dev/null and b/widgets/material/img/light_light_dim_40.png differ diff --git a/widgets/material/img/light_light_dim_50.png b/widgets/material/img/light_light_dim_50.png new file mode 100644 index 0000000..184ee64 Binary files /dev/null and b/widgets/material/img/light_light_dim_50.png differ diff --git a/widgets/material/img/light_light_dim_60.png b/widgets/material/img/light_light_dim_60.png new file mode 100644 index 0000000..a3b10ce Binary files /dev/null and b/widgets/material/img/light_light_dim_60.png differ diff --git a/widgets/material/img/light_light_dim_70.png b/widgets/material/img/light_light_dim_70.png new file mode 100644 index 0000000..7a4fbc0 Binary files /dev/null and b/widgets/material/img/light_light_dim_70.png differ diff --git a/widgets/material/img/light_light_dim_80.png b/widgets/material/img/light_light_dim_80.png new file mode 100644 index 0000000..30877f4 Binary files /dev/null and b/widgets/material/img/light_light_dim_80.png differ diff --git a/widgets/material/img/light_light_dim_90.png b/widgets/material/img/light_light_dim_90.png new file mode 100644 index 0000000..ad7c0b5 Binary files /dev/null and b/widgets/material/img/light_light_dim_90.png differ diff --git a/widgets/material/img/temp_temperature.png b/widgets/material/img/temp_temperature.png new file mode 100644 index 0000000..e1ff863 Binary files /dev/null and b/widgets/material/img/temp_temperature.png differ diff --git a/widgets/material/js/material.js b/widgets/material/js/material.js new file mode 100644 index 0000000..51e5f4d --- /dev/null +++ b/widgets/material/js/material.js @@ -0,0 +1,274 @@ +/* + yunkong2.vis material Widget-Set + version: "0.1.4" + Copyright 2018 nisiode + forked by Pix 7/2018 (humidity, shutter) +*/ +"use strict"; + +// add translations for edit mode +if (vis.editMode) { + $.extend(true, systemDictionary, { + "title": {"en": "Title", "de": "Titel", "ru": "???"}, + "subtitle": {"en": "Subtitle", "de": "Untertitel", "ru": "???"} + }); +} + +// add translations for non-edit mode +$.extend(true, systemDictionary, { + "Instance": {"en": "Instance", "de": "Instanz", "ru": "?????????"}, + "open": {"en": "open", "de": "offen", "ru": "?????????"}, + "tilted": {"en": "tilted", "de": "gekippt", "ru": "?????????"}, + "closed": {"en": "closed", "de": "geschlossen", "ru": "?????????"}, + "on": {"en": "on", "de": "an", "ru": "?????????"}, + "off": {"en": "off", "de": "aus", "ru": "?????????"} +}); + +vis.binds.material = { + version: "0.1.5", + showVersion: function () { + if (vis.binds.material.version) { + console.log('Version material: ' + vis.binds.material.version); + vis.binds.material.version = null; + } + }, + tplMdListDoor: function (widgetID, view, data) { + const srcOpen = 'widgets/material/img/fts_door_open.png'; + const srcClosed = 'widgets/material/img/fts_door.png'; + const valOpen = _('open'); + const valClosed = _('closed'); + + var $div = $('#' + widgetID); + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListDoor(widgetID, view, data); + }, 100); + } + + function update(state){ + var value = (state) ? valOpen : valClosed; + var src = (state) ? srcOpen : srcClosed; + $div.find('.md-list-value').html(value); + $div.find('.md-list-icon').find('img').attr('src', src); + } + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + }, + tplMdListWindow: function (widgetID, view, data) { + const srcOpen = 'widgets/material/img/fts_window_2w_open.png'; + const srcClosed = 'widgets/material/img/fts_window_2w.png'; + const valOpen = _('open'); + const valClosed = _('closed'); + var $div = $('#' + widgetID); + + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListWindow(widgetID, view, data); + }, 100); + } + + function update(state){ + var value = (state) ? valOpen : valClosed; + var src = (state) ? srcOpen : srcClosed; + $div.find('.md-list-value').html(value); + $div.find('.md-list-icon').find('img').attr('src', src); + } + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + }, + tplMdListTemp: function (widgetID, view, data) { + var $div = $('#' + widgetID); + + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListTemp(widgetID, view, data); + }, 100); + } + + // grey out the value in case the last change is more than 24h ago + var curTime = new Date().getTime(); + var lcTime = vis.states[data.oid + '.lc']; + var seconds = (curTime - lcTime) / 1000; + if(seconds > 86400){ + $div.find('.md-list-value').css('opacity', '0.5'); + } + + function update(state){ + if(typeof state === 'number'){ + $div.find('.md-list-value').html(state.toFixed(1) + ' °C'); + } + } + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + }, + tplMdListHumid: function (widgetID, view, data) { + var $div = $('#' + widgetID); + + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListHumid(widgetID, view, data); + }, 100); + } + + // grey out the value in case the last change is more than 24h ago + var curTime = new Date().getTime(); + var lcTime = vis.states[data.oid + '.lc']; + var seconds = (curTime - lcTime) / 1000; + if(seconds > 86400){ + $div.find('.md-list-value').css('opacity', '0.5'); + } + + function update(state){ + if(typeof state === 'number'){ + $div.find('.md-list-value').html(state.toFixed(1) + ' %'); + } + } + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + }, + tplMdListLight: function (widgetID, view, data) { + const srcOff = 'widgets/material/img/light_light_dim_00.png'; + const srcOn = 'widgets/material/img/light_light_dim_100.png'; + var $div = $('#' + widgetID); + + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListLight(widgetID, view, data); + }, 100); + } + + function update(state){ + var src = (state) ? srcOn : srcOff; + var $tmp = $('#' + widgetID + '_checkbox'); + $tmp.prop('checked', state); + $div.find('.md-list-icon').find('img').attr('src', src); + } + + if (!vis.editMode) { + var $this = $('#' + widgetID + '_checkbox'); + $this.change(function () { + var $this_ = $(this); + vis.setValue($this_.data('oid'), $this_.prop('checked')); + }); + } + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + }, + tplMdListLightDim: function (widgetID, view, data) { + const srcOff = 'widgets/material/img/light_light_dim_00.png'; + const srcOn = 'widgets/material/img/light_light_dim_100.png'; + var $div = $('#' + widgetID); + + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListLightDim(widgetID, view, data); + }, 100); + } + + function update(state){ + var src = 'widgets/material/img/light_light_dim_' + Math.ceil(state/10) + '0.png'; + $div.find('.md-list-icon').find('img').attr('src', src); + } + + /* if (!vis.editMode) { + var $this = $('#' + widgetID + '_slider'); + $this.change(function () { + var $this_ = $(this); + vis.setValue($this_.data('oid'), $this_.prop('checked')); + }); + } */ + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + }, + tplMdListShutter: function (widgetID, view, data) { + const srcOff = 'widgets/material/img/fts_shutter_00.png'; + const srcOn = 'widgets/material/img/fts_shutter_100.png'; + var $div = $('#' + widgetID); + + // if nothing found => wait + if (!$div.length) { + return setTimeout(function () { + vis.binds.material.tplMdListShutter(widgetID, view, data); + }, 100); + } + + function update(state){ + var src = 'widgets/material/img/fts_shutter_' + Math.ceil(state/10) + '0.png'; + $div.find('.md-list-icon').find('img').attr('src', src); + } + + /* if (!vis.editMode) { + var $this = $('#' + widgetID + '_slider'); + $this.change(function () { + var $this_ = $(this); + vis.setValue($this_.data('oid'), $this_.prop('checked')); + }); + } */ + + if (data.oid) { + // subscribe on updates of value + vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) { + update(newVal); + }); + + // set current value + update(vis.states[data.oid + '.val']); + } + } +}; + +vis.binds.material.showVersion();