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,4 +1,3 @@
-
 build
 local
 node_modules

.jscs.json

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

CHANGELOG.md

@@ -1,5 +1,43 @@
 # 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*

README.md

@@ -1,9 +1,9 @@
 # h5ai
 
-[![license][license-img]][gh] [![web][web-img]][web] [![github][gh-img]][gh]
+[![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][gh-issues].
+For bug reports and feature requests please use [issues][github-issues].
 
 
 ## Install
@@ -16,26 +16,21 @@ install instructions on the [project page][web].
 ## Build
 
 There are installation ready packages for the latest [releases][release] and
-[dev builds][develop]. But if you want to build **h5ai** yourself you need to
-install the build tool [fQuery][fquery] first:
-
-    > npm install -g fquery@0.11.0
-
-This will globally 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, this will create a new folder `build`
-including a fresh zipball.
+[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
 
 The MIT License (MIT)
 
-Copyright (c) 2014 Lars Jung (http://larsjung.de)
+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
@@ -58,29 +53,19 @@ THE SOFTWARE.
 
 ## References
 
-**h5ai** profits from these great projects:  
-[GNOME Symbolic Icons](https://github.com/GNOME/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),
-[Lo-Dash](http://lodash.com) (MIT),
-[marked](https://github.com/chjj/marked) (MIT),
-[Modernizr](http://www.modernizr.com) (MIT/BSD),
-[modulejs](http://larsjung.de/modulejs/) (MIT),
-[Moment.js](http://momentjs.com) (MIT),
-[Prism](http://prismjs.com) (MIT)
+**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/
-[gh]: https://github.com/lrsjng/h5ai
-[gh-issues]: https://github.com/lrsjng/h5ai/issues
+[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/
-[fquery]: http://larsjung.de/fquery/
+[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
-[gh-img]: http://img.shields.io/badge/github-lrsjng/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 (!pkg.develop) {
-            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,6 +1,6 @@
 {
   "name": "h5ai",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "develop": false,
   "description": "a modern HTTP web server index",
   "homepage": "http://larsjung.de/h5ai/",
@@ -12,11 +12,20 @@
     "url": "https://github.com/lrsjng/h5ai.git"
   },
   "scripts": {
+    "build": "mkr release",
     "test": "mocha --recursive test"
   },
   "devDependencies": {
-    "lodash": "~2.4.1",
-    "mocha": "~1.21.3",
-    "zombie": "~2.0.0-alpha31"
+    "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,69 +2,20 @@
 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"
 
@@ -79,37 +30,17 @@ AddDefaultCharset utf-8
     # Favicon (cannot be renamed!)
     ExpiresByType image/x-icon                          "access plus 1 week"
 
-    # HTML components (HTCs)
-    ExpiresByType text/x-component                      "access plus 1 month"
-
     # HTML
     ExpiresByType text/html                             "access plus 0 seconds"
 
     # 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"
     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
     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,12 +1,17 @@
 
 #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;
@@ -14,21 +19,15 @@
         cursor: pointer;
 
         &:hover {
-            color: #555;
+            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;
+    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);
 
     &.failed {
-        background-color: rgba(255,0,0,0.5);
+        background-color: @col-error;
     }
 }

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

@@ -2,70 +2,103 @@
 #fallback {
     display: none;
     max-width: 960px;
-    margin: 80px auto;
+    margin: 16px auto;
+    padding: 32px 16px;
 
     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;
+        &:hover {
+            color: @col-hover;
         }
-        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;
+    }
+    .fb-i {
+        width: 24px;
 
-            a, a:active, a:visited {
-                display: block;
-                color: #555;
-                text-decoration: none;
-                cursor: pointer;
-
-                &:hover {
-                    color: @col-hover;
-                }
-            }
-        }
-        .fb-i {
+        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;
+    }
+}
 
-            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 {
+    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 {
+        display: none;
         border: none;
         font-family: @font-family;
+        font-weight: lighter;
+        font-size: 16px;
         color: @col;
-        background-color: rgba(0,0,0,0);
-        width: 30px;
-        outline: none;
+        background: transparent;
+        outline: 0;
+        width: 160px;
+        padding: 0 12px 0 4px;
+        line-height: 48px;
+        vertical-align: top;
     }
 
-    &.current {
+    &.active {
         input {
-            width: 150px;
+            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');
-}
-
-@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');
-}
-
-@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');
-}
-
-@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');
-}
-
-@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');
-}
-
-@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');
-}
-
-@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');
-}
-
-@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');
-}

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,18 +59,23 @@
 @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;
@@ -47,10 +89,56 @@
     zoom: 1;
 }
 
+.card() {
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+}
+
+.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;
-    overflow-y: scroll;
 
     &.js .noJsMsg {
         display: none;
@@ -61,10 +149,42 @@ html {
 }
 
 body {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
     font-family: @font-family;
-    font-size: 13px;
+    font-size: @font-size;
     font-weight: @font-weight;
-    color: @col;
-    background-color: @col-back;
-    margin: 30px;
+    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,14 +1,29 @@
 
 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;
+    #content {
+        flex: 1 1 auto;
+        order: 50;
+        color: @col-text-primary-black;
+        text-align: center;
+    }
+
+    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;
+    }
+
+    #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);
 
@@ -16,132 +31,81 @@ body#h5ai-info {
             color: @col-hover;
         }
     }
-    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;
-    }
-
 
     #support {
         margin: 12px auto 24px auto;
         padding: 6px 18px;
-        width: 164px;
-        font-size: 12px;
-        background: @col-widget-back;
+        width: 210px;
+        background: #fafafa;
         border: @border-widget;
         border-radius: 4px;
 
         .paypal {
-            margin: 6px 0 0 0;
+            margin: 12px 0 0 0;
         }
     }
 
-
-    #login-wrapper {
-        font-size: 14px;
-    }
-
     #pass {
-        -moz-appearance: none;
-        -ms-appearance: none;
-        -webkit-appearance: none;
-        font-family: @font-family;
-        font-weight: @font-weight;
-        color: @col;
-        background: @col-widget-back-highlight;
-        border: @border-widget;
-        outline: none;
+        .el-input();
         display: inline-block;
-        width: 200px;
-        height: 27px;
-        padding: 0 6px;
         margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        width: 200px;
+        vertical-align: top;
     }
 
     #login, #logout {
+        .el-button();
         display: inline-block;
-        padding: 4px 16px;
         margin: 8px;
-        background-color: @col-widget-back;
-        border: @border-widget;
-        cursor: pointer;
-
-        color: @col;
-        cursor: pointer;
-        text-decoration: none;
-        .transition(all 0.2s ease-in-out);
-
-        &:hover, &.hover {
-            background-color: @col-widget-back-highlight;
-            color: @col-hover;
-        }
+        padding: 0 12px;
+        line-height: 28px;
+        vertical-align: top;
     }
 
     #hint {
         margin: 12px auto;
-        width: 360px;
-        color: @col;
-        font-size: 12px;
-    }
-
-
-    #tests-wrapper {
-        margin: 96px 0;
+        width: 380px;
+        font-weight: lighter;
     }
 
     #tests {
         display: inline-block;
-        list-style-type: none;
         text-align: left;
-        margin: 0;
+        list-style-type: none;
+        margin: 96px 0;
         padding: 0;
 
         .test {
+            .card();
+            .rounded();
+            background: @col-light;
             margin: 12px 0 0 0;
-            padding: 6px;
+            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;
 
-            .label {
-                display: inline-block;
-                width: 250px;
+            &.passed {
+                color: @col-okay;
             }
-            .result {
-                display: inline-block;
-                width: 250px;
-                text-align: right;
-                font-weight: bold;
-
-                &.passed {
-                    color: #5a5;
-                }
-                &.failed {
-                    color: #a55;
-                }
-            }
-            .info {
-                margin: 4px 0 12px 12px;
-                font-size: 0.7em;
-                color: #aaa;
-                width: 460px;
-                line-height: 1.2em;
+            &.failed {
+                color: @col-error;
             }
         }
-    }
-
-
-    #bottombar {
-        font-size: 13px;
+        .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

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

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

@@ -15,4 +15,13 @@
     background-position: 0 0, 30px 30px;
 
     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

@@ -10,11 +10,10 @@
     box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 
     &.highlighted {
-        // word-break: break-all;
 
         code {
             font-family: @font-family-mono;
-            font-size: 16px;
+            font-size: @font-size;
             line-height: 1.2em;
         }
 
@@ -91,67 +90,11 @@
         .token.entity {
             cursor: help;
         }
-
-        // pre.line-numbers {
-        //  position: relative;
-        //  padding-left: 3.8em;
-        //  counter-reset: linenumber;
-        // }
-        // pre.line-numbers > code {
-        //  position: relative;
-        // }
-        // .line-numbers .line-numbers-rows {
-        //  position: absolute;
-        //  pointer-events: none;
-        //  top: 0;
-        //  font-size: 100%;
-        //  left: -3.8em;
-        //  width: 3em; /* works for line-numbers below 1000 lines */
-        //  letter-spacing: -1px;
-        //  border-right: 1px solid #999;
-
-        //  -webkit-user-select: none;
-        //  -moz-user-select: none;
-        //  -ms-user-select: none;
-        //  user-select: none;
-
-        // }
-        // .line-numbers-rows > span {
-        //  pointer-events: none;
-        //  display: block;
-        //  counter-increment: linenumber;
-        // }
-        // .line-numbers-rows > span:before {
-        //  content: counter(linenumber);
-        //  color: #999;
-        //  display: block;
-        //  padding-right: 0.8em;
-        //  text-align: right;
-        // }
-
-        // .token.tab:not(:empty):before,
-        // .token.cr:before,
-        // .token.lf:before {
-        //  color: hsl(24, 20%, 85%);
-        // }
-        // .token.tab:not(:empty):before {
-        //  content: '▸';
-        // }
-        // .token.cr:before {
-        //  content: '␍';
-        // }
-        // .token.lf:before {
-        //  // content: '␊';
-        //  content: '¶';
-        // }
-        // .token a {
-        //  color: inherit;
-        // }
     }
 
 
     &.markdown {
-        font-size: 16px;
+        font-size: 1.1em;
         padding: 8px 24px;
 
         a, a:active, a:visited {

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

@@ -38,17 +38,20 @@
     cursor: pointer;
 
     img {
+        display: block;
         width: 48px;
         height: 48px;
         margin: -36px 0;
         padding: 12px;
         opacity: 0.5;
+        .transition(all 0.2s ease-in-out);
     }
 
-    &:hover, &.hover {
+    &:hover {
         img {
-            background-color: rgba(27,27,27,0.8);
             opacity: 1;
+            background-color: rgba(27,27,27,0.8);
+            box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
         }
     }
 }
@@ -56,8 +59,7 @@
 #pv-prev-area {
     left: 0;
     img {
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
+        border-radius: 0 8px 8px 0;
         padding-left: 48px;
     }
 }
@@ -65,8 +67,7 @@
 #pv-next-area {
     right: 0;
     img {
-        border-top-left-radius: 8px;
-        border-bottom-left-radius: 8px;
+        border-radius: 8px 0 0 8px;
         padding-right: 48px;
     }
 }
@@ -79,65 +80,52 @@
 
     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;
+        width: 24px;
+        height: 24px;
+        padding: 12px
     }
 
     .bar-label {
         display: block;
-        color: #ccc;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
+        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-sep-border: 1px solid rgba(255,255,255,0.08);
-
     .bar-button {
-        .bar-label;
+        display: block;
+        line-height: 48px;
+        opacity: 0.7;
         cursor: pointer;
-        &:hover, &.hover {
-            .bar-highlight;
+        .transition(all 0.2s ease-in-out);
+
+        &:hover {
+            opacity: 1.0;
+            background-color: rgba(255,255,255,0.1);
         }
     }
 
     .bar-left {
         float: left;
-        border-right: @bar-sep-border;
     }
 
     .bar-right {
         float: right;
-        border-left: @bar-sep-border;
     }
 }
 
 #pv-bottombar {
     position: fixed;
     z-index: 5;
-    width: 100%;
-    height: 32px;
     left: 0;
+    right: 0;
     bottom: 0;
     background-color: rgb(27,27,27);
-    border-top: 1px solid rgb(45,45,45);
-
+    // 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 {

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;
+    #crumbbar {
+        .crumb:not(.active) {
+            display: none;
+        }
+        .crumb.active .sep {
+            width: 0;
+        }
     }
-    .current {
-        display: block;
+    #view.view-details {
+        .header .label, .item .label {
+            margin-right: 80px !important;
+        }
+        .header .date, .item .date {
+            display: none;
+        }
     }
-}
-#view.view-details {
-    .header .label, .item .label {
-        margin-right: 80px !important;
+    #tree, #info {
+        display: none !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;
-}
 }
 
 @media print {
-a[href]:after {
-    content: "";
-}
-#topbar {
-    position: static;
-    margin-bottom: 2em;
-    .view, #download {
-        display: none;
+    a[href]:after {
+        content: "" !important;
+    }
+    #toolbar, #download, #sidebar, #tree, #info {
+        display: none !important;
     }
 }
-#bottombar {
-    position: static;
-    margin-top: 2em;
-}
-#tree, #sidebar {
-    display: none !important;
-}
-}

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

@@ -1,65 +1,59 @@
 
 #sidebar {
-    position: fixed;
-    right: -220px;
-    width: 200px;
-    top: 31px;
-    height: 100%;
-    z-index: 3;
+    display: none;
     overflow: auto;
-    padding: 8px;
-    background-color: @col-widget-back;
-    border-left: @border-widget;
+    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;
+        margin: 0 0 24px 0;
+        width: 168px;
+
+        h1 {
+            font-size: 1em;
+            margin: 2px 0 6px 0;
+        }
     }
 
-    a, a:active, a:visited, span.element {
+    .button {
+        display: inline-block;
+        margin: 4px;
+        border-radius: 2px;
         color: @col;
         cursor: pointer;
-        text-decoration: none;
-        opacity: 0.7;
         .transition(all 0.2s ease-in-out);
 
-        display: block;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
-
-        &: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;
-    }
-
-    .view {
-        display: inline-block;
-        margin: 0 4px 0 0;
+        img {
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+        }
     }
 
     .select {
-        background-color: @col-widget-back-highlight;
-        width: 175px;
+        background: transparent;
         overflow: hidden;
+        border-radius: 2px;
+        outline: 0;
+        width: 160px;
+        margin: 4px;
+        line-height: 48px;
     }
 
     input, select {
@@ -67,29 +61,35 @@
         -ms-appearance: none;
         -webkit-appearance: none;
         font-family: @font-family;
-        font-size: 13px;
+        font-size: @font-size;
         font-weight: @font-weight;
         color: @col;
-        background: @col-widget-back;
+        background: transparent;
         width: 100%;
-        height: 30px;
-        line-height: 30px;
         border: 0 solid #000;
-        outline: none;
         cursor: pointer;
+        outline: 0;
+
+        &:hover {
+            background: rgba(0,0,0,0.03);
+        }
     }
 
     select {
-        width: 200px;
-        padding: 0 4px;
+        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;
+        width: 144px;
+        margin: 4px;
+        padding: 8px;
         vertical-align: middle;
+        height: 32px;
+        line-height: 32px;
     }
 
     .range-track() {
@@ -97,9 +97,9 @@
         -ms-appearance: none;
         -webkit-appearance: none;
         border-width: 0;
-        border-radius: 2px;
+        border-radius: 20px;
         background: @col-range-back;
-        height: 2px;
+        height: 6px;
     }
 
     .range-thumb() {
@@ -107,10 +107,10 @@
         -ms-appearance: none;
         -webkit-appearance: none;
         border-width: 0;
-        border-radius: 2px;
+        border-radius: 20px;
         background: @col-range-thumb;
-        width: 12px;
-        height: 12px;
+        width: 16px;
+        height: 16px;
     }
 
     input[type='range']::-webkit-slider-runnable-track { .range-track; }
@@ -122,4 +122,8 @@
     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 {
+    .tool {
+        display: inline-block;
+        cursor: pointer;
+
+        img {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+            .transition(all 0.2s ease-in-out);
+        }
+
+        &: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;
-        opacity: 0.7;
-        .transition(all 0.2s ease-in-out);
 
-        display: block;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
-
-        &:hover, &.hover {
-            .topbar-hover;
+        &.active {
+            font-weight: bold;
+            color: @col-text-highlight;
         }
-    }
-    .current {
-        a, span.element {
-            .topbar-highlight;
+        &:hover {
+            color: @col-hover;
+        }
+        &:focus {
+            outline: 0;
         }
-    }
-    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;
-        }
+        display: inline-block;
+        .transition(all 0.2s ease-in-out);
     }
-    .view {
-        .topbar-right;
+    .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,42 +1,42 @@
 
 #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;
+    flex: 0 0 auto;
+    order: 1;
 
-    .sp-scrollbar {
-        width: 6px;
-        background-color: @col-sb-back;
-        cursor: pointer;
+    padding: 16px 16px 16px 8px;
+    border-right: 1px solid @col-border;
+    white-space: nowrap;
+    max-width: 250px;
+    overflow-x: hidden;
+    font-weight: lighter;
 
-        .sp-thumb {
-            background-color: @col-sb-thumb;
-        }
-        &.active .sp-thumb {
-            background-color: @col-sb-thumb-active;
+    a, a:active, a.visited {
+        display: inline-block;
+        padding: 3px 0;
+        text-decoration: none;
+        color: @col;
+
+        &:hover {
+            color: @col-hover;
         }
     }
 
+    .active > a {
+        font-weight: bold;
+    }
+
     .indicator {
-        position: relative;
-        top: 2px;
         display: inline-block;
-        width: 16px;
-        height: 22px;
-        float: left;
-        opacity: 0.7;
+        position: relative;
+        top: -2px;
         cursor: pointer;
 
         img {
-            width: 12px;
-            height: 12px;
+            width: 20px;
+            height: 20px;
             .transition(all 0.2s ease-in-out);
         }
         &.open {
@@ -52,65 +52,24 @@
             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, &.hover {
-            color: @col-hover;
-            background-color: @col-widget-back-hover;
-            opacity: 1;
-        }
-    }
     .icon {
         position: relative;
         top: -2px;
-        margin-right: 6px;
 
         img {
-            width: 16px;
-            height: 16px;
+            width: 20px;
+            height: 20px;
         }
     }
-    .hint {
-        margin-left: 6px;
-        font-size: 0.9em;
-        color: #ccc;
+
+    .label {
+        margin: 0 0 0 4px;
     }
+
     .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;
-        }
+        padding: 0 0 0 20px;
     }
 }

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

@@ -1,122 +1,118 @@
 
 .view-details-sized(@size) {
 
-    li {
-
-        &.item {
-
-            a, a:active, a:visited {
-                height: @size + 6px;
-            }
-
-            .label, .date, .size {
-                padding: ((@size - 16px)/2) 8px;
-            }
+    .item {
+        .label, .date, .size {
+            line-height: @size + 14px;
         }
+    }
 
-        .icon.square {
+    .square {
+        width: @size;
+        height: @size;
+
+        img {
             width: @size;
-
-            img {
-                width: @size;
-                height: @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;
-                }
-            }
-
-            // needs to be here, to not conflict with header fields
-            .icon {
-                padding: 8px;
+            &:hover {
+                opacity: 1;
+                color: @col-hover;
             }
         }
 
-        .icon.square {
-            display: inline-block;
-            position: absolute;
-            left: 0;
-            top: -4px;
+        .sort {
+            display: none;
+            position: relative;
+            top: -2px;
+            width: 20px;
+            height: 20px;
+            padding: 0 4px;
         }
 
-        .date {
-            position: absolute;
-            right: 100px;
-            top: 0;
+        .ascending .sort {
+            display: inline;
         }
 
-        .size {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-
-        .selector {
-            margin-top: -1px;
+        .descending .sort {
+            display: inline;
+            .transform(rotate(180deg));
         }
     }
 
-    .view-details-sized(@icon-size);
+    .item {
+        overflow: hidden;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
 
-    &.size-16 {
-        .view-details-sized(16px)
+        &:hover {
+            .raised();
+            z-index: 1;
+        }
+
+        &:last-child {
+            border-radius: 0 0 2px 2px;
+        }
     }
 
-    &.size-24 {
-        .view-details-sized(24px)
+    .square {
+        display: inline-block;
+        position: absolute;
+        left: 16px;
+        top: -1px;
+        padding: 8px;
+
+        .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,31 +1,17 @@
 
 .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 {
+        img {
             width: @size;
-
-            img {
-                width: @size;
-                height: @size;
-            }
-        }
-
-        .label {
-            margin: 0 0 0 (@size + 8px);
+            height: @size;
         }
     }
 }
@@ -33,81 +19,36 @@
 
 #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, &.hover {
-                    border-color: @item-border-col-hover;
-                }
-            }
-
-            // needs to be here, to not conflict with header fields
-            .icon {
-                padding: 8px;
-            }
-        }
-
-        .icon.square {
-            display: inline-block;
-            position: absolute;
-            left: 0;
-            top: -4px;
-        }
-
-        .label {
-            display: block;
-        }
-
-        .date, .size {
-            display: none;
+        &:hover {
+            .raised();
         }
     }
 
-    .view-grid-sized(@icon-size);
-
-    &.size-16 {
-        .view-grid-sized(16px)
+    .square {
+        display: inline-block;
+        vertical-align: top;
+        background: #fafafa;
     }
 
-    &.size-24 {
-        .view-grid-sized(24px)
+    .label {
+        display: inline-block;
+        vertical-align: top;
+        width: 180px;
+        padding: 0 8px;
     }
 
-    &.size-32 {
-        .view-grid-sized(32px)
+    .date, .size {
+        display: none;
     }
 
-    &.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,29 +1,21 @@
 
 .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;
         }
     }
 }
@@ -31,85 +23,33 @@
 
 #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, &.hover {
-                    border-color: @item-border-col-hover;
-                }
-            }
-        }
-
-        .icon.rational {
-            display: block;
-            margin-bottom: 6px;
-        }
-
-        .label {
-            text-align: center;
-            word-wrap: break-word;
-            white-space: normal;
-        }
-
-        .date, .size {
-            display: none;
+        &:hover {
+            .raised();
         }
     }
 
-    .empty, .no-match {
-        margin: 0 120px;
-        padding: 16px;
-        height: 120px;
+    .landscape {
+        display: block;
+        background: #fafafa;
     }
 
-    .view-icons-sized(@icon-size);
-
-    &.size-16 {
-        .view-icons-sized(16px);
+    .label {
+        padding: 0 6px;
+        line-height: 24px;
     }
 
-    &.size-24 {
-        .view-icons-sized(24px);
+    .date, .size {
+        display: none;
     }
 
-    &.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,14 +1,15 @@
 
 
-@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 {
@@ -18,16 +19,16 @@
     top: 0;
     z-index: 2;
     border: 1px dashed @col-border-strong;
-    background-color: rgba(0,0,0,0.01);
+    background: rgba(0,0,0,0.1);
 }
 
 
 #view {
     display: none;
-    margin: 0 auto;
 
     a, a:active, a:visited {
-        color: #333;
+        display: block;
+        color: inherit;
         cursor: pointer;
         text-decoration: none;
     }
@@ -38,160 +39,111 @@
         list-style: none;
     }
 
-    li {
+    .header {
+        display: none;
+    }
+
+    .item {
         position: relative;
         white-space: nowrap;
+        background: #fff;
 
-        &.header {
-            display: none;
-            font-size: 13px;
+        &:hover {
+            color: @col-hover;
+            background: @col-lightgray;
+            border-color: @col-border;
 
-            a, a:active, a:visited {
-                padding: 6px 6px 18px 6px;
-                opacity: 0.4;
-                .transition(all 0.2s ease-in-out);
-
-                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;
-                }
-            }
-        }
-
-        &.item {
-            font-size: 15px;
-
-            a, a:active, a:visited {
+            .selector {
                 display: block;
-                overflow: hidden;
-
-                &:hover, &.hover {
-                    color: @col-hover;
-                    background-color: @item-background-col-hover;
-                    border-color: @item-border-col-hover;
-                }
-
-                &:hover {
-                    .selector {
-                        display: block;
-                    }
-                }
-            }
-
-            &.selected:not(.selecting), &.selecting:not(.selected) {
-
-                a, a:active, a:visited {
-                    background-color: @item-background-col-sel;
-                    border-color: @item-border-col-sel;
-
-                    &:hover, &.hover {
-                        background-color: @item-background-col-sel;
-                        border-color: @item-border-col-sel;
-                    }
-                }
-
-                .selector {
-                    display: block;
-                    // border-color: @col-border-stronger;
-
-                    img {
-                        display: block;
-                    }
-                }
             }
         }
 
-        &.folder-parent {
-
-            .date, .size {
-                display: none;
-            }
-        }
-
-        .icon {
-            display: none;
-            text-align: center;
-
-            img {
-                vertical-align: top;
-            }
-
-            .thumb {
-                box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
-            }
-
-            &.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);
+        &.selected:not(.selecting), &.selecting:not(.selected) {
+            color: @col-text-selected;
+            background: @col-back-selected;
 
             &:hover {
-                border-color: @col-border-stronger;
+                color: @col-text-selected;
+                background: @col-back-selected;
             }
 
-            img {
-                display: none;
-                width: 100%;
-                height: 100%;
+            .selector {
+                display: block;
+                opacity: 1;
             }
         }
     }
 
+    .folder-parent {
+
+        .date, .size {
+            display: none;
+        }
+    }
+
+    .icon {
+        display: none;
+        text-align: center;
+
+        img {
+            max-width: @max-icon-size;
+            max-height: @max-icon-size;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .thumb {
+            max-width: none;
+            max-height: none;
+        }
+    }
+
+    .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: 22px;
+        height: 22px;
+        background: @col-back-selected;
+        cursor: pointer;
+        border-radius: 0 0 2px 0;
+        opacity: 0.6;
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
     .empty, .no-match {
-        margin: 50px 0;
+        display: none;
+        margin-top: 36px;
         text-align: center;
-        color: #ddd;
+        color: @col-border;
         font-size: 5em;
         font-weight: bold;
     }
-
-    .no-match {
-        display: none;
-    }
 }

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,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-180,-626)">
-    <path 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" fill="#555"/>
-  </g>
-</svg>

src/_h5ai/client/images/crumb.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-320,-626)">
-    <g transform="translate(200,108)">
-      <path 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" fill="#555"/>
-    </g>
-  </g>
-</svg>

src/_h5ai/client/images/descending.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-200,-626)">
-    <path 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" fill="#555"/>
-  </g>
-</svg>

src/_h5ai/client/images/download.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-80,-648)">
-    <path 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" fill="#555"/>
-    <g transform="translate(-80,110)">
-      <path 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" fill="#555"/>
-      <path 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" fill="#555"/>
-    </g>
-  </g>
-</svg>

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

@@ -1,4 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="M6 6 6 90 90 90 90 24 72 6zm6 6 57.6 0L84 26.6 84 84 12 84z" fill="#555"/>
-  <rect width="12" height="24" x="42" y="12" fill="#555"/>
-</svg>

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

@@ -1,8 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="M12 6 12 90 84 90 84 24 66 6zm6 6 45.6 0L78 26.6 78 84 18 84z" fill="#555"/>
-  <g transform="translate(2.5793231,-3.2660688)">
-    <path transform="matrix(1.353211,0,0,0.99662165,-14.954127,-1.1081069)" d="m48 65.8c0 4.2-3.3 7.5-7.4 7.5-4.1 0-7.4-3.4-7.4-7.5 0-4.2 3.3-7.5 7.4-7.5 4.1 0 7.4 3.4 7.4 7.5z" fill="#555"/>
-    <rect y="35" x="44" height="30" width="6" fill="#555"/>
-    <rect transform="matrix(0.69076685,-0.72307756,0.72307756,0.69076685,0,0)" y="55.9" x="5.2" height="17.6" width="6" fill="#555"/>
-  </g>
-</svg>

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

@@ -1,4 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="M6 6 6 90 90 90 90 24 72 6zm6 6 57.6 0L84 26.6 84 84 12 84z" fill="#555"/>
-  <rect width="12" height="12" x="42" y="42" fill="#555"/>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="M12 6 12 90 84 90 84 24 66 6zm6 6 45.6 0L78 26.6 78 84 18 84z" fill="#555"/>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="m0 18 0 72 96 0 0-72-30 0-12-12-42 0zm12 12 54 0 18 18 0 36-72 0zm66 54 0-30-18 0 0-18-42 0 0 48" fill="#555"/>
-</svg>

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

@@ -1,8 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" version="1.1">
-  <g transform="translate(-321.00015,-587)">
-    <g transform="matrix(4.836272,0,0,4.836272,-1221.151,-2629.537)" fill="#555">
-      <path d="m325 673 0 2 6.5 0c0.8 0 1.5 0.7 1.5 1.5 0 0.8-0.7 1.5-1.5 1.5l-0.5 0 0 2 0.5 0c1.9 0 3.5-1.6 3.5-3.5 0-1.9-1.6-3.5-3.5-3.5l-6.5 0z"/>
-      <path d="m328 670 0 1c0 0.3-0.1 0.5-0.3 0.7l-2.3 2.3 2.3 2.3c0.2 0.2 0.3 0.5 0.3 0.7l0 1-1 0c-0.3 0-0.6-0.1-0.7-0.3l-3.7-3.7 3.7-3.7c0.2-0.2 0.4-0.3 0.8-0.3z"/>
-    </g>
-  </g>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="m0 18 0 72 96 0 0-72-30 0-12-12-42 0z" fill="#555"/>
-</svg>

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

@@ -1,4 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path 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)" fill="#555"/>
-  <path d="M6 12 6 84 90 84 90 30 72 12zm6 6 57.6 0L84 32.6 84 78 12 78zM30 36 46 55.2 60 48 78 72 18 72zM-24 53.2a15 15 0 1 1-30 0 15 15 0 1 1 30 0z" fill="#555"/>
-</svg>

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

@@ -1,6 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path d="M12 6 12 90 84 90 84 24 66 6zm6 6 45.6 0L78 26.6 78 84 18 84z" fill="#555"/>
-  <rect width="42" height="6" x="24" y="24" fill="#555"/>
-  <rect width="36" height="6" x="24" y="42" fill="#555"/>
-  <rect width="48" height="6" x="24" y="60" fill="#555"/>
-</svg>

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

@@ -1,17 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="96" width="96" viewBox="0 0 96 96" version="1.1">
-  <path 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)" fill="#555"/>
-  <path d="M6 12 6 84 90 84 90 30 72 12zm6 6 57.6 0L84 32.6 84 78 12 78zM35.4 42 46.6 58 56.4 52 69 72 27 72zM-24 53.2a15 15 0 1 1-30 0 15 15 0 1 1 30 0z" fill="#555"/>
-  <rect width="6" height="60" x="18" y="18" fill="#555"/>
-  <rect width="6" height="6" x="12" y="26.7" fill="#555"/>
-  <rect width="6" height="6" x="12" y="39" fill="#555"/>
-  <rect width="6" height="6" x="12" y="51" fill="#555"/>
-  <rect width="6" height="6" x="12" y="63" fill="#555"/>
-  <rect width="6" height="6" x="12" y="75" fill="#555"/>
-  <rect width="6" height="60" x="72" y="18" fill="#555"/>
-  <rect width="6" height="6" x="78" y="26.7" fill="#555"/>
-  <rect width="6" height="6" x="78" y="39" fill="#555"/>
-  <rect width="6" height="6" x="78" y="51" fill="#555"/>
-  <rect width="6" height="6" x="78" y="63" fill="#555"/>
-  <rect width="6" height="6" x="78" y="75" fill="#555"/>
-  <rect width="6" height="6" x="12" y="15" fill="#555"/>
-</svg>

src/_h5ai/client/images/filter.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-140 -645.97)">
-    <path d="m146.5 647c-3 0-5.5 2.5-5.5 5.5 0 3 2.5 5.5 5.5 5.5s5.5-2.5 5.5-5.5c0-3-2.5-5.5-5.5-5.5zm0 2c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5c-1.9 0-3.5-1.6-3.5-3.5 0-1.9 1.6-3.5 3.5-3.5zM149.8 655a1 1 0 0 0-0.5 1.7l4 4a1 1 0 1 0 1.4-1.4l-4-4a1 1 0 0 0-0.9-0.3z" fill="#555"/>
-  </g>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <path d="M2 1 0 3 0 15 16 15C16 10.8 16 7.2 16 3L11 3 9 1zM1 5 16 5 16 7 2 7 1.5 14 1 14z" fill="#555"/>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <path d="M0 3 0 15 16 15 16 3 11 3 9 1 2 1zm2 2 9 0 3 3 0 6-12 0zm11 9 0-5-3 0 0-3-7 0 0 8" fill="#555"/>
-</svg>

src/_h5ai/client/images/folder.svg

@@ -1,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <path d="M0 3 0 15 16 15 16 3 11 3 9 1 2 1z" fill="#555"/>
-</svg>

src/_h5ai/client/images/home.svg

@@ -1,5 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-562,-176)">
-    <path d="m570 177-8 6 2 0 0 7 3 0 1 0 1 0 1 0 6 0 0-7 2 0-3-2.2 0-2.7-2 0 0 1.3z" fill="#555"/>
-  </g>
-</svg>

src/_h5ai/client/images/loading.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-241 -627)">
-    <path d="m253.9 629a1 1 0 0 0-0.1 0 1 1 0 0 0-0.8 1v1.7c-0.4-0.6-0.8-1.1-1.4-1.5-1.2-0.9-2.5-1.3-3.9-1.2-0.2 0-0.4 0-0.6 0.1-1.5 0.2-3 1-4 2.3-2 2.6-1.4 6.4 1.2 8.4s6.4 1.4 8.4-1.2a1 1 0 0 0 0.2-0.6 1 1 0 0 0 0-0.2v-0.8h-0.8-0.1a1 1 0 0 0-0.1 0 1 1 0 0 0-0.8 0.4c-1.3 1.8-3.8 2.1-5.6 0.8-1.8-1.3-2.1-3.8-0.8-5.6 1.3-1.8 3.8-2.1 5.6-0.8 0.4 0.3 0.8 0.7 1 1.2h-1.4a1 1 0 0 0-1 1 1 1 0 0 0 0 0.2v0.8h0.8 0.2 4 1v-1-4a1 1 0 0 0 0-0.2v-0.8h-0.8a1 1 0 0 0-0.30z" fill="#555"/>
-  </g>
-</svg>

src/_h5ai/client/images/page.svg

@@ -1,5 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 12 12" version="1.1">
-  <g transform="matrix(0.68005728,0,0,0.70728284,-313.86652,-213.11037)">
-    <path d="m479.17511 316.86104 0-9.89704-4.41139-4.24158-13.23419-0.00001 0.00001 14.13863 2.94093-0.00001-0.00001-11.3109 7.35234 0.00001 0 4.24159 4.41139 0-0.00001 7.0693" fill="#555"/>
-  </g>
-</svg>

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

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-60,-518)">
-    <g transform="translate(19,-242)">
-      <path 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" fill="#ccc"/>
-    </g>
-  </g>
-</svg>

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

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-40.984 -646.99)" fill="#ccc">
-    <path d="m41.8 657a1 1 0 0 0-0.8 1v4a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2h-3v-3a1 1 0 0 0-1.2-1zM46.9 656a1 1 0 0 0-0.6 0.3l-5 5a1 1 0 1 0 1.4 1.4l5-5a1 1 0 0 0-0.8-1.7z"/>
-    <rect height="1" width="1" y="662" x="41"/>
-    <path d="m51.9 647a1 1 0 1 0 0.1 2h3v3a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1h-4a1 1 0 0 0-0.1 0z"/>
-    <rect height="1" width="1" y="647" x="56"/>
-    <path d="m55.9 647a1 1 0 0 0-0.6 0.3l-5 5a1 1 0 1 0 1.4 1.4l5-5a1 1 0 0 0-0.8-1.7z"/>
-    <rect height="1" width="1" y="657" x="41"/>
-    <rect height="1" width="1" y="662" x="46"/>
-    <rect height="1" width="1" y="652" x="56"/>
-    <rect height="1" width="1" y="647" x="51"/>
-  </g>
-</svg>

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

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-120,-626)" fill="#ccc">
-    <path 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,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-60.952 -646.98)" fill="#ccc">
-    <path d="m71.8 647a1 1 0 0 0-0.8 1v4a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2h-3v-3a1 1 0 0 0-1.2-1zM75.9 647a1 1 0 0 0-0.6 0.3l-4 4a1 1 0 1 0 1.4 1.4l4-4a1 1 0 0 0-0.8-1.7z"/>
-    <rect height="1" width="1" y="652" x="71"/>
-    <path d="m61.9 653a1 1 0 0 0-0.9 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-8a1 1 0 0 0-0.1 0zm1.1 2h6v6h-6v-6z"/>
-    <path d="m61.9 655a1 1 0 1 0 0.1 2h8a1 1 0 1 0 0-2h-8a1 1 0 0 0-0.1 0z"/>
-    <rect height="1" width="1" y="652" x="76"/>
-    <rect height="1" width="1" y="647" x="71"/>
-    <rect height="1" width="1" y="662" x="70"/>
-    <rect height="1" width="1" y="662" x="61"/>
-  </g>
-</svg>

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

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-100,-626)" fill="#ccc">
-    <path 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,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-80,-648)" fill="#ccc">
-    <path 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 transform="translate(-80,110)">
-      <path 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 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,3 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="16" width="16" viewBox="0 0 16 16">
-  <path d="M11.4 3.4 6.5 8.3 4.6 6.4l-2.1 2.1 3 3 1.1 1.1 1.1-1.1 6-6-2.1-2.1z" fill="#555"/>
-</svg>

src/_h5ai/client/images/settings.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-441 -401)">
-    <path 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" fill="#555"/>
-  </g>
-</svg>

src/_h5ai/client/images/size.svg

@@ -1,13 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-41.0002,-767)">
-    <path d="M42.8 776A1 1 0 0 0 42 777l0 4a1 1 0 0 0 1 1l4 0a1 1 0 1 0 0-2l-3 0 0-3a1 1 0 0 0-1.2-1zM47.4 775.5a1 1 0 0 0-0.6 0.3l-4.5 4.5a1 1 0 1 0 1.4 1.4l4.5-4.5A1 1 0 0 0 47.4 775.5z" fill="#555"/>
-    <rect height="1" width="1" x="42" y="781" fill="#555"/>
-    <path d="M50.9 768A1 1 0 1 0 51 770l3 0 0 3a1 1 0 1 0 2 0l0-4a1 1 0 0 0-1-1l-4 0a1 1 0 0 0-0.1 0z" fill="#555"/>
-    <rect height="1" width="1" x="55" y="768" fill="#555"/>
-    <path d="m54.8 768a1 1 0 0 0-0.5 0.3l-4.5 4.5a1 1 0 1 0 1.4 1.4l4.5-4.5A1 1 0 0 0 54.8 768z" fill="#555"/>
-    <rect height="1" width="1" x="42" y="776" fill="#555"/>
-    <rect height="1" width="1" x="47" y="781" fill="#555"/>
-    <rect height="1" width="1" x="55" y="773" fill="#555"/>
-    <rect height="1" width="1" x="50" y="768" fill="#555"/>
-  </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

@@ -1,7 +1,8 @@
 # Themes
 
 This directory will contain any themes you add. At the moment there are only
-icon themes supported. The folder structure is: `<theme-name>/icons/<type>.<ext>`
+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`.
 

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>

src/_h5ai/client/images/themes/default/img.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 12c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 6C22 4.9 21.1 4 20 4zm5 6 4 5 3-2 3 4-14 0z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/txt.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 2H6c-1.1 0-2 0.9-2 2L4 20c0 1.1 0.9 2 2 2H18c1.1 0 2-0.9 2-2V8l-6-6zM16 18H8v-2h8v2zm0-4H8v-2h8v2zM13 9v-5.5l5.5 5.5H13z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/vid.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 12c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 6C22 4.9 21.1 4 20 4zM4 7 6 7 6 9 4 9zm14 0 2 0 0 2-2 0zm-14 4 2 0 0 2-2 0zm14 0 2 0 0 2-2 0zm-14 4 2 0 0 2-2 0zm14 0 2 0 0 2-2 0z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/x.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/tree.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
-  <g transform="translate(-320,-626)">
-    <g transform="translate(200,108)">
-      <path 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" fill="#555"/>
-    </g>
-  </g>
-</svg>

src/_h5ai/client/images/ui/back.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="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/crumb.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 6l-1.4 1.4 4.6 4.6-4.6 4.6 1.4 1.4 6-6z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/download.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="M19 9h-4v-6h-6v6h-4l7 7 7-7zm-14 9v2h14v-2h-14z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/filter.svg

@@ -0,0 +1,5 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1">
+  <g transform="translate(0,-8)">
+    <path d="m15.8 22.3h-0.8l-0.3-0.3c1-1.1 1.6-2.6 1.6-4.2 0-3.6-2.9-6.5-6.5-6.5-3.6 0-6.5 2.9-6.5 6.5 0 3.6 2.9 6.5 6.5 6.5 1.6 0 3.1-0.6 4.2-1.6l0.3 0.3v0.8l5 5 1.5-1.5-5-5zm-6 0c-2.5 0-4.5-2-4.5-4.5 0-2.5 2-4.5 4.5-4.5 2.5 0 4.5 2 4.5 4.5 0 2.5-2 4.5-4.5 4.5z" fill="#555"/>
+  </g>
+</svg>

src/_h5ai/client/images/ui/info-toggle.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" version="1.1">
+  <path d="M 12 2 C 6.48 2 2 6.48 2 12 C 2 17.52 6.48 22 12 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 12 2 z M 11 7 L 13 7 L 13 9 L 11 9 L 11 7 z M 11 11 L 13 11 L 13 17 L 11 17 L 11 11 z" fill="#555"/>
+</svg>