├── .bowerrc ├── .gitignore ├── .gitmodules ├── AUTHORS ├── CHANGELOG ├── Gruntfile.js ├── LICENSE ├── README.md ├── assets ├── icon_128.png ├── icon_128_2.png ├── icon_16.png ├── icon_800.png ├── icon_96_16_16.png ├── tile_1400_560.png ├── tile_440_280.png └── tile_920_680.png ├── bower.json ├── css └── build │ ├── boostrap-overwrite.css │ ├── felxbox.css │ ├── flexbox_bare.css │ ├── fonts.css │ └── global.css ├── index.html ├── main.js ├── manifest.json ├── package.json └── styles ├── mqttLensChromeApp.css.map └── mqttLensChromeApp.scss /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "bower_components" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | !bower_components/mqtt-lens 3 | !bower_components/mqtt-message-ui 4 | !bower_components/mqtt-message-detail-ui 5 | !bower_components/mqtt-connection-ui 6 | !bower_components/mqtt-connection 7 | !bower_components/mqtt-lens-style 8 | !bower_components/mqtt-subscription-ui 9 | !bower_components/changeover-icon 10 | !bower_components/code-pretty 11 | !bower_components/chrome-storage/ 12 | 13 | 14 | build/ 15 | #build.* 16 | .idea/ 17 | .bowerrc 18 | .DS_Store 19 | 20 | ## File-based project format 21 | *.ipr 22 | *.iml 23 | *.iws 24 | 25 | # igonre css files as all style sheats are created via SCSS 26 | # TODO(sandro-k) remove css files after moving all styles to the elements 27 | # *.css 28 | styles/*.css 29 | node_modules 30 | 31 | /.sass-cache/ 32 | 33 | /builds 34 | /ideas 35 | MQTTLens_*.zip 36 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "bower_components/mqtt-lens"] 2 | path = bower_components/mqtt-lens 3 | url = https://github.com/sandro-k/mqtt-lens.git 4 | fetchRecurseSubmodules = true 5 | [submodule "bower_components/mqtt-message-ui"] 6 | path = bower_components/mqtt-message-ui 7 | url = https://github.com/sandro-k/mqtt-message-ui.git 8 | fetchRecurseSubmodules = true 9 | [submodule "bower_components/mqtt-message-detail-ui"] 10 | path = bower_components/mqtt-message-detail-ui 11 | url = https://github.com/sandro-k/mqtt-message-detail-ui.git 12 | fetchRecurseSubmodules = true 13 | [submodule "bower_components/mqtt-connection-ui"] 14 | path = bower_components/mqtt-connection-ui 15 | url = https://github.com/sandro-k/mqtt-connection-ui.git 16 | fetchRecurseSubmodules = true 17 | [submodule "bower_components/mqtt-connection"] 18 | path = bower_components/mqtt-connection 19 | url = https://github.com/sandro-k/mqtt-connection.git 20 | fetchRecurseSubmodules = true 21 | [submodule "bower_components/mqtt-lens-style"] 22 | path = bower_components/mqtt-lens-style 23 | url = https://github.com/sandro-k/mqtt-lens-style.git 24 | fetchRecurseSubmodules = true 25 | [submodule "bower_components/mqtt-subscription-ui"] 26 | path = bower_components/mqtt-subscription-ui 27 | url = https://github.com/sandro-k/mqtt-subscription-ui.git 28 | fetchRecurseSubmodules = true 29 | [submodule "bower_components/changeover-icon"] 30 | path = bower_components/changeover-icon 31 | url = https://github.com/sandro-k/changeover-icon.git 32 | fetchRecurseSubmodules = true 33 | [submodule "bower_components/code-pretty"] 34 | path = bower_components/code-pretty 35 | url = https://github.com/sandro-k/code-pretty.git 36 | fetchRecurseSubmodules = true 37 | [submodule "bower_components/chrome-storage"] 38 | path = bower_components/chrome-storage 39 | url = https://github.com/sandro-k/chrome-storage.git 40 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | Sandro Kock (http://github.com/sandro-k) 2 | -------------------------------------------------------------------------------- /CHANGELOG: -------------------------------------------------------------------------------- 1 | v0.0.2: 2 | date: 3 | changes: 4 | - 5 | 6 | v0.0.1: 7 | date: 8 | changes: 9 | - Initial release -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | // Project configuration. 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | // todo(sandro-k) configure uglify or closure 7 | uglify: { 8 | build: { 9 | src: 'js/app.js', // input 10 | dest: 'js/build/app.min.js' // output 11 | } 12 | }, 13 | 14 | // the SASS task 15 | // there should be no dedicated styles for the Chrome-App, 16 | // as all styles are loaded with the mqtt-lens component 17 | sass: { 18 | dist: { 19 | files: [{ 20 | sourcemap: false, 21 | expand: true, 22 | src: 'styles/mqttLensChromeApp.scss', 23 | dest: '.', 24 | ext: '.css' 25 | }] 26 | }, 27 | mqtt_message_ui: { 28 | files: [{ 29 | sourcemap: false, 30 | expand: false, 31 | src: 'bower_components/mqtt-message-ui/mqtt-message-ui.scss', 32 | dest: 'bower_components/mqtt-message-ui/mqtt-message-ui.css', 33 | ext: '.css' 34 | }] 35 | } 36 | }, 37 | 38 | // the vulcanize task 39 | // vulcanize is needed to run polymer within a Chrome-App 40 | vulcanize: { 41 | default: { 42 | options: { 43 | csp: true, 44 | strip: true 45 | }, 46 | files: { 47 | // Target-specific file lists and/or options go here. 48 | 'build.html': 'index.html' 49 | } 50 | } 51 | }, 52 | 53 | mkdir: { 54 | build: { 55 | options: { 56 | create: [ 57 | 'build', 58 | 'build/assets', 59 | 'build/styles', 60 | 'build/bower_components/platform', 61 | 'build/bower_components/polymer', 62 | 'build/bower_components/webcomponentsjs', 63 | 'build/bower_components/core-focusable/', 64 | 'build/bower_components/chrome-app-livereload'] 65 | } 66 | } 67 | }, 68 | 69 | clean: { 70 | build: { 71 | src: ["build.html", "build.js"] 72 | } 73 | }, 74 | 75 | copy: { 76 | manifest: { 77 | expand: true, 78 | src: ['manifest.json'], 79 | dest: 'build/', 80 | filter: 'isFile' 81 | }, 82 | vulcanize: { 83 | options: { 84 | csp: true, 85 | strip: true 86 | }, 87 | src: ['build.html', 'build.js'], 88 | dest: 'build/', 89 | filter: 'isFile' 90 | }, 91 | 92 | assets: { 93 | expand: true, 94 | src: ['assets/*', 'bower_components/*/assets/*'], 95 | dest: 'build/', 96 | filter: 'isFile' 97 | }, 98 | 99 | polymer: { 100 | expand: true, 101 | src: [ 102 | 'bower_components/web-animations-js/web-animations-next-lite.*', 103 | 'bower_components/webcomponentsjs/webcomponents.js', 104 | 'bower_components/polymer/polymer.js', 105 | 'bower_components/core-focusable/polymer-mixin.js', 106 | 'bower_components/core-focusable/core-focusable.js'], 107 | dest: 'build/', 108 | filter: 'isFile' 109 | }, 110 | 111 | bower_css: { 112 | cwd: 'bower_components/', 113 | flatten: true, 114 | expand: true, 115 | filter: 'isFile', 116 | src: '**/*.css', 117 | dest: 'build/' 118 | }, 119 | 120 | bower_css2: { 121 | cwd: 'bower_components/', 122 | expand: true, 123 | filter: 'isFile', 124 | src: '**/*.css', 125 | dest: 'build/' 126 | }, 127 | 128 | mqtt_lens_chrome_app_css: { 129 | cwd: 'styles/', 130 | src: [ 131 | 'mqttLensChromeApp.css', 132 | 'mqttLensChromeApp.css.map', 133 | 'mqttLensChromeApp.scss'], 134 | dest: 'build/', 135 | expand: true, 136 | flatten: true, 137 | filter: 'isFile' 138 | }, 139 | 140 | // we need a patched version of livereload to work within a chrome app 141 | // see: https://github.com/mklabs/tiny-lr#0.0.5 142 | // TODO (sandro-k) add link to patched github version 143 | livereload: { 144 | expand: true, 145 | src: ['bower_components/chrome-app-livereload/livereload.js'], 146 | dest: 'build/', 147 | filter: 'isFile' 148 | }, 149 | 150 | mainjs: { 151 | expand: true, 152 | src: ['main.js'], 153 | dest: 'build/', 154 | filter: 'isFile' 155 | }, 156 | 157 | scripts: { 158 | expand: true, 159 | src: [ 160 | 'bower_components/google-code-prettify/src/prettify.js', 161 | 'bower_components/moment/min/moment.min.js', 162 | 'bower_components/jquery/dist/jquery.js', 163 | 'bower_components/mqtt-connection/mows/mows.js', 164 | 'bower_components/mqtt-connection/mqemitter/browserMqemitter.js', 165 | 'bower_components/mqtt-connection/mqtt-bundel.js', 166 | 'bower_components/underscore/underscore.js' 167 | ], 168 | dest: 'build/', 169 | filter: 'isFile' 170 | }, 171 | 172 | appAssets: { 173 | expand: true, 174 | src: [ 175 | 'assets/*' 176 | ], 177 | dest: 'build/', 178 | filter: 'isFile' 179 | } 180 | }, 181 | 182 | connect: { 183 | def: { 184 | options: { 185 | //open: { 186 | //target: 'http://localhost:9001/bower_components' 187 | //}, 188 | port: 9001, 189 | base: '.' 190 | } 191 | }, 192 | build: { 193 | options: { 194 | //open: { 195 | // target: 'http://localhost:9002/build.html' 196 | //}, 197 | port: 9002, 198 | base: 'build' 199 | } 200 | } 201 | }, 202 | 203 | watch: { 204 | // watch for SCSS files and compile to css 205 | dependencies: { 206 | files: [ 207 | 'bower_components/mqtt-connection/*', 208 | 'bower_components/mqtt-connection-ui/*', 209 | 'bower_components/mqtt-lens/*', 210 | 'bower_components/mqtt-lens-style/*', 211 | 'bower_components/mqtt-message-details-ui/*', 212 | 'bower_components/mqtt-message-ui/*', 213 | 'bower_components/mqtt-subscription-ui/*' 214 | ], 215 | tasks: ['build'], 216 | options: { 217 | // use live reload that is build in with grunt watch and use default port 218 | livereload: true 219 | } 220 | 221 | }, 222 | sass: { 223 | files: ['styles/*.scss'], 224 | tasks: ['sass', 'build'], 225 | options: { 226 | // use live reload that is build in with grunt watch and use default port 227 | livereload: true 228 | } 229 | }, 230 | vulcanize: { 231 | files: ['index.html'], 232 | tasks: ['polymer_clean'], 233 | options: { 234 | // use live reload that is build in with grunt watch and use default port 235 | livereload: true 236 | } 237 | }, 238 | manifest: { 239 | files: ['manifest.json'], 240 | task: ['copy:manifest'], 241 | options: { 242 | // use live reload that is build in with grunt watch and use default port 243 | // todo(sandro-k) check if changes in the manifest are refreshed 244 | livereload: true 245 | } 246 | }, 247 | assets: { 248 | files: ['assets/*'], 249 | task: ['copy:assets'], 250 | options: { 251 | // use live reload that is build in with grunt watch and use default port 252 | // todo(sandro-k) check if changes in the manifest are refreshed 253 | livereload: true 254 | } 255 | }, 256 | mainjs: { 257 | files: ['main.js'], 258 | task: ['copy:mainjs'], 259 | options: { 260 | // use live reload that is build in with grunt watch and use default port 261 | livereload: true 262 | } 263 | } 264 | } 265 | }); 266 | 267 | 268 | // a task that creates the initial folder structure and copies some dependencies 269 | //grunt.registerTask('init', ['mkdir:build', 'copy:polymer', 'copy:polymer2', 'copy:livereload', 'copy:assets', 'copy:manifest', 'sass', 'copy:mainjs', 'copy:scripts', 'copy:appAssets']); 270 | grunt.registerTask('init', ['mkdir', 'sass', 'copy']); 271 | 272 | // a task that builds the overall app 273 | grunt.registerTask('build', ['init', 'polymer_clean', 'mows']); 274 | 275 | grunt.registerTask('srv', ['build', 'connect', 'watch']); 276 | 277 | // a that that builds, moves and cleans polymer 278 | grunt.registerTask('polymer_clean', ['vulcanize', 'copy:vulcanize', 'clean:build']); 279 | 280 | // a task that builds mows 281 | // todo(sandro-k) create build process 282 | grunt.registerTask('mows', []); 283 | 284 | 285 | // Load the plugin that provides the "uglify" task. 286 | grunt.loadNpmTasks('grunt-contrib-uglify'); 287 | 288 | // load sass 289 | grunt.loadNpmTasks('grunt-contrib-sass'); 290 | 291 | // watch 292 | grunt.loadNpmTasks('grunt-contrib-watch'); 293 | 294 | // local http server 295 | grunt.loadNpmTasks('grunt-contrib-connect'); 296 | 297 | // vulcanize 298 | grunt.loadNpmTasks('grunt-vulcanize'); 299 | 300 | // grunt copy we need to manually copy a couple of files to the build folder 301 | grunt.loadNpmTasks('grunt-contrib-copy'); 302 | 303 | // we need to create some directories 304 | grunt.loadNpmTasks('grunt-mkdir'); 305 | 306 | // we need to clean up after build 307 | grunt.loadNpmTasks('grunt-contrib-clean'); 308 | 309 | 310 | // Default task(s). 311 | grunt.registerTask('default', ['build']); 312 | 313 | 314 | }; 315 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Sandro Kock (github sandro-k) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MQTTLens Chrome App 2 | 3 | ## Get started and loading the Dev version of MQTTLens 4 | 5 | `git clone https://github.com/sandro-k/MQTTLensChromeApp.git` 6 | 7 | `cd MQTTLensChromeApp` 8 | 9 | `git submodule init` 10 | 11 | `git submodule update` 12 | 13 | `npm install` 14 | 15 | `bower install` 16 | 17 | `grunt` 18 | 19 | 20 | This will build MQTTlens in to the `build` directory. Navigate to `chrome://extensions/` in Chrome and load the `build` 21 | folder as a Chrome App. 22 | 23 | To debug MQTTlens installed from the Chrome App Store brows to [`chrome://inspect/#apps`](chrome://inspect/#apps) 24 | 25 | ## Other installations needed 26 | 27 | You will also need a few other tools installed to properly complete the build: 28 | 29 | * Ruby - see https://www.ruby-lang.org/en/ 30 | * NodeJS - see https://nodejs.org/en/ 31 | * bower - `npm install -g bower` 32 | * sass `gem install sass` 33 | * Grunt `npm install -g grunt-cli` 34 | 35 | ## Live reload 36 | 37 | `grunt watch` 38 | 39 | ## Changelog 40 | 41 | 0.0.13 42 | * using in mqtt-message-detail-ui.html 43 | 44 | 0.0.12 45 | * replacing × with x in mqtt-message-detail-ui.html 46 | 47 | 0.0.11 48 | * adding the ability to connect/disconnect on demand 49 | 50 | 0.0.10 51 | * making JSON paylod copyable 52 | 53 | 0.0.9 54 | * trim connection strings on save [MQTTLensChromeApp/issues/7](https://github.com/sandro-k/MQTTLensChromeApp/issues/7) 55 | 56 | 0.0.2 57 | * Updated to Polymer 0.5.5 and webcomponents.js 58 | 59 | 0.0.1 Initial release 60 | -------------------------------------------------------------------------------- /assets/icon_128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/icon_128.png -------------------------------------------------------------------------------- /assets/icon_128_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/icon_128_2.png -------------------------------------------------------------------------------- /assets/icon_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/icon_16.png -------------------------------------------------------------------------------- /assets/icon_800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/icon_800.png -------------------------------------------------------------------------------- /assets/icon_96_16_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/icon_96_16_16.png -------------------------------------------------------------------------------- /assets/tile_1400_560.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/tile_1400_560.png -------------------------------------------------------------------------------- /assets/tile_440_280.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/tile_440_280.png -------------------------------------------------------------------------------- /assets/tile_920_680.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sandro-k/MQTTLensChromeApp/edd423f016db99b8969be6142461e44e89a96896/assets/tile_920_680.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MQTTLens", 3 | "version": "0.0.13", 4 | "authors": [ 5 | "Sandro Kock " 6 | ], 7 | "description": "A Chrome App to debug MQTT applications", 8 | "main": "index.html", 9 | "keywords": [ 10 | "mqtt", 11 | "chrome", 12 | "app", 13 | "polymer", 14 | "webcomponent" 15 | ], 16 | "license": "MIT", 17 | "homepage": "https://github.com/sandro-k/MQTTLensChromeApp", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ], 25 | "dependencies": { 26 | "polymer": "Polymer/polymer#~0.5.5", 27 | "mqtt-lens": "sandro-k/mqtt-lens#~0.0.3", 28 | "chrome-app-livereload": "bestander/chrome-app-livereload#~0.0.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /css/build/boostrap-overwrite.css: -------------------------------------------------------------------------------- 1 | .container-fluid { 2 | padding-left: 0; 3 | padding-right: 0; 4 | min-height: 100%; } 5 | 6 | [class*='col-'] { 7 | padding-left: 4px; 8 | padding-right: 4px; } 9 | -------------------------------------------------------------------------------- /css/build/felxbox.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | height: 100%; } 6 | 7 | .wrapper { 8 | display: flex; 9 | flex-flow: row wrap; 10 | min-height: 100%; 11 | position: relative; } 12 | 13 | .main { 14 | flex: 4 100%; 15 | min-height: 100%; 16 | position: relative; } 17 | 18 | .aside { 19 | flex: 1 50%; 20 | max-width: 20%; } 21 | 22 | .header { 23 | background: tomato; } 24 | 25 | .footer { 26 | background: lightgreen; 27 | position: absolute; 28 | width: 100%; 29 | height: 80px; 30 | bottom: 0; 31 | left: 0; } 32 | 33 | .main { 34 | text-align: left; 35 | background: deepskyblue; 36 | padding-bottom: 80px; } 37 | 38 | .menu-left { 39 | background: gold; } 40 | 41 | .menu-right { 42 | background: hotpink; } 43 | 44 | @media all and (max-width: 600px) { 45 | .aside { 46 | max-width: 100%; } } 47 | @media all and (min-width: 600px) { 48 | .aside { 49 | flex: 1 auto; } } 50 | @media all and (min-width: 800px) { 51 | .main { 52 | flex: 2 0px; } 53 | 54 | .menu-left { 55 | order: 1; } 56 | 57 | .main { 58 | order: 2; } 59 | 60 | .menu-right { 61 | order: 3; } 62 | 63 | .footer { 64 | order: 4; } } 65 | -------------------------------------------------------------------------------- /css/build/flexbox_bare.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-flow: row wrap; } 4 | 5 | .left { 6 | flex-grow: 1; 7 | background-color: darkseagreen; 8 | flex-basis: 20%; } 9 | 10 | .right { 11 | flex-grow: 1; 12 | background-color: dodgerblue; 13 | flex-basis: 20%; } 14 | 15 | .content { 16 | flex-grow: 2; 17 | background-color: #ffff00; 18 | flex-basis: 60%; } 19 | -------------------------------------------------------------------------------- /css/build/fonts.css: -------------------------------------------------------------------------------- 1 | /* 2 | compiled scss will be in the build directory so we need to go up two directories 3 | */ 4 | @font-face { 5 | font-family: 'icomoon'; 6 | src: url("../../fonts/icomoon.eot?ibphbr"); 7 | src: url("../../fonts/icomoon.eot?#iefixibphbr") format("embedded-opentype"), url("../../fonts/icomoon.woff?ibphbr") format("woff"), url("../../fonts/icomoon.ttf?ibphbr") format("truetype"), url("../../fonts/icomoon.svg?ibphbr#icomoon") format("svg"); 8 | font-weight: normal; 9 | font-style: normal; } 10 | [class^="icon-"], [class*=" icon-"] { 11 | /* Better Font Rendering =========== */ 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; } 14 | 15 | .icon-uniE600:before { 16 | content: "\e600"; } 17 | -------------------------------------------------------------------------------- /css/build/global.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | /* FONT PATH 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'FontAwesome'; 9 | src: url("../../font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0"); 10 | src: url("../../font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../../font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../../font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../../font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; } 13 | .fa { 14 | display: inline-block; 15 | font-family: FontAwesome; 16 | font-style: normal; 17 | font-weight: normal; 18 | line-height: 1; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; } 21 | 22 | /* makes the font 33% larger relative to the icon container */ 23 | .fa-lg { 24 | font-size: 1.33333em; 25 | line-height: 0.75em; 26 | vertical-align: -15%; } 27 | 28 | .fa-2x { 29 | font-size: 2em; } 30 | 31 | .fa-3x { 32 | font-size: 3em; } 33 | 34 | .fa-4x { 35 | font-size: 4em; } 36 | 37 | .fa-5x { 38 | font-size: 5em; } 39 | 40 | .fa-fw { 41 | width: 1.28571em; 42 | text-align: center; } 43 | 44 | .fa-ul { 45 | padding-left: 0; 46 | margin-left: 2.14286em; 47 | list-style-type: none; } 48 | .fa-ul > li { 49 | position: relative; } 50 | 51 | .fa-li { 52 | position: absolute; 53 | left: -2.14286em; 54 | width: 2.14286em; 55 | top: 0.14286em; 56 | text-align: center; } 57 | .fa-li.fa-lg { 58 | left: -1.85714em; } 59 | 60 | .fa-border { 61 | padding: .2em .25em .15em; 62 | border: solid 0.08em #eeeeee; 63 | border-radius: .1em; } 64 | 65 | .pull-right { 66 | float: right; } 67 | 68 | .pull-left { 69 | float: left; } 70 | 71 | .fa.pull-left { 72 | margin-right: .3em; } 73 | .fa.pull-right { 74 | margin-left: .3em; } 75 | 76 | .fa-spin { 77 | -webkit-animation: spin 2s infinite linear; 78 | -moz-animation: spin 2s infinite linear; 79 | -o-animation: spin 2s infinite linear; 80 | animation: spin 2s infinite linear; } 81 | 82 | @-moz-keyframes spin { 83 | 0% { 84 | -moz-transform: rotate(0deg); } 85 | 86 | 100% { 87 | -moz-transform: rotate(359deg); } } 88 | @-webkit-keyframes spin { 89 | 0% { 90 | -webkit-transform: rotate(0deg); } 91 | 92 | 100% { 93 | -webkit-transform: rotate(359deg); } } 94 | @-o-keyframes spin { 95 | 0% { 96 | -o-transform: rotate(0deg); } 97 | 98 | 100% { 99 | -o-transform: rotate(359deg); } } 100 | @keyframes spin { 101 | 0% { 102 | -webkit-transform: rotate(0deg); 103 | transform: rotate(0deg); } 104 | 105 | 100% { 106 | -webkit-transform: rotate(359deg); 107 | transform: rotate(359deg); } } 108 | .fa-rotate-90 { 109 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 110 | -webkit-transform: rotate(90deg); 111 | -moz-transform: rotate(90deg); 112 | -ms-transform: rotate(90deg); 113 | -o-transform: rotate(90deg); 114 | transform: rotate(90deg); } 115 | 116 | .fa-rotate-180 { 117 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 118 | -webkit-transform: rotate(180deg); 119 | -moz-transform: rotate(180deg); 120 | -ms-transform: rotate(180deg); 121 | -o-transform: rotate(180deg); 122 | transform: rotate(180deg); } 123 | 124 | .fa-rotate-270 { 125 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 126 | -webkit-transform: rotate(270deg); 127 | -moz-transform: rotate(270deg); 128 | -ms-transform: rotate(270deg); 129 | -o-transform: rotate(270deg); 130 | transform: rotate(270deg); } 131 | 132 | .fa-flip-horizontal { 133 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); 134 | -webkit-transform: scale(-1, 1); 135 | -moz-transform: scale(-1, 1); 136 | -ms-transform: scale(-1, 1); 137 | -o-transform: scale(-1, 1); 138 | transform: scale(-1, 1); } 139 | 140 | .fa-flip-vertical { 141 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 142 | -webkit-transform: scale(1, -1); 143 | -moz-transform: scale(1, -1); 144 | -ms-transform: scale(1, -1); 145 | -o-transform: scale(1, -1); 146 | transform: scale(1, -1); } 147 | 148 | .fa-stack { 149 | position: relative; 150 | display: inline-block; 151 | width: 2em; 152 | height: 2em; 153 | line-height: 2em; 154 | vertical-align: middle; } 155 | 156 | .fa-stack-1x, .fa-stack-2x { 157 | position: absolute; 158 | left: 0; 159 | width: 100%; 160 | text-align: center; } 161 | 162 | .fa-stack-1x { 163 | line-height: inherit; } 164 | 165 | .fa-stack-2x { 166 | font-size: 2em; } 167 | 168 | .fa-inverse { 169 | color: white; } 170 | 171 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 172 | readers do not read off random characters that represent icons */ 173 | .fa-glass:before { 174 | content: "\f000"; } 175 | 176 | .fa-music:before { 177 | content: "\f001"; } 178 | 179 | .fa-search:before { 180 | content: "\f002"; } 181 | 182 | .fa-envelope-o:before { 183 | content: "\f003"; } 184 | 185 | .fa-heart:before { 186 | content: "\f004"; } 187 | 188 | .fa-star:before { 189 | content: "\f005"; } 190 | 191 | .fa-star-o:before { 192 | content: "\f006"; } 193 | 194 | .fa-user:before { 195 | content: "\f007"; } 196 | 197 | .fa-film:before { 198 | content: "\f008"; } 199 | 200 | .fa-th-large:before { 201 | content: "\f009"; } 202 | 203 | .fa-th:before { 204 | content: "\f00a"; } 205 | 206 | .fa-th-list:before { 207 | content: "\f00b"; } 208 | 209 | .fa-check:before { 210 | content: "\f00c"; } 211 | 212 | .fa-times:before { 213 | content: "\f00d"; } 214 | 215 | .fa-search-plus:before { 216 | content: "\f00e"; } 217 | 218 | .fa-search-minus:before { 219 | content: "\f010"; } 220 | 221 | .fa-power-off:before { 222 | content: "\f011"; } 223 | 224 | .fa-signal:before { 225 | content: "\f012"; } 226 | 227 | .fa-gear:before, 228 | .fa-cog:before { 229 | content: "\f013"; } 230 | 231 | .fa-trash-o:before { 232 | content: "\f014"; } 233 | 234 | .fa-home:before { 235 | content: "\f015"; } 236 | 237 | .fa-file-o:before { 238 | content: "\f016"; } 239 | 240 | .fa-clock-o:before { 241 | content: "\f017"; } 242 | 243 | .fa-road:before { 244 | content: "\f018"; } 245 | 246 | .fa-download:before { 247 | content: "\f019"; } 248 | 249 | .fa-arrow-circle-o-down:before { 250 | content: "\f01a"; } 251 | 252 | .fa-arrow-circle-o-up:before { 253 | content: "\f01b"; } 254 | 255 | .fa-inbox:before { 256 | content: "\f01c"; } 257 | 258 | .fa-play-circle-o:before { 259 | content: "\f01d"; } 260 | 261 | .fa-rotate-right:before, 262 | .fa-repeat:before { 263 | content: "\f01e"; } 264 | 265 | .fa-refresh:before { 266 | content: "\f021"; } 267 | 268 | .fa-list-alt:before { 269 | content: "\f022"; } 270 | 271 | .fa-lock:before { 272 | content: "\f023"; } 273 | 274 | .fa-flag:before { 275 | content: "\f024"; } 276 | 277 | .fa-headphones:before { 278 | content: "\f025"; } 279 | 280 | .fa-volume-off:before { 281 | content: "\f026"; } 282 | 283 | .fa-volume-down:before { 284 | content: "\f027"; } 285 | 286 | .fa-volume-up:before { 287 | content: "\f028"; } 288 | 289 | .fa-qrcode:before { 290 | content: "\f029"; } 291 | 292 | .fa-barcode:before { 293 | content: "\f02a"; } 294 | 295 | .fa-tag:before { 296 | content: "\f02b"; } 297 | 298 | .fa-tags:before { 299 | content: "\f02c"; } 300 | 301 | .fa-book:before { 302 | content: "\f02d"; } 303 | 304 | .fa-bookmark:before { 305 | content: "\f02e"; } 306 | 307 | .fa-print:before { 308 | content: "\f02f"; } 309 | 310 | .fa-camera:before { 311 | content: "\f030"; } 312 | 313 | .fa-font:before { 314 | content: "\f031"; } 315 | 316 | .fa-bold:before { 317 | content: "\f032"; } 318 | 319 | .fa-italic:before { 320 | content: "\f033"; } 321 | 322 | .fa-text-height:before { 323 | content: "\f034"; } 324 | 325 | .fa-text-width:before { 326 | content: "\f035"; } 327 | 328 | .fa-align-left:before { 329 | content: "\f036"; } 330 | 331 | .fa-align-center:before { 332 | content: "\f037"; } 333 | 334 | .fa-align-right:before { 335 | content: "\f038"; } 336 | 337 | .fa-align-justify:before { 338 | content: "\f039"; } 339 | 340 | .fa-list:before { 341 | content: "\f03a"; } 342 | 343 | .fa-dedent:before, 344 | .fa-outdent:before { 345 | content: "\f03b"; } 346 | 347 | .fa-indent:before { 348 | content: "\f03c"; } 349 | 350 | .fa-video-camera:before { 351 | content: "\f03d"; } 352 | 353 | .fa-photo:before, 354 | .fa-image:before, 355 | .fa-picture-o:before { 356 | content: "\f03e"; } 357 | 358 | .fa-pencil:before { 359 | content: "\f040"; } 360 | 361 | .fa-map-marker:before { 362 | content: "\f041"; } 363 | 364 | .fa-adjust:before { 365 | content: "\f042"; } 366 | 367 | .fa-tint:before { 368 | content: "\f043"; } 369 | 370 | .fa-edit:before, 371 | .fa-pencil-square-o:before { 372 | content: "\f044"; } 373 | 374 | .fa-share-square-o:before { 375 | content: "\f045"; } 376 | 377 | .fa-check-square-o:before { 378 | content: "\f046"; } 379 | 380 | .fa-arrows:before { 381 | content: "\f047"; } 382 | 383 | .fa-step-backward:before { 384 | content: "\f048"; } 385 | 386 | .fa-fast-backward:before { 387 | content: "\f049"; } 388 | 389 | .fa-backward:before { 390 | content: "\f04a"; } 391 | 392 | .fa-play:before { 393 | content: "\f04b"; } 394 | 395 | .fa-pause:before { 396 | content: "\f04c"; } 397 | 398 | .fa-stop:before { 399 | content: "\f04d"; } 400 | 401 | .fa-forward:before { 402 | content: "\f04e"; } 403 | 404 | .fa-fast-forward:before { 405 | content: "\f050"; } 406 | 407 | .fa-step-forward:before { 408 | content: "\f051"; } 409 | 410 | .fa-eject:before { 411 | content: "\f052"; } 412 | 413 | .fa-chevron-left:before { 414 | content: "\f053"; } 415 | 416 | .fa-chevron-right:before { 417 | content: "\f054"; } 418 | 419 | .fa-plus-circle:before { 420 | content: "\f055"; } 421 | 422 | .fa-minus-circle:before { 423 | content: "\f056"; } 424 | 425 | .fa-times-circle:before { 426 | content: "\f057"; } 427 | 428 | .fa-check-circle:before { 429 | content: "\f058"; } 430 | 431 | .fa-question-circle:before { 432 | content: "\f059"; } 433 | 434 | .fa-info-circle:before { 435 | content: "\f05a"; } 436 | 437 | .fa-crosshairs:before { 438 | content: "\f05b"; } 439 | 440 | .fa-times-circle-o:before { 441 | content: "\f05c"; } 442 | 443 | .fa-check-circle-o:before { 444 | content: "\f05d"; } 445 | 446 | .fa-ban:before { 447 | content: "\f05e"; } 448 | 449 | .fa-arrow-left:before { 450 | content: "\f060"; } 451 | 452 | .fa-arrow-right:before { 453 | content: "\f061"; } 454 | 455 | .fa-arrow-up:before { 456 | content: "\f062"; } 457 | 458 | .fa-arrow-down:before { 459 | content: "\f063"; } 460 | 461 | .fa-mail-forward:before, 462 | .fa-share:before { 463 | content: "\f064"; } 464 | 465 | .fa-expand:before { 466 | content: "\f065"; } 467 | 468 | .fa-compress:before { 469 | content: "\f066"; } 470 | 471 | .fa-plus:before { 472 | content: "\f067"; } 473 | 474 | .fa-minus:before { 475 | content: "\f068"; } 476 | 477 | .fa-asterisk:before { 478 | content: "\f069"; } 479 | 480 | .fa-exclamation-circle:before { 481 | content: "\f06a"; } 482 | 483 | .fa-gift:before { 484 | content: "\f06b"; } 485 | 486 | .fa-leaf:before { 487 | content: "\f06c"; } 488 | 489 | .fa-fire:before { 490 | content: "\f06d"; } 491 | 492 | .fa-eye:before { 493 | content: "\f06e"; } 494 | 495 | .fa-eye-slash:before { 496 | content: "\f070"; } 497 | 498 | .fa-warning:before, 499 | .fa-exclamation-triangle:before { 500 | content: "\f071"; } 501 | 502 | .fa-plane:before { 503 | content: "\f072"; } 504 | 505 | .fa-calendar:before { 506 | content: "\f073"; } 507 | 508 | .fa-random:before { 509 | content: "\f074"; } 510 | 511 | .fa-comment:before { 512 | content: "\f075"; } 513 | 514 | .fa-magnet:before { 515 | content: "\f076"; } 516 | 517 | .fa-chevron-up:before { 518 | content: "\f077"; } 519 | 520 | .fa-chevron-down:before { 521 | content: "\f078"; } 522 | 523 | .fa-retweet:before { 524 | content: "\f079"; } 525 | 526 | .fa-shopping-cart:before { 527 | content: "\f07a"; } 528 | 529 | .fa-folder:before { 530 | content: "\f07b"; } 531 | 532 | .fa-folder-open:before { 533 | content: "\f07c"; } 534 | 535 | .fa-arrows-v:before { 536 | content: "\f07d"; } 537 | 538 | .fa-arrows-h:before { 539 | content: "\f07e"; } 540 | 541 | .fa-bar-chart-o:before { 542 | content: "\f080"; } 543 | 544 | .fa-twitter-square:before { 545 | content: "\f081"; } 546 | 547 | .fa-facebook-square:before { 548 | content: "\f082"; } 549 | 550 | .fa-camera-retro:before { 551 | content: "\f083"; } 552 | 553 | .fa-key:before { 554 | content: "\f084"; } 555 | 556 | .fa-gears:before, 557 | .fa-cogs:before { 558 | content: "\f085"; } 559 | 560 | .fa-comments:before { 561 | content: "\f086"; } 562 | 563 | .fa-thumbs-o-up:before { 564 | content: "\f087"; } 565 | 566 | .fa-thumbs-o-down:before { 567 | content: "\f088"; } 568 | 569 | .fa-star-half:before { 570 | content: "\f089"; } 571 | 572 | .fa-heart-o:before { 573 | content: "\f08a"; } 574 | 575 | .fa-sign-out:before { 576 | content: "\f08b"; } 577 | 578 | .fa-linkedin-square:before { 579 | content: "\f08c"; } 580 | 581 | .fa-thumb-tack:before { 582 | content: "\f08d"; } 583 | 584 | .fa-external-link:before { 585 | content: "\f08e"; } 586 | 587 | .fa-sign-in:before { 588 | content: "\f090"; } 589 | 590 | .fa-trophy:before { 591 | content: "\f091"; } 592 | 593 | .fa-github-square:before { 594 | content: "\f092"; } 595 | 596 | .fa-upload:before { 597 | content: "\f093"; } 598 | 599 | .fa-lemon-o:before { 600 | content: "\f094"; } 601 | 602 | .fa-phone:before { 603 | content: "\f095"; } 604 | 605 | .fa-square-o:before { 606 | content: "\f096"; } 607 | 608 | .fa-bookmark-o:before { 609 | content: "\f097"; } 610 | 611 | .fa-phone-square:before { 612 | content: "\f098"; } 613 | 614 | .fa-twitter:before { 615 | content: "\f099"; } 616 | 617 | .fa-facebook:before { 618 | content: "\f09a"; } 619 | 620 | .fa-github:before { 621 | content: "\f09b"; } 622 | 623 | .fa-unlock:before { 624 | content: "\f09c"; } 625 | 626 | .fa-credit-card:before { 627 | content: "\f09d"; } 628 | 629 | .fa-rss:before { 630 | content: "\f09e"; } 631 | 632 | .fa-hdd-o:before { 633 | content: "\f0a0"; } 634 | 635 | .fa-bullhorn:before { 636 | content: "\f0a1"; } 637 | 638 | .fa-bell:before { 639 | content: "\f0f3"; } 640 | 641 | .fa-certificate:before { 642 | content: "\f0a3"; } 643 | 644 | .fa-hand-o-right:before { 645 | content: "\f0a4"; } 646 | 647 | .fa-hand-o-left:before { 648 | content: "\f0a5"; } 649 | 650 | .fa-hand-o-up:before { 651 | content: "\f0a6"; } 652 | 653 | .fa-hand-o-down:before { 654 | content: "\f0a7"; } 655 | 656 | .fa-arrow-circle-left:before { 657 | content: "\f0a8"; } 658 | 659 | .fa-arrow-circle-right:before { 660 | content: "\f0a9"; } 661 | 662 | .fa-arrow-circle-up:before { 663 | content: "\f0aa"; } 664 | 665 | .fa-arrow-circle-down:before { 666 | content: "\f0ab"; } 667 | 668 | .fa-globe:before { 669 | content: "\f0ac"; } 670 | 671 | .fa-wrench:before { 672 | content: "\f0ad"; } 673 | 674 | .fa-tasks:before { 675 | content: "\f0ae"; } 676 | 677 | .fa-filter:before { 678 | content: "\f0b0"; } 679 | 680 | .fa-briefcase:before { 681 | content: "\f0b1"; } 682 | 683 | .fa-arrows-alt:before { 684 | content: "\f0b2"; } 685 | 686 | .fa-group:before, 687 | .fa-users:before { 688 | content: "\f0c0"; } 689 | 690 | .fa-chain:before, 691 | .fa-link:before { 692 | content: "\f0c1"; } 693 | 694 | .fa-cloud:before { 695 | content: "\f0c2"; } 696 | 697 | .fa-flask:before { 698 | content: "\f0c3"; } 699 | 700 | .fa-cut:before, 701 | .fa-scissors:before { 702 | content: "\f0c4"; } 703 | 704 | .fa-copy:before, 705 | .fa-files-o:before { 706 | content: "\f0c5"; } 707 | 708 | .fa-paperclip:before { 709 | content: "\f0c6"; } 710 | 711 | .fa-save:before, 712 | .fa-floppy-o:before { 713 | content: "\f0c7"; } 714 | 715 | .fa-square:before { 716 | content: "\f0c8"; } 717 | 718 | .fa-navicon:before, 719 | .fa-reorder:before, 720 | .fa-bars:before { 721 | content: "\f0c9"; } 722 | 723 | .fa-list-ul:before { 724 | content: "\f0ca"; } 725 | 726 | .fa-list-ol:before { 727 | content: "\f0cb"; } 728 | 729 | .fa-strikethrough:before { 730 | content: "\f0cc"; } 731 | 732 | .fa-underline:before { 733 | content: "\f0cd"; } 734 | 735 | .fa-table:before { 736 | content: "\f0ce"; } 737 | 738 | .fa-magic:before { 739 | content: "\f0d0"; } 740 | 741 | .fa-truck:before { 742 | content: "\f0d1"; } 743 | 744 | .fa-pinterest:before { 745 | content: "\f0d2"; } 746 | 747 | .fa-pinterest-square:before { 748 | content: "\f0d3"; } 749 | 750 | .fa-google-plus-square:before { 751 | content: "\f0d4"; } 752 | 753 | .fa-google-plus:before { 754 | content: "\f0d5"; } 755 | 756 | .fa-money:before { 757 | content: "\f0d6"; } 758 | 759 | .fa-caret-down:before { 760 | content: "\f0d7"; } 761 | 762 | .fa-caret-up:before { 763 | content: "\f0d8"; } 764 | 765 | .fa-caret-left:before { 766 | content: "\f0d9"; } 767 | 768 | .fa-caret-right:before { 769 | content: "\f0da"; } 770 | 771 | .fa-columns:before { 772 | content: "\f0db"; } 773 | 774 | .fa-unsorted:before, 775 | .fa-sort:before { 776 | content: "\f0dc"; } 777 | 778 | .fa-sort-down:before, 779 | .fa-sort-desc:before { 780 | content: "\f0dd"; } 781 | 782 | .fa-sort-up:before, 783 | .fa-sort-asc:before { 784 | content: "\f0de"; } 785 | 786 | .fa-envelope:before { 787 | content: "\f0e0"; } 788 | 789 | .fa-linkedin:before { 790 | content: "\f0e1"; } 791 | 792 | .fa-rotate-left:before, 793 | .fa-undo:before { 794 | content: "\f0e2"; } 795 | 796 | .fa-legal:before, 797 | .fa-gavel:before { 798 | content: "\f0e3"; } 799 | 800 | .fa-dashboard:before, 801 | .fa-tachometer:before { 802 | content: "\f0e4"; } 803 | 804 | .fa-comment-o:before { 805 | content: "\f0e5"; } 806 | 807 | .fa-comments-o:before { 808 | content: "\f0e6"; } 809 | 810 | .fa-flash:before, 811 | .fa-bolt:before { 812 | content: "\f0e7"; } 813 | 814 | .fa-sitemap:before { 815 | content: "\f0e8"; } 816 | 817 | .fa-umbrella:before { 818 | content: "\f0e9"; } 819 | 820 | .fa-paste:before, 821 | .fa-clipboard:before { 822 | content: "\f0ea"; } 823 | 824 | .fa-lightbulb-o:before { 825 | content: "\f0eb"; } 826 | 827 | .fa-exchange:before { 828 | content: "\f0ec"; } 829 | 830 | .fa-cloud-download:before { 831 | content: "\f0ed"; } 832 | 833 | .fa-cloud-upload:before { 834 | content: "\f0ee"; } 835 | 836 | .fa-user-md:before { 837 | content: "\f0f0"; } 838 | 839 | .fa-stethoscope:before { 840 | content: "\f0f1"; } 841 | 842 | .fa-suitcase:before { 843 | content: "\f0f2"; } 844 | 845 | .fa-bell-o:before { 846 | content: "\f0a2"; } 847 | 848 | .fa-coffee:before { 849 | content: "\f0f4"; } 850 | 851 | .fa-cutlery:before { 852 | content: "\f0f5"; } 853 | 854 | .fa-file-text-o:before { 855 | content: "\f0f6"; } 856 | 857 | .fa-building-o:before { 858 | content: "\f0f7"; } 859 | 860 | .fa-hospital-o:before { 861 | content: "\f0f8"; } 862 | 863 | .fa-ambulance:before { 864 | content: "\f0f9"; } 865 | 866 | .fa-medkit:before { 867 | content: "\f0fa"; } 868 | 869 | .fa-fighter-jet:before { 870 | content: "\f0fb"; } 871 | 872 | .fa-beer:before { 873 | content: "\f0fc"; } 874 | 875 | .fa-h-square:before { 876 | content: "\f0fd"; } 877 | 878 | .fa-plus-square:before { 879 | content: "\f0fe"; } 880 | 881 | .fa-angle-double-left:before { 882 | content: "\f100"; } 883 | 884 | .fa-angle-double-right:before { 885 | content: "\f101"; } 886 | 887 | .fa-angle-double-up:before { 888 | content: "\f102"; } 889 | 890 | .fa-angle-double-down:before { 891 | content: "\f103"; } 892 | 893 | .fa-angle-left:before { 894 | content: "\f104"; } 895 | 896 | .fa-angle-right:before { 897 | content: "\f105"; } 898 | 899 | .fa-angle-up:before { 900 | content: "\f106"; } 901 | 902 | .fa-angle-down:before { 903 | content: "\f107"; } 904 | 905 | .fa-desktop:before { 906 | content: "\f108"; } 907 | 908 | .fa-laptop:before { 909 | content: "\f109"; } 910 | 911 | .fa-tablet:before { 912 | content: "\f10a"; } 913 | 914 | .fa-mobile-phone:before, 915 | .fa-mobile:before { 916 | content: "\f10b"; } 917 | 918 | .fa-circle-o:before { 919 | content: "\f10c"; } 920 | 921 | .fa-quote-left:before { 922 | content: "\f10d"; } 923 | 924 | .fa-quote-right:before { 925 | content: "\f10e"; } 926 | 927 | .fa-spinner:before { 928 | content: "\f110"; } 929 | 930 | .fa-circle:before { 931 | content: "\f111"; } 932 | 933 | .fa-mail-reply:before, 934 | .fa-reply:before { 935 | content: "\f112"; } 936 | 937 | .fa-github-alt:before { 938 | content: "\f113"; } 939 | 940 | .fa-folder-o:before { 941 | content: "\f114"; } 942 | 943 | .fa-folder-open-o:before { 944 | content: "\f115"; } 945 | 946 | .fa-smile-o:before { 947 | content: "\f118"; } 948 | 949 | .fa-frown-o:before { 950 | content: "\f119"; } 951 | 952 | .fa-meh-o:before { 953 | content: "\f11a"; } 954 | 955 | .fa-gamepad:before { 956 | content: "\f11b"; } 957 | 958 | .fa-keyboard-o:before { 959 | content: "\f11c"; } 960 | 961 | .fa-flag-o:before { 962 | content: "\f11d"; } 963 | 964 | .fa-flag-checkered:before { 965 | content: "\f11e"; } 966 | 967 | .fa-terminal:before { 968 | content: "\f120"; } 969 | 970 | .fa-code:before { 971 | content: "\f121"; } 972 | 973 | .fa-mail-reply-all:before, 974 | .fa-reply-all:before { 975 | content: "\f122"; } 976 | 977 | .fa-star-half-empty:before, 978 | .fa-star-half-full:before, 979 | .fa-star-half-o:before { 980 | content: "\f123"; } 981 | 982 | .fa-location-arrow:before { 983 | content: "\f124"; } 984 | 985 | .fa-crop:before { 986 | content: "\f125"; } 987 | 988 | .fa-code-fork:before { 989 | content: "\f126"; } 990 | 991 | .fa-unlink:before, 992 | .fa-chain-broken:before { 993 | content: "\f127"; } 994 | 995 | .fa-question:before { 996 | content: "\f128"; } 997 | 998 | .fa-info:before { 999 | content: "\f129"; } 1000 | 1001 | .fa-exclamation:before { 1002 | content: "\f12a"; } 1003 | 1004 | .fa-superscript:before { 1005 | content: "\f12b"; } 1006 | 1007 | .fa-subscript:before { 1008 | content: "\f12c"; } 1009 | 1010 | .fa-eraser:before { 1011 | content: "\f12d"; } 1012 | 1013 | .fa-puzzle-piece:before { 1014 | content: "\f12e"; } 1015 | 1016 | .fa-microphone:before { 1017 | content: "\f130"; } 1018 | 1019 | .fa-microphone-slash:before { 1020 | content: "\f131"; } 1021 | 1022 | .fa-shield:before { 1023 | content: "\f132"; } 1024 | 1025 | .fa-calendar-o:before { 1026 | content: "\f133"; } 1027 | 1028 | .fa-fire-extinguisher:before { 1029 | content: "\f134"; } 1030 | 1031 | .fa-rocket:before { 1032 | content: "\f135"; } 1033 | 1034 | .fa-maxcdn:before { 1035 | content: "\f136"; } 1036 | 1037 | .fa-chevron-circle-left:before { 1038 | content: "\f137"; } 1039 | 1040 | .fa-chevron-circle-right:before { 1041 | content: "\f138"; } 1042 | 1043 | .fa-chevron-circle-up:before { 1044 | content: "\f139"; } 1045 | 1046 | .fa-chevron-circle-down:before { 1047 | content: "\f13a"; } 1048 | 1049 | .fa-html5:before { 1050 | content: "\f13b"; } 1051 | 1052 | .fa-css3:before { 1053 | content: "\f13c"; } 1054 | 1055 | .fa-anchor:before { 1056 | content: "\f13d"; } 1057 | 1058 | .fa-unlock-alt:before { 1059 | content: "\f13e"; } 1060 | 1061 | .fa-bullseye:before { 1062 | content: "\f140"; } 1063 | 1064 | .fa-ellipsis-h:before { 1065 | content: "\f141"; } 1066 | 1067 | .fa-ellipsis-v:before { 1068 | content: "\f142"; } 1069 | 1070 | .fa-rss-square:before { 1071 | content: "\f143"; } 1072 | 1073 | .fa-play-circle:before { 1074 | content: "\f144"; } 1075 | 1076 | .fa-ticket:before { 1077 | content: "\f145"; } 1078 | 1079 | .fa-minus-square:before { 1080 | content: "\f146"; } 1081 | 1082 | .fa-minus-square-o:before { 1083 | content: "\f147"; } 1084 | 1085 | .fa-level-up:before { 1086 | content: "\f148"; } 1087 | 1088 | .fa-level-down:before { 1089 | content: "\f149"; } 1090 | 1091 | .fa-check-square:before { 1092 | content: "\f14a"; } 1093 | 1094 | .fa-pencil-square:before { 1095 | content: "\f14b"; } 1096 | 1097 | .fa-external-link-square:before { 1098 | content: "\f14c"; } 1099 | 1100 | .fa-share-square:before { 1101 | content: "\f14d"; } 1102 | 1103 | .fa-compass:before { 1104 | content: "\f14e"; } 1105 | 1106 | .fa-toggle-down:before, 1107 | .fa-caret-square-o-down:before { 1108 | content: "\f150"; } 1109 | 1110 | .fa-toggle-up:before, 1111 | .fa-caret-square-o-up:before { 1112 | content: "\f151"; } 1113 | 1114 | .fa-toggle-right:before, 1115 | .fa-caret-square-o-right:before { 1116 | content: "\f152"; } 1117 | 1118 | .fa-euro:before, 1119 | .fa-eur:before { 1120 | content: "\f153"; } 1121 | 1122 | .fa-gbp:before { 1123 | content: "\f154"; } 1124 | 1125 | .fa-dollar:before, 1126 | .fa-usd:before { 1127 | content: "\f155"; } 1128 | 1129 | .fa-rupee:before, 1130 | .fa-inr:before { 1131 | content: "\f156"; } 1132 | 1133 | .fa-cny:before, 1134 | .fa-rmb:before, 1135 | .fa-yen:before, 1136 | .fa-jpy:before { 1137 | content: "\f157"; } 1138 | 1139 | .fa-ruble:before, 1140 | .fa-rouble:before, 1141 | .fa-rub:before { 1142 | content: "\f158"; } 1143 | 1144 | .fa-won:before, 1145 | .fa-krw:before { 1146 | content: "\f159"; } 1147 | 1148 | .fa-bitcoin:before, 1149 | .fa-btc:before { 1150 | content: "\f15a"; } 1151 | 1152 | .fa-file:before { 1153 | content: "\f15b"; } 1154 | 1155 | .fa-file-text:before { 1156 | content: "\f15c"; } 1157 | 1158 | .fa-sort-alpha-asc:before { 1159 | content: "\f15d"; } 1160 | 1161 | .fa-sort-alpha-desc:before { 1162 | content: "\f15e"; } 1163 | 1164 | .fa-sort-amount-asc:before { 1165 | content: "\f160"; } 1166 | 1167 | .fa-sort-amount-desc:before { 1168 | content: "\f161"; } 1169 | 1170 | .fa-sort-numeric-asc:before { 1171 | content: "\f162"; } 1172 | 1173 | .fa-sort-numeric-desc:before { 1174 | content: "\f163"; } 1175 | 1176 | .fa-thumbs-up:before { 1177 | content: "\f164"; } 1178 | 1179 | .fa-thumbs-down:before { 1180 | content: "\f165"; } 1181 | 1182 | .fa-youtube-square:before { 1183 | content: "\f166"; } 1184 | 1185 | .fa-youtube:before { 1186 | content: "\f167"; } 1187 | 1188 | .fa-xing:before { 1189 | content: "\f168"; } 1190 | 1191 | .fa-xing-square:before { 1192 | content: "\f169"; } 1193 | 1194 | .fa-youtube-play:before { 1195 | content: "\f16a"; } 1196 | 1197 | .fa-dropbox:before { 1198 | content: "\f16b"; } 1199 | 1200 | .fa-stack-overflow:before { 1201 | content: "\f16c"; } 1202 | 1203 | .fa-instagram:before { 1204 | content: "\f16d"; } 1205 | 1206 | .fa-flickr:before { 1207 | content: "\f16e"; } 1208 | 1209 | .fa-adn:before { 1210 | content: "\f170"; } 1211 | 1212 | .fa-bitbucket:before { 1213 | content: "\f171"; } 1214 | 1215 | .fa-bitbucket-square:before { 1216 | content: "\f172"; } 1217 | 1218 | .fa-tumblr:before { 1219 | content: "\f173"; } 1220 | 1221 | .fa-tumblr-square:before { 1222 | content: "\f174"; } 1223 | 1224 | .fa-long-arrow-down:before { 1225 | content: "\f175"; } 1226 | 1227 | .fa-long-arrow-up:before { 1228 | content: "\f176"; } 1229 | 1230 | .fa-long-arrow-left:before { 1231 | content: "\f177"; } 1232 | 1233 | .fa-long-arrow-right:before { 1234 | content: "\f178"; } 1235 | 1236 | .fa-apple:before { 1237 | content: "\f179"; } 1238 | 1239 | .fa-windows:before { 1240 | content: "\f17a"; } 1241 | 1242 | .fa-android:before { 1243 | content: "\f17b"; } 1244 | 1245 | .fa-linux:before { 1246 | content: "\f17c"; } 1247 | 1248 | .fa-dribbble:before { 1249 | content: "\f17d"; } 1250 | 1251 | .fa-skype:before { 1252 | content: "\f17e"; } 1253 | 1254 | .fa-foursquare:before { 1255 | content: "\f180"; } 1256 | 1257 | .fa-trello:before { 1258 | content: "\f181"; } 1259 | 1260 | .fa-female:before { 1261 | content: "\f182"; } 1262 | 1263 | .fa-male:before { 1264 | content: "\f183"; } 1265 | 1266 | .fa-gittip:before { 1267 | content: "\f184"; } 1268 | 1269 | .fa-sun-o:before { 1270 | content: "\f185"; } 1271 | 1272 | .fa-moon-o:before { 1273 | content: "\f186"; } 1274 | 1275 | .fa-archive:before { 1276 | content: "\f187"; } 1277 | 1278 | .fa-bug:before { 1279 | content: "\f188"; } 1280 | 1281 | .fa-vk:before { 1282 | content: "\f189"; } 1283 | 1284 | .fa-weibo:before { 1285 | content: "\f18a"; } 1286 | 1287 | .fa-renren:before { 1288 | content: "\f18b"; } 1289 | 1290 | .fa-pagelines:before { 1291 | content: "\f18c"; } 1292 | 1293 | .fa-stack-exchange:before { 1294 | content: "\f18d"; } 1295 | 1296 | .fa-arrow-circle-o-right:before { 1297 | content: "\f18e"; } 1298 | 1299 | .fa-arrow-circle-o-left:before { 1300 | content: "\f190"; } 1301 | 1302 | .fa-toggle-left:before, 1303 | .fa-caret-square-o-left:before { 1304 | content: "\f191"; } 1305 | 1306 | .fa-dot-circle-o:before { 1307 | content: "\f192"; } 1308 | 1309 | .fa-wheelchair:before { 1310 | content: "\f193"; } 1311 | 1312 | .fa-vimeo-square:before { 1313 | content: "\f194"; } 1314 | 1315 | .fa-turkish-lira:before, 1316 | .fa-try:before { 1317 | content: "\f195"; } 1318 | 1319 | .fa-plus-square-o:before { 1320 | content: "\f196"; } 1321 | 1322 | .fa-space-shuttle:before { 1323 | content: "\f197"; } 1324 | 1325 | .fa-slack:before { 1326 | content: "\f198"; } 1327 | 1328 | .fa-envelope-square:before { 1329 | content: "\f199"; } 1330 | 1331 | .fa-wordpress:before { 1332 | content: "\f19a"; } 1333 | 1334 | .fa-openid:before { 1335 | content: "\f19b"; } 1336 | 1337 | .fa-institution:before, 1338 | .fa-bank:before, 1339 | .fa-university:before { 1340 | content: "\f19c"; } 1341 | 1342 | .fa-mortar-board:before, 1343 | .fa-graduation-cap:before { 1344 | content: "\f19d"; } 1345 | 1346 | .fa-yahoo:before { 1347 | content: "\f19e"; } 1348 | 1349 | .fa-google:before { 1350 | content: "\f1a0"; } 1351 | 1352 | .fa-reddit:before { 1353 | content: "\f1a1"; } 1354 | 1355 | .fa-reddit-square:before { 1356 | content: "\f1a2"; } 1357 | 1358 | .fa-stumbleupon-circle:before { 1359 | content: "\f1a3"; } 1360 | 1361 | .fa-stumbleupon:before { 1362 | content: "\f1a4"; } 1363 | 1364 | .fa-delicious:before { 1365 | content: "\f1a5"; } 1366 | 1367 | .fa-digg:before { 1368 | content: "\f1a6"; } 1369 | 1370 | .fa-pied-piper-square:before, 1371 | .fa-pied-piper:before { 1372 | content: "\f1a7"; } 1373 | 1374 | .fa-pied-piper-alt:before { 1375 | content: "\f1a8"; } 1376 | 1377 | .fa-drupal:before { 1378 | content: "\f1a9"; } 1379 | 1380 | .fa-joomla:before { 1381 | content: "\f1aa"; } 1382 | 1383 | .fa-language:before { 1384 | content: "\f1ab"; } 1385 | 1386 | .fa-fax:before { 1387 | content: "\f1ac"; } 1388 | 1389 | .fa-building:before { 1390 | content: "\f1ad"; } 1391 | 1392 | .fa-child:before { 1393 | content: "\f1ae"; } 1394 | 1395 | .fa-paw:before { 1396 | content: "\f1b0"; } 1397 | 1398 | .fa-spoon:before { 1399 | content: "\f1b1"; } 1400 | 1401 | .fa-cube:before { 1402 | content: "\f1b2"; } 1403 | 1404 | .fa-cubes:before { 1405 | content: "\f1b3"; } 1406 | 1407 | .fa-behance:before { 1408 | content: "\f1b4"; } 1409 | 1410 | .fa-behance-square:before { 1411 | content: "\f1b5"; } 1412 | 1413 | .fa-steam:before { 1414 | content: "\f1b6"; } 1415 | 1416 | .fa-steam-square:before { 1417 | content: "\f1b7"; } 1418 | 1419 | .fa-recycle:before { 1420 | content: "\f1b8"; } 1421 | 1422 | .fa-automobile:before, 1423 | .fa-car:before { 1424 | content: "\f1b9"; } 1425 | 1426 | .fa-cab:before, 1427 | .fa-taxi:before { 1428 | content: "\f1ba"; } 1429 | 1430 | .fa-tree:before { 1431 | content: "\f1bb"; } 1432 | 1433 | .fa-spotify:before { 1434 | content: "\f1bc"; } 1435 | 1436 | .fa-deviantart:before { 1437 | content: "\f1bd"; } 1438 | 1439 | .fa-soundcloud:before { 1440 | content: "\f1be"; } 1441 | 1442 | .fa-database:before { 1443 | content: "\f1c0"; } 1444 | 1445 | .fa-file-pdf-o:before { 1446 | content: "\f1c1"; } 1447 | 1448 | .fa-file-word-o:before { 1449 | content: "\f1c2"; } 1450 | 1451 | .fa-file-excel-o:before { 1452 | content: "\f1c3"; } 1453 | 1454 | .fa-file-powerpoint-o:before { 1455 | content: "\f1c4"; } 1456 | 1457 | .fa-file-photo-o:before, 1458 | .fa-file-picture-o:before, 1459 | .fa-file-image-o:before { 1460 | content: "\f1c5"; } 1461 | 1462 | .fa-file-zip-o:before, 1463 | .fa-file-archive-o:before { 1464 | content: "\f1c6"; } 1465 | 1466 | .fa-file-sound-o:before, 1467 | .fa-file-audio-o:before { 1468 | content: "\f1c7"; } 1469 | 1470 | .fa-file-movie-o:before, 1471 | .fa-file-video-o:before { 1472 | content: "\f1c8"; } 1473 | 1474 | .fa-file-code-o:before { 1475 | content: "\f1c9"; } 1476 | 1477 | .fa-vine:before { 1478 | content: "\f1ca"; } 1479 | 1480 | .fa-codepen:before { 1481 | content: "\f1cb"; } 1482 | 1483 | .fa-jsfiddle:before { 1484 | content: "\f1cc"; } 1485 | 1486 | .fa-life-bouy:before, 1487 | .fa-life-saver:before, 1488 | .fa-support:before, 1489 | .fa-life-ring:before { 1490 | content: "\f1cd"; } 1491 | 1492 | .fa-circle-o-notch:before { 1493 | content: "\f1ce"; } 1494 | 1495 | .fa-ra:before, 1496 | .fa-rebel:before { 1497 | content: "\f1d0"; } 1498 | 1499 | .fa-ge:before, 1500 | .fa-empire:before { 1501 | content: "\f1d1"; } 1502 | 1503 | .fa-git-square:before { 1504 | content: "\f1d2"; } 1505 | 1506 | .fa-git:before { 1507 | content: "\f1d3"; } 1508 | 1509 | .fa-hacker-news:before { 1510 | content: "\f1d4"; } 1511 | 1512 | .fa-tencent-weibo:before { 1513 | content: "\f1d5"; } 1514 | 1515 | .fa-qq:before { 1516 | content: "\f1d6"; } 1517 | 1518 | .fa-wechat:before, 1519 | .fa-weixin:before { 1520 | content: "\f1d7"; } 1521 | 1522 | .fa-send:before, 1523 | .fa-paper-plane:before { 1524 | content: "\f1d8"; } 1525 | 1526 | .fa-send-o:before, 1527 | .fa-paper-plane-o:before { 1528 | content: "\f1d9"; } 1529 | 1530 | .fa-history:before { 1531 | content: "\f1da"; } 1532 | 1533 | .fa-circle-thin:before { 1534 | content: "\f1db"; } 1535 | 1536 | .fa-header:before { 1537 | content: "\f1dc"; } 1538 | 1539 | .fa-paragraph:before { 1540 | content: "\f1dd"; } 1541 | 1542 | .fa-sliders:before { 1543 | content: "\f1de"; } 1544 | 1545 | .fa-share-alt:before { 1546 | content: "\f1e0"; } 1547 | 1548 | .fa-share-alt-square:before { 1549 | content: "\f1e1"; } 1550 | 1551 | .fa-bomb:before { 1552 | content: "\f1e2"; } 1553 | 1554 | h1 { 1555 | margin: 0; } 1556 | 1557 | .wrapper { 1558 | display: flex; 1559 | flex-flow: row wrap; } 1560 | 1561 | /* We tell all items to be 100% width */ 1562 | .content { 1563 | flex: 2 100%; } 1564 | 1565 | .menu { 1566 | flex: 1 20%; } 1567 | 1568 | /* Medium screens */ 1569 | @media all and (min-width: 600px) { 1570 | /* We tell both sidebars to share a row */ } 1571 | /* Large screens */ 1572 | @media all and (min-width: 800px) { 1573 | /* We invert order of first sidebar and content 1574 | * And tell the content element to take twice as much width as the other two sidebars 1575 | */ 1576 | .content { 1577 | flex: 2 0px; } 1578 | 1579 | .menu-left { 1580 | order: 1; } 1581 | 1582 | .content { 1583 | order: 2; } 1584 | 1585 | .menu-right { 1586 | order: 3; } } 1587 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MQTTlens 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by sandro on 11.08.14. 3 | */ 4 | /** 5 | * Listens for the app launching then creates the window 6 | * 7 | * @see http://developer.chrome.com/apps/app.runtime.html 8 | * @see http://developer.chrome.com/apps/app.window.html 9 | */ 10 | chrome.app.runtime.onLaunched.addListener(function () { 11 | // Center window on screen. 12 | var screenWidth = screen.availWidth; 13 | var screenHeight = screen.availHeight; 14 | // TODO sandro-k load last saved configuration from storage 15 | var width = 1200; 16 | var height = 800; 17 | 18 | chrome.app.window.create('build.html', { 19 | 20 | // center the app 21 | bounds: { 22 | width: width, 23 | height: height, 24 | left: Math.round((screenWidth - width) / 2), 25 | top: Math.round((screenHeight - height) / 2) 26 | } 27 | }); 28 | }); 29 | 30 | document.addEventListener('readystatechange', function (e) { 31 | 32 | }, false); 33 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "MQTTLens", 4 | "version": "0.0.13", 5 | "minimum_chrome_version": "36", 6 | "icons": { 7 | "16": "assets/icon_16.png", 8 | "128": "assets/icon_128.png" 9 | }, 10 | "app": { 11 | "background": { 12 | "scripts": ["main.js"] 13 | } 14 | }, 15 | "sockets": { 16 | "udp": { 17 | "bind": "*", 18 | "send": "*" 19 | }, 20 | "tcp": { 21 | "connect": "*" 22 | }, 23 | "tcpServer": { 24 | "listen": "*" 25 | } 26 | }, 27 | "permissions": [ 28 | "storage", 29 | "*://*/*", 30 | ""] 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MQTTLensApp", 3 | "version": "0.0.13", 4 | "description": "A MQTT debugging app for Chrome", 5 | "author": "Sandro Kock", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sandro-k/MQTTLensChromeApp.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/sandro-k/MQTTLensChromeApp/issues" 12 | }, 13 | "license": { 14 | "type": "MIT", 15 | "url": "https://github.com/sandro-k/MQTTLensChromeApp/blob/master/LICENSE" 16 | }, 17 | "devDependencies": { 18 | "grunt": "~0.4.5", 19 | "grunt-contrib-clean": "^0.6.0", 20 | "grunt-contrib-connect": "^0.9.0", 21 | "grunt-contrib-copy": "^0.5.0", 22 | "grunt-contrib-jshint": "~0.10.0", 23 | "grunt-contrib-nodeunit": "~0.3.3", 24 | "grunt-contrib-sass": "^0.7.3", 25 | "grunt-contrib-uglify": "~0.4.0", 26 | "grunt-contrib-watch": "^0.6.1", 27 | "grunt-mkdir": "^0.1.2", 28 | "grunt-vulcanize": "^0.6.4" 29 | }, 30 | "dependencies": { 31 | 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/mqttLensChromeApp.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,IAAK;EACH,QAAQ,EAAE,MAAM;;AAElB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,MAAM", 4 | "sources": ["mqttLensChromeApp.scss"], 5 | "names": [], 6 | "file": "mqttLensChromeApp.css" 7 | } 8 | -------------------------------------------------------------------------------- /styles/mqttLensChromeApp.scss: -------------------------------------------------------------------------------- 1 | html { 2 | overflow: scroll; 3 | } 4 | body { 5 | background: #e5e5e5; 6 | margin: 0; 7 | overflow-y: scroll; 8 | } 9 | 10 | html /deep/ body { 11 | //font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 12 | } --------------------------------------------------------------------------------