Release h5ai v0.27.0.

Added checkboxes selection without mouse option.

.editorconfig

@@ -0,0 +1,34 @@
+# editorconfig.org
+
+root = true
+
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+
+[.travis.yml]
+indent_style = space
+indent_size = 2
+
+
+[*.md]
+trim_trailing_whitespace = false
+
+
+[*.jade]
+trim_trailing_whitespace = false
+
+
+[*.svg]
+insert_final_newline = false

.gitignore

@@ -1,6 +1,4 @@
-
 build
 local
-*.sublime-*
-
+node_modules
 test

.jscs.json

@@ -0,0 +1,2 @@
+{
+}

CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
-**h5ai** uses [semantic versioning](http://semver.org/).
+
+
+## v0.27.0 - *2015-04-06*
+
+* new layout
+* adds editorconfig
+* drops support for IE9 (gets fallback)
+* updates sidebar settings
+* adds info sidebar
+* adds opt-out for click'n'drag selection
+* adds package name option for single selections
+* adds initial support for Peer5
+* adds option to down-sample images for preview
+* adds option for natural sorting in tree sidebar
+* fixes problems with files/folders named `0`
+* changes font from `Ubuntu` to `Roboto` (smaller footprint, clearer for small sizes)
+* switches back to Google Fonts
+* improves PDF thumbnail quality
+* improves drag-select
+* improves image preview
+* prevents listing `_h5ai` folder and subfolders
+* updates build process, now uses [mkr](http://larsjung.de/mkr/) and [fQuery](http://larsjung.de/fquery/)
+* updates `jQuery` to 2.1.3
+* updates `jQuery.qrcode` to 0.11.0
+* updates `Lo-Dash` to 3.6.0
+* updates `Modernizr` to 2.8.3
+* updates `modulejs` to 1.4.0
+* updates `Moment.js` to 2.9.0
+* updates `Prism` to 2015-04-05
+* removes deprecated Google Analytics code
+* removes `jQuery.fracs`
+* removes `jQuery.scrollpanel`
+* removes `jQuery.mousewheel`
+* language updates and additions (`af`, `es`, `ja`, `ko`, `ru`, `zh-cn`)
+
+
+## v0.26.1 - *2014-08-17*
+
+* fixes links
+
+
+## v0.26.0 - *2014-08-16*
+
+* removes True Type fonts
+* outsources themes to [h5ai-themes](https://github.com/lrsjng/h5ai-themes)
+* adds filesize fallback for large files and 32bit PHP
+* fixes server detection
+* adds config file tests to info page
+* removes JSON shim
+* adds caching of command checks
+* updates `jQuery.mousewheel` to 3.1.12
+* updates `jQuery.qrcode` to 0.8.0
+* replaces `markdown` with [`marked`](https://github.com/chjj/marked) 0.3.2
+* updates `modulejs` to 0.4.5
+* updates `Moment.js` to 2.8.1
+* replaces `underscore` with [`Lo-Dash`](https://github.com/lodash/lodash) 2.4.1
+* replaces `SyntaxHighlighter` with [`Prism`](http://prismjs.com) 2014-08-04
+
+
+## v0.25.2 - *2014-07-01*
+
+* adds optional info page protection
+* fixes `short_open_tag` issues for PHP < 5.4.0
+* fixes default folder download (`alwaysVisible` option)
+* minor fixes
+
+
+## v0.25.1 - *2014-06-25*
+
+* fixes broken paths for filenames containing '+' characters
+* fixes Google Universal Analytics
+* fixes file type check
 
 
 ## v0.25.0 - *2014-06-22*
@@ -22,13 +93,13 @@
 * fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287))
 * replaces PHP backtick operator with `exec`
 * removes server side file manipulation extensions `dropbox`, `delete` and `rename`
-* updates H5BP to 4.3.0
-* updates jQuery to 2.1.1
-* updates json2.js to 2014-02-04
-* updates markdown-js to 0.5.0
-* updates Modernizr to 2.8.2
-* updates Moment.js to 2.6.0
-* updates Underscore.js to 1.6.0
+* updates `H5BP` to 4.3.0
+* updates `jQuery` to 2.1.1
+* updates `json2.js` to 2014-02-04
+* updates `markdown-js` to 0.5.0
+* updates `Modernizr` to 2.8.2
+* updates `Moment.js` to 2.6.0
+* updates `Underscore.js` to 1.6.0
 * language updates (`bg`, `ko`, `pt`, `sl`, `sv`, `zh-cn`)
 
 
@@ -73,12 +144,12 @@
 * now uses scalable images for the interface
 * fixes filter (ignore parent folder, display of `no match`)
 * lots of small fixes
-* updates H5BP to 4.2.0
-* updates jQuery to 2.0.3
-* updates jQuery.mousewheel to 3.1.3
-* updates Moment.js to 2.1.0
-* updates markdown-js to 0.4.0-9c21acdf08
-* updates json2.js to 2013-05-26
+* updates `H5BP` to 4.2.0
+* updates `jQuery` to 2.0.3
+* updates `jQuery.mousewheel` to 3.1.3
+* updates `Moment.js` to 2.1.0
+* updates `markdown-js` to 0.4.0-9c21acdf08
+* updates `json2.js` to 2013-05-26
 * adds `uk` translation by Viktor Matveenko
 * updates to `pl` translation by Mark
 

LICENSE.md

@@ -1,19 +0,0 @@
-Copyright (c) 2014 Lars Jung, http://larsjung.de
-
-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.

README.md

@@ -1,50 +1,71 @@
 # h5ai
-**h5ai** is a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee.
-The preferred way to report a bug or make a feature request is to
-create [a new issue](https://github.com/lrsjng/h5ai/issues/new) on GitHub!
+
+[![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github]
+
+A modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee.
+For bug reports and feature requests please use [issues][github-issues].
 
 
 ## Install
 
-**Note:** please don't use files from the `src` folder for installation,
-they need to be preprocessed to work correctly!
-You'll find a preprocessed package, as well as detailed installation
-instructions on the [project page](http://larsjung.de/h5ai/).
+Do **not** install any files from the `src` folder, they need to be
+preprocessed to work correctly! Find a preprocessed package and detailed
+install instructions on the [project page][web].
 
 
 ## Build
 
-There are repositories for the latest [releases](http://release.larsjung.de/h5ai/) and [dev builds](http://release.larsjung.de/h5ai/dev/).
-But if you want to build **h5ai** yourself you need to install the build tool [fQuery](http://larsjung.de/fquery/) first:
-
-    > npm install -g fquery
-
-This will install fQuery and its command line tool `makejs`. Run `makejs --help` to see if everything
-worked fine. To clone and build the project run the following commands.
-You'll find a new directory `build` including a fresh zipball.
+There are installation ready packages for the latest [releases][release] and
+[dev builds][develop]. But to clone and build **h5ai** yourself run the
+following commands to find a fresh zipball in folder `build` (tested on linux
+only, requires [`git`][git] and [`npm`][npm] to be installed).
 
     > git clone git://github.com/lrsjng/h5ai.git
     > cd h5ai
-    > makejs release
+    > npm install
+    > npm run build
 
 
 ## License
 
-**h5ai** is provided under the terms of the [MIT License](https://github.com/lrsjng/h5ai/blob/develop/LICENSE.md).
+The MIT License (MIT)
 
-It profits from these great projects:
-[Evolvere Icon Theme](http://franksouza183.deviantart.com/art/Evolvere-Icon-theme-440718295) (CC BY-NC-ND 3.0),
-[Faenza Icons](http://tiheum.deviantart.com/art/Faenza-Icons-173323228) (GPL),
-[Gnome Symbolic Icon Theme](https://git.gnome.org/browse/gnome-icon-theme-symbolic/) (CC BY-SA 3.0),
-[HTML5 ★ Boilerplate](http://html5boilerplate.com) (MIT),
-[jQuery](http://jquery.com) (MIT),
-[jQuery.fracs](http://larsjung.de/fracs/) (MIT),
-[jQuery.mousewheel](https://github.com/brandonaaron/jquery-mousewheel) (MIT),
-[jQuery.qrcode](http://larsjung.de/qrcode/) (MIT),
-[jQuery.scrollpanel](http://larsjung.de/scrollpanel/) (MIT),
-[markdown-js](https://github.com/evilstreak/markdown-js) (MIT),
-[Modernizr](http://www.modernizr.com) (MIT/BSD),
-[modulejs](http://larsjung.de/modulejs/) (MIT),
-[Moment.js](http://momentjs.com) (MIT),
-[SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (MIT/GPL),
-[Underscore.js](http://underscorejs.org) (MIT)
+Copyright (c) 2015 Lars Jung (http://larsjung.de)
+
+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.
+
+
+## References
+
+**h5ai** profits from other projects, all of them licensed under the MIT license
+too. Exceptions are the [Material Design icons][material-design-icons] (CC BY 4.0).
+
+
+[web]: http://larsjung.de/h5ai/
+[github]: https://github.com/lrsjng/h5ai
+[github-issues]: https://github.com/lrsjng/h5ai/issues
+[release]: http://release.larsjung.de/h5ai/
+[develop]: http://release.larsjung.de/h5ai/develop/
+[git]: http://git-scm.com
+[npm]: https://www.npmjs.org
+[material-design-icons]: https://github.com/google/material-design-icons
+
+[license-img]: http://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
+[web-img]: http://img.shields.io/badge/web-larsjung.de/h5ai-a0a060.svg?style=flat-square
+[github-img]: http://img.shields.io/badge/github-lrsjng/h5ai-a0a060.svg?style=flat-square

makefile.js

@@ -1,166 +0,0 @@
-/*jshint node: true */
-'use strict';
-
-
-module.exports = function (make) {
-
-	var path = require('path'),
-
-		pkg = require('./package.json'),
-
-		root = path.resolve(__dirname),
-		src = path.join(root, 'src'),
-		build = path.join(root, 'build'),
-
-		$ = make.fQuery,
-		mapSrc = $.map.p(src, build).s('.less', '.css').s('.jade', ''),
-		mapRoot = $.map.p(root, path.join(build, '_h5ai'));
-
-
-	make.version('>=0.10.0');
-	make.defaults('build');
-
-
-	make.before(function () {
-
-		var moment = make.moment();
-
-		make.env = {
-			pkg: pkg,
-			stamp: moment.format('YYYY-MM-DD HH:mm:ss')
-		};
-
-		$.info({ method: 'before', message: pkg.version + ' ' + make.env.stamp });
-	});
-
-
-	make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) {
-
-		if (!/\+$/.test(pkg.version)) {
-			done();
-			return;
-		}
-
-		$.git(root, function (err, result) {
-
-			pkg.version += result.buildSuffix;
-			$.info({ method: 'check-version', message: 'version set to ' + pkg.version });
-			done();
-		});
-	});
-
-
-	make.target('clean', [], 'delete build folder').sync(function () {
-
-		$.DELETE(build);
-	});
-
-
-	make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
-
-		var jshint = {
-				// Enforcing Options
-				bitwise: true,
-				curly: true,
-				eqeqeq: true,
-				forin: true,
-				latedef: true,
-				newcap: true,
-				noempty: true,
-				plusplus: true,
-				trailing: true,
-				undef: true,
-
-				// Environments
-				browser: true
-			},
-			globals = {
-				'modulejs': true
-			};
-
-		$(src + '/_h5ai/client/js: **/*.js, ! lib/**')
-			.jshint(jshint, globals);
-	});
-
-
-	make.target('build', ['check-version'], 'build all updated files').sync(function () {
-
-		var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.url + ' */';
-
-		$(src + ': _h5ai/client/js/*.js')
-			.newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
-			.includify()
-			.uglifyjs({header: header})
-			.WRITE(mapSrc);
-
-		$(src + ': _h5ai/client/css/*.less')
-			.newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
-			.less()
-			.cssmin({header: header})
-			.WRITE(mapSrc);
-
-		$(src + ': **/*.jade')
-			.newerThan(mapSrc)
-			.handlebars(make.env)
-			.jade()
-			.WRITE(mapSrc);
-
-		$(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
-			.newerThan(mapSrc)
-			.handlebars(make.env)
-			.WRITE(mapSrc);
-
-		$(src + ': _h5ai/client/css/fonts/**')
-			.newerThan(mapSrc)
-			.WRITE(mapSrc);
-
-		$(root + ': *.md')
-			.newerThan(mapRoot)
-			.WRITE(mapRoot);
-	});
-
-
-	make.target('build-uncompressed', ['check-version'], 'build all updated files without compression').sync(function () {
-
-		$(src + ': _h5ai/client/js/*.js')
-			.newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
-			.includify()
-			// .uglifyjs()
-			.WRITE(mapSrc);
-
-		$(src + ': _h5ai/client/css/*.less')
-			.newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
-			.less()
-			// .cssmin()
-			.WRITE(mapSrc);
-
-		$(src + ': **/*.jade')
-			.newerThan(mapSrc)
-			.handlebars(make.env)
-			.jade()
-			.WRITE(mapSrc);
-
-		$(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
-			.newerThan(mapSrc)
-			.handlebars(make.env)
-			.WRITE(mapSrc);
-
-		$(src + ': _h5ai/client/css/fonts/**')
-			.newerThan(mapSrc)
-			.WRITE(mapSrc);
-
-		$(root + ': *.md')
-			.newerThan(mapRoot)
-			.WRITE(mapRoot);
-	});
-
-
-	make.target('release', ['clean', 'build'], 'create a zipball').async(function (done, fail) {
-
-		$(build + ': **').shzip({
-			target: path.join(build, pkg.name + '-' + pkg.version + '.zip'),
-			dir: build,
-			callback: done
-		});
-	});
-};

mkrfile.js

@@ -0,0 +1,208 @@
+/*jshint node: true */
+'use strict';
+
+
+var path = require('path');
+var $ = require('fquery');
+
+var pkg = require('./package.json');
+
+var root = path.resolve(__dirname);
+var src = path.join(root, 'src');
+var build = path.join(root, 'build');
+
+var mapSrc = $.map.p(src, build).s('.less', '.css').s('.jade', '');
+var mapRoot = $.map.p(root, path.join(build, '_h5ai'));
+
+
+function getBuildSuffix(callback) {
+
+    require('child_process').exec('git rev-list v' + pkg.version + '..HEAD', {cwd: root}, function (err, out) {
+
+        try {
+            var lines = out.trim().split(/\r?\n/);
+            callback('+' + ('000' + lines.length).substr(-3) + '~' + lines[0].substring(0, 7));
+        } catch (e) {
+            callback('+X');
+        }
+    });
+}
+
+
+$.fn.autoprefixer = function (options) {
+
+    var autoprefixer = require('autoprefixer-core');
+    var options = {browsers: ['last 2 versions']};
+
+    return this.edit(function (blob) {
+
+        try {
+            blob.content = autoprefixer.process(blob.content, options).css;
+        } catch (e) {
+            $.report({
+                type: 'err',
+                method: 'autoprefixer',
+                message: e.message,
+                fquery: this,
+                blob: blob,
+                err: e
+            });
+        }
+    });
+};
+
+
+$.plugin('fquery-cssmin');
+$.plugin('fquery-handlebars');
+$.plugin('fquery-includeit');
+$.plugin('fquery-jade');
+$.plugin('fquery-jshint');
+$.plugin('fquery-jszip');
+$.plugin('fquery-less');
+$.plugin('fquery-uglifyjs');
+
+
+module.exports = function (suite) {
+
+
+    suite.defaults('release');
+
+
+    suite.target('check-version', [], 'add git info to dev builds').task(function (done) {
+
+        if (!pkg.develop) {
+            done();
+            return;
+        }
+
+        getBuildSuffix(function (result) {
+
+            pkg.version += result;
+            $.report({type: 'info', method: 'check-version', message: 'version set to ' + pkg.version});
+            done();
+        });
+    });
+
+
+    suite.target('clean', [], 'delete build folder').task(function () {
+
+        $(build, {dirs: true}).delete();
+    });
+
+
+    suite.target('lint', [], 'lint all JavaScript files with JSHint').task(function () {
+
+        var jshint = {
+                // Enforcing Options
+                bitwise: true,
+                curly: true,
+                eqeqeq: true,
+                forin: true,
+                latedef: true,
+                newcap: true,
+                noempty: true,
+                plusplus: true,
+                trailing: true,
+                undef: true,
+
+                // Environments
+                browser: true
+            };
+        var globals = {
+                modulejs: true
+            };
+
+        $(src + '/_h5ai/client/js: **/*.js, ! lib/**')
+            .jshint(jshint, globals);
+    });
+
+
+    suite.target('build', ['check-version', 'lint'], 'build all updated files').task(function () {
+
+        var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.homepage + ' */\n';
+        var env = {pkg: pkg};
+
+        $(src + ': _h5ai/client/js/*.js')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
+            .includeit()
+            .uglifyjs()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/*.less')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .less()
+            .autoprefixer()
+            .cssmin()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/fonts/**')
+            .newerThan(mapSrc)
+            .write(mapSrc, true);
+
+        $(src + ': **/*.jade')
+            .newerThan(mapSrc)
+            .jade(env)
+            .write(mapSrc, true);
+
+        $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .write(mapSrc, true);
+
+        $(root + ': *.md')
+            .newerThan(mapRoot)
+            .write(mapRoot, true);
+    });
+
+
+    suite.target('build-uncompressed', ['check-version', 'lint'], 'build all updated files').task(function () {
+
+        var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.homepage + ' */\n';
+        var env = {pkg: pkg};
+
+        $(src + ': _h5ai/client/js/*.js')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
+            .includeit()
+            // .uglifyjs()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/*.less')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .less()
+            .autoprefixer()
+            // .cssmin()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/fonts/**')
+            .newerThan(mapSrc)
+            .write(mapSrc, true);
+
+        $(src + ': **/*.jade')
+            .newerThan(mapSrc)
+            .jade(env)
+            .write(mapSrc, true);
+
+        $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .write(mapSrc, true);
+
+        $(root + ': *.md')
+            .newerThan(mapRoot)
+            .write(mapRoot, true);
+    });
+
+
+    suite.target('release', ['clean', 'build'], 'create a zipball').task(function () {
+
+        var target = path.join(build, pkg.name + '-' + pkg.version + '.zip');
+
+        $(build + ': **')
+            .jszip({dir: build})
+            .write(target, true);
+    });
+};

package.json

@@ -1,12 +1,31 @@
 {
   "name": "h5ai",
-  "version": "0.25.0",
+  "version": "0.27.0",
+  "develop": false,
   "description": "a modern HTTP web server index",
-  "url": "http://larsjung.de/h5ai/",
-  "author": "Lars Jung",
+  "homepage": "http://larsjung.de/h5ai/",
+  "bugs": "https://github.com/lrsjng/h5ai/issues",
+  "author": "Lars Jung <lrsjng@gmail.com> (http://larsjung.de)",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/lrsjng/h5ai.git"
+  },
+  "scripts": {
+    "build": "mkr release",
+    "test": "mocha --recursive test"
+  },
+  "devDependencies": {
+    "autoprefixer-core": "~5.1.8",
+    "fquery": "~0.16.2",
+    "fquery-cssmin": "~0.3.0",
+    "fquery-handlebars": "~0.2.0",
+    "fquery-includeit": "~0.2.0",
+    "fquery-jade": "~0.3.0",
+    "fquery-jshint": "~0.2.0",
+    "fquery-jszip": "~0.4.0",
+    "fquery-less": "~0.2.0",
+    "fquery-uglifyjs": "~0.2.1",
+    "mkr": "~0.6.1"
   }
 }

src/_h5ai/.htaccess

@@ -2,114 +2,45 @@
 DirectoryIndex index.html
 
 
-
-
-# ------------------------------------------------------------------------------
-# | File access                                                                |
-# ------------------------------------------------------------------------------
-
-# Block access to directories without a default document.
-# Usually you should leave this uncommented because you shouldn't allow anyone
-# to surf through every directory on your server (which may includes rather
-# private places like the CMS's directories).
-
 <IfModule mod_autoindex.c>
     Options -Indexes
 </IfModule>
 
 
-
-
-# ------------------------------------------------------------------------------
-# | Better website experience                                                  |
-# ------------------------------------------------------------------------------
-
-# Force IE to render pages in the highest available mode in the various
-# cases when it may not: http://hsivonen.iki.fi/doctype/ie-mode.pdf.
-# Use, if installed, Google Chrome Frame.
-
-<IfModule mod_headers.c>
-    Header set X-UA-Compatible "IE=edge,chrome=1"
-    # `mod_headers` can't match based on the content-type, however, we only
-    # want to send this header for HTML pages and not for the other resources
-    <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
-        Header unset X-UA-Compatible
-    </FilesMatch>
-</IfModule>
-
-
-
-
-# ------------------------------------------------------------------------------
-# | UTF-8 encoding                                                             |
-# ------------------------------------------------------------------------------
-
-# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.
 AddDefaultCharset utf-8
 
-# Force UTF-8 for certain file formats.
+
 <IfModule mod_mime.c>
-    AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml
+    AddCharset utf-8 .css .js .json .svg
 </IfModule>
 
 
-
-
-# ------------------------------------------------------------------------------
-# | Expires headers (for better cache control)                                 |
-# ------------------------------------------------------------------------------
-
-# The following expires headers are set pretty far in the future. If you don't
-# control versioning with filename-based cache busting, consider lowering the
-# cache time for resources like CSS and JS to something like 1 week.
-
 <IfModule mod_expires.c>
-
     ExpiresActive on
     ExpiresDefault                                      "access plus 1 month"
 
-  # CSS
+    # CSS
     ExpiresByType text/css                              "access plus 1 week"
 
-  # Data interchange
+    # Data interchange
     ExpiresByType application/json                      "access plus 0 seconds"
     ExpiresByType application/xml                       "access plus 0 seconds"
     ExpiresByType text/xml                              "access plus 0 seconds"
 
-  # Favicon (cannot be renamed!)
+    # Favicon (cannot be renamed!)
     ExpiresByType image/x-icon                          "access plus 1 week"
 
-  # HTML components (HTCs)
-    ExpiresByType text/x-component                      "access plus 1 month"
-
-  # HTML
+    # HTML
     ExpiresByType text/html                             "access plus 0 seconds"
 
-  # JavaScript
+    # JavaScript
     ExpiresByType application/javascript                "access plus 1 week"
 
-  # Manifest files
-    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
-    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
-
-  # Media
-    ExpiresByType audio/ogg                             "access plus 1 month"
-    ExpiresByType image/gif                             "access plus 1 month"
+    # Media
     ExpiresByType image/jpeg                            "access plus 1 month"
     ExpiresByType image/png                             "access plus 1 month"
-    ExpiresByType video/mp4                             "access plus 1 month"
-    ExpiresByType video/ogg                             "access plus 1 month"
-    ExpiresByType video/webm                            "access plus 1 month"
 
-  # Web feeds
-    ExpiresByType application/atom+xml                  "access plus 1 hour"
-    ExpiresByType application/rss+xml                   "access plus 1 hour"
-
-  # Web fonts
+    # Web fonts
     ExpiresByType application/font-woff                 "access plus 1 month"
-    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
-    ExpiresByType application/x-font-ttf                "access plus 1 month"
-    ExpiresByType font/opentype                         "access plus 1 month"
     ExpiresByType image/svg+xml                         "access plus 1 month"
-
 </IfModule>

src/_h5ai/client/css/fonts/LICENCE.txt

@@ -1,96 +0,0 @@
--------------------------------
-UBUNTU FONT LICENCE Version 1.0
--------------------------------
-
-PREAMBLE
-This licence allows the licensed fonts to be used, studied, modified and
-redistributed freely. The fonts, including any derivative works, can be
-bundled, embedded, and redistributed provided the terms of this licence
-are met. The fonts and derivatives, however, cannot be released under
-any other licence. The requirement for fonts to remain under this
-licence does not require any document created using the fonts or their
-derivatives to be published under this licence, as long as the primary
-purpose of the document is not to be a vehicle for the distribution of
-the fonts.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this licence and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Original Version" refers to the collection of Font Software components
-as received under this licence.
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to
-a new environment.
-
-"Copyright Holder(s)" refers to all individuals and companies who have a
-copyright ownership of the Font Software.
-
-"Substantially Changed" refers to Modified Versions which can be easily
-identified as dissimilar to the Font Software by users of the Font
-Software comparing the Original Version with the Modified Version.
-
-To "Propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy. Propagation includes copying,
-distribution (with or without modification and with or without charging
-a redistribution fee), making available to the public, and in some
-countries other activities as well.
-
-PERMISSION & CONDITIONS
-This licence does not grant any rights under trademark law and all such
-rights are reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a
-copy of the Font Software, to propagate the Font Software, subject to
-the below conditions:
-
-1) Each copy of the Font Software must contain the above copyright
-notice and this licence. These can be included either as stand-alone
-text files, human-readable headers or in the appropriate machine-
-readable metadata fields within text or binary files as long as those
-fields can be easily viewed by the user.
-
-2) The font name complies with the following:
-(a) The Original Version must retain its name, unmodified.
-(b) Modified Versions which are Substantially Changed must be renamed to
-avoid use of the name of the Original Version or similar names entirely.
-(c) Modified Versions which are not Substantially Changed must be
-renamed to both (i) retain the name of the Original Version and (ii) add
-additional naming elements to distinguish the Modified Version from the
-Original Version. The name of such Modified Versions must be the name of
-the Original Version, with "derivative X" where X represents the name of
-the new work, appended to that name.
-
-3) The name(s) of the Copyright Holder(s) and any contributor to the
-Font Software shall not be used to promote, endorse or advertise any
-Modified Version, except (i) as required by this licence, (ii) to
-acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
-their explicit written permission.
-
-4) The Font Software, modified or unmodified, in part or in whole, must
-be distributed entirely under this licence, and must not be distributed
-under any other licence. The requirement for fonts to remain under this
-licence does not affect any document created using the Font Software,
-except any version of the Font Software extracted from a document
-created using the Font Software may only be distributed under this
-licence.
-
-TERMINATION
-This licence becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
-COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
-DEALINGS IN THE FONT SOFTWARE.

src/_h5ai/client/css/fonts/README.txt

@@ -1,15 +0,0 @@
- ----------------------
-  Ubuntu Font Family
- ======================
-
-The Ubuntu Font Family are a set of matching new libre/open fonts in
-development during 2010--2011. The development is being funded by
-Canonical Ltd on behalf the wider Free Software community and the
-Ubuntu project.  The technical font design work and implementation is
-being undertaken by Dalton Maag.
-
-Both the final font Truetype/OpenType files and the design files used
-to produce the font family are distributed under an open licence and
-you are expressly encouraged to experiment, modify, share and improve.
-
-  http://font.ubuntu.com/

src/_h5ai/client/css/inc/bottombar.less

@@ -1,73 +0,0 @@
-
-#bottombar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	height: 18px;
-	left: 0;
-	bottom: 0;
-	padding: 6px 0 8px 0;
-	background-color: @col-widget-back;
-	border-top: @border-widget;
-
-	color: #999;
-	text-align: center;
-
-	a, a:active, a:visited {
-		color: #555;
-		text-decoration: none;
-		.transition(all 0.2s ease-in-out);
-		opacity: 0.7;
-
-		&:hover {
-			color: @col-hover;
-			opacity: 1;
-		}
-	}
-	.left {
-		position: absolute;
-		left: 0;
-		display: block;
-		padding: 0 8px;
-	}
-	.center {
-		display: block;
-	}
-	.right {
-		position: absolute;
-		right: 0;
-		display: block;
-		padding: 0 8px;
-	}
-	.noJsMsg {
-		color: @col-error;
-		margin-left: 16px;
-	}
-	.noBrowserMsg {
-		color: @col-error;
-		margin-left: 16px;
-		a, a:active, a:visited {
-			color: @col-error;
-			text-decoration: underline;
-			opacity: 1;
-			&:hover {
-				color: @col-hover;
-			}
-		}
-	}
-	.status {
-		.sep {
-			display: inline-block;
-			padding: 0 6px;
-
-			&:before {
-				content: '·'
-			}
-		}
-		&.default {
-		}
-		&.dynamic {
-			display: none;
-		}
-	}
-}

src/_h5ai/client/css/inc/content.less

@@ -1,34 +1,33 @@
 
 #content {
-	max-width: 960px;
-	margin: 50px auto;
-	font-size: 15px;
+    overflow: auto;
+    flex: 1 1 auto;
+    order: 50;
 }
 
 #content-header, #content-footer {
-	color: #333;
+    margin: 16px;
+    color: @col;
+    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    // background: #fafafa;
+    // padding: 16px;
+    padding: 8px;
 
-	a, a:active, a:visited {
-		color: @col-link;
-		text-decoration: none;
-		cursor: pointer;
+    a, a:active, a:visited {
+        color: @col-link;
+        text-decoration: none;
+        cursor: pointer;
 
-		&:hover {
-			color: #555;
-		}
-	}
+        &:hover {
+            color: #000;
+        }
+    }
 
-	pre, code {
-		font-family: @font-family-mono;
-	}
-}
-
-#content-header {
-	padding-bottom: 12px;
-	margin-bottom: 32px;
-}
-
-#content-footer {
-	padding-top: 12px;
-	margin-top: 32px;
+    pre, code {
+        font-family: @font-family-mono;
+    }
+
+    h1, h2, h3, h4, h5, h6, p {
+        margin: 0.1em 0;
+    }
 }

src/_h5ai/client/css/inc/context-menu.less

@@ -1,32 +0,0 @@
-
-#view .context-menu {
-
-	display: block;
-	position: absolute;
-	right: 0;
-	top: 0;
-	background-color: @col-widget-back;
-	border: @border-widget;
-	color: #999;
-	z-index: 10;
-	font-size: 0.9em;
-
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		text-align: left;
-
-		li {
-			padding: 8px 12px 10px 12px;
-			white-space: nowrap;
-			border-top: @border-widget-sep;
-			.transition(all 0.2s ease-in-out);
-
-			&:hover {
-				color: @col-hover;
-				background-color: @col-widget-back-hover;
-			}
-		}
-	}
-}

src/_h5ai/client/css/inc/contextmenu.less

@@ -0,0 +1,77 @@
+
+.cm-overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 200;
+    // background: rgba(0,0,0,0.1);
+    // background: rgba(255,255,255,0.6);
+}
+
+
+.cm-panel {
+    .popup();
+    .rounded();
+    display: block;
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    background: #fff;
+    color: @col;
+    z-index: 10;
+    overflow: auto;
+    min-width: 200px;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        text-align: left;
+
+        .cm-label {
+            padding: 8px 16px;
+            white-space: nowrap;
+            font-weight: bold;
+        }
+
+        .cm-entry {
+            padding: 8px 16px;
+            white-space: nowrap;
+            cursor: pointer;
+
+            &:hover {
+                color: @col-hover;
+                background: @col-darkgray;
+            }
+
+            .cm-icon {
+                position: relative;
+                top: -2px;
+
+                img {
+                    width: 20px;
+                    height: 20px;
+                }
+
+                &.no-icon {
+                    opacity: 0;
+                }
+            }
+
+            .cm-text {
+                margin: 0 0 0 12px;
+            }
+        }
+
+        .cm-sep {
+            height: 1px;
+            margin: 8px 0;
+            padding: 0;
+            border-top: 1px solid rgba(0,0,0,0.08);
+        }
+    }
+}

src/_h5ai/client/css/inc/download.less

@@ -1,10 +1,8 @@
 
 #download {
-	display: none;
-	.topbar-right;
-	.transition(all 0.2s ease-in-out);
+    display: none;
 
-	&.failed {
-		background-color: rgba(255,0,0,0.5);
-	}
+    &.failed {
+        background-color: @col-error;
+    }
 }

src/_h5ai/client/css/inc/fallback.less

@@ -1,71 +1,104 @@
 
 #fallback {
-	display: none;
-	max-width: 960px;
-	margin: 80px auto;
+    display: none;
+    max-width: 960px;
+    margin: 16px auto;
+    padding: 32px 16px;
 
-	table {
-		display: block;
-		width: 100%;
-		border-collapse: collapse;
+    table {
+        display: block;
+        width: 100%;
+        border-collapse: collapse;
+    }
+    th, td {
+        padding: 6px;
+        text-align: left;
+        border: none;
+    }
+    th {
+        color: #ccc;
+        font-weight: lighter;
+        line-height: 48px;
+    }
+    td {
+        overflow: hidden;
+        white-space: nowrap;
+        border-bottom: 1px solid #eee;
+    }
+    a, a:active, a:visited {
+        display: block;
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
 
-		th, td {
-			padding: 6px;
-			text-align: left;
-			border: none;
-		}
-		th {
-			padding-bottom: 18px;
-			color: #555;
-			font-weight: normal;
-			opacity: 0.4;
-		}
-		td {
-			border-bottom: 1px solid @col-border;
-			overflow: hidden;
-			white-space: nowrap;
-			font-size: 15px;
+        &:hover {
+            color: @col-hover;
+        }
+    }
+    .fb-i {
+        width: 24px;
 
-			a, a:active, a:visited {
-				display: block;
-				color: #555;
-				text-decoration: none;
-				cursor: pointer;
+        img {
+            width: 24px;
+            height: 24px;
+        }
+    }
+    .fb-n {
+        width: 682px;
+        max-width: 682px;
+    }
+    .fb-d {
+        text-align: right;
+        width: 160px;
+        min-width: 160px;
+    }
+    .fb-s {
+        text-align: right;
+        width: 70px;
+        min-width: 70px;
+    }
+}
 
-				&:hover {
-					color: @col-hover;
-				}
-			}
-		}
-		.fb-i {
-			width: 24px;
 
-			img {
-				width: 24px;
-				height: 24px;
-			}
-		}
-		.fb-n {
-			width: 682px;
-			max-width: 682px;
-		}
-		.fb-d {
-			text-align: right;
-			width: 160px;
-			min-width: 160px;
-		}
-		.fb-s {
-			text-align: right;
-			width: 70px;
-			min-width: 70px;
-		}
-	}
+#fallback-hints {
+    display: none;
+    overflow: hidden;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    text-align: right;
+    background: @col-lightgray;
+
+    a, a:active, a:visited {
+        display: inline-block;
+        line-height: 48px;
+        color: @col-text-secondary-black;
+        text-decoration: none;
+        .transition(all 0.2s ease-in-out);
+        outline: 0;
+
+        &:hover {
+            color: @col-hover;
+        }
+    }
+
+    .backlink {
+        margin: 0 16px;
+    }
+
+    .noJsMsg, .noBrowserMsg {
+        margin: 0 16px;
+        color: @col-error;
+    }
 }
 
 
 html.no-js, html.no-browser {
 
-	#fallback {
-		display: block;
-	}
+    body {
+        position: static;
+        background: #fff;
+    }
+
+    #fallback, #fallback-hints {
+        display: block;
+    }
 }

src/_h5ai/client/css/inc/filter.less

@@ -1,19 +1,24 @@
 
 #filter {
-	.topbar-right;
 
-	input {
-		border: none;
-		font-family: @font-family;
-		color: @col;
-		background-color: rgba(0,0,0,0);
-		width: 30px;
-		outline: none;
-	}
+    input {
+        display: none;
+        border: none;
+        font-family: @font-family;
+        font-weight: lighter;
+        font-size: 16px;
+        color: @col;
+        background: transparent;
+        outline: 0;
+        width: 160px;
+        padding: 0 12px 0 4px;
+        line-height: 48px;
+        vertical-align: top;
+    }
 
-	&.current {
-		input {
-			width: 150px;
-		}
-	}
+    &.active {
+        input {
+            display: inline-block;
+        }
+    }
 }

src/_h5ai/client/css/inc/fonts.less

@@ -1,56 +0,0 @@
-
-@font-face {
-	font-family: 'Ubuntu';
-	font-style: normal;
-	font-weight: 300;
-	src: local('Ubuntu Light'), local('Ubuntu-Light'), url(fonts/Ubuntu-L.woff) format('woff'), url(fonts/Ubuntu-L.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu';
-	font-style: normal;
-	font-weight: 700;
-	src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(fonts/Ubuntu-B.woff) format('woff'), url(fonts/Ubuntu-B.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu';
-	font-style: italic;
-	font-weight: 300;
-	src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url(fonts/Ubuntu-LI.woff) format('woff'), url(fonts/Ubuntu-LI.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu';
-	font-style: italic;
-	font-weight: 700;
-	src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(fonts/Ubuntu-BI.woff) format('woff'), url(fonts/Ubuntu-BI.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu Mono';
-	font-style: normal;
-	font-weight: 400;
-	src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url(fonts/UbuntuMono-R.woff) format('woff'), url(fonts/UbuntuMono-R.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu Mono';
-	font-style: normal;
-	font-weight: 700;
-	src: local('Ubuntu Mono Bold'), local('UbuntuMono-Bold'), url(fonts/UbuntuMono-B.woff) format('woff'), url(fonts/UbuntuMono-B.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu Mono';
-	font-style: italic;
-	font-weight: 400;
-	src: local('Ubuntu Mono Italic'), local('UbuntuMono-Italic'), url(fonts/UbuntuMono-RI.woff) format('woff'), url(fonts/UbuntuMono-RI.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Ubuntu Mono';
-	font-style: italic;
-	font-weight: 700;
-	src: local('Ubuntu Mono Bold Italic'), local('UbuntuMono-BoldItalic'), url(fonts/Ubuntu-BI.woff) format('woff'), url(fonts/Ubuntu-BI.ttf) format('ttf');
-}

src/_h5ai/client/css/inc/general.less

@@ -1,15 +1,52 @@
+@col-blue-200: #90caf9;
+@col-blue-400: #42a5f5;
+@col-blue-500: #2196F3;
+@col-blue-700: #1976D2;
+@col-blue-900: #0D47A1;
+@col-green: #4caf50;
+@col-red: #f44336;
+@col-pink-a200: #ff4081;
 
-@col: rgb(85,85,85);
-@col-back: rgb(255,255,255);
-@col-hover: rgb(29,119,194);
+@col-light: #ffffff;
+@col-lightgray: #fafafa;
+// @col-darkgray: #eeeeee;
+@col-darkgray: #f3f3f3;
+// @col-dark: #333;
+@col-dark: #212121;
+
+@col-text-primary-black: rgba(0,0,0,0.87);
+@col-text-secondary-black: rgba(0,0,0,0.54);
+@col-text-disabled-black: rgba(0,0,0,0.26);
+@col-divider-black: rgba(0,0,0,0.12);
+
+@col-text-primary-white: rgba(255,255,255,1.0);
+@col-text-secondary-white: rgba(255,255,255,0.7);
+@col-text-disabled-white: rgba(255,255,255,0.3);
+@col-divider-white: rgba(255,255,255,0.12);
+
+@col-text-selected: @col-text-primary-white;
+@col-back-selected: @col-blue-400;
+
+@col-text-highlight: #111111;
+
+@col-font-light: @col-light;
+@col-font-dark: @col-dark;
+
+@col-back-light: @col-lightgray;
+@col-back-dark: @col-darkgray;
+
+@col: @col-text-primary-black;
+@col-back: @col-back-dark;
+@col-hover: @col-blue-400;
 @col-border: rgba(0,0,0,0.05);
 @col-border-strong: rgba(0,0,0,0.15);
 @col-border-stronger: rgba(0,0,0,0.3);
 
-@col-error: rgb(204,51,51);
+@col-okay: @col-green;
+@col-error: @col-red;
 
-@col-link: rgb(29,119,194);
-@col-link-hover: rgb(29,119,194);
+@col-link: @col-blue-400;
+@col-link-hover: @col-blue-400;
 
 @col-widget-back: rgb(245,245,245);
 @col-widget-back-highlight: rgba(255,255,255,0.8);
@@ -22,49 +59,132 @@
 @col-sb-thumb-active: rgba(0,0,0,0.25);
 
 @col-range-back: rgb(224,224,224);
-@col-range-thumb: rgb(190,190,190);
+@col-range-thumb: #555;
 
 @border-widget: 1px solid @col-border;
 @border-widget-sep: 1px solid @col-widget-sep;
 
-@font-family: Ubuntu, Helvetica, Arial, sans-serif;
-@font-weight: 300;
-@font-family-mono: "Ubuntu Mono", monospace;
+@font-family: Roboto, Helvetica, Arial, sans-serif;
+@font-weight: normal;
+@font-size: 13px;
+@font-family-mono: monospace;
+
+// @max-icon-size: 24px;
+@max-icon-size: 32px;
+// @max-icon-size: 48px;
 
 
-::-moz-selection { background: #68A9FF; color: #fff; text-shadow: none; }
-::selection { background: #68A9FF; color: #fff; text-shadow: none; }
+::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
 
 .transition (@transition) {
-	-webkit-transition: @transition;
-	transition: @transition;
+    -webkit-transition: @transition;
+    transition: @transition;
 }
 
 .transform (@transform) {
-	-webkit-transform: @transform;
-	-ms-transform: @transform;
-	transform: @transform;
-	zoom: 1;
+    -webkit-transform: @transform;
+    -ms-transform: @transform;
+    transform: @transform;
+    zoom: 1;
 }
 
-html {
-	min-height: 100%;
-	overflow: auto;
-	overflow-y: scroll;
+.card() {
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+}
 
-	&.js .noJsMsg {
-		display: none;
-	}
-	&.browser .noBrowserMsg {
-		display: none;
-	}
+.raised() {
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+}
+
+.popup() {
+    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
+}
+
+.rounded() {
+    // overflow: hidden;
+    border-radius: 2px;
+}
+
+.el-button() {
+    .card();
+    .rounded();
+    .transition(all 0.2s ease-in-out);
+    color: @col-text-primary-white;
+    background: @col-blue-400;
+    border-radius: 2px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        .raised();
+    }
+}
+
+.el-input() {
+    .card();
+    .rounded();
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+    font-family: @font-family;
+    font-weight: @font-weight;
+    color: @col-text-primary-black;
+    background: @col-light;
+    border: none;
+    outline: none;
+}
+
+
+html {
+    min-height: 100%;
+    overflow: auto;
+
+    &.js .noJsMsg {
+        display: none;
+    }
+    &.browser .noBrowserMsg {
+        display: none;
+    }
 }
 
 body {
-	font-family: @font-family;
-	font-size: 13px;
-	font-weight: @font-weight;
-	color: @col;
-	background-color: @col-back;
-	margin: 30px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    font-family: @font-family;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text-primary-black;
+    background: @col-back;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+}
+
+#main-row {
+    flex: 1 1 auto;
+    order: 50;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+
+    // non-webkit fix;
+    height: 0;
+}
+
+*:focus {
+    // outline: 1px solid @col-pink-a200;
+    outline: none;
 }

src/_h5ai/client/css/inc/h5ai-info.less

@@ -1,103 +1,111 @@
 
 body#h5ai-info {
-	font-family: @font-family;
-	margin: 2em auto 4em auto;
-	font-size: 20px;
-	color: @col;
-	max-width: 600px;
-	text-align: center;
 
-	a, a:active, a:visited {
-		color: @col;
-		text-decoration: none;
-		.transition(all 0.2s ease-in-out);
+    #content {
+        flex: 1 1 auto;
+        order: 50;
+        color: @col-text-primary-black;
+        text-align: center;
+    }
 
-		&:hover {
-			color: @col-hover;
-		}
-	}
+    code {
+        margin: 0 0.2em;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-family: @font-family-mono;
+        letter-spacing: 0.05em;
+        background-color: @col-widget-back;
+        border: @border-widget;
+        font-size: 0.9em;
+    }
 
-	.build-version {
-		display: block;
-	}
-	.build-stamp {
-		display: block;
-		margin-top: 0.3em;
-		font-size: 0.6em;
-		color: #aaa;
-	}
-	.idx-file {
-		margin-top: 1em;
-		font-size: 0.6em;
-		display: block;
-		color: #aaa;
+    #header a {
+        font-size: 4em;
+        font-weight: 300;
+        margin: 0.8em 0 0 0;
+        color: @col-text-primary-black;
+        text-decoration: none;
+        .transition(all 0.2s ease-in-out);
 
-	}
-	code {
-		margin: 0 0.2em;
-		padding: 2px 4px;
-		border-radius: 4px;
-		font-family: @font-family-mono;
-		letter-spacing: 0.1em;
-		background-color: @col-widget-back;
-		border: @border-widget;
-	}
-	h1 {
-		font-size: 3.6em;
-		margin: 0;
-	}
-	h2 {
-		font-size: 1.15em;
-		margin: 2.6em 0 0 0;
-	}
-	p {
-		line-height: 1.6em;
-	}
-	p + p {
-		margin-top: 1.2em;
-	}
-	li {
-		margin-top: 0.6em;
-		line-height: 1.4em;
-	}
+        &:hover {
+            color: @col-hover;
+        }
+    }
 
-	#tests {
-		display: inline-block;
-		list-style-type: none;
-		text-align: left;
-		margin: 0;
-		padding: 0;
+    #support {
+        margin: 12px auto 24px auto;
+        padding: 6px 18px;
+        width: 210px;
+        background: #fafafa;
+        border: @border-widget;
+        border-radius: 4px;
 
-		.test {
-			.label {
-				display: inline-block;
-				width: 370px;
-			}
-			.result {
-				display: inline-block;
-				width: 70px;
-				text-align: right;
-				font-weight: bold;
-				color: #aaa;
+        .paypal {
+            margin: 12px 0 0 0;
+        }
+    }
 
-				&.passed {
-					color: #5a5;
-				}
-				&.failed {
-					color: #a55;
-				}
-			}
-			.info {
-				margin: 4px 0 12px 12px;
-				font-size: 0.7em;
-				color: #aaa;
-				width: 370px;
-				line-height: 1.2em;
-			}
-		}
-	}
+    #pass {
+        .el-input();
+        display: inline-block;
+        margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        width: 200px;
+        vertical-align: top;
+    }
 
-	#bottombar {
-		font-size: 13px;
-	}
+    #login, #logout {
+        .el-button();
+        display: inline-block;
+        margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        vertical-align: top;
+    }
+
+    #hint {
+        margin: 12px auto;
+        width: 380px;
+        font-weight: lighter;
+    }
+
+    #tests {
+        display: inline-block;
+        text-align: left;
+        list-style-type: none;
+        margin: 96px 0;
+        padding: 0;
+
+        .test {
+            .card();
+            .rounded();
+            background: @col-light;
+            margin: 12px 0 0 0;
+            padding: 8px 12px 12px 12px;
+        }
+        .label {
+            display: inline-block;
+            width: 250px;
+            font-size: 1.4em;
+        }
+        .result {
+            display: inline-block;
+            width: 250px;
+            text-align: right;
+            font-size: 1.4em;
+            font-weight: bold;
+
+            &.passed {
+                color: @col-okay;
+            }
+            &.failed {
+                color: @col-error;
+            }
+        }
+        .info {
+            font-weight: lighter;
+            margin: 4px 0 0 0;
+        }
+    }
 }

src/_h5ai/client/css/inc/info.less

@@ -0,0 +1,58 @@
+
+#info {
+    display: none;
+
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 99;
+
+    padding: 16px;
+    border-left: 1px solid @col-border;
+    white-space: nowrap;
+    overflow-x: hidden;
+    width: 240px;
+
+    .icon {
+        width: 240px;
+        height: 180px;
+
+        img {
+            .rounded();
+            display: block;
+            overflow: hidden;
+            margin: 0 auto;
+            width: 180px;
+            height: 180px;
+        }
+
+        .thumb {
+            width: 240px;
+        }
+    }
+
+    .block {
+        border-top: 1px solid @col-border;
+        border-bottom: 1px solid @col-border;
+        margin: 0 0 24px 0;
+        padding: 24px 0;
+    }
+
+    .label {
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    .time, .size, .content {
+        line-height: 20px;
+        height: 20px;
+    }
+
+    .qrcode {
+        margin: 0 auto;
+        width: 200px;
+
+        canvas {
+            display: block;
+        }
+    }
+}

src/_h5ai/client/css/inc/notify.less

@@ -1,14 +1,13 @@
 
 #notify {
-	position: fixed;
-	left: 50%;
-	top: 3px;
-	width: 200px;
-	margin-left: -100px;
-	z-index: 100;
-	padding: 2px 6px 2px 6px;
-	color: #fff;
-	background-color: rgba(0, 0, 0, 0.2);
-	border-radius: 4px;
-	text-align: center;
+    position: fixed;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    z-index: 100;
+    padding: 3px 6px 6px 6px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0 0 4px 4px;
+    text-align: center;
 }

src/_h5ai/client/css/inc/preview-aud.less

@@ -1,9 +1,9 @@
 
 #pv-aud-audio {
-	position: absolute;
+    position: absolute;
 
-	max-width: 100%;
-	max-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
 
-	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 }

src/_h5ai/client/css/inc/preview-img.less

@@ -2,17 +2,26 @@
 @check-white: #f8f8f8;
 @check-black: #e8e8e8;
 #pv-img-image {
-	position: absolute;
+    position: absolute;
 
-	max-width: 100%;
-	max-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
 
-	background-color: @check-white;
-	background-image:
-		-webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black),
-		-webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black);
-	background-size: 60px 60px;
-	background-position: 0 0, 30px 30px;
+    background-color: @check-white;
+    background-image:
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black),
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
 
-	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+
+    &.loading {
+        opacity: 0.5;
+        margin-top: 32px;
+        width: 240px;
+        height: 240px;
+        border-radius: 1000px;
+        overflow: hidden;
+    }
 }

src/_h5ai/client/css/inc/preview-txt.less

@@ -1,123 +1,117 @@
 
 #pv-txt-text {
-	max-width: 960px;
-	text-align: left;
-	background-color: #fff;
-	margin: 0 auto;
-	padding: 8px;
-	overflow: auto;
+    max-width: 960px;
+    text-align: left;
+    background-color: #fff;
+    margin: 0 auto;
+    padding: 8px;
+    overflow: auto;
 
-	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 
-	&.highlighted {
-		word-break: break-all;
+    &.highlighted {
 
-		tr:hover {
-			background-color: rgba(0,0,0,0.05);
+        code {
+            font-family: @font-family-mono;
+            font-size: @font-size;
+            line-height: 1.2em;
+        }
 
-			.nr {
-				color: #333;
-			}
-		}
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
 
-		td {
-			vertical-align: top;
-			font-family: @font-family-mono;
-			font-size: 16px;
-			line-height: 1.2em;
-			color: #999;
-			word-break: normal;
+            &:hover {
+                color: #68A9FF;
+            }
+        }
 
-			&.nr {
-				text-align: right;
-				padding: 0 8px 0 4px;
-			}
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #aaa;
+        }
 
-			&.line {
-				width: 100%;
-				padding: 0 4px 0 8px;
-			}
+        .token.punctuation {
+            color: #999;
+        }
 
-			code {
-				font-family: @font-family-mono;
-				font-size: 16px;
-				line-height: 1.2em;
-			}
-		}
+        .namespace {
+            opacity: .7;
+        }
 
-		.plain {
-			color: #000;
-		}
-		.comments {
-			color: #008200;
-		}
-		.string {
-			color: #1111ff;
-		}
-		.keyword {
-			color: #006699;
-			font-weight: bold;
-		}
-		.preprocessor {
-			color: #999;
-		}
-		.variable {
-			color: #aa7700;
-		}
-		.value {
-			color: #009900;
-		}
-		.functions {
-			color: #ff1493;
-		}
-		.constants {
-			color: #0066cc;
-		}
-		.script {
-			color: #006699;
-			font-weight: bold;
-		}
-		.color1 {
-			color: #999;
-		}
-		.color2 {
-			color: #ff1493;
-		}
-		.color3 {
-			color: #ff1111;
-		}
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.constant,
+        .token.symbol {
+            color: #905;
+        }
 
-		a, a:active, a:visited {
-			color: #2080FF;
-			text-decoration: none;
-			cursor: pointer;
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.builtin {
+            color: #690;
+        }
 
-			&:hover {
-				color: #68A9FF;
-			}
-		}
-	}
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable {
+            color: #a67f59;
+            background: hsla(0,0%,100%,.5);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: #07a;
+        }
+
+        .token.function {
+            color: #DD4A68;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #e90;
+        }
+
+        .token.important {
+            font-weight: bold;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
 
 
-	&.markdown {
-		font-size: 16px;
-		padding: 8px 24px;
+    &.markdown {
+        font-size: 1.1em;
+        padding: 8px 24px;
 
-		a, a:active, a:visited {
-			color: #2080FF;
-			text-decoration: none;
-			cursor: pointer;
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
 
-			&:hover {
-				color: #68A9FF;
-			}
-		}
+            &:hover {
+                color: #68A9FF;
+            }
+        }
 
-		pre, code {
-			font-family: @font-family-mono;
-		}
-		code {
-			color: #008200;
-		}
-	}
+        pre, code {
+            font-family: @font-family-mono;
+        }
+        code {
+            color: #008200;
+        }
+    }
 }

src/_h5ai/client/css/inc/preview-vid.less

@@ -1,14 +1,14 @@
 
 #pv-vid-video {
-	position: absolute;
+    position: absolute;
 
-	max-width: 100%;
-	max-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
 
-	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 }
 
 #pv-vid-video:-webkit-full-screen {
-	top: auto !important;
-	left: auto !important;
+    top: auto !important;
+    left: auto !important;
 }

src/_h5ai/client/css/inc/preview.less

@@ -1,154 +1,142 @@
 
 #pv-overlay {
-	display: none;
-	position: fixed;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 100;
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
 
-	background-color: rgba(0,0,0,0.5);
-	.transition(background-color 0.3s ease-in-out);
+    background-color: rgba(0,0,0,0.5);
+    .transition(background-color 0.3s ease-in-out);
 
-	text-align: center;
+    text-align: center;
 }
 
 #pv-overlay.fullscreen {
-	background-color: #111;
+    background-color: #111;
 }
 
 #pv-content {
-	position: absolute;
+    position: absolute;
 }
 
 #pv-spinner {
-	position: absolute;
+    position: absolute;
 
-	img {
-		width: 100px;
-		height: 100px;
-		margin: -50px -50px;
-	}
+    img {
+        width: 100px;
+        height: 100px;
+        margin: -50px -50px;
+    }
 }
 
 #pv-prev-area, #pv-next-area {
-	position: absolute;
-	top: 50%;
-	cursor: pointer;
+    position: absolute;
+    top: 50%;
+    cursor: pointer;
 
-	img {
-		width: 48px;
-		height: 48px;
-		margin: -36px 0;
-		padding: 12px;
-		opacity: 0.5;
-	}
+    img {
+        display: block;
+        width: 48px;
+        height: 48px;
+        margin: -36px 0;
+        padding: 12px;
+        opacity: 0.5;
+        .transition(all 0.2s ease-in-out);
+    }
 
-	&:hover, &.hover {
-		img {
-			background-color: rgba(27,27,27,0.8);
-			opacity: 1;
-		}
-	}
+    &:hover {
+        img {
+            opacity: 1;
+            background-color: rgba(27,27,27,0.8);
+            box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
+        }
+    }
 }
 
 #pv-prev-area {
-	left: 0;
-	img {
-		border-top-right-radius: 8px;
-		border-bottom-right-radius: 8px;
-		padding-left: 48px;
-	}
+    left: 0;
+    img {
+        border-radius: 0 8px 8px 0;
+        padding-left: 48px;
+    }
 }
 
 #pv-next-area {
-	right: 0;
-	img {
-		border-top-left-radius: 8px;
-		border-bottom-left-radius: 8px;
-		padding-right: 48px;
-	}
+    right: 0;
+    img {
+        border-radius: 8px 0 0 8px;
+        padding-right: 48px;
+    }
 }
 
 #pv-buttons {
-	list-style: none;
-	list-style-image: none;
-	margin: 0;
-	padding: 0;
+    list-style: none;
+    list-style-image: none;
+    margin: 0;
+    padding: 0;
 
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
-	img + span, img + input {
-		margin-left: 6px;
-	}
-	input {
-		background-color: rgba(255,255,255,0.1);
-		border: none;
-		color: #ccc;
-	}
+    img {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        padding: 12px
+    }
 
-	.bar-label {
-		display: block;
-		color: #ccc;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
-	}
+    .bar-label {
+        display: block;
+        color: @col-text-primary-white;
+        height: 48px;
+        line-height: 48px;
+        padding: 0 12px;
+        opacity: 0.7;
+        .transition(all 0.2s ease-in-out);
+    }
 
-	.bar-highlight {
-		background-color: rgba(255,255,255,0.1);
-		opacity: 1.0;
-	}
+    .bar-button {
+        display: block;
+        line-height: 48px;
+        opacity: 0.7;
+        cursor: pointer;
+        .transition(all 0.2s ease-in-out);
 
-	@bar-sep-border: 1px solid rgba(255,255,255,0.08);
+        &:hover {
+            opacity: 1.0;
+            background-color: rgba(255,255,255,0.1);
+        }
+    }
 
-	.bar-button {
-		.bar-label;
-		cursor: pointer;
-		&:hover, &.hover {
-			.bar-highlight;
-		}
-	}
+    .bar-left {
+        float: left;
+    }
 
-	.bar-left {
-		float: left;
-		border-right: @bar-sep-border;
-	}
-
-	.bar-right {
-		float: right;
-		border-left: @bar-sep-border;
-	}
+    .bar-right {
+        float: right;
+    }
 }
 
 #pv-bottombar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	height: 32px;
-	left: 0;
-	bottom: 0;
-	background-color: rgb(27,27,27);
-	border-top: 1px solid rgb(45,45,45);
-
+    position: fixed;
+    z-index: 5;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgb(27,27,27);
+    // box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
 }
 
 #pv-overlay.fullscreen {
 
-	#pv-bottombar {
-		opacity: 0.5;
-	}
+    #pv-bottombar {
+        opacity: 0.5;
+    }
 }
 
 @media only screen and (max-width: 700px) {
 #pv-prev-area, #pv-next-area, #pv-close-area {
-	display: none !important;
+    display: none !important;
 }
 }

src/_h5ai/client/css/inc/qrcode.less

@@ -1,16 +0,0 @@
-
-#qrcode {
-	display: none;
-	position: fixed;
-	right: 16px;
-	bottom: 50px;
-	z-index: 10;
-
-	background-color: @col-widget-back;
-	border: @border-widget;
-	padding: 8px;
-
-	canvas {
-		display: block;
-	}
-}

src/_h5ai/client/css/inc/responsive.less

@@ -1,56 +1,31 @@
 
 @media only screen and (max-width: 700px) {
-#topbar {
-	.crumb {
-		display: none;
-	}
-	.current {
-		display: block;
-	}
-}
-#view.view-details {
-	.header .label, .item .label {
-		margin-right: 80px !important;
-	}
-	.header .date, .item .date {
-		display: none;
-	}
-}
-#view.view-icons {
-	padding: 0;
-}
-#bottombar {
-	.center {
-		display: none;
-	}
-}
-}
-
-@media only screen and (max-width: 500px) {
-body {
-	margin: 8px;
-}
-#tree {
-	display: none !important;
-}
+    #crumbbar {
+        .crumb:not(.active) {
+            display: none;
+        }
+        .crumb.active .sep {
+            width: 0;
+        }
+    }
+    #view.view-details {
+        .header .label, .item .label {
+            margin-right: 80px !important;
+        }
+        .header .date, .item .date {
+            display: none;
+        }
+    }
+    #tree, #info {
+        display: none !important;
+    }
 }
 
 @media print {
-a[href]:after {
-	content: "";
-}
-#topbar {
-	position: static;
-	margin-bottom: 2em;
-	.view, #download {
-		display: none;
-	}
-}
-#bottombar {
-	position: static;
-	margin-top: 2em;
-}
-#tree, #sidebar {
-	display: none !important;
-}
+    a[href]:after {
+        content: "" !important;
+    }
+    #toolbar, #download, #sidebar, #tree, #info {
+        display: none !important;
+    }
 }

src/_h5ai/client/css/inc/sidebar.less

@@ -1,125 +1,129 @@
 
 #sidebar {
-	position: fixed;
-	right: -220px;
-	width: 200px;
-	top: 31px;
-	height: 100%;
-	z-index: 3;
-	overflow: auto;
-	padding: 8px;
-	background-color: @col-widget-back;
-	border-left: @border-widget;
+    display: none;
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 0;
+    background: #fafafa;
+    border-right: 1px solid rgba(0,0,0,0.08);
 }
 
 #settings {
+    padding: 16px;
 
-	.block {
-		display: block;
-		margin: 12px 0;
-	}
+    .block {
+        display: block;
+        margin: 0 0 24px 0;
+        width: 168px;
 
-	a, a:active, a:visited, span.element {
-		color: @col;
-		cursor: pointer;
-		text-decoration: none;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
+        h1 {
+            font-size: 1em;
+            margin: 2px 0 6px 0;
+        }
+    }
 
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
+    .button {
+        display: inline-block;
+        margin: 4px;
+        border-radius: 2px;
+        color: @col;
+        cursor: pointer;
+        .transition(all 0.2s ease-in-out);
 
-		&:hover, &.hover {
-			opacity: 1.0;
-			background: @col-widget-back-highlight;
-		}
-	}
+        &:hover {
+            background: rgba(0,0,0,0.03);
+        }
 
-	.current {
-		a, span.element {
-			opacity: 1.0;
-			background: @col-widget-back-highlight;
-		}
-	}
+        &.active {
+            background: rgba(0,0,0,0.03);
+            box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
+        }
 
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
+        img {
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+        }
+    }
 
-	.view {
-		display: inline-block;
-		margin: 0 4px 0 0;
-	}
+    .select {
+        background: transparent;
+        overflow: hidden;
+        border-radius: 2px;
+        outline: 0;
+        width: 160px;
+        margin: 4px;
+        line-height: 48px;
+    }
 
-	.select {
-		background-color: @col-widget-back-highlight;
-		width: 175px;
-		overflow: hidden;
-	}
+    input, select {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        font-family: @font-family;
+        font-size: @font-size;
+        font-weight: @font-weight;
+        color: @col;
+        background: transparent;
+        width: 100%;
+        border: 0 solid #000;
+        cursor: pointer;
+        outline: 0;
 
-	input, select {
-		-moz-appearance: none;
-		-ms-appearance: none;
-		-webkit-appearance: none;
-		font-family: @font-family;
-		font-size: 13px;
-		font-weight: @font-weight;
-		color: @col;
-		background: @col-widget-back;
-		width: 100%;
-		height: 30px;
-		line-height: 30px;
-		border: 0 solid #000;
-		outline: none;
-		cursor: pointer;
-	}
+        &:hover {
+            background: rgba(0,0,0,0.03);
+        }
+    }
 
-	select {
-		width: 200px;
-		padding: 0 4px;
-	}
+    select {
+        width: 182px;
+        padding: 0 8px;
+        height: 48px;
+        line-height: 48px;
+    }
 
-	input[type='range'] {
-		border-radius: 2px;
-		width: 64px;
-		margin: 0 0 4px 12px;
-		padding: 0 2px;
-		vertical-align: middle;
-	}
+    input[type='range'] {
+        border-radius: 2px;
+        width: 144px;
+        margin: 4px;
+        padding: 8px;
+        vertical-align: middle;
+        height: 32px;
+        line-height: 32px;
+    }
 
-	.range-track() {
-		-moz-appearance: none;
-		-ms-appearance: none;
-		-webkit-appearance: none;
-		border-width: 0;
-		border-radius: 2px;
-		background: @col-range-back;
-		height: 2px;
-	}
+    .range-track() {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        border-width: 0;
+        border-radius: 20px;
+        background: @col-range-back;
+        height: 6px;
+    }
 
-	.range-thumb() {
-		-moz-appearance: none;
-		-ms-appearance: none;
-		-webkit-appearance: none;
-		border-width: 0;
-		border-radius: 2px;
-		background: @col-range-thumb;
-		width: 12px;
-		height: 12px;
-	}
+    .range-thumb() {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        border-width: 0;
+        border-radius: 20px;
+        background: @col-range-thumb;
+        width: 16px;
+        height: 16px;
+    }
 
-	input[type='range']::-webkit-slider-runnable-track { .range-track; }
-	input[type='range']::-moz-range-track { .range-track; }
-	input[type='range']::-ms-track { .range-track; }
-	input[type='range']::-ms-fill-lower { .range-track; }
-	input[type='range']::-ms-fill-upper { .range-track; }
+    input[type='range']::-webkit-slider-runnable-track { .range-track; }
+    input[type='range']::-moz-range-track { .range-track; }
+    input[type='range']::-ms-track { .range-track; }
+    input[type='range']::-ms-fill-lower { .range-track; }
+    input[type='range']::-ms-fill-upper { .range-track; }
 
-	input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
-	input[type='range']::-moz-range-thumb { .range-thumb; }
-	input[type='range']::-ms-thumb { .range-thumb; }
+    input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
+    input[type='range']::-moz-range-thumb { .range-thumb; }
+    input[type='range']::-ms-thumb { .range-thumb; }
+
+    #view-size {
+        display: block;
+    }
 }

src/_h5ai/client/css/inc/topbar.less

@@ -1,87 +1,127 @@
 
 #topbar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	min-height: 30px;
-	left: 0;
-	top: 0;
-	background-color: @col-widget-back;
-	border-bottom: @border-widget;
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+
+    background: @col-lightgray;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    z-index: 1;
 }
 
 
-.topbar-highlight {
-	background-color: @col-widget-back-highlight;
-	opacity: 1.0;
-}
+#backlink {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 99;
+    text-align: center;
+    padding: 6px 12px;
+    max-width: 80px;
+    overflow: hidden;
+    height: 36px;
+    .transition(all 0.2s ease-in-out);
 
-.topbar-hover {
-	.topbar-highlight;
-	color: @col-hover;
-}
+    &, &:active, &:visited {
+        color: @col-text-disabled-black;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    &:hover {
+        color: @col-hover;
+        background: rgba(0,0,0,0.03);
+    }
+    &:focus {
+        outline: 0;
+    }
 
-.topbar-left {
-	float: left;
-	border-right: @border-widget-sep;
-}
-
-.topbar-right {
-	float: right;
-	border-left: @border-widget-sep;
+    div {
+        line-height: 18px;
+        white-space: nowrap;
+    }
 }
 
 
-#navbar {
-	list-style: none;
-	list-style-image: none;
-	margin: 0;
-	padding: 0;
+#toolbar {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+    height: 48px;
 
-	a, a:active, a:visited, span.element {
-		color: @col;
-		cursor: pointer;
-		text-decoration: none;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
+    .tool {
+        display: inline-block;
+        cursor: pointer;
 
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
+        img {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+            .transition(all 0.2s ease-in-out);
+        }
 
-		&:hover, &.hover {
-			.topbar-hover;
-		}
-	}
-	.current {
-		a, span.element {
-			.topbar-highlight;
-		}
-	}
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
-	img + span, img + input {
-		margin-left: 6px;
-	}
-	.crumb {
-		.topbar-left;
-		.hint {
-			margin-left: 8px;
-			font-style: italic;
-			color: #999;
-		}
-		img.hint {
-			opacity: 0.8;
-			width: 12px;
-			height: 12px;
-		}
-	}
-	.view {
-		.topbar-right;
-	}
+        &:hover img {
+            background: rgba(0,0,0,0.03);
+        }
+    }
+}
+
+
+#crumbbar {
+    overflow: hidden;
+    flex: 1 1 auto;
+    order: 2;
+    height: 48px;
+    font-size: 16px;
+    padding: 0 8px;
+    // border-left: 1px solid rgba(0,0,0,0.05);
+
+    a, a:active, a:visited {
+        color: @col;
+        cursor: pointer;
+        text-decoration: none;
+
+        &.active {
+            font-weight: bold;
+            color: @col-text-highlight;
+        }
+        &:hover {
+            color: @col-hover;
+        }
+        &:focus {
+            outline: 0;
+        }
+    }
+    .crumb {
+        display: inline-block;
+        .transition(all 0.2s ease-in-out);
+    }
+    .sep {
+        width: 24px;
+        height: 24px;
+        padding: 12px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
+    .label {
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 8px;
+    }
+    .hint {
+        width: 16px;
+        height: 16px;
+        padding: 16px 4px 16px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
 }

src/_h5ai/client/css/inc/tree.less

@@ -1,116 +1,75 @@
 
 #tree {
-	display: none;
-	position: fixed;
-	left: 0;
-	top: 31px;
-	height: 100%;
-	z-index: 3;
-	overflow: auto;
-	padding: 8px;
-	background-color: @col-widget-back;
-	border-right: @border-widget;
+    display: none;
 
-	.sp-scrollbar {
-		width: 6px;
-		background-color: @col-sb-back;
-		cursor: pointer;
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 1;
 
-		.sp-thumb {
-			background-color: @col-sb-thumb;
-		}
-		&.active .sp-thumb {
-			background-color: @col-sb-thumb-active;
-		}
-	}
+    padding: 16px 16px 16px 8px;
+    border-right: 1px solid @col-border;
+    white-space: nowrap;
+    max-width: 250px;
+    overflow-x: hidden;
+    font-weight: lighter;
 
-	.indicator {
-		position: relative;
-		top: 2px;
-		display: inline-block;
-		width: 16px;
-		height: 22px;
-		float: left;
-		opacity: 0.7;
-		cursor: pointer;
+    a, a:active, a.visited {
+        display: inline-block;
+        padding: 3px 0;
+        text-decoration: none;
+        color: @col;
 
-		img {
-			width: 12px;
-			height: 12px;
-			.transition(all 0.2s ease-in-out);
-		}
-		&.open {
-			img {
-				.transform(rotate(90deg));
-			}
-		}
-		&.unknown {
-			opacity: 0.3;
-		}
-		&.none {
-			opacity: 0;
-			cursor: inherit;
-		}
-	}
-	a, a:active, a.visited {
-		display: block;
-		height: 1.231em;
-		line-height: 1.231em;
-		margin-left: 14px;
-		padding: 4px 6px;
-		color: #555;
-		border: 1px solid rgba(0,0,0,0);
-		border-radius: 3px;
-		text-decoration: none;
-		opacity: 0.7;
+        &:hover {
+            color: @col-hover;
+        }
+    }
 
-		&:hover, &.hover {
-			color: @col-hover;
-			background-color: @col-widget-back-hover;
-			opacity: 1;
-		}
-	}
-	.icon {
-		position: relative;
-		top: -2px;
-		margin-right: 6px;
+    .active > a {
+        font-weight: bold;
+    }
 
-		img {
-			width: 16px;
-			height: 16px;
-		}
-	}
-	.hint {
-		margin-left: 6px;
-		font-size: 0.9em;
-		color: #ccc;
-	}
-	.content {
-		list-style: none;
-		margin: 0;
-		padding: 0 0 0 24px;
-	}
-	.summary {
-		margin: 0 0 0 24px;
-		color: #999;
-		font-style: italic;
-	}
-	.current {
-		> a, > a:active, > a:visited {
-			background-color: @col-widget-back-sel;
-			border-color: @col-widget-sep;
-			opacity: 1;
-		}
-	}
-	.error {
-		> a, > a:active, > a:visited {
-			color: #999;
-			&:hover, &.hover {
-				color: @col-hover;
-			}
-		}
-		.hint {
-			color: #c55;
-		}
-	}
+    .indicator {
+        display: inline-block;
+        position: relative;
+        top: -2px;
+        cursor: pointer;
+
+        img {
+            width: 20px;
+            height: 20px;
+            .transition(all 0.2s ease-in-out);
+        }
+        &.open {
+            img {
+                .transform(rotate(90deg));
+            }
+        }
+        &.unknown {
+            opacity: 0.3;
+        }
+        &.none {
+            opacity: 0;
+            cursor: inherit;
+        }
+    }
+
+    .icon {
+        position: relative;
+        top: -2px;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .label {
+        margin: 0 0 0 4px;
+    }
+
+    .content {
+        list-style: none;
+        margin: 0;
+        padding: 0 0 0 20px;
+    }
 }

src/_h5ai/client/css/inc/view-details.less

@@ -1,122 +1,118 @@
 
 .view-details-sized(@size) {
 
-	li {
+    .item {
+        .label, .date, .size {
+            line-height: @size + 14px;
+        }
+    }
 
-		&.item {
+    .square {
+        width: @size;
+        height: @size;
 
-			a, a:active, a:visited {
-				height: @size + 6px;
-			}
+        img {
+            width: @size;
+            height: @size;
+        }
+    }
 
-			.label, .date, .size {
-				padding: ((@size - 16px)/2) 8px;
-			}
-		}
-
-		.icon.square {
-			width: @size;
-
-			img {
-				width: @size;
-				height: @size;
-			}
-		}
-
-		.label {
-			margin: 0 230px 0 (@size + 16px);
-		}
-	}
+    .label {
+        margin: 0 246px 0 (@size + 32px);
+    }
 }
 
 
 #view.view-details {
 
-	li {
+    margin: 16px;
 
-		&.header {
-			display: list-item;
-		}
+    #items {
+        .rounded();
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    }
 
-		&.item {
+    .header {
+        position: relative;
+        white-space: nowrap;
+        display: list-item;
+        background: #fafafa;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
+        border-radius: 2px 2px 0 0;
 
-			a, a:active, a:visited {
-				border-bottom: 1px solid @item-border-col-sep;
+        .label, .date, .size {
+            line-height: 46px;
+            opacity: 0.4;
+            outline: 0;
+            .transition(all 0.2s ease-in-out);
 
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
+            &:hover {
+                opacity: 1;
+                color: @col-hover;
+            }
+        }
 
-			// needs to be here, to not conflict with header fields
-			.icon {
-				padding: 8px;
-			}
-		}
+        .sort {
+            display: none;
+            position: relative;
+            top: -2px;
+            width: 20px;
+            height: 20px;
+            padding: 0 4px;
+        }
 
-		.icon.square {
-			display: inline-block;
-			position: absolute;
-			left: 0;
-			top: -4px;
-		}
+        .ascending .sort {
+            display: inline;
+        }
 
-		.date {
-			position: absolute;
-			right: 100px;
-			top: 0;
-		}
+        .descending .sort {
+            display: inline;
+            .transform(rotate(180deg));
+        }
+    }
 
-		.size {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
+    .item {
+        overflow: hidden;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
 
-		.selector {
-			margin-top: -1px;
-		}
-	}
+        &:hover {
+            .raised();
+            z-index: 1;
+        }
 
-	.view-details-sized(@icon-size);
+        &:last-child {
+            border-radius: 0 0 2px 2px;
+        }
+    }
 
-	&.size-16 {
-		.view-details-sized(16px)
-	}
+    .square {
+        display: inline-block;
+        position: absolute;
+        left: 16px;
+        top: -1px;
+        padding: 8px;
 
-	&.size-24 {
-		.view-details-sized(24px)
-	}
+        .thumb {
+            .rounded();
+            box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
+        }
+    }
 
-	&.size-32 {
-		.view-details-sized(32px)
-	}
+    .label, .date, .size {
+        padding: 0 8px;
+    }
 
-	&.size-48 {
-		.view-details-sized(48px)
-	}
+    .date {
+        position: absolute;
+        right: 116px;
+        top: 0;
+    }
 
-	&.size-64 {
-		.view-details-sized(64px)
-	}
+    .size {
+        position: absolute;
+        right: 16px;
+        top: 0;
+    }
 
-	&.size-96 {
-		.view-details-sized(96px)
-	}
-
-	&.size-128 {
-		.view-details-sized(128px)
-	}
-
-	&.size-192 {
-		.view-details-sized(192px)
-	}
-
-	&.size-256 {
-		.view-details-sized(256px)
-	}
-
-	&.size-384 {
-		.view-details-sized(384px)
-	}
+    .view-details-sized(16px)
 }

src/_h5ai/client/css/inc/view-grid.less

@@ -1,113 +1,54 @@
 
 .view-grid-sized(@size) {
 
-	li {
+    .label {
+        line-height: @size;
+    }
 
-		&.item {
+    .square {
+        width: @size;
+        height: @size;
 
-			a, a:active, a:visited {
-				width: @size + 182px;
-				height: @size + 6px;
-			}
-
-			.label, .date, .size {
-				padding: ((@size - 16px)/2) 8px;
-			}
-		}
-
-		.icon.square {
-			width: @size;
-
-			img {
-				width: @size;
-				height: @size;
-			}
-		}
-
-		.label {
-			margin: 0 0 0 (@size + 8px);
-		}
-	}
+        img {
+            width: @size;
+            height: @size;
+        }
+    }
 }
 
 
 #view.view-grid {
 
-	li {
+    margin: 8px;
 
-		&.item {
-			float: left;
-			margin: 2px;
+    .item {
+        .card();
+        .rounded();
+        overflow: hidden;
+        float: left;
+        margin: 8px;
 
-			a, a:active, a:visited {
-				border: 1px solid rgba(0,0,0,0);
+        &:hover {
+            .raised();
+        }
+    }
 
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
+    .square {
+        display: inline-block;
+        vertical-align: top;
+        background: #fafafa;
+    }
 
-			// needs to be here, to not conflict with header fields
-			.icon {
-				padding: 8px;
-			}
-		}
+    .label {
+        display: inline-block;
+        vertical-align: top;
+        width: 180px;
+        padding: 0 8px;
+    }
 
-		.icon.square {
-			display: inline-block;
-			position: absolute;
-			left: 0;
-			top: -4px;
-		}
+    .date, .size {
+        display: none;
+    }
 
-		.label {
-			display: block;
-		}
-
-		.date, .size {
-			display: none;
-		}
-	}
-
-	.view-grid-sized(@icon-size);
-
-	&.size-16 {
-		.view-grid-sized(16px)
-	}
-
-	&.size-24 {
-		.view-grid-sized(24px)
-	}
-
-	&.size-32 {
-		.view-grid-sized(32px)
-	}
-
-	&.size-48 {
-		.view-grid-sized(48px)
-	}
-
-	&.size-64 {
-		.view-grid-sized(64px)
-	}
-
-	&.size-96 {
-		.view-grid-sized(96px)
-	}
-
-	&.size-128 {
-		.view-grid-sized(128px)
-	}
-
-	&.size-192 {
-		.view-grid-sized(192px)
-	}
-
-	&.size-256 {
-		.view-grid-sized(256px)
-	}
-
-	&.size-384 {
-		.view-grid-sized(384px)
-	}
+    .view-grid-sized(48px);
 }

src/_h5ai/client/css/inc/view-icons.less

@@ -1,115 +1,55 @@
 
 .view-icons-sized(@size) {
 
-	li {
+    .item {
+        width: @size * 4/3;
+    }
 
-		&.item {
+    .landscape {
+        width: @size * 4/3;
+        height: @size;
 
-			a, a:active, a:visited {
-				width: @size * 2;
-				height: @size + 72px;
-			}
-		}
+        img {
+            width: @size;
+            height: @size;
+        }
 
-		.icon.rational {
-			height: @size;
-
-			img {
-				width: @size;
-				height: @size;
-			}
-			img.thumb {
-				width: auto;
-				height: auto;
-				max-width: @size * 2;
-				max-height: @size;
-			}
-		}
-	}
+        .thumb {
+            width: @size * 4/3;
+        }
+    }
 }
 
 
 #view.view-icons {
 
-	li {
-		text-align: center;
+    margin: 8px;
 
-		&.item {
-			float: left;
-			margin: 8px;
+    .item {
+        .card();
+        .rounded();
+        overflow: hidden;
+        float: left;
+        margin: 8px;
 
-			a, a:active, a:visited {
-				padding: 8px;
-				min-width: 96px;
-				border: 1px solid rgba(0,0,0,0);
+        &:hover {
+            .raised();
+        }
+    }
 
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
-		}
+    .landscape {
+        display: block;
+        background: #fafafa;
+    }
 
-		.icon.rational {
-			display: block;
-			margin-bottom: 6px;
-		}
+    .label {
+        padding: 0 6px;
+        line-height: 24px;
+    }
 
-		.label {
-			text-align: center;
-			word-wrap: break-word;
-			white-space: normal;
-		}
+    .date, .size {
+        display: none;
+    }
 
-		.date, .size {
-			display: none;
-		}
-	}
-
-	.empty, .no-match {
-		margin: 0 120px;
-		padding: 16px;
-		height: 120px;
-	}
-
-	.view-icons-sized(@icon-size);
-
-	&.size-16 {
-		.view-icons-sized(16px);
-	}
-
-	&.size-24 {
-		.view-icons-sized(24px);
-	}
-
-	&.size-32 {
-		.view-icons-sized(32px);
-	}
-
-	&.size-48 {
-		.view-icons-sized(48px);
-	}
-
-	&.size-64 {
-		.view-icons-sized(64px);
-	}
-
-	&.size-96 {
-		.view-icons-sized(96px);
-	}
-
-	&.size-128 {
-		.view-icons-sized(128px);
-	}
-
-	&.size-192 {
-		.view-icons-sized(192px);
-	}
-
-	&.size-256 {
-		.view-icons-sized(256px);
-	}
-
-	&.size-384 {
-		.view-icons-sized(384px);
-	}
+    .view-icons-sized(96px);
 }

src/_h5ai/client/css/inc/view.less

@@ -1,197 +1,149 @@
 
 
-@item-border-col-sep: @col-border;
+html.drag-select, html.drag-select * {
+    cursor: move !important;
 
-@item-background-col-hover: rgba(0,0,0,0.02);
-@item-border-col-hover: @col-border;
-
-@item-background-col-sel: rgba(0,0,0,0.02);
-@item-border-col-sel: @col-border-strong;
-
-@icon-size: 48px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
 
 
 #selection-rect {
-	display: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 2;
-	border: 1px dashed @col-border-strong;
-	background-color: rgba(0,0,0,0.01);
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    border: 1px dashed @col-border-strong;
+    background: rgba(0,0,0,0.1);
 }
 
 
 #view {
-	display: none;
-	margin: 0 auto;
+    display: none;
 
-	a, a:active, a:visited {
-		color: #333;
-		cursor: pointer;
-		text-decoration: none;
-	}
+    a, a:active, a:visited {
+        display: block;
+        color: inherit;
+        cursor: pointer;
+        text-decoration: none;
+    }
 
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
 
-	li {
-		position: relative;
-		white-space: nowrap;
+    .header {
+        display: none;
+    }
 
-		&.header {
-			display: none;
-			font-size: 13px;
+    .item {
+        position: relative;
+        white-space: nowrap;
+        background: #fff;
 
-			a, a:active, a:visited {
-				padding: 6px 6px 18px 6px;
-				opacity: 0.4;
-				.transition(all 0.2s ease-in-out);
+        &:hover {
+            color: @col-hover;
+            background: @col-lightgray;
+            border-color: @col-border;
 
-				img {
-					display: none;
-					position: relative;
-					top: -2px;
-					width: 12px;
-					height: 12px;
-					padding: 0 8px;
-				}
-				&:hover {
-					color: #555;
-					opacity: 0.9;
-				}
-				&.ascending img.ascending {
-					display: inline;
-				}
-				&.descending img.descending {
-					display: inline;
-				}
-			}
-		}
+            .selector {
+                display: block;
+            }
+        }
 
-		&.item {
-			font-size: 15px;
+        &.selected:not(.selecting), &.selecting:not(.selected) {
+            color: @col-text-selected;
+            background: @col-back-selected;
 
-			a, a:active, a:visited {
-				display: block;
-				overflow: hidden;
+            &:hover {
+                color: @col-text-selected;
+                background: @col-back-selected;
+            }
 
-				&:hover, &.hover {
-					color: @col-hover;
-					background-color: @item-background-col-hover;
-					border-color: @item-border-col-hover;
-				}
+            .selector {
+                display: block;
+                opacity: 1;
+            }
+        }
+    }
 
-				&:hover {
-					.selector {
-						display: block;
-					}
-				}
-			}
+    .folder-parent {
 
-			&.selected:not(.selecting), &.selecting:not(.selected) {
+        .date, .size {
+            display: none;
+        }
+    }
 
-				a, a:active, a:visited {
-					background-color: @item-background-col-sel;
-					border-color: @item-border-col-sel;
+    .icon {
+        display: none;
+        text-align: center;
 
-					&:hover, &.hover {
-						background-color: @item-background-col-sel;
-						border-color: @item-border-col-sel;
-					}
-				}
+        img {
+            max-width: @max-icon-size;
+            max-height: @max-icon-size;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
 
-				.selector {
-					display: block;
-					// border-color: @col-border-stronger;
+        .thumb {
+            max-width: none;
+            max-height: none;
+        }
+    }
 
-					img {
-						display: block;
-					}
-				}
-			}
-		}
+    .label {
+        display: block;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
 
-		&.folder-parent {
+    .date {
+        text-align: right;
+        width: 130px;
+    }
 
-			.date, .size {
-				display: none;
-			}
-		}
+    .size {
+        text-align: right;
+        width: 80px;
+    }
 
-		.icon {
-			display: none;
-			text-align: center;
+    .selector {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 22px;
+        height: 22px;
+        background: @col-back-selected;
+        cursor: pointer;
+        border-radius: 0 0 2px 0;
+        opacity: 0.6;
 
-			img {
-				vertical-align: top;
-			}
+        &:hover {
+            opacity: 0.8;
+        }
 
-			.thumb {
-				box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
-			}
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
 
-			&.rational {
-				.thumb {
-					padding: 2px;
-					border-radius: 3px;
-				}
-			}
-		}
-
-		.label {
-			display: block;
-			overflow: hidden;
-			text-align: left;
-			text-overflow: ellipsis;
-		}
-
-		.date {
-			text-align: right;
-			width: 130px;
-		}
-
-		.size {
-			text-align: right;
-			width: 80px;
-		}
-
-		.selector {
-			display: none;
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 18px;
-			height: 18px;
-			background-color: #fff;
-			border: 1px solid @col-border-strong;
-			cursor: pointer;
-			.transition(all 0.2s ease-in-out);
-
-			&:hover {
-				border-color: @col-border-stronger;
-			}
-
-			img {
-				display: none;
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-
-	.empty, .no-match {
-		margin: 50px 0;
-		text-align: center;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
-	}
-
-	.no-match {
-		display: none;
-	}
+    .empty, .no-match {
+        display: none;
+        margin-top: 36px;
+        text-align: center;
+        color: @col-border;
+        font-size: 5em;
+        font-weight: bold;
+    }
 }

src/_h5ai/client/css/styles.less

@@ -2,15 +2,13 @@
 @import "lib/h5bp-normalize";
 @import "lib/h5bp-main-header";
 
-@import "inc/fonts";
 @import "inc/general";
 @import "inc/topbar";
-@import "inc/bottombar";
 @import "inc/sidebar";
 @import "inc/download";
 @import "inc/filter";
 @import "inc/tree";
-@import "inc/qrcode";
+@import "inc/info";
 @import "inc/preview";
 @import "inc/preview-aud";
 @import "inc/preview-img";
@@ -23,7 +21,7 @@
 @import "inc/view-details";
 @import "inc/view-icons";
 @import "inc/view-grid";
-// @import "inc/context-menu";
+@import "inc/contextmenu";
 @import "inc/fallback";
 
 @import "inc/responsive";
@@ -31,3 +29,5 @@
 @import "inc/h5ai-info";
 
 @import "lib/h5bp-main-footer";
+
+@import url(//fonts.googleapis.com/css?family=Roboto:300,400,700);

src/_h5ai/client/images/ascending.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-180,-626)">
-  <path id="path10839-9-9-8" style="block-progression:tb;text-indent:0;color:#555555;enable-background:new;text-transform:none;fill:#555555" d="m182 631v1c-0.00012 0.0104-0.00046 0.0208 0 0.0313 0.0112 0.25495 0.12858 0.50987 0.3125 0.6875l5.2188 5.2812 5.1875-5.2812c0.19-0.19 0.28-0.45 0.28-0.72v-1h-1c-0.26529 0-0.53058 0.0931-0.71875 0.28125l-3.75 3.8125-3.7812-3.8125c-0.19463-0.21074-0.46925-0.30316-0.75-0.28125h-1z"/>
- </g>
-</svg>

src/_h5ai/client/images/crumb.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-320,-626)">
-  <g id="use43045" transform="translate(200,108)">
-   <path id="path4421" style="block-progression:tb;text-indent:0;color:#555555;enable-background:new;text-transform:none;fill:#555555" d="m125.03 520h1c0.0104-0.00012 0.0208-0.00046 0.0313 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l5.2812 5.2188-5.2812 5.1875c-0.19 0.19-0.45 0.28-0.72 0.28h-1v-1c0-0.26529 0.0931-0.53058 0.28125-0.71875l3.8125-3.75-3.8125-3.7812c-0.21074-0.19463-0.30316-0.46925-0.28125-0.75v-1z"/>
-  </g>
- </g>
-</svg>

src/_h5ai/client/images/descending.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-200,-626)">
-  <path id="path10839-9-9-8-1" style="block-progression:tb;text-indent:0;color:#555555;enable-background:new;text-transform:none;fill:#555555" d="m202 637v-1c-0.00012-0.0104-0.00046-0.0208 0-0.0313 0.0112-0.25495 0.12858-0.50987 0.3125-0.6875l5.2188-5.2812 5.1875 5.2812c0.18819 0.18821 0.28125 0.45351 0.28125 0.7188v1h-1c-0.26529 0-0.53058-0.0931-0.71875-0.28125l-3.75-3.8125-3.7812 3.8125c-0.19463 0.21074-0.46925 0.30316-0.75 0.28125h-1z"/>
- </g>
-</svg>

src/_h5ai/client/images/download.svg

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-80,-648)">
-  <path id="rect4390-9" style="block-progression:tb;text-indent:0;color:#555555;text-transform:none;fill:#555555" d="m84.406 657a0.50005 0.50005 0 0 0 -0.3125 0.21875l-1 1.5a0.50005 0.50005 0 1 0 0.8125 0.5625l1-1.5a0.50005 0.50005 0 0 0 -0.5 -0.78zm7 0a0.50005 0.50005 0 0 0 -0.3125 0.78125l1 1.5a0.50005 0.50005 0 1 0 0.8125 -0.5625l-1-1.5a0.50005 0.50005 0 0 0 -0.5 -0.22z"/>
-  <g id="g4555" transform="translate(-80,110)">
-   <path id="path3613" style="block-progression:tb;text-indent:0;color:#555555;text-transform:none;fill:#555555" d="m167 539v5.5625l-1.2812-1.2812c-0.19-0.19-0.45-0.28-0.72-0.28h-1v1c0.00001 0.2653 0.0931 0.53058 0.28125 0.71875l3 3 0.28125 0.28125h0.875l0.28125-0.28125 3-3c0.19-0.19 0.28-0.45 0.28-0.72v-1h-1c-0.2653 0.00001-0.53059 0.0931-0.71875 0.28125l-1.28 1.28v-5.56z"/>
-   <path id="rect11668-7-5" style="color:#555555;fill-rule:evenodd;fill:#555555" d="m163 549v4h10v-4zm3.3438 1.4375c0.0208-0.001 0.0417-0.001 0.0625 0 0.29096-0.0556 0.59898 0.20383 0.59375 0.5v0.0625h2v-0.0625c-0.004-0.26416 0.23582-0.50712 0.5-0.50712s0.50373 0.24296 0.5 0.50712v0.06c0 0.54535-0.45465 1-1 1h-2c-0.54535 0-1-0.45465-1-1v-0.0625c-0.0108-0.21706 0.13723-0.43234 0.34375-0.5z"/>
-  </g>
- </g>
-</svg>

src/_h5ai/client/images/fallback/ar.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 6,6 6,90 90,90 90,24 72,6 z m 6,6 57.559322,0 L 84,26.576271 84,84 12,84 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect3031"
-     width="12"
-     height="24"
-     x="42"
-     y="12" />
-</svg>

src/_h5ai/client/images/fallback/aud.svg

@@ -1,48 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 12,6 12,90 84,90 84,24 66,6 z m 6,6 45.559322,0 L 78,26.576271 78,84 18,84 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-  <g
-     id="g3006"
-     transform="translate(2.5793231,-3.2660688)">
-    <path
-       transform="matrix(1.353211,0,0,0.99662165,-14.954127,-1.1081069)"
-       d="m 47.999999,65.830505 c 0,4.156177 -3.30854,7.525424 -7.389831,7.525424 -4.08129,0 -7.38983,-3.369247 -7.38983,-7.525424 0,-4.156176 3.30854,-7.525423 7.38983,-7.525423 4.081291,0 7.389831,3.369247 7.389831,7.525423 z"
-       sodipodi:ry="7.5254235"
-       sodipodi:rx="7.3898306"
-       sodipodi:cy="65.830505"
-       sodipodi:cx="40.610168"
-       id="path2984"
-       style="fill:#555555;fill-opacity:1;stroke:none"
-       sodipodi:type="arc" />
-    <rect
-       y="35.000015"
-       x="44"
-       height="30"
-       width="6"
-       id="rect2986"
-       style="fill:#555555;fill-opacity:1;stroke:none" />
-    <rect
-       transform="matrix(0.69076685,-0.72307756,0.72307756,0.69076685,0,0)"
-       y="55.90287"
-       x="5.1795917"
-       height="17.559322"
-       width="6"
-       id="rect2986-2"
-       style="fill:#555555;fill-opacity:1;stroke:none" />
-  </g>
-</svg>

src/_h5ai/client/images/fallback/bin.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 6,6 6,90 90,90 90,24 72,6 z m 6,6 57.559322,0 L 84,26.576271 84,84 12,84 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect3943-7-1-8"
-     width="12"
-     height="12"
-     x="42"
-     y="42" />
-</svg>

src/_h5ai/client/images/fallback/file.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 12,6 12,90 84,90 84,24 66,6 z m 6,6 45.559322,0 L 78,26.576271 78,84 18,84 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-</svg>

src/_h5ai/client/images/fallback/folder-page.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555"
-     d="m 0,18 0,72 96,0 0,-72 -30,0 -12,-12.0000002 -42,0 z m 12,12 54,0 18,18 0,36 -72,0 z m 66,54 0,-30 -18,0 0,-18 -42,0 0,48"
-     id="rect3845"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccccccccccc" />
-</svg>

src/_h5ai/client/images/fallback/folder-parent.svg

@@ -1,80 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="96"
-   height="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer9"
-     inkscape:label="status"
-     style="display:inline" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer10"
-     inkscape:label="devices" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer11"
-     inkscape:label="apps" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer13"
-     inkscape:label="places" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer14"
-     inkscape:label="mimetypes" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer15"
-     inkscape:label="emblems"
-     style="display:inline" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="g71291"
-     inkscape:label="emotes"
-     style="display:inline" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="g4953"
-     inkscape:label="categories"
-     style="display:inline" />
-  <g
-     inkscape:groupmode="layer"
-     transform="translate(-321.00015,-587)"
-     id="layer12"
-     inkscape:label="actions"
-     style="display:inline">
-    <g
-       id="g2994"
-       style="fill:#555555;fill-opacity:1"
-       transform="matrix(4.836272,0,0,4.836272,-1221.151,-2629.537)">
-      <path
-         style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
-         inkscape:connector-curvature="0"
-         id="path4762"
-         d="m 325,673 0,2 6.5,0 c 0.84027,0 1.5,0.65973 1.5,1.5 0,0.84027 -0.65973,1.5 -1.5,1.5 l -0.5,0 0,2 0.5,0 c 1.92115,0 3.5,-1.57885 3.5,-3.5 0,-1.92115 -1.57885,-3.5 -3.5,-3.5 l -6.5,0 z" />
-      <path
-         style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans"
-         inkscape:connector-curvature="0"
-         id="path4764"
-         d="m 328,670.0221 0,1 c 0,0.25689 -0.12983,0.52846 -0.3125,0.71875 l -2.28125,2.28125 2.28125,2.28125 c 0.18267,0.19029 0.3125,0.46186 0.3125,0.71875 l 0,1 -1,0 c -0.30945,0 -0.55232,-0.0903 -0.75,-0.28125 l -3.65625,-3.71875 3.65625,-3.71875 c 0.19768,-0.19095 0.44055,-0.28125 0.75,-0.28125 z"
-         sodipodi:nodetypes="ccccccccccccc" />
-    </g>
-  </g>
-</svg>

src/_h5ai/client/images/fallback/folder.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555"
-     d="m 0,18 0,72 96,0 0,-72 -30,0 -12,-12.0000002 -42,0 z"
-     id="rect3845"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccc" />
-</svg>

src/_h5ai/client/images/fallback/img.svg

@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 6,12 6,84 90,84 90,30 72,12 z m 6,6 57.559322,0 L 84,32.576271 84,78 12,78 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 30,36 45.968325,55.161989 60,48 78,72 18,72 z"
-     id="rect2985"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccc" />
-  <path
-     sodipodi:type="arc"
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="path2988"
-     sodipodi:cx="-39"
-     sodipodi:cy="53.237289"
-     sodipodi:rx="15"
-     sodipodi:ry="15"
-     d="m -24,53.237289 a 15,15 0 1 1 -30,0 15,15 0 1 1 30,0 z"
-     transform="matrix(0.4,0,0,0.4,81.6,14.705084)" />
-</svg>

src/_h5ai/client/images/fallback/txt.svg

@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 12,6 12,90 84,90 84,24 66,6 z m 6,6 45.559322,0 L 78,26.576271 78,84 18,84 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2985"
-     width="42"
-     height="6"
-     x="24"
-     y="24" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2985-6"
-     width="36"
-     height="6"
-     x="24"
-     y="42" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2985-5"
-     width="48"
-     height="6"
-     x="24"
-     y="60" />
-</svg>

src/_h5ai/client/images/fallback/vid.svg

@@ -1,126 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="96"
-   width="96"
-   viewBox="0 0 96 96"
-   version="1.1">
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 6,12 6,84 90,84 90,30 72,12 z m 6,6 57.559322,0 L 84,32.576271 84,78 12,78 z"
-     id="rect2984"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccc" />
-  <path
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     d="M 35.4,42 46.577823,57.968309 56.399999,52.00002 69,72 27,72 z"
-     id="rect2985"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccc" />
-  <path
-     sodipodi:type="arc"
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="path2988"
-     sodipodi:cx="-39"
-     sodipodi:cy="53.237289"
-     sodipodi:rx="15"
-     sodipodi:ry="15"
-     d="m -24,53.237289 a 15,15 0 1 1 -30,0 15,15 0 1 1 30,0 z"
-     transform="matrix(0.4,0,0,0.4,75.6,14.705084)" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2986"
-     width="6"
-     height="60"
-     x="18"
-     y="17.999989" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988"
-     width="6"
-     height="6"
-     x="12"
-     y="26.728817" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3"
-     width="6"
-     height="6"
-     x="12"
-     y="38.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-2"
-     width="6"
-     height="6"
-     x="12"
-     y="50.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-2-2"
-     width="6"
-     height="6"
-     x="12"
-     y="62.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-2-7"
-     width="6"
-     height="6"
-     x="12"
-     y="74.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2986-0"
-     width="6"
-     height="60"
-     x="72"
-     y="17.999989" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-4"
-     width="6"
-     height="6"
-     x="78"
-     y="26.728817" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-26"
-     width="6"
-     height="6"
-     x="78"
-     y="38.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-2-5"
-     width="6"
-     height="6"
-     x="78"
-     y="50.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-2-2-4"
-     width="6"
-     height="6"
-     x="78"
-     y="62.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-3-2-7-8"
-     width="6"
-     height="6"
-     x="78"
-     y="74.999985" />
-  <rect
-     style="fill:#555555;fill-opacity:1;stroke:none"
-     id="rect2988-6"
-     width="6"
-     height="6"
-     x="12"
-     y="15.000004" />
-</svg>

src/_h5ai/client/images/filter.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-140 -645.97)">
-  <path id="path27918" style="block-progression:tb;text-indent:0;color:#555555;enable-background:new;text-transform:none;fill:#555555" d="m146.51 647c-3.0289 0-5.5107 2.479-5.5107 5.5045 0 3.0254 2.4819 5.5045 5.5107 5.5045s5.5107-2.479 5.5107-5.5045c0-3.0254-2.4819-5.5045-5.5107-5.5045zm0 2.0089c1.9474 0 3.4995 1.5504 3.4995 3.4955s-1.5522 3.4955-3.4995 3.4955c-1.9474 0-3.4995-1.5504-3.4995-3.4955 0-1.9452 1.5522-3.4955 3.4995-3.4955z"/>
-  <path id="path27941" style="block-progression:tb;text-indent:0;color:#555555;enable-background:new;text-transform:none;fill:#555555" d="m149.81 655a1.0001 1.0001 0 0 0 -0.5 1.7188l4 4a1.0055 1.0055 0 1 0 1.4062 -1.4375l-4-4a1.0001 1.0001 0 0 0 -0.91 -0.28z"/>
- </g>
-</svg>

src/_h5ai/client/images/folder-open.svg

@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg7384"
-   height="16" width="16" viewBox="0 0 16 16"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="folder-open.svg">
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1871"
-     inkscape:window-height="1056"
-     id="namedview8"
-     showgrid="true"
-     inkscape:zoom="41.7193"
-     inkscape:cx="5.17455"
-     inkscape:cy="7.9663965"
-     inkscape:window-x="49"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg7384"
-     showguides="true"
-     inkscape:guide-bbox="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3004"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata90">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Gnome Symbolic Icon Theme</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <title
-     id="title9167">Gnome Symbolic Icon Theme</title>
-  <path
-     style="fill:#555555"
-     d="M 2,1 0,3 0,15 16,15 C 15.97721,10.841591 16.04788,7.153051 16,3 L 11,3 9,1 z M 1,5 16,5 16,7 2,7 1.4593408,14 1,14 z"
-     id="rect3845"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ccccccccccccccc" />
-</svg>

src/_h5ai/client/images/folder-page.svg

@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg7384"
-   height="16" width="16" viewBox="0 0 16 16"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="folder-page.svg">
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1871"
-     inkscape:window-height="1056"
-     id="namedview8"
-     showgrid="true"
-     inkscape:zoom="41.7193"
-     inkscape:cx="8.5832742"
-     inkscape:cy="6.2608582"
-     inkscape:window-x="49"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg7384"
-     showguides="true"
-     inkscape:guide-bbox="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3001"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata90">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Gnome Symbolic Icon Theme</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <title
-     id="title9167">Gnome Symbolic Icon Theme</title>
-  <path
-     style="fill:#555555"
-     d="M 0,3 0,15 16,15 16,3 11,3 9,1 2,1 z m 2,2 9,0 3,3 0,6 -12,0 z m 11,9 0,-5 -3,0 0,-3 -7,0 0,8"
-     id="rect3845"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccccccccccccccc" />
-</svg>

src/_h5ai/client/images/folder.svg

@@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg7384"
-   height="16" width="16" viewBox="0 0 16 16"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="folder.svg">
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1871"
-     inkscape:window-height="1056"
-     id="namedview8"
-     showgrid="true"
-     inkscape:zoom="41.7193"
-     inkscape:cx="10.567799"
-     inkscape:cy="6.7528912"
-     inkscape:window-x="49"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg7384"
-     showguides="true"
-     inkscape:guide-bbox="true">
-    <sodipodi:guide
-       orientation="-0.70710678,0.70710678"
-       position="-13.926408,17.473927"
-       id="guide2996" />
-    <inkscape:grid
-       type="xygrid"
-       id="grid3002"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata90">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Gnome Symbolic Icon Theme</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <title
-     id="title9167">Gnome Symbolic Icon Theme</title>
-  <path
-     style="fill:#555555"
-     d="M 0,3 0,15 16,15 16,3 11,3 9,1 2,1 z"
-     id="rect3845"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccccc" />
-</svg>

src/_h5ai/client/images/home.svg

@@ -1,71 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg7384"
-   height="16" width="16" viewBox="0 0 16 16"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="home.svg">
-  <defs
-     id="defs9" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1871"
-     inkscape:window-height="1056"
-     id="namedview7"
-     showgrid="true"
-     inkscape:zoom="41.7193"
-     inkscape:cx="7.8903899"
-     inkscape:cy="7.6562282"
-     inkscape:window-x="49"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg7384">
-    <inkscape:grid
-       type="xygrid"
-       id="grid2986"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata90">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Gnome Symbolic Icon Theme</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <title
-     id="title9167">Gnome Symbolic Icon Theme</title>
-  <g
-     id="layer13"
-     transform="translate(-562,-176)">
-    <path
-       id="rect5149"
-       style="color:#555555;fill:#555555;enable-background:new"
-       d="m 570,177 -8,6 2,0 0,7 3,0 1,0 1,0 1,0 6,0 0,-7 2,0 -3,-2.25 0,-2.75 -2,0 0,1.25 z"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccccccccccc" />
-  </g>
-</svg>

src/_h5ai/client/images/loading.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-241 -627)">
-  <path id="path4597" style="block-progression:tb;text-indent:0;color:#555555;text-transform:none;fill:#555555" d="m253.91 628.97a1.0001 1.0001 0 0 0 -0.125 0.0312 1.0001 1.0001 0 0 0 -0.78125 1v1.6875c-0.38225-0.57796-0.84927-1.0822-1.4062-1.5-1.1556-0.86677-2.532-1.2523-3.875-1.1875-0.19186 0.009-0.37223 0.0353-0.5625 0.0625-1.5222 0.21741-2.9782 1.023-3.9688 2.3438-1.9812 2.6414-1.4227 6.425 1.2188 8.4062s6.425 1.4227 8.4062-1.2188a1.0063 1.0063 0 0 0 0.19 -0.6 1.0063 1.0063 0 0 0 0 -0.15625v-0.84375h-0.8125-0.0937a1.0063 1.0063 0 0 0 -0.0937 0 1.0063 1.0063 0 0 0 -0.8125 0.40625c-1.3326 1.7767-3.817 2.1139-5.5938 0.78125-1.7767-1.3326-2.1139-3.817-0.78125-5.5938 1.3326-1.7767 3.817-2.1139 5.5938-0.78125 0.42946 0.32212 0.76954 0.73295 1.0312 1.1875h-1.4375a1.0001 1.0001 0 0 0 -1 1 1.0001 1.0001 0 0 0 0 0.21875v0.78125h0.84375 0.15625 4 1v-1-4a1.0001 1.0001 0 0 0 0 -0.1875v-0.8125h-0.8125a1.0001 1.0001 0 0 0 -0.28125 -0.0312z"/>
- </g>
-</svg>

src/_h5ai/client/images/page.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="12" width="12" viewBox="0 0 12 12"
-   version="1.1">
-  <g
-     id="layer14"
-     transform="matrix(0.68005728,0,0,0.70728284,-313.86652,-213.11037)">
-    <path
-       id="path1234"
-       style="text-indent:0;text-transform:none;block-progression:tb;color:#555555;fill:#555555"
-       d="m 479.17511,316.86104 0,-9.89704 -4.41139,-4.24158 -13.23419,-10e-6 10e-6,14.13863 m 2.94093,-10e-6 -10e-6,-11.3109 7.35234,10e-6 0,4.24159 4.41139,0 -1e-5,7.0693"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccccccccc" />
-  </g>
-</svg>

src/_h5ai/client/images/preview/close.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <g id="layer12" transform="translate(-60,-518)">
-  <g id="layer4-4-1" transform="translate(19,-242)">
-   <path id="path10839-9" style="block-progression:tb;text-indent:0;color:#bebebe;enable-background:new;text-transform:none;fill:#bebebe" d="m45 764h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l2.281 2.28 2.312-2.28c0.266-0.23 0.447-0.3 0.688-0.31h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-2.2812 2.2812 2.25 2.25c0.188 0.19 0.281 0.45 0.281 0.72v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-2.281-2.28-2.281 2.28c-0.188 0.19-0.454 0.28-0.719 0.28h-1v-1c-0.000003-0.26529 0.09306-0.53058 0.28125-0.71875l2.2812-2.25-2.281-2.28c-0.21-0.19-0.303-0.47-0.281-0.75v-1z"/>
-  </g>
- </g>
-</svg>

src/_h5ai/client/images/preview/fullscreen.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-40.984 -646.99)">
-  <path id="path12113" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m41.781 657a1.0001 1.0001 0 0 0 -0.781 1v4a1.0001 1.0001 0 0 0 1 1h4a1.0001 1.0001 0 1 0 0 -2h-3v-3a1.0001 1.0001 0 0 0 -1.2188 -1z"/>
-  <path id="path12147" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m46.875 656a1.0001 1.0001 0 0 0 -0.59375 0.28125l-5 5a1.0165 1.0165 0 1 0 1.4375 1.4375l5-5a1.0001 1.0001 0 0 0 -0.843 -1.72z"/>
-  <rect id="rect12919" style="color:#000000;enable-background:new;fill:#bdbdbd" height="1" width="1" y="662" x="41"/>
-  <path id="path12111" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m51.906 647a1.0011 1.0011 0 1 0 0.094 2h3v3a1.0001 1.0001 0 1 0 2 0v-4a1.0001 1.0001 0 0 0 -1 -1h-4a1.0001 1.0001 0 0 0 -0.09375 0z"/>
-  <rect id="rect12923" style="color:#000000;enable-background:new;fill:#bdbdbd" height="1" width="1" y="647" x="56"/>
-  <path id="path12925" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m55.875 647a1.0001 1.0001 0 0 0 -0.59375 0.28125l-5 5a1.0165 1.0165 0 1 0 1.4375 1.4375l5-5a1.0001 1.0001 0 0 0 -0.843 -1.72z"/>
-  <rect id="rect4479-2" style="color:#000000;fill:#bebebe" height="1" width="1" y="657" x="41"/>
-  <rect id="rect4479-2-9" style="color:#000000;fill:#bebebe" height="1" width="1" y="662" x="46"/>
-  <rect id="rect4479-2-9-9-0-8" style="color:#000000;fill:#bebebe" height="1" width="1" y="652" x="56"/>
-  <rect id="rect4479-2-9-9-0-8-1" style="color:#000000;fill:#bebebe" height="1" width="1" y="647" x="51"/>
- </g>
-</svg>

src/_h5ai/client/images/preview/next.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-120,-626)">
-  <path id="path10839-9-9" style="block-progression:tb;text-indent:0;color:#bebebe;enable-background:new;text-transform:none;fill:#bebebe" d="m125.03 628h1c0.0104-0.00012 0.0208-0.00046 0.0313 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l5.2812 5.2188-5.2812 5.1875c-0.19 0.19-0.45 0.28-0.72 0.28h-1v-1c0-0.26529 0.0931-0.53058 0.28125-0.71875l3.8125-3.75-3.8125-3.7812c-0.21074-0.19463-0.30316-0.46925-0.28125-0.75v-1z"/>
- </g>
-</svg>

src/_h5ai/client/images/preview/no-fullscreen.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-60.952 -646.98)">
-  <path id="path12113-8" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m71.781 647a1.0001 1.0001 0 0 0 -0.781 1v4a1.0001 1.0001 0 0 0 1 1h4a1.0001 1.0001 0 1 0 0 -2h-3v-3a1.0001 1.0001 0 0 0 -1.2188 -1z"/>
-  <path id="path12147-8" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m75.875 647a1.0001 1.0001 0 0 0 -0.59375 0.28125l-4 4a1.0165 1.0165 0 1 0 1.4375 1.4375l4-4a1.0001 1.0001 0 0 0 -0.843 -1.72z"/>
-  <rect id="rect12919-5" style="color:#000000;enable-background:new;fill:#bdbdbd" height="1" width="1" y="652" x="71"/>
-  <path id="rect13039" style="block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m61.906 653a1.0001 1.0001 0 0 0 -0.906 1v8a1.0001 1.0001 0 0 0 1 1h8a1.0001 1.0001 0 0 0 1 -1v-8a1.0001 1.0001 0 0 0 -1 -1h-8a1.0001 1.0001 0 0 0 -0.09375 0zm1.094 2h6v6h-6v-6z"/>
-  <path id="path13041" style="fill-rule:evenodd;block-progression:tb;text-indent:0;color:#000000;enable-background:new;text-transform:none;fill:#bebebe" d="m61.906 655a1.0011 1.0011 0 1 0 0.094 2h8a1.0001 1.0001 0 1 0 0 -2h-8a1.0001 1.0001 0 0 0 -0.09375 0z"/>
-  <rect id="rect4479-2-9-9-0-8-6" style="color:#000000;fill:#bebebe" height="1" width="1" y="652" x="76"/>
-  <rect id="rect4479-2-9-9-0-8-6-6" style="color:#000000;fill:#bebebe" height="1" width="1" y="647" x="71"/>
-  <rect id="rect4479-2-9-9-0-8-6-9" style="color:#000000;fill:#bebebe" height="1" width="1" y="662" x="70"/>
-  <rect id="rect4479-2-9-9-0-8-6-4" style="color:#000000;fill:#bebebe" height="1" width="1" y="662" x="61"/>
- </g>
-</svg>

src/_h5ai/client/images/preview/prev.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-100,-626)">
-  <path id="path10839-9-9-5" style="block-progression:tb;text-indent:0;color:#bebebe;enable-background:new;text-transform:none;fill:#bebebe" d="m111 628h-1c-0.0104-0.00012-0.0208-0.00046-0.0313 0-0.25495 0.0112-0.50987 0.12858-0.6875 0.3125l-5.2812 5.2188 5.2812 5.1875c0.18816 0.18819 0.45346 0.28125 0.71875 0.28125h1v-1c0-0.26529-0.0931-0.53058-0.28125-0.71875l-3.8125-3.75 3.8125-3.7812c0.21074-0.19463 0.30316-0.46925 0.28125-0.75v-1z"/>
- </g>
-</svg>

src/_h5ai/client/images/preview/raw.svg

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer12" transform="translate(-80,-648)">
-  <path id="rect4390-9" style="block-progression:tb;text-indent:0;color:#bebebe;text-transform:none;fill:#bebebe" d="m84.406 657a0.50005 0.50005 0 0 0 -0.3125 0.21875l-1 1.5a0.50005 0.50005 0 1 0 0.8125 0.5625l1-1.5a0.50005 0.50005 0 0 0 -0.5 -0.78zm7 0a0.50005 0.50005 0 0 0 -0.3125 0.78125l1 1.5a0.50005 0.50005 0 1 0 0.8125 -0.5625l-1-1.5a0.50005 0.50005 0 0 0 -0.5 -0.22z"/>
-  <g id="g4555" transform="translate(-80,110)">
-   <path id="path3613" style="block-progression:tb;text-indent:0;color:#000000;text-transform:none;fill:#bebebe" d="m167 539v5.5625l-1.2812-1.2812c-0.19-0.19-0.45-0.28-0.72-0.28h-1v1c0.00001 0.2653 0.0931 0.53058 0.28125 0.71875l3 3 0.28125 0.28125h0.875l0.28125-0.28125 3-3c0.19-0.19 0.28-0.45 0.28-0.72v-1h-1c-0.2653 0.00001-0.53059 0.0931-0.71875 0.28125l-1.28 1.28v-5.56z"/>
-   <path id="rect11668-7-5" style="color:#000000;fill-rule:evenodd;fill:#bebebe" d="m163 549v4h10v-4zm3.3438 1.4375c0.0208-0.001 0.0417-0.001 0.0625 0 0.29096-0.0556 0.59898 0.20383 0.59375 0.5v0.0625h2v-0.0625c-0.004-0.26416 0.23582-0.50712 0.5-0.50712s0.50373 0.24296 0.5 0.50712v0.06c0 0.54535-0.45465 1-1 1h-2c-0.54535 0-1-0.45465-1-1v-0.0625c-0.0108-0.21706 0.13723-0.43234 0.34375-0.5z"/>
-  </g>
- </g>
-</svg>

src/_h5ai/client/images/selected.svg

@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   height="16" width="16" viewBox="0 0 16 16"
-   id="svg2"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="select.svg">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1871"
-     inkscape:window-height="1056"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="20.85965"
-     inkscape:cx="16.301202"
-     inkscape:cy="5.1092914"
-     inkscape:window-x="49"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <path
-     d="M 11.4375,3.40625 6.5000001,8.34375 4.5625,6.40625 l -2.125,2.125 3.0000001,3 1.0625,1.0625 1.0625,-1.0625 5.9999999,-6 -2.125,-2.125 z"
-     style="fill:#555555"
-     id="path4"
-     inkscape:connector-curvature="0" />
-</svg>

src/_h5ai/client/images/settings.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata90">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title>Gnome Symbolic Icon Theme</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <title id="title9167">Gnome Symbolic Icon Theme</title>
- <g id="layer15" transform="translate(-441 -401)">
-  <path id="path35543-6-4" style="color:#555555;fill:#555555" d="m449 402c-0.22065 0-0.44081 0.0113-0.65625 0.0312l-0.40625 2.0938c-0.33446 0.0733-0.66305 0.17589-0.96875 0.3125l-1.5312-1.4688c-0.38863 0.23011-0.72695 0.51408-1.0625 0.8125l0.90625 1.9062c-0.22242 0.24899-0.42425 0.5225-0.59375 0.8125l-2.0938-0.28125c-0.17772 0.40877-0.30872 0.83637-0.40625 1.2812l1.8438 1c-0.0171 0.16809-0.0312 0.3274-0.0312 0.5s0.0142 0.33191 0.0312 0.5l-1.8438 1c0.0975 0.44488 0.22853 0.87248 0.40625 1.2812l2.0938-0.28125c0.1695 0.29 0.37133 0.56351 0.59375 0.8125l-0.90625 1.9062c0.33555 0.29842 0.67387 0.58239 1.0625 0.8125l1.5312-1.4688c0.3057 0.13661 0.63429 0.23916 0.96875 0.3125l0.40625 2.0938c0.21544 0.02 0.4356 0.0312 0.65625 0.0312s0.44081-0.0113 0.65625-0.0312l0.40625-2.0938c0.33446-0.0733 0.66305-0.17589 0.96875-0.3125l1.5312 1.4688c0.38863-0.23011 0.72695-0.51408 1.0625-0.8125l-0.90625-1.9062c0.22242-0.24899 0.42425-0.5225 0.59375-0.8125l2.0938 0.28125c0.17772-0.40877 0.30872-0.83637 0.40625-1.2812l-1.8438-1c0.0171-0.16809 0.0312-0.3274 0.0312-0.5s-0.0142-0.33191-0.0312-0.5l1.8438-1c-0.0975-0.44488-0.22853-0.87248-0.40625-1.2812l-2.0938 0.28125c-0.1695-0.29-0.37133-0.56351-0.59375-0.8125l0.90625-1.9062c-0.33555-0.29842-0.67387-0.58239-1.0625-0.8125l-1.5312 1.4688c-0.3057-0.13661-0.63429-0.23916-0.96875-0.3125l-0.40625-2.0938c-0.21544-0.02-0.4356-0.0312-0.65625-0.0312zm0 4c1.6568 0 3 1.3432 3 3s-1.3432 3-3 3-3-1.3432-3-3 1.3432-3 3-3z"/>
- </g>
-</svg>

src/_h5ai/client/images/size.svg

@@ -1,193 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   sodipodi:docname="size.svg"
-   height="16" width="16" viewBox="0 0 16 16"
-   id="svg7384"
-   inkscape:version="0.48.4 r9939"
-   version="1.1">
-  <metadata
-     id="metadata90">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Gnome Symbolic Icon Theme</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     inkscape:bbox-nodes="true"
-     inkscape:bbox-paths="true"
-     bordercolor="#666666"
-     borderopacity="1"
-     inkscape:current-layer="layer12"
-     inkscape:cx="0.26014369"
-     inkscape:cy="4.4087936"
-     gridtolerance="10"
-     inkscape:guide-bbox="true"
-     guidetolerance="10"
-     id="namedview88"
-     inkscape:object-nodes="false"
-     inkscape:object-paths="false"
-     objecttolerance="10"
-     pagecolor="#3a3b39"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     showborder="true"
-     showgrid="false"
-     showguides="true"
-     inkscape:snap-bbox="true"
-     inkscape:snap-bbox-midpoints="false"
-     inkscape:snap-global="true"
-     inkscape:snap-grids="true"
-     inkscape:snap-nodes="false"
-     inkscape:snap-others="false"
-     inkscape:snap-to-guides="true"
-     inkscape:window-height="1056"
-     inkscape:window-maximized="1"
-     inkscape:window-width="1871"
-     inkscape:window-x="49"
-     inkscape:window-y="24"
-     inkscape:zoom="22.627417"
-     borderlayer="true">
-    <inkscape:grid
-       empspacing="2"
-       enabled="true"
-       id="grid4866"
-       originx="200px"
-       originy="550px"
-       snapvisiblegridlinesonly="true"
-       spacingx="1px"
-       spacingy="1px"
-       type="xygrid"
-       visible="true" />
-  </sodipodi:namedview>
-  <title
-     id="title9167">Gnome Symbolic Icon Theme</title>
-  <defs
-     id="defs7386" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer9"
-     inkscape:label="status"
-     style="display:inline"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer10"
-     inkscape:label="devices"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer11"
-     inkscape:label="apps"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer13"
-     inkscape:label="places"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer14"
-     inkscape:label="mimetypes"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer15"
-     inkscape:label="emblems"
-     style="display:inline"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="g71291"
-     inkscape:label="emotes"
-     style="display:inline"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="g4953"
-     inkscape:label="categories"
-     style="display:inline"
-     transform="translate(-41.0002,-767)" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer12"
-     inkscape:label="actions"
-     style="display:inline"
-     transform="translate(-41.0002,-767)">
-    <path
-       inkscape:connector-curvature="0"
-       d="M 42.78125,776 A 1.0001,1.0001 0 0 0 42,777 l 0,4 a 1.0001,1.0001 0 0 0 1,1 l 4,0 a 1.0001,1.0001 0 1 0 0,-2 l -3,0 0,-3 a 1.0001,1.0001 0 0 0 -1.21875,-1 z"
-       id="path12113"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       inkscape:connector-curvature="0"
-       d="m 47.375,775.5 a 1.0001,1.0001 0 0 0 -0.59375,0.28125 l -4.5,4.5 a 1.016466,1.016466 0 1 0 1.4375,1.4375 l 4.5,-4.5 A 1.0001,1.0001 0 0 0 47.375,775.5 z"
-       id="path12147"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-    <rect
-       height="1"
-       id="rect12919"
-       style="color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
-       width="1"
-       x="42.000198"
-       y="781" />
-    <path
-       inkscape:connector-curvature="0"
-       d="M 50.90625,768 A 1.001098,1.001098 0 1 0 51,770 l 3,0 0,3 a 1.0001,1.0001 0 1 0 2,0 l 0,-4 a 1.0001,1.0001 0 0 0 -1,-1 l -4,0 a 1.0001,1.0001 0 0 0 -0.09375,0 z"
-       id="path12111"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-    <rect
-       height="1"
-       id="rect12923"
-       style="color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new"
-       width="1"
-       x="55.000198"
-       y="768" />
-    <path
-       inkscape:connector-curvature="0"
-       d="m 54.78125,768 a 1.0001,1.0001 0 0 0 -0.5,0.28125 l -4.5,4.46875 a 1.016466,1.016466 0 1 0 1.4375,1.4375 l 4.5,-4.46875 A 1.0001,1.0001 0 0 0 54.78125,768 z"
-       id="path12925"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#555555;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-    <rect
-       height="1"
-       id="rect4479-2"
-       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       width="1"
-       x="42.000198"
-       y="776" />
-    <rect
-       height="1"
-       id="rect4479-2-9"
-       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       width="1"
-       x="47.000198"
-       y="781" />
-    <rect
-       height="1"
-       id="rect4479-2-9-9-0-8"
-       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       width="1"
-       x="55.000198"
-       y="773" />
-    <rect
-       height="1"
-       id="rect4479-2-9-9-0-8-1"
-       style="color:#000000;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       width="1"
-       x="50.000198"
-       y="768" />
-  </g>
-</svg>

src/_h5ai/client/images/spinner.svg

@@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<svg
-	xmlns:svg="http://www.w3.org/2000/svg"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	version="1.1"
-	width="100"
-	height="100"
-	viewBox="-50 -50 100 100"
->
-	<defs>
-		<circle id="c" cx="0" cy="-35" r="10" style="fill:#ddd;stroke:#aaa;stroke-width:1" />
-	</defs>
-	<g>
-		<use xlink:href="#c" style="opacity:1;" />
-		<use xlink:href="#c" transform="rotate(45)" style="opacity:0.6;" />
-		<use xlink:href="#c" transform="rotate(90)" style="opacity:0.6;" />
-		<use xlink:href="#c" transform="rotate(135)" style="opacity:0.6;" />
-		<use xlink:href="#c" transform="rotate(180)" style="opacity:0.6;" />
-		<use xlink:href="#c" transform="rotate(225)" style="opacity:0.6;" />
-		<use xlink:href="#c" transform="rotate(270)" style="opacity:0.9;" />
-		<use xlink:href="#c" transform="rotate(315)" style="opacity:0.95;" />
-		<animateTransform
-			attributeName="transform" attributeType="XML"
-			type="rotate" begin="0s" dur="0.7s"
-			repeatCount="indefinite" calcMode="discrete"
-			values="0; 45; 90; 135; 180; 225; 270; 315"
-			keyTimes="0.0; 0.1; 0.2; 0.3; 0.4; 0.5; 0.6; 0.7"
-		/>
-	</g>
-</svg>

src/_h5ai/client/images/themes/README.md

@@ -0,0 +1,9 @@
+# Themes
+
+This directory will contain any themes you add. At the moment there are only
+icon themes supported. The folder structure is: `<theme-name>/<type>.<ext>`,
+with `<ext>` one of `svg`, `png` or `jpg`.
+
+To select a theme use the option `view > theme` in file `conf/options.json`.
+
+You will find the previously included icon themes [here](https://github.com/lrsjng/h5ai-themes).

src/_h5ai/client/images/themes/default/ar.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M5 3C3.9 3 3 3.9 3 5L3 19C3 20.1 3.9 21 5 21L19 21C20.1 21 21 20.1 21 19L21 5C21 3.9 20.1 3 19 3L5 3zM10 5L14 5 14 11 10 11 10 5z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/aud.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M6 2C4.9 2 4 2.9 4 4L4 20C4 21.1 4.9 22 6 22L18 22C19.1 22 20 21.1 20 20L20 4C20 2.9 19.1 2 18 2L6 2zM13.1 7.1C15.4 7.6 17 9.6 17 12 17 14.4 15.4 16.4 13.1 16.9L13.1 15.7C14.7 15.2 15.9 13.8 15.9 12 15.9 10.2 14.7 8.8 13.1 8.3L13.1 7.1zM12 7.6L12 16.4 9.2 13.7 7 13.7 7 10.3 9.2 10.3 12 7.6zM13.1 9.8C13.9 10.2 14.5 11 14.5 12 14.5 13 13.9 13.8 13.1 14.2L13.1 9.8z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/bin.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M5 3C3.9 3 3 3.9 3 5L3 19C3 20.1 3.9 21 5 21L19 21C20.1 21 21 20.1 21 19L21 5C21 3.9 20.1 3 19 3L5 3zM10.8 6L13.2 6C13.4 6 13.5 6.1 13.5 6.3L13.8 7.8C14.1 8 14.4 8.2 14.7 8.4L16.2 7.8C16.4 7.8 16.5 7.8 16.6 8L17.8 10C17.9 10.2 17.8 10.3 17.7 10.4L16.5 11.4C16.5 11.6 16.5 11.8 16.5 12 16.5 12.2 16.5 12.4 16.5 12.6L17.7 13.6C17.8 13.7 17.9 13.8 17.8 14L16.6 16C16.5 16.2 16.4 16.3 16.2 16.2L14.7 15.6C14.4 15.8 14.1 16 13.8 16.2L13.5 17.8C13.5 17.9 13.4 18 13.2 18L10.8 18C10.6 18 10.5 17.9 10.5 17.8L10.3 16.2C9.9 16 9.6 15.8 9.3 15.6L7.8 16.2C7.6 16.2 7.5 16.2 7.4 16L6.2 14C6.1 13.8 6.2 13.7 6.3 13.6L7.6 12.6C7.5 12.4 7.5 12.2 7.5 12 7.5 11.8 7.5 11.6 7.6 11.4L6.3 10.4C6.2 10.3 6.1 10.2 6.2 10L7.4 8C7.5 7.8 7.6 7.7 7.8 7.8L9.3 8.4C9.6 8.2 9.9 8 10.3 7.8L10.5 6.3C10.5 6.1 10.6 6 10.8 6zM12 9.9C10.8 9.9 9.9 10.8 9.9 12 9.9 13.2 10.8 14.1 12 14.1 13.2 14.1 14.1 13.2 14.1 12 14.1 10.8 13.2 9.9 12 9.9z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/file.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="m14 2-8 0c-1.1 0-2 0.9-2 2L4 20c0 1.1 0.9 2 2 2L18 22c1.1 0 2-0.9 2-2L20 8zm-1 7 0-5.5 5.5 5.5z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/folder-page.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M4 4C2.9 4 2 4.9 2 6L2 18C2 19.1 2.9 20 4 20L20 20C21.1 20 22 19.1 22 18L22 8C22 6.9 21.1 6 20 6L12 6 10 4 4 4zM19 9L19 17 11 17C11 12.6 14.6 9 19 9z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/folder-parent.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="m10 4-6 6 6 6 1.4-1.4L7.8 11 15 11c1.6 0 3 1.3 3 3 0 1.7-1.4 3-3 3l0 2c2.6 0 5-2.2 5-5 0-2.8-2.4-5-5-5l-7.2 0 3.6-3.6z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/folder.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M4 4C2.9 4 2 4.9 2 6l0 2 0 1 0 9c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 8C22 6.9 21.1 6 20 6L12 6 10 4z" fill="#555"/>
+</svg>