Merge branch 'develop'

Changed password input to type "password"

.gitignore

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

CHANGELOG.md

@@ -0,0 +1,480 @@
+# Changelog
+**h5ai** uses [semantic versioning](http://semver.org/).
+
+
+## v0.26.1 - *2014-08-17*
+
+* fixes links
+
+
+## v0.26.0 - *2014-08-16*
+
+* removes True Type fonts
+* outsources themes to [h5ai-themes](https://github.com/lrsjng/h5ai-themes)
+* adds filesize fallback for large files and 32bit PHP
+* fixes server detection
+* adds config file tests to info page
+* removes JSON shim
+* adds caching of command checks
+* updates `jQuery.mousewheel` to 3.1.12
+* updates `jQuery.qrcode` to 0.8.0
+* replaces `markdown` with [`marked`](https://github.com/chjj/marked) 0.3.2
+* updates `modulejs` to 0.4.5
+* updates `Moment.js` to 2.8.1
+* replaces `underscore` with [`Lo-Dash`](https://github.com/lodash/lodash) 2.4.1
+* replaces `SyntaxHighlighter` with [`Prism`](http://prismjs.com) 2014-08-04
+
+
+## v0.25.2 - *2014-07-01*
+
+* adds optional info page protection
+* fixes `short_open_tag` issues for PHP < 5.4.0
+* fixes default folder download (`alwaysVisible` option)
+* minor fixes
+
+
+## v0.25.1 - *2014-06-25*
+
+* fixes broken paths for filenames containing '+' characters
+* fixes Google Universal Analytics
+* fixes file type check
+
+
+## v0.25.0 - *2014-06-22*
+
+* adds sidebar
+* adds initial theme support
+* adds icons from [Evolvere Icon Theme](http://franksouza183.deviantart.com/art/Evolvere-Icon-theme-440718295)
+* adds PHP variant to calc folder sizes
+* adds scroll position reset on location change (issue [#279](https://github.com/lrsjng/h5ai/issues/279))
+* adds option to hide unreadable files
+* adds option where to place folders (top, inplace, bottom)
+* adds markdown support for custom header and footer files
+* adds video and audio preview via HTML5 elements (no fallback, works best in Chrome)
+* adds filter reset on location change
+* adds option to make download button always visible
+* adds Google UA support
+* extends selectable icon sizes (adds 128px, 192px, 256px, 384px)
+* improves preview GUI
+* disable thumbs in `cache` folder
+* fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287))
+* replaces PHP backtick operator with `exec`
+* removes server side file manipulation extensions `dropbox`, `delete` and `rename`
+* updates `H5BP` to 4.3.0
+* updates `jQuery` to 2.1.1
+* updates `json2.js` to 2014-02-04
+* updates `markdown-js` to 0.5.0
+* updates `Modernizr` to 2.8.2
+* updates `Moment.js` to 2.6.0
+* updates `Underscore.js` to 1.6.0
+* language updates (`bg`, `ko`, `pt`, `sl`, `sv`, `zh-cn`)
+
+
+## v0.24.1 - *2014-04-09*
+
+* security fixes! (issues [#268](https://github.com/lrsjng/h5ai/issues/268), [#269](https://github.com/lrsjng/h5ai/issues/269))
+* language updates (`fi`, `fr`, `hi`, `it`, `zh-tw`)
+* fixes WinOS command detection
+
+
+## v0.24.0 - *2013-09-04*
+
+* updates image and text preview
+* adds variable icon sizes
+* adds optional natural sort of items
+* adds optional checkboxes to select items
+* adds text preview modes: none, fixed, markdown
+* optionally hide folders in main view
+* makes use of EXIF thumbnails optional
+* fixes file deletion of multiple files
+* fixes `setParentFolderLabels = false`
+* fixes shell-arg and RegExp escape issues
+* cleans code
+* updates info page `/_h5ai`
+* adds `aiff` to `audio` types
+* adds `da` translation by Ronnie Milbo
+* updates to `pl` translation by Mark
+
+
+## v0.23.0 - *2013-07-21*
+
+* removes `aai` mode!
+* drops support for IE7+8 (simple fallback, same as no javascript)
+* uses History API if available (way faster browsing)
+* faster thumbnail generation if EXIF thumbnails available
+* adds optional custom headers/footers that are propageted to all subfolders
+* optional hide parent folder links
+* some fixes on previews
+* speeds up packaged downloads
+* add line wrap and line highlighting (on hover) to text preview
+* new design (colors, images)
+* now uses scalable images for the interface
+* fixes filter (ignore parent folder, display of `no match`)
+* lots of small fixes
+* updates `H5BP` to 4.2.0
+* updates `jQuery` to 2.0.3
+* updates `jQuery.mousewheel` to 3.1.3
+* updates `Moment.js` to 2.1.0
+* updates `markdown-js` to 0.4.0-9c21acdf08
+* updates `json2.js` to 2013-05-26
+* adds `uk` translation by Viktor Matveenko
+* updates to `pl` translation by Mark
+
+
+## v0.22.1 - *2012-10-16*
+
+* bug fix concerning API requests in PHP mode
+* minor changes in responsive styles
+
+
+## v0.22 - *2012-10-14*
+
+* general changes h5ai directory layout and configuration
+* splits configuration file (`config.json`) into files `options.json`, `types.json` and `langs.json`
+* localization now in separate files
+* adds auto-refresh
+* adds drag'n'drop upload (PHP, experimental)
+* adds file deletion (PHP, experimental)
+* cleans and improves PHP code
+* PHP no longer respects htaccess restrictions (so be careful)
+* PHP ignore patterns might include paths now
+* improves separation between aai and php mode
+* improves performance in aai mode
+* adds optional binary prefixes for file sizes
+* improves filter: autofocus on keypress, clear on `ESC`
+* download packages now packaged relative to current folder
+* download package name changable
+* splits type `js` into `js` and `json`
+* prevents some errors with files > 2GB on 32bit OS
+* adds max subfolder size in tree view
+* adds ctrl-click file selection
+* adds Piwik analytics extension
+* temp download packages are now stored in the `cache`-folder and deleted as soon as possible
+* updates translations
+* adds `he` translation by [Tomer Cohen](https://github.com/tomer)
+* updates 3rd party libs
+
+
+## v0.21 - *2012-08-06*
+
+* fixes misaligned image previews
+* adds no JavaScript fallback to PHP version
+* fixes duplicate tree entries and empty main views
+* adds Google Analytics support (async)
+* improves filter (now ignorecase, now only checks if chars in right order)
+* adds keyboard support to image preview (space, enter, backspace, left, right, up, down, f, esc)
+* adds text file preview and highlighting with [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (same keys as img preview)
+* adds Markdown preview with [markdown-js](https://github.com/evilstreak/markdown-js)
+* adds new type `markdown`
+* changes language code `gr` to `el`
+* adds localization for filter placeholder
+* adds `hu` translation by [Rodolffo](https://github.com/Rodolffo)
+* updates to [jQuery.qrcode](http://larsjung.de/qrcode/) 0.2
+* updates to [jQuery.scrollpanel](http://larsjung.de/scrollpanel/) 0.1
+* updates to [modulejs](http://larsjung.de/modulejs/) 0.2
+* updates to [Moment.js](http://momentjs.com) 1.7.0
+* updates to [Underscore.js](http://underscorejs.org) 1.3.3
+
+
+## v0.20 - *2012-05-11*
+
+* adds image preview
+* adds thumbnails for video and pdf
+* adds support for lighttpd, nginx and cherokee and maybe other webservers with PHP
+* adds folder size in PHP version via shell `du`
+* fixes some localization problems
+* updates info page at `/_h5ai/`
+* switches to JSHint
+
+
+## v0.19 - *2012-04-19*
+
+* adds lots of config options
+* changes in `config.js` and `h5ai.htaccess`
+* fixes js problems in IE 7+8
+* hides broken tree view in IE < 9, adds a message to the footer
+* removes hash changes since they break logical browser history
+* fixes thumbnail size for portrait images in icon view
+* fixes problems with file type recognition
+* adds an info page at `/_h5ai/`
+* sort order is preserved while browsing
+* removes PHP error messages on thumbnail generation
+* fixes PHP some problems with packed download
+* adds support for tarred downloads
+* changes crumb image for folders with an index file
+* adds `index.php` to use h5ai in non-Apache environments
+* switches from [Datejs](http://www.datejs.com) to [Moment.js](http://momentjs.com)
+* adds [underscore.js](http://underscorejs.org)
+* fixes mousewheel problems, updates [jQuery.mousewheel](https://github.com/brandonaaron/jquery-mousewheel) to 3.0.6
+* updates `lv` translation
+* adds `ro` translation by [Jakob Cosoroabă](https://github.com/midday)
+* adds `ja` translation by [metasta](https://github.com/metasta)
+* adds `nb` translation by [Sindre Sorhus](https://github.com/sindresorhus)
+* adds `sr` translation by [vBm](https://github.com/vBm)
+* adds `gr` translation by [xhmikosr](https://github.com/xhmikosr)
+
+
+## v0.18 - *2012-02-24*
+
+* adds optional QRCode display
+* adds optional filtering for displayed files and folders
+* updates design
+* improves zipped download
+* adds support for zipped download of htaccess restricted files
+* changes h5ai.htaccess
+* custom headers/footers are now optional and disabled by default
+* fixes problems with folder recognition in the JS version
+* fixes include problems in PHP version
+* fixes path problems on servers running on Windows in PHP version
+* fixes broken links in custom headers/footers while zipped download enabled
+* fixes problems with thumbnails for files with single or double quotes in filename
+* improves url hashes
+* updates year in `LICENSE.TXT`
+* updates es translation
+* adds `zh-tw` translation by [Yao Wei](https://github.com/medicalwei)
+* updates `zh-cn` translation
+
+
+## v0.17 - *2011-11-28*
+
+* h5ai is now located in `_h5ai` to reduce collisions
+* switches from HTML5 Boilerplate reset to normalization
+* adds some style changes for small devices
+* configuration (options, types, translations) now via `config.js`
+* icons for JS version are now configured via `config.js`
+* sort order configuration changed
+* sorting is now done without page reload
+* adds `customHeader` and `customFooter` to `config.js`
+* supports restricted folders to some extent
+* some style changes on tree and language menu
+* fixes total file/folder count in status bar
+* adds support for use with userdir (requires some manual changes)
+
+
+## v0.16 - *2011-11-02*
+
+* sorts translations in `options.js`
+* improves HTML head sections
+* refactors JavaScript and PHP a lot
+* improves/fixes file selection for zipped download
+* fixes scrollbar and header/footer link issues (didn't work when zipped download enabled)
+* adds support for ctrl-select
+* `dateFormat` in `options.js` changed, now affecting JS and PHP version
+* `dateFormat` is localizable by adding it to a translation in `options.js`
+* PHP version is now configurable via `php/config.php` (set custom doc root and other PHP related things)
+* image thumbs and zipped download is disabled by default now, but works fine if PHP is configured
+
+
+## v0.15.2 - *2011-09-18*
+
+* adds `it` translation by [Salvo Gentile](https://github.com/SalvoGentile) and [Marco Patriarca](https://github.com/Fexys)
+* switches build process from scripp to wepp
+
+
+## v0.15.1 - *2011-09-06*
+
+* fixes security issues with the zipped download feature
+* makes zipped download optional (but enabled by default)
+
+
+## v0.15 - *2011-09-04*
+
+* adds zipped download for selected files
+* cleans and refactores
+
+
+## v0.14.1 - *2011-09-01*
+
+* display meta information in bottom bar (icon view)
+* adds `zh-cn` translation by [Dongsheng Cai](https://github.com/dongsheng)
+* adds `pl` translation by Radosław Zając
+* adds `ru` translation by Богдан Илюхин
+
+
+## v0.14 - *2011-08-16*
+
+* adds image thumbnails for PHP version
+* new option `slideTree` to turn off auto slide in
+
+
+## v0.13.2 - *2011-08-12*
+
+* changes in `/h5ai/.htaccess` ... PHP configuration ...
+
+
+## v0.13.1 - *2011-08-12*
+
+* fixes initial tree display
+* adds sort order option
+* adds/fixes some translations
+* adds `lv` translation by Sandis Veinbergs
+
+
+## v0.13 - *2011-08-06*
+
+* adds PHP implementation! (should work with PHP 5.2+)
+* adds new options
+* changes layout of the bottom bar to display status information
+* adds language selector to the bottom bar
+* quotes keys in `options.js` to make it valid json
+* changes value of option `lang` from `undefined` to `null`
+* adds some new keys to `h5aiLangs`
+* adds browser caching rules for css and js
+* adds `pt` translation by [Jonnathan](https://github.com/jonnsl)
+* adds `bg` translation by George Andonov
+
+
+## v0.12.3 - *2011-07-30*
+
+* adds `tr` translation by [Batuhan Icoz](https://github.com/batuhanicoz)
+
+
+## v0.12.2 - *2011-07-30*
+
+* adds `es` translation by Jose David Calderon Serrano
+
+
+## v0.12.1 - *2011-07-29*
+
+* fixes unchecked use of console.log
+
+
+## v0.12 - *2011-07-28*
+
+* improves performance
+
+
+## v0.11 - *2011-07-27*
+
+* changes license to MIT license, see `LICENSE.txt`
+
+
+## v0.10.2 - *2011-07-26*
+
+* improves tree scrollbar
+
+
+## v0.10.1 - *2011-07-24*
+
+* fixes problems with ' in links
+
+
+## v0.10 - *2011-07-24*
+
+* fixes problems with XAMPP on Windows (see `dot.htaccess` comments for instructions)
+* fixes tree fade-in-fade-out effect for small displays ([issue #6](https://github.com/lrsjng/h5ai/issues/6))
+* adds custom scrollbar to tree ([issue #6](https://github.com/lrsjng/h5ai/issues/6))
+* fixes broken links caused by URI encoding/decoding ([issue #9](https://github.com/lrsjng/h5ai/issues/9))
+* adds "empty" to localization (hope Google Translate did a good job here)
+
+
+## v0.9 - *2011-07-18*
+
+* links hover states between crumb, extended view and tree
+* fixes size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
+* refactores js to improve performance and cleaned code
+* adds caching for folder status codes and content
+* adds `fr` translation by [Nicolas](https://github.com/Nicosmos)
+* adds `nl` translation by [Stefan de Konink](https://github.com/skinkie)
+* adds `sv` translation by Oscar Carlsson
+
+
+## v0.8 - *2011-07-08*
+
+* removes slashes from folder labels
+* optionally rename parent folder entries to real folder names, see `options.js`
+* long breadcrumbs (multiple rows) no longer hide content
+* error folder icons are opaque now
+* refactores js a lot (again...)
+
+
+## v0.7 - *2011-07-07*
+
+* removes shadows
+* smarter tree side bar
+
+
+## v0.6 - *2011-07-05*
+
+* refactores js
+* adds localization, see `options.js`
+
+
+## v0.5.3 - *2011-07-04*
+
+* refactores js
+* adds basic options support via `options.js`
+* adds comments to `options.js`
+* adds optional tree sidebar
+
+
+## v0.5.2 - *2011-07-02*
+
+* details view adjusts to window width
+* links icon for *.gz and *.bz2
+
+
+## v0.5.1 - *2011-07-01*
+
+* disables tree sidebar for now, since it had unwanted side effects
+
+
+## v0.5 - *2011-07-01*
+
+* adds tree sidebar
+* some refactorings
+
+
+## v0.4 - *2011-06-27*
+
+* adds better fallback, in case JavaScript is disabled
+* rewrites js, fixed middle-button click etc. problems
+* refactors css
+* sorts, adds and moves icons and images
+* updates dot.access
+
+
+## v0.3.2 - *2011-06-24*
+
+* removes lib versions from file names
+* adds 'empty' indicator for icons view
+
+
+## v0.3.1 - *2011-06-24*
+
+* refactores js
+* adds `folderClick` and `fileClick` callback hooks
+* fixes .emtpy style
+
+
+## v0.3 - *2011-06-23*
+
+* includes build stuff, files previously found in the base directory are now located in folder `target`
+* styles and scripts are now minified
+* adds Modernizr 2.0.4 for future use
+* updates jQuery to version 1.6.1
+
+
+## v0.2.3 - *2011-06-17*
+
+* more refactoring in main.js
+
+
+## v0.2.2 - *2011-06-16*
+
+* refactores a lot, adds some comments
+* includes fixes from [NumEricR](https://github.com/NumEricR)
+* adds top/bottom message support, only basicly styled
+
+
+## v0.2.1 - *2011-06-16*
+
+* fixes croped filenames
+* fixes missing .png extension in header
+* adds some color to the links
+* adds changelog
+
+
+## v0.2 - *2011-06-15*
+
+* adds icon view

LICENSE.md

@@ -1,19 +0,0 @@
-Copyright (c) 2013 Lars Jung, http://larsjung.de
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-of the Software, and to permit persons to whom the Software is furnished to do
-so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,32 +1,30 @@
 # h5ai
-**a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee**
 
-The preferred way to report a bug or make a feature request is to
-create [a new issue](http://github.com/lrsjng/h5ai/issues/new) on GitHub!
+[![license][license-img]][gh] [![web][web-img]][web] [![github][gh-img]][gh]
+
+A modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee.
+For bug reports and feature requests please use [issues][gh-issues].
 
 
 ## Install
 
-( **note:** please don't use files from the `src` folder for installation,
-they need to be preprocessed to work correctly )
-
-You'll find a preprocessed package, as well as detailed installation
-instructions on the [project page](http://larsjung.de/h5ai/).
+Do **not** install any files from the `src` folder, they need to be
+preprocessed to work correctly! Find a preprocessed package and detailed
+install instructions on the [project page][web].
 
 
 ## Build
 
-( there are repositories for the latest [releases](http://release.larsjung.de/h5ai/) and [dev builds](http://release.larsjung.de/h5ai/dev/) )
+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:
 
-If you want to build **h5ai** yourself you need to install the build tool [fQuery](http://larsjung.de/fquery/) first:
+    > npm install -g fquery@0.11.0
 
-    > npm install -g fquery
-
-This will install fQuery and its command line tool `makejs`. Run `makejs --help` to see if everything
-worked fine.
-
-To clone and build the project run the following commands.
-You'll find a new directory `build` including a fresh zipball.
+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.
 
     > git clone git://github.com/lrsjng/h5ai.git
     > cd h5ai
@@ -35,410 +33,54 @@ You'll find a new directory `build` including a fresh zipball.
 
 ## License
 
-**h5ai** is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/develop/LICENSE.md).
+The MIT License (MIT)
 
-It profits from these great projects:
-[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228) (GPL),
-[Gnome Symbolic Icon Theme](https://git.gnome.org/browse/gnome-icon-theme-symbolic/) (CC BY-SA 3.0),
-[HTML5 ★ Boilerplate](http://html5boilerplate.com) (MIT),
+Copyright (c) 2014 Lars Jung (http://larsjung.de)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+## 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.filedrop](http://www.github.com/weixiyen/jquery-filedrop) (MIT),
 [jQuery.fracs](http://larsjung.de/fracs/) (MIT),
-[jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) (MIT),
+[jQuery.mousewheel](https://github.com/brandonaaron/jquery-mousewheel) (MIT),
 [jQuery.qrcode](http://larsjung.de/qrcode/) (MIT),
 [jQuery.scrollpanel](http://larsjung.de/scrollpanel/) (MIT),
-[markdown-js](http://github.com/evilstreak/markdown-js) (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),
-[SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (MIT/GPL),
-[Underscore.js](http://underscorejs.org) (MIT)
+[Prism](http://prismjs.com) (MIT)
 
 
-## Changelog
-( **h5ai** uses [semantic versioning](http://semver.org/) )
-
-
-### v0.23.0 - *2013-07-21*
-
-* removes `aai` mode!
-* drops support for IE7+8 (simple fallback, same as no javascript)
-* uses History API if available (way faster browsing)
-* faster thumbnail generation if EXIF thumbnails available
-* adds optional custom headers/footers that are propageted to all subfolders
-* optional hide parent folder links
-* some fixes on previews
-* speeds up packaged downloads
-* add line wrap and line highlighting (on hover) to text preview
-* new design (colors, images)
-* now uses scalable images for the interface
-* fixes filter (ignore parent folder, display of `no match`)
-* lots of small fixes
-* updates H5BP to 4.2.0
-* updates jQuery to 2.0.3
-* updates jQuery.mousewheel to 3.1.3
-* updates Moment.js to 2.1.0
-* updates markdown-js to 0.4.0-9c21acdf08
-* updates json2.js to 2013-05-26
-* adds `uk` translation by Viktor Matveenko
-* updates to `pl` translation by Mark
-
-
-### v0.22.1 - *2012-10-16*
-
-* bug fix concerning API requests in PHP mode
-* minor changes in responsive styles
-
-
-### v0.22 - *2012-10-14*
-
-* general changes h5ai directory layout and configuration
-* splits configuration file (`config.json`) into files `options.json`, `types.json` and `langs.json`
-* localization now in separate files
-* adds auto-refresh
-* adds drag'n'drop upload (PHP, experimental)
-* adds file deletion (PHP, experimental)
-* cleans and improves PHP code
-* PHP no longer respects htaccess restrictions (so be careful)
-* PHP ignore patterns might include paths now
-* improves separation between aai and php mode
-* improves performance in aai mode
-* adds optional binary prefixes for file sizes
-* improves filter: autofocus on keypress, clear on `ESC`
-* download packages now packaged relative to current folder
-* download package name changable
-* splits type `js` into `js` and `json`
-* prevents some errors with files > 2GB on 32bit OS
-* adds max subfolder size in tree view
-* adds ctrl-click file selection
-* adds Piwik analytics extension
-* temp download packages are now stored in the `cache`-folder and deleted as soon as possible
-* updates translations
-* adds `he` translation by [Tomer Cohen](https://github.com/tomer)
-* updates 3rd party libs
-
-
-### v0.21 - *2012-08-06*
-
-* fixes misaligned image previews
-* adds no JavaScript fallback to PHP version
-* fixes duplicate tree entries and empty main views
-* adds Google Analytics support (async)
-* improves filter (now ignorecase, now only checks if chars in right order)
-* adds keyboard support to image preview (space, enter, backspace, left, right, up, down, f, esc)
-* adds text file preview and highlighting with [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (same keys as img preview)
-* adds Markdown preview with [markdown-js](http://github.com/evilstreak/markdown-js)
-* adds new type `markdown`
-* changes language code `gr` to `el`
-* adds localization for filter placeholder
-* adds `hu` translation by [Rodolffo](http://github.com/Rodolffo)
-* updates to [jQuery.qrcode](http://larsjung.de/qrcode/) 0.2
-* updates to [jQuery.scrollpanel](http://larsjung.de/scrollpanel/) 0.1
-* updates to [modulejs](http://larsjung.de/modulejs/) 0.2
-* updates to [Moment.js](http://momentjs.com) 1.7.0
-* updates to [Underscore.js](http://underscorejs.org) 1.3.3
-
-
-### v0.20 - *2012-05-11*
-
-* adds image preview
-* adds thumbnails for video and pdf
-* adds support for lighttpd, nginx and cherokee and maybe other webservers with PHP
-* adds folder size in PHP version via shell `du`
-* fixes some localization problems
-* updates info page at `/_h5ai/`
-* switches to JSHint
-
-
-### v0.19 - *2012-04-19*
-
-* adds lots of config options
-* changes in `config.js` and `h5ai.htaccess`
-* fixes js problems in IE 7+8
-* hides broken tree view in IE < 9, adds a message to the footer
-* removes hash changes since they break logical browser history
-* fixes thumbnail size for portrait images in icon view
-* fixes problems with file type recognition
-* adds an info page at `/_h5ai/`
-* sort order is preserved while browsing
-* removes PHP error messages on thumbnail generation
-* fixes PHP some problems with packed download
-* adds support for tarred downloads
-* changes crumb image for folders with an index file
-* adds `index.php` to use h5ai in non-Apache environments
-* switches from [Datejs](http://www.datejs.com) to [Moment.js](http://momentjs.com)
-* adds [underscore.js](http://underscorejs.org)
-* fixes mousewheel problems, updates [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) to 3.0.6
-* updates `lv` translation
-* adds `ro` translation by [Jakob Cosoroabă](http://github.com/midday)
-* adds `ja` translation by [metasta](http://github.com/metasta)
-* adds `nb` translation by [Sindre Sorhus](http://github.com/sindresorhus)
-* adds `sr` translation by [vBm](http://github.com/vBm)
-* adds `gr` translation by [xhmikosr](http://github.com/xhmikosr)
-
-
-### v0.18 - *2012-02-24*
-
-* adds optional QRCode display
-* adds optional filtering for displayed files and folders
-* updates design
-* improves zipped download
-* adds support for zipped download of htaccess restricted files
-* changes h5ai.htaccess
-* custom headers/footers are now optional and disabled by default
-* fixes problems with folder recognition in the JS version
-* fixes include problems in PHP version
-* fixes path problems on servers running on Windows in PHP version
-* fixes broken links in custom headers/footers while zipped download enabled
-* fixes problems with thumbnails for files with single or double quotes in filename
-* improves url hashes
-* updates year in `LICENSE.TXT`
-* updates es translation
-* adds `zh-tw` translation by [Yao Wei](http://github.com/medicalwei)
-* updates `zh-cn` translation
-
-
-### v0.17 - *2011-11-28*
-
-* h5ai is now located in `_h5ai` to reduce collisions
-* switches from HTML5 Boilerplate reset to normalization
-* adds some style changes for small devices
-* configuration (options, types, translations) now via `config.js`
-* icons for JS version are now configured via `config.js`
-* sort order configuration changed
-* sorting is now done without page reload
-* adds `customHeader` and `customFooter` to `config.js`
-* supports restricted folders to some extent
-* some style changes on tree and language menu
-* fixes total file/folder count in status bar
-* adds support for use with userdir (requires some manual changes)
-
-
-### v0.16 - *2011-11-02*
-
-* sorts translations in `options.js`
-* improves HTML head sections
-* refactors JavaScript and PHP a lot
-* improves/fixes file selection for zipped download
-* fixes scrollbar and header/footer link issues (didn't work when zipped download enabled)
-* adds support for ctrl-select
-* `dateFormat` in `options.js` changed, now affecting JS and PHP version
-* `dateFormat` is localizable by adding it to a translation in `options.js`
-* PHP version is now configurable via `php/config.php` (set custom doc root and other PHP related things)
-* image thumbs and zipped download is disabled by default now, but works fine if PHP is configured
-
-
-### v0.15.2 - *2011-09-18*
-
-* adds `it` translation by [Salvo Gentile](http://github.com/SalvoGentile) and [Marco Patriarca](http://github.com/Fexys)
-* switches build process from scripp to wepp
-
-
-### v0.15.1 - *2011-09-06*
-
-* fixes security issues with the zipped download feature
-* makes zipped download optional (but enabled by default)
-
-
-### v0.15 - *2011-09-04*
-
-* adds zipped download for selected files
-* cleans and refactores
-
-
-### v0.14.1 - *2011-09-01*
-
-* display meta information in bottom bar (icon view)
-* adds `zh-cn` translation by [Dongsheng Cai](http://github.com/dongsheng)
-* adds `pl` translation by Radosław Zając
-* adds `ru` translation by Богдан Илюхин
-
-
-### v0.14 - *2011-08-16*
-
-* adds image thumbnails for PHP version
-* new option `slideTree` to turn off auto slide in
-
-
-### v0.13.2 - *2011-08-12*
-
-* changes in `/h5ai/.htaccess` ... PHP configuration ...
-
-
-### v0.13.1 - *2011-08-12*
-
-* fixes initial tree display
-* adds sort order option
-* adds/fixes some translations
-* adds `lv` translation by Sandis Veinbergs
-
-
-### v0.13 - *2011-08-06*
-
-* adds PHP implementation! (should work with PHP 5.2+)
-* adds new options
-* changes layout of the bottom bar to display status information
-* adds language selector to the bottom bar
-* quotes keys in `options.js` to make it valid json
-* changes value of option `lang` from `undefined` to `null`
-* adds some new keys to `h5aiLangs`
-* adds browser caching rules for css and js
-* adds `pt` translation by [Jonnathan](http://github.com/jonnsl)
-* adds `bg` translation by George Andonov
-
-
-### v0.12.3 - *2011-07-30*
-
-* adds `tr` translation by [Batuhan Icoz](http://github.com/batuhanicoz)
-
-
-### v0.12.2 - *2011-07-30*
-
-* adds `es` translation by Jose David Calderon Serrano
-
-
-### v0.12.1 - *2011-07-29*
-
-* fixes unchecked use of console.log
-
-
-### v0.12 - *2011-07-28*
-
-* improves performance
-
-
-### v0.11 - *2011-07-27*
-
-* changes license to MIT license, see `LICENSE.txt`
-
-
-### v0.10.2 - *2011-07-26*
-
-* improves tree scrollbar
-
-
-### v0.10.1 - *2011-07-24*
-
-* fixes problems with ' in links
-
-
-### v0.10 - *2011-07-24*
-
-* fixes problems with XAMPP on Windows (see `dot.htaccess` comments for instructions)
-* fixes tree fade-in-fade-out effect for small displays ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
-* adds custom scrollbar to tree ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
-* fixes broken links caused by URI encoding/decoding ([issue #9](http://github.com/lrsjng/h5ai/issues/9))
-* adds "empty" to localization (hope Google Translate did a good job here)
-
-
-### v0.9 - *2011-07-18*
-
-* links hover states between crumb, extended view and tree
-* fixes size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
-* refactores js to improve performance and cleaned code
-* adds caching for folder status codes and content
-* adds `fr` translation by [Nicolas](http://github.com/Nicosmos)
-* adds `nl` translation by [Stefan de Konink](http://github.com/skinkie)
-* adds `sv` translation by Oscar Carlsson
-
-
-### v0.8 - *2011-07-08*
-
-* removes slashes from folder labels
-* optionally rename parent folder entries to real folder names, see `options.js`
-* long breadcrumbs (multiple rows) no longer hide content
-* error folder icons are opaque now
-* refactores js a lot (again...)
-
-
-### v0.7 - *2011-07-07*
-
-* removes shadows
-* smarter tree side bar
-
-
-### v0.6 - *2011-07-05*
-
-* refactores js
-* adds localization, see `options.js`
-
-
-### v0.5.3 - *2011-07-04*
-
-* refactores js
-* adds basic options support via `options.js`
-* adds comments to `options.js`
-* adds optional tree sidebar
-
-
-### v0.5.2 - *2011-07-02*
-
-* details view adjusts to window width
-* links icon for *.gz and *.bz2
-
-
-### v0.5.1 - *2011-07-01*
-
-* disables tree sidebar for now, since it had unwanted side effects
-
-
-### v0.5 - *2011-07-01*
-
-* adds tree sidebar
-* some refactorings
-
-
-### v0.4 - *2011-06-27*
-
-* adds better fallback, in case JavaScript is disabled
-* rewrites js, fixed middle-button click etc. problems
-* refactors css
-* sorts, adds and moves icons and images
-* updates dot.access
-
-
-### v0.3.2 - *2011-06-24*
-
-* removes lib versions from file names
-* adds 'empty' indicator for icons view
-
-
-### v0.3.1 - *2011-06-24*
-
-* refactores js
-* adds `folderClick` and `fileClick` callback hooks
-* fixes .emtpy style
-
-
-### v0.3 - *2011-06-23*
-
-* includes build stuff, files previously found in the base directory are now located in folder `target`
-* styles and scripts are now minified
-* adds Modernizr 2.0.4 for future use
-* updates jQuery to version 1.6.1
-
-
-### v0.2.3 - *2011-06-17*
-
-* more refactoring in main.js
-
-
-### v0.2.2 - *2011-06-16*
-
-* refactores a lot, adds some comments
-* includes fixes from [NumEricR](http://github.com/NumEricR)
-* adds top/bottom message support, only basicly styled
-
-
-### v0.2.1 - *2011-06-16*
-
-* fixes croped filenames
-* fixes missing .png extension in header
-* adds some color to the links
-* adds changelog
-
-
-### v0.2 - *2011-06-15*
-
-* adds icon view
+[web]: http://larsjung.de/h5ai/
+[gh]: https://github.com/lrsjng/h5ai
+[gh-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/
 
+[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

makefile.js

@@ -2,168 +2,160 @@
 'use strict';
 
 
-var path = require('path'),
-
-	pkg = require('./package.json'),
-
-	root = path.resolve(__dirname),
-	src = path.join(root, 'src'),
-	build = path.join(root, 'build'),
-
-	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
-		predef: [
-			'modulejs'
-		]
-	},
-
-	handlebarsEnv = {
-		pkg: pkg
-	},
-
-	mapSrc = function (blob) {
-
-		return blob.source.replace(src, build).replace(/\.less$/, '.css').replace(/\.jade$/, '');
-	},
-
-	mapRoot = function (blob) {
-
-		return blob.source.replace(root, path.join(build, '_h5ai'));
-	};
-
-
 module.exports = function (make) {
 
-	var Event = make.Event,
-		$ = make.fQuery,
-		moment = make.moment;
+    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.8.1');
-	make.defaults('build');
+    make.version('>=0.10.0');
+    make.defaults('build');
 
 
-	make.before(function () {
+    make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) {
 
-		handlebarsEnv.stamp = moment().format('YYYY-MM-DD HH:mm:ss');
-	});
+        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('check-version', [], 'add git info to dev builds').async(function (done, fail) {
+    make.target('clean', [], 'delete build folder').sync(function () {
 
-		if (!/-dev$/.test(pkg.version)) {
-			done();
-			return;
-		}
-
-		$.git(root, function (err, result) {
-
-			pkg.version += '-' + result.revListOriginMasterHead.length + '-' + result.revParseHead.slice(0, 7);
-			Event.info({
-				method: 'check-version',
-				message: 'version set to ' + pkg.version
-			});
-			done();
-		});
-	});
+        $.DELETE(build);
+    });
 
 
-	make.target('clean', [], 'delete build folder').sync(function () {
+    make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
 
-		$.rmfr($.I_AM_SURE, build);
-	});
+        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('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
+    make.target('build', ['check-version'], 'build all updated files').sync(function () {
 
-		$(src + '/_h5ai/client/js: **/*.js, ! lib/**')
-			.jshint(jshint);
-	});
+        var env = {pkg: pkg};
+        var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.homepage + ' */\n';
+
+        $(src + ': _h5ai/client/js/*.js')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
+            .includify()
+            .uglifyjs()
+            .wrap(header)
+            .WRITE(mapSrc);
+
+        $(src + ': _h5ai/client/css/*.less')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .less()
+            .cssmin()
+            .wrap(header)
+            .WRITE(mapSrc);
+
+        $(src + ': **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .jade()
+            .WRITE(mapSrc);
+
+        $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .WRITE(mapSrc);
+
+        $(src + ': _h5ai/client/css/fonts/**')
+            .newerThan(mapSrc)
+            .WRITE(mapSrc);
+
+        $(root + ': *.md')
+            .newerThan(mapRoot)
+            .WRITE(mapRoot);
+    });
 
 
-	make.target('build', ['check-version'], 'build all updated files').sync(function () {
+    make.target('build-uncompressed', ['check-version'], 'build all updated files without compression').sync(function () {
 
-		$(src + ': _h5ai/client/js/*.js')
-			.modified(mapSrc, $(src + ': _h5ai/client/js/**'))
-			.includify()
-			.uglifyjs()
-			.write($.OVERWRITE, mapSrc);
+        var env = {pkg: pkg};
+        var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.homepage + ' */\n';
 
-		$(src + ': _h5ai/client/css/*.less')
-			.modified(mapSrc, $(src + ': _h5ai/client/css/**'))
-			.less()
-			.cssmin()
-			.write($.OVERWRITE, mapSrc);
+        $(src + ': _h5ai/client/js/*.js')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
+            .includify()
+            // .uglifyjs()
+            .wrap(header)
+            .WRITE(mapSrc);
 
-		$(src + ': **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
-			.jade()
-			.write($.OVERWRITE, mapSrc);
+        $(src + ': _h5ai/client/css/*.less')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .less()
+            // .cssmin()
+            .wrap(header)
+            .WRITE(mapSrc);
 
-		$(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
-			.write($.OVERWRITE, mapSrc);
+        $(src + ': **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .jade()
+            .WRITE(mapSrc);
 
-		$(root + ': README*, LICENSE*')
-			.modified(mapRoot)
-			.write($.OVERWRITE, mapRoot);
-	});
+        $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(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 () {
+    make.target('release', ['clean', 'build'], 'create a zipball').async(function (done, fail) {
 
-		$(src + ': _h5ai/client/js/*.js')
-			.modified(mapSrc, $(src + ': _h5ai/client/js/**'))
-			.includify()
-			// .uglifyjs()
-			.write($.OVERWRITE, mapSrc);
-
-		$(src + ': _h5ai/client/css/*.less')
-			.modified(mapSrc, $(src + ': _h5ai/client/css/**'))
-			.less()
-			// .cssmin()
-			.write($.OVERWRITE, mapSrc);
-
-		$(src + ': **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
-			.jade()
-			.write($.OVERWRITE, mapSrc);
-
-		$(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
-			.write($.OVERWRITE, mapSrc);
-
-		$(root + ': README*, LICENSE*')
-			.modified(mapRoot)
-			.write($.OVERWRITE, 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
-		});
-	});
+        $(build + ': **').shzip({
+            target: path.join(build, pkg.name + '-' + pkg.version + '.zip'),
+            dir: build,
+            callback: done
+        });
+    });
 };

package.json

@@ -1,12 +1,22 @@
 {
   "name": "h5ai",
-  "version": "0.23.0",
+  "version": "0.26.1",
+  "develop": false,
   "description": "a modern HTTP web server index",
-  "url": "http://larsjung.de/h5ai/",
-  "author": "Lars Jung",
+  "homepage": "http://larsjung.de/h5ai/",
+  "bugs": "https://github.com/lrsjng/h5ai/issues",
+  "author": "Lars Jung <lrsjng@gmail.com> (http://larsjung.de)",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/lrsjng/h5ai.git"
+  },
+  "scripts": {
+    "test": "mocha --recursive test"
+  },
+  "devDependencies": {
+    "lodash": "~2.4.1",
+    "mocha": "~1.21.3",
+    "zombie": "~2.0.0-alpha31"
   }
 }

src/_h5ai/.htaccess

@@ -68,31 +68,31 @@ AddDefaultCharset utf-8
     ExpiresActive on
     ExpiresDefault                                      "access plus 1 month"
 
-  # CSS
+    # CSS
     ExpiresByType text/css                              "access plus 1 week"
 
-  # Data interchange
+    # Data interchange
     ExpiresByType application/json                      "access plus 0 seconds"
     ExpiresByType application/xml                       "access plus 0 seconds"
     ExpiresByType text/xml                              "access plus 0 seconds"
 
-  # Favicon (cannot be renamed!)
+    # Favicon (cannot be renamed!)
     ExpiresByType image/x-icon                          "access plus 1 week"
 
-  # HTML components (HTCs)
+    # HTML components (HTCs)
     ExpiresByType text/x-component                      "access plus 1 month"
 
-  # HTML
+    # HTML
     ExpiresByType text/html                             "access plus 0 seconds"
 
-  # JavaScript
+    # JavaScript
     ExpiresByType application/javascript                "access plus 1 week"
 
-  # Manifest files
+    # Manifest files
     ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
     ExpiresByType text/cache-manifest                   "access plus 0 seconds"
 
-  # Media
+    # Media
     ExpiresByType audio/ogg                             "access plus 1 month"
     ExpiresByType image/gif                             "access plus 1 month"
     ExpiresByType image/jpeg                            "access plus 1 month"
@@ -101,11 +101,11 @@ AddDefaultCharset utf-8
     ExpiresByType video/ogg                             "access plus 1 month"
     ExpiresByType video/webm                            "access plus 1 month"
 
-  # Web feeds
+    # Web feeds
     ExpiresByType application/atom+xml                  "access plus 1 hour"
     ExpiresByType application/rss+xml                   "access plus 1 hour"
 
-  # Web fonts
+    # Web fonts
     ExpiresByType application/font-woff                 "access plus 1 month"
     ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
     ExpiresByType application/x-font-ttf                "access plus 1 month"

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

@@ -0,0 +1,96 @@
+-------------------------------
+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

@@ -0,0 +1,15 @@
+----------------------
+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,76 +1,73 @@
 
 #bottombar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	height: 18px;
-	left: 0;
-	bottom: 0;
-	padding: 6px 0 8px 0;
-	// .vert-gradient(rgb(241,241,241), rgb(228,228,228));
-	background-color: @col-widget-back;
-	border-top: @border-widget;
-	// .box-shadow(0 -2px 4px 0 rgba(0, 0, 0, 0.15);
+    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;
+    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;
+    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 {
-		display: none;
-		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;
+        &: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;
-		}
-	}
+            &:before {
+                content: '·'
+            }
+        }
+        &.default {
+        }
+        &.dynamic {
+            display: none;
+        }
+    }
 }

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

@@ -1,30 +1,34 @@
 
 #content {
-	max-width: 960px;
-	margin: 50px auto;
-	font-size: 16px;
+    max-width: 960px;
+    margin: 50px auto;
+    font-size: 15px;
 }
 
 #content-header, #content-footer {
-	color: #333;
+    color: #333;
 
-	a, a:active, a:visited {
-		color: @col-link;
-		text-decoration: none;
-		cursor: pointer;
+    a, a:active, a:visited {
+        color: @col-link;
+        text-decoration: none;
+        cursor: pointer;
 
-		&:hover {
-			color: #555;
-		}
-	}
+        &:hover {
+            color: #555;
+        }
+    }
+
+    pre, code {
+        font-family: @font-family-mono;
+    }
 }
 
 #content-header {
-	padding-bottom: 12px;
-	margin-bottom: 32px;
+    padding-bottom: 12px;
+    margin-bottom: 32px;
 }
 
 #content-footer {
-	padding-top: 12px;
-	margin-top: 32px;
+    padding-top: 12px;
+    margin-top: 32px;
 }

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

@@ -1,32 +1,32 @@
 
 #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;
+    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;
+    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);
+        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;
-			}
-		}
-	}
+            &:hover {
+                color: @col-hover;
+                background-color: @col-widget-back-hover;
+            }
+        }
+    }
 }

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

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

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

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

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

@@ -1,89 +0,0 @@
-
-#content {
-	border: 1px dashed #fff;
-	.border-radius(8px);
-	.transition(border-color 0.2s ease-in-out);
-
-	&.hint {
-		border-color: #ddd;
-	}
-	&.match {
-		border-color: #999;
-	}
-}
-
-
-#uploads {
-	width: 450px;
-	margin: 12px auto;
-	padding: 0;
-	list-style: none;
-
-	.upload {
-		color: #555;
-		font-size: 0.9em;
-
-		.name {
-			display: inline-block;
-			white-space: nowrap;
-			overflow: hidden;
-
-			&:before {
-				display: inline-block;
-				content: '•';
-				color: #55c;
-				width: 1em;
-				text-align: center;
-				padding-right: 1em;
-			}
-		}
-
-		.size {
-			display: none;
-			float: right;
-			white-space: nowrap;
-
-			&:after {
-				content: ' bytes'
-			}
-		}
-
-		.error {
-			float: right;
-			white-space: nowrap;
-			color: #c55;
-		}
-
-		.finished {
-			float: right;
-			white-space: nowrap;
-			color: #008200;
-		}
-
-		.progress {
-			display: inline-block;
-			margin: 4px 8px;
-
-			width: 84px;
-			height: 8px;
-			background-color: #ddd;
-			overflow: hidden;
-			float: right;
-
-			.bar {
-				width: 0%;
-				height: 100%;
-				background-color: #999;
-			}
-		}
-
-		&.finished .name:before {
-			content: '✔';
-			color: #008200;
-		}
-		&.error .name:before {
-			content: '✖';
-			color: #c55;
-		}
-	}
-}

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

@@ -1,90 +1,71 @@
 
 #fallback {
-	display: none;
-	max-width: 960px;
-	margin: 80px auto;
+    display: none;
+    max-width: 960px;
+    margin: 80px auto;
 
-	table {
-		display: block;
-		width: 100%;
-		border-collapse: collapse;
+    table {
+        display: block;
+        width: 100%;
+        border-collapse: collapse;
 
-		th, td {
-			padding: 6px;
-			text-align: left;
-			border: none;
-		}
-		th {
-			padding-bottom: 18px;
+        th, td {
+            padding: 6px;
+            text-align: left;
+            border: none;
+        }
+        th {
+            padding-bottom: 18px;
+            color: #555;
+            font-weight: normal;
+            opacity: 0.4;
+        }
+        td {
+            border-bottom: 1px solid @col-border;
+            overflow: hidden;
+            white-space: nowrap;
+            font-size: 15px;
 
-			a, a:visited {
-				color: #555;
-				font-weight: normal;
-				text-decoration: none;
-				cursor: pointer;
-				opacity: 0.4;
-				.transition(all 0.2s ease-in-out);
+            a, a:active, a:visited {
+                display: block;
+                color: #555;
+                text-decoration: none;
+                cursor: pointer;
 
-				&:hover {
-					color: #555;
-					opacity: 0.9;
-				}
-			}
-			span {
-				color: #555;
-				font-weight: normal;
-				opacity: 0.4;
-			}
-		}
-		td {
-			border-bottom: 1px solid @col-border;
-			overflow: hidden;
-			white-space: nowrap;
-			font-size: 16px;
+                &:hover {
+                    color: @col-hover;
+                }
+            }
+        }
+        .fb-i {
+            width: 24px;
 
-			a, a:active, a:visited {
-				display: block;
-				color: #555;
-				text-decoration: none;
-				cursor: pointer;
-
-				&:hover {
-					color: @col-hover;
-				}
-			}
-		}
-		td:nth-child(1), th:nth-child(1) {
-			text-align: center;
-			width: 16px;
-			color: #ccc;
-			font-size: 0.9em;
-
-			img {
-				width: 16px;
-				height: 16px;
-			}
-		}
-		td:nth-child(2), th:nth-child(2) {
-			width: 682px;
-			max-width: 682px;
-		}
-		td:nth-child(3), th:nth-child(3) {
-			text-align: right;
-			width: 160px;
-			min-width: 160px;
-		}
-		td:nth-child(4), th:nth-child(4) {
-			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;
+        }
+    }
 }
 
 
 html.no-js, html.no-browser {
 
-	#fallback {
-		display: block;
-	}
+    #fallback {
+        display: block;
+    }
 }

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

@@ -1,18 +1,19 @@
 
 #filter {
-	.topbar-right;
+    .topbar-right;
 
-	input {
-		border: none;
-		font-family: @font-family;
-		color: @col;
-		background-color: rgba(0,0,0,0);
-		width: 30px;
-	}
+    input {
+        border: none;
+        font-family: @font-family;
+        color: @col;
+        background-color: rgba(0,0,0,0);
+        width: 30px;
+        outline: none;
+    }
 
-	&.current {
-		input {
-			width: 150px;
-		}
-	}
+    &.current {
+        input {
+            width: 150px;
+        }
+    }
 }

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

@@ -0,0 +1,56 @@
+
+@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

@@ -4,6 +4,7 @@
 @col-hover: rgb(29,119,194);
 @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);
 
@@ -16,41 +17,54 @@
 @col-widget-back-sel: rgba(255,255,255,0.8);
 @col-widget-sep: @col-border;
 
-// @col-sb-back: rgb(210,210,210);
-// @col-sb-thumb: rgb(180,180,180);
-// @col-sb-thumb-active: rgb(150,150,150);
 @col-sb-back: rgba(0,0,0,0.08);
 @col-sb-thumb: rgba(0,0,0,0.15);
 @col-sb-thumb-active: rgba(0,0,0,0.25);
 
+@col-range-back: rgb(224,224,224);
+@col-range-thumb: rgb(190,190,190);
 
 @border-widget: 1px solid @col-border;
 @border-widget-sep: 1px solid @col-widget-sep;
 
-
-
-
-
-@font-family: Ubuntu, sans-serif;
+@font-family: Ubuntu, Helvetica, Arial, sans-serif;
+@font-weight: 300;
 @font-family-mono: "Ubuntu Mono", monospace;
 
 
-html { overflow-y: auto; }
 ::-moz-selection { background: #68A9FF; color: #fff; text-shadow: none; }
 ::selection { background: #68A9FF; color: #fff; text-shadow: none; }
 
-body {
-	font-family: @font-family;
-	// font-weight: 400;
-	font-size: 13px;
-	color: @col;
-	background-color: @col-back;
-	margin: 30px;
+.transition (@transition) {
+    -webkit-transition: @transition;
+    transition: @transition;
 }
 
-html.js .hideOnJs, html.no-js .hideOnNoJs {
-	display: none;
+.transform (@transform) {
+    -webkit-transform: @transform;
+    -ms-transform: @transform;
+    transform: @transform;
+    zoom: 1;
 }
-html.no-browser .noBrowserMsg {
-	display: inline !important;
+
+html {
+    min-height: 100%;
+    overflow: auto;
+    overflow-y: scroll;
+
+    &.js .noJsMsg {
+        display: none;
+    }
+    &.browser .noBrowserMsg {
+        display: none;
+    }
+}
+
+body {
+    font-family: @font-family;
+    font-size: 13px;
+    font-weight: @font-weight;
+    color: @col;
+    background-color: @col-back;
+    margin: 30px;
 }

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

@@ -1,101 +1,147 @@
 
 body#h5ai-info {
-	font-family: @font-family;
-	margin: 2em auto 4em auto;
-	font-size: 20px;
-	color: @col;
-	max-width: 600px;
-	text-align: center;
+    font-family: @font-family;
+    margin: 2em auto 4em auto;
+    font-size: 20px;
+    color: @col;
+    max-width: 600px;
+    text-align: center;
 
-	a, a:active, a:visited {
-		color: @col;
-		text-decoration: none;
-		.transition(all 0.2s ease-in-out);
+    a, a:active, a:visited {
+        color: @col;
+        text-decoration: none;
+        .transition(all 0.2s ease-in-out);
 
-		&:hover {
-			color: @col-hover;
-		}
-	}
+        &:hover {
+            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;
+    }
 
-	.build-version {
-		display: block;
-	}
-	.build-stamp {
-		display: block;
-		margin-top: 0.3em;
-		font-size: 0.6em;
-		color: #aaa;
-	}
-	.idx-file {
-		margin-top: 1em;
-		font-size: 0.6em;
-		display: block;
-		color: #aaa;
 
-		.value {
-			margin-left: 0.5em;
-			padding: 2px 4px;
-			.border-radius(4px);
-			font-family: @font-family-mono;
-			letter-spacing: 0.1em;
-			background-color: @col-widget-back;
-			border: @border-widget;
-		}
-	}
-	h1 {
-		font-size: 3.6em;
-		margin: 0;
-	}
-	h2 {
-		font-size: 1.15em;
-		margin: 2.6em 0 0 0;
-	}
-	p {
-		line-height: 1.6em;
-	}
-	p + p {
-		margin-top: 1.2em;
-	}
-	li {
-		margin-top: 0.6em;
-		line-height: 1.4em;
-	}
+    #support {
+        margin: 12px auto 24px auto;
+        padding: 6px 18px;
+        width: 164px;
+        font-size: 12px;
+        background: @col-widget-back;
+        border: @border-widget;
+        border-radius: 4px;
 
-	#tests {
-		display: inline-block;
-		list-style-type: none;
-		text-align: left;
-		margin: 0;
-		padding: 0;
+        .paypal {
+            margin: 6px 0 0 0;
+        }
+    }
 
-		.test-label {
-			display: inline-block;
-			width: 300px;
-		}
-		.test-result {
-			display: inline-block;
-			width: 70px;
-			text-align: right;
-			font-weight: bold;
-			color: #aaa;
 
-			&.test-passed {
-				color: #5a5;
-			}
-			&.test-failed {
-				color: #a55;
-			}
-		}
-		.test-info {
-			margin: 4px 0 12px 12px;
-			font-size: 0.7em;
-			color: #aaa;
-			width: 310px;
-			line-height: 1.2em;
-		}
-	}
+    #login-wrapper {
+        font-size: 14px;
+    }
 
-	#bottombar {
-		font-size: 13px;
-	}
+    #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;
+        display: inline-block;
+        width: 200px;
+        height: 27px;
+        padding: 0 6px;
+        margin: 8px;
+    }
+
+    #login, #logout {
+        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;
+        }
+    }
+
+    #hint {
+        margin: 12px auto;
+        width: 360px;
+        color: @col;
+        font-size: 12px;
+    }
+
+
+    #tests-wrapper {
+        margin: 96px 0;
+    }
+
+    #tests {
+        display: inline-block;
+        list-style-type: none;
+        text-align: left;
+        margin: 0;
+        padding: 0;
+
+        .test {
+            margin: 12px 0 0 0;
+            padding: 6px;
+
+            .label {
+                display: inline-block;
+                width: 250px;
+            }
+            .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;
+            }
+        }
+    }
+
+
+    #bottombar {
+        font-size: 13px;
+    }
 }

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

@@ -1,54 +0,0 @@
-
-#langSelector {
-	position: relative;
-	cursor: pointer;
-
-	.langOptions {
-		position: absolute;
-		z-index: 2;
-		overflow: auto;
-		display: none;
-		right: 0;
-		top: 0;
-		max-height: 200px;
-		background-color: @col-widget-back;
-		border: @border-widget;
-
-		.sp-scrollbar {
-			margin: 0;
-			width: 6px;
-			background-color: @col-sb-back;
-			cursor: pointer;
-
-			.sp-thumb {
-				background-color: @col-sb-thumb;
-			}
-			&.active .sp-thumb {
-				background-color: @col-sb-thumb-active;
-			}
-		}
-
-		ul {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-			text-align: left;
-		}
-
-		li {
-			padding: 8px 24px 10px 24px;
-			white-space: nowrap;
-			border-top: @border-widget-sep;
-			.transition(all 0.2s ease-in-out);
-
-			&.current {
-				color: #333;
-				background-color: @col-widget-back-sel;
-			}
-			&:hover {
-				color: @col-hover;
-				background-color: @col-widget-back-hover;
-			}
-		}
-	}
-}

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

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

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

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

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

@@ -1,130 +1,18 @@
 
-#pv-img-overlay {
-	display: none;
-	position: fixed;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 100;
-
-	background-color: rgba(0,0,0,0.5);
-	.transition(background-color 0.3s ease-in-out);
-
-	text-align: center;
-}
-
-#pv-img-content, #pv-spinner {
-	position: fixed;
-}
-
 @check-white: #f8f8f8;
 @check-black: #e8e8e8;
 #pv-img-image {
-	max-width: 100%;
-	max-height: 100%;
-	border: 2px solid #fff;
-	.border-radius(4px);
+    position: absolute;
 
-	background-color: @check-white;
-	background-image:
-		-webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black),
-		-webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black);
-	background-size: 60px 60px;
-	background-position: 0 0, 30px 30px
-}
-
-#pv-img-overlay.fullscreen {
-	background-color: #111;
-
-	#pv-img-image {
-		border: 0;
-		.border-radius(0);
-	}
-}
-
-#pv-img-close {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-}
-
-#pv-img-prev {
-	position: fixed;
-	cursor: pointer;
-}
-
-#pv-img-next {
-	position: fixed;
-	cursor: pointer;
-}
-
-#pv-img-buttons, #pv-img-topbuttons {
-	list-style: none;
-	list-style-image: none;
-	margin: 0;
-	padding: 0;
-
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
-	img + span, img + input {
-		margin-left: 6px;
-	}
-	input {
-		background-color: rgba(255,255,255,0.1);
-		border: none;
-		color: #ccc;
-	}
-
-	.bar-label {
-		display: block;
-		color: #ccc;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
-	}
-
-	.bar-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;
-		cursor: pointer;
-		&:hover, &.hover {
-			.bar-highlight;
-		}
-	}
-
-	.bar-left {
-		float: left;
-		border-right: @bar-sep-border;
-	}
-
-	.bar-right {
-		float: right;
-		border-left: @bar-sep-border;
-	}
-}
-
-#pv-img-bottombar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	height: 32px;
-	left: 0;
-	bottom: 0;
-	// .vert-gradient(rgb(27,27,27), rgb(14,14,14));
-	background-color: rgb(27,27,27);
-	border-top: 1px solid rgb(45,45,45);
+    max-width: 100%;
+    max-height: 100%;
+
+    background-color: @check-white;
+    background-image:
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black),
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
+
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 }

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

@@ -1,232 +1,174 @@
 
-#pv-txt-overlay {
-	display: none;
-	position: fixed;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 100;
-
-	background-color: rgba(0,0,0,0.5);
-
-	text-align: center;
-}
-
-#pv-txt-content {
-	max-width: 960px;
-	margin: 0 auto;
-	padding: 10px;
-	background-color: #fff;
-	border: 2px solid #fff;
-	.border-radius(4px);
-	text-align: left;
-	overflow: auto;
-	position: relative;
-}
-
-#pv-txt-spinner {
-	position: fixed;
-}
-
 #pv-txt-text {
+    max-width: 960px;
+    text-align: left;
+    background-color: #fff;
+    margin: 0 auto;
+    padding: 8px;
+    overflow: auto;
 
-	&.highlighted {
-		word-break: break-all;
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 
-		tr:hover {
-			background-color: rgba(0,0,0,0.05);
+    &.highlighted {
+        // word-break: break-all;
 
-			.nr {
-				color: #333;
-			}
-		}
+        code {
+            font-family: @font-family-mono;
+            font-size: 16px;
+            line-height: 1.2em;
+        }
 
-		td {
-			vertical-align: top;
-			font-family: @font-family-mono;
-			font-size: 16px;
-			line-height: 1.2em;
-			color: #999;
-			word-break: normal;
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
 
-			&.nr {
-				text-align: right;
-				padding: 0 8px 0 4px;
-			}
+            &:hover {
+                color: #68A9FF;
+            }
+        }
 
-			&.line {
-				width: 100%;
-				padding: 0 4px 0 8px;
-			}
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #aaa;
+        }
 
-			code {
-				font-family: @font-family-mono;
-				font-size: 16px;
-				line-height: 1.2em;
-			}
-		}
+        .token.punctuation {
+            color: #999;
+        }
 
-		.plain {
-			color: #000;
-		}
-		.comments {
-			color: #008200;
-		}
-		.string {
-			color: #1111ff;
-		}
-		.keyword {
-			color: #006699;
-			font-weight: bold;
-		}
-		.preprocessor {
-			color: #999;
-		}
-		.variable {
-			color: #aa7700;
-		}
-		.value {
-			color: #009900;
-		}
-		.functions {
-			color: #ff1493;
-		}
-		.constants {
-			color: #0066cc;
-		}
-		.script {
-			color: #006699;
-			font-weight: bold;
-		}
-		.color1 {
-			color: #999;
-		}
-		.color2 {
-			color: #ff1493;
-		}
-		.color3 {
-			color: #ff1111;
-		}
+        .namespace {
+            opacity: .7;
+        }
 
-		a, a:active, a:visited {
-			color: #2080FF;
-			text-decoration: none;
-			cursor: pointer;
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.constant,
+        .token.symbol {
+            color: #905;
+        }
 
-			&:hover {
-				color: #68A9FF;
-			}
-		}
-	}
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.builtin {
+            color: #690;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable {
+            color: #a67f59;
+            background: hsla(0,0%,100%,.5);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: #07a;
+        }
+
+        .token.function {
+            color: #DD4A68;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #e90;
+        }
+
+        .token.important {
+            font-weight: bold;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+
+        // 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;
-		padding: 8px 24px;
+    &.markdown {
+        font-size: 16px;
+        padding: 8px 24px;
 
-		a, a:active, a:visited {
-			color: #2080FF;
-			text-decoration: none;
-			cursor: pointer;
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
 
-			&:hover {
-				color: #68A9FF;
-			}
-		}
+            &:hover {
+                color: #68A9FF;
+            }
+        }
 
-		pre, code {
-			font-family: @font-family-mono;
-		}
-		code {
-			color: #008200;
-		}
-	}
-}
-
-#pv-txt-close {
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-}
-
-#pv-txt-prev {
-	position: fixed;
-	cursor: pointer;
-}
-
-#pv-txt-next {
-	position: fixed;
-	cursor: pointer;
-}
-
-#pv-txt-buttons, #pv-txt-topbuttons {
-	list-style: none;
-	list-style-image: none;
-	margin: 0;
-	padding: 0;
-
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
-	img + span, img + input {
-		margin-left: 6px;
-	}
-	input {
-		background-color: rgba(255,255,255,0.1);
-		border: none;
-		color: #ccc;
-	}
-
-	.bar-label {
-		display: block;
-		color: #ccc;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
-	}
-
-	.bar-highlight {
-		background-color: rgba(255,255,255,0.1);
-		opacity: 1.0;
-	}
-
-	@bar-sep-border: 1px solid rgba(255,255,255,0.05);
-
-	.bar-button {
-		.bar-label;
-		cursor: pointer;
-		&:hover, &.hover {
-			.bar-highlight;
-		}
-	}
-
-	.bar-left {
-		float: left;
-		border-right: @bar-sep-border;
-	}
-
-	.bar-right {
-		float: right;
-		border-left: @bar-sep-border;
-	}
-}
-
-#pv-txt-bottombar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	height: 32px;
-	left: 0;
-	bottom: 0;
-	.vert-gradient(rgb(27,27,27), rgb(14,14,14));
-	border-top: 1px solid rgb(45,45,45);
+        pre, code {
+            font-family: @font-family-mono;
+        }
+        code {
+            color: #008200;
+        }
+    }
 }

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,125 @@
+
+#sidebar {
+    position: fixed;
+    right: -220px;
+    width: 200px;
+    top: 31px;
+    height: 100%;
+    z-index: 3;
+    overflow: auto;
+    padding: 8px;
+    background-color: @col-widget-back;
+    border-left: @border-widget;
+}
+
+#settings {
+
+    .block {
+        display: block;
+        margin: 12px 0;
+    }
+
+    a, a:active, a:visited, span.element {
+        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;
+        }
+    }
+
+    .current {
+        a, span.element {
+            opacity: 1.0;
+            background: @col-widget-back-highlight;
+        }
+    }
+
+    img {
+        position: relative;
+        top: -2px;
+        width: 16px;
+        height: 16px;
+    }
+
+    .view {
+        display: inline-block;
+        margin: 0 4px 0 0;
+    }
+
+    .select {
+        background-color: @col-widget-back-highlight;
+        width: 175px;
+        overflow: hidden;
+    }
+
+    input, select {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        font-family: @font-family;
+        font-size: 13px;
+        font-weight: @font-weight;
+        color: @col;
+        background: @col-widget-back;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        border: 0 solid #000;
+        outline: none;
+        cursor: pointer;
+    }
+
+    select {
+        width: 200px;
+        padding: 0 4px;
+    }
+
+    input[type='range'] {
+        border-radius: 2px;
+        width: 64px;
+        margin: 0 0 4px 12px;
+        padding: 0 2px;
+        vertical-align: middle;
+    }
+
+    .range-track() {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        border-width: 0;
+        border-radius: 2px;
+        background: @col-range-back;
+        height: 2px;
+    }
+
+    .range-thumb() {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        border-width: 0;
+        border-radius: 2px;
+        background: @col-range-thumb;
+        width: 12px;
+        height: 12px;
+    }
+
+    input[type='range']::-webkit-slider-runnable-track { .range-track; }
+    input[type='range']::-moz-range-track { .range-track; }
+    input[type='range']::-ms-track { .range-track; }
+    input[type='range']::-ms-fill-lower { .range-track; }
+    input[type='range']::-ms-fill-upper { .range-track; }
+
+    input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
+    input[type='range']::-moz-range-thumb { .range-thumb; }
+    input[type='range']::-ms-thumb { .range-thumb; }
+}

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

@@ -1,89 +1,87 @@
 
 #topbar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	min-height: 30px;
-	left: 0;
-	top: 0;
-	// .vert-gradient(rgb(241,241,241), rgb(228,228,228));
-	background-color: @col-widget-back;
-	border-bottom: @border-widget;
-	// .box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.15);
+    position: fixed;
+    z-index: 5;
+    width: 100%;
+    min-height: 30px;
+    left: 0;
+    top: 0;
+    background-color: @col-widget-back;
+    border-bottom: @border-widget;
 }
 
 
 .topbar-highlight {
-	background-color: @col-widget-back-highlight;
-	opacity: 1.0;
+    background-color: @col-widget-back-highlight;
+    opacity: 1.0;
 }
 
 .topbar-hover {
-	.topbar-highlight;
-	color: @col-hover;
+    .topbar-highlight;
+    color: @col-hover;
 }
 
 .topbar-left {
-	float: left;
-	border-right: @border-widget-sep;
+    float: left;
+    border-right: @border-widget-sep;
 }
 
 .topbar-right {
-	float: right;
-	border-left: @border-widget-sep;
+    float: right;
+    border-left: @border-widget-sep;
 }
 
 
 #navbar {
-	list-style: none;
-	list-style-image: none;
-	margin: 0;
-	padding: 0;
+    list-style: none;
+    list-style-image: none;
+    margin: 0;
+    padding: 0;
 
-	a, a:active, a:visited, span.element {
-		color: @col;
-		cursor: pointer;
-		text-decoration: none;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
+    a, a:active, a:visited, span.element {
+        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;
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 10px;
 
-		&:hover, &.hover {
-			.topbar-hover;
-		}
-	}
-	.current {
-		a, span.element {
-			.topbar-highlight;
-		}
-	}
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
-	img + span, img + input {
-		margin-left: 6px;
-	}
-	.crumb {
-		.topbar-left;
-		.hint {
-			margin-left: 8px;
-			font-style: italic;
-			color: #999;
-		}
-		img.hint {
-			opacity: 0.8;
-			width: 12px;
-			height: 12px;
-		}
-	}
-	.view {
-		.topbar-right;
-	}
+        &:hover, &.hover {
+            .topbar-hover;
+        }
+    }
+    .current {
+        a, span.element {
+            .topbar-highlight;
+        }
+    }
+    img {
+        position: relative;
+        top: -2px;
+        width: 16px;
+        height: 16px;
+    }
+    img + span, img + input {
+        margin-left: 6px;
+    }
+    .crumb {
+        .topbar-left;
+        .hint {
+            margin-left: 8px;
+            font-style: italic;
+            color: #999;
+        }
+        img.hint {
+            opacity: 0.8;
+            width: 12px;
+            height: 12px;
+        }
+    }
+    .view {
+        .topbar-right;
+    }
 }

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

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

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

@@ -1,58 +1,122 @@
 
+.view-details-sized(@size) {
+
+    li {
+
+        &.item {
+
+            a, a:active, a:visited {
+                height: @size + 6px;
+            }
+
+            .label, .date, .size {
+                padding: ((@size - 16px)/2) 8px;
+            }
+        }
+
+        .icon.square {
+            width: @size;
+
+            img {
+                width: @size;
+                height: @size;
+            }
+        }
+
+        .label {
+            margin: 0 230px 0 (@size + 16px);
+        }
+    }
+}
+
+
 #view.view-details {
 
-	li {
+    li {
 
-		&.header {
-			display: list-item;
-		}
+        &.header {
+            display: list-item;
+        }
 
-		&.item {
+        &.item {
 
-			a, a:active, a:visited {
-				border-top: 1px solid @item-border-col-sep;
-				border-bottom: 1px solid @item-border-col-sep;
+            a, a:active, a:visited {
+                border-bottom: 1px solid @item-border-col-sep;
 
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
+                &:hover, &.hover {
+                    border-color: @item-border-col-hover;
+                }
+            }
 
-			// needs to be here, to not conflict with header fields
-			.icon, .label, .date, .size {
-				padding: 8px 6px;
-			}
-		}
+            // needs to be here, to not conflict with header fields
+            .icon {
+                padding: 8px;
+            }
+        }
 
-		&.item + .item {
+        .icon.square {
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            top: -4px;
+        }
 
-			a, a:active, a:visited {
-				border-top: none;
-			}
-		}
+        .date {
+            position: absolute;
+            right: 100px;
+            top: 0;
+        }
 
-		.icon.small {
-			display: inline-block;
-			position: absolute;
-			left: 0;
-			top: -2px;
-			width: 16px;
-		}
+        .size {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
 
-		.label {
-			margin: 0 270px 0 24px;
-		}
+        .selector {
+            margin-top: -1px;
+        }
+    }
 
-		.date {
-			position: absolute;
-			right: 100px;
-			top: 0;
-		}
+    .view-details-sized(@icon-size);
 
-		.size {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
+    &.size-16 {
+        .view-details-sized(16px)
+    }
+
+    &.size-24 {
+        .view-details-sized(24px)
+    }
+
+    &.size-32 {
+        .view-details-sized(32px)
+    }
+
+    &.size-48 {
+        .view-details-sized(48px)
+    }
+
+    &.size-64 {
+        .view-details-sized(64px)
+    }
+
+    &.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)
+    }
 }

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

@@ -1,41 +1,113 @@
 
+.view-grid-sized(@size) {
+
+    li {
+
+        &.item {
+
+            a, a:active, a:visited {
+                width: @size + 182px;
+                height: @size + 6px;
+            }
+
+            .label, .date, .size {
+                padding: ((@size - 16px)/2) 8px;
+            }
+        }
+
+        .icon.square {
+            width: @size;
+
+            img {
+                width: @size;
+                height: @size;
+            }
+        }
+
+        .label {
+            margin: 0 0 0 (@size + 8px);
+        }
+    }
+}
+
+
 #view.view-grid {
 
-	li {
+    li {
 
-		&.item {
-			float: left;
+        &.item {
+            float: left;
+            margin: 2px;
 
-			a, a:active, a:visited {
-				float: left;
-				margin: 2px;
-				padding: 8px;
-				width: 164px;
-				height: 24px;
-				border: 1px solid rgba(0,0,0,0);
+            a, a:active, a:visited {
+                border: 1px solid rgba(0,0,0,0);
 
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
-		}
+                &:hover, &.hover {
+                    border-color: @item-border-col-hover;
+                }
+            }
 
-		.icon.small {
-			display: inline-block;
-			position: absolute;
-			left: 11px;
-			top: 9px;
-			width: 16px;
-		}
+            // needs to be here, to not conflict with header fields
+            .icon {
+                padding: 8px;
+            }
+        }
 
-		.label {
-			display: block;
-			max-width: 140px;
-			margin: 0 0 0 24px;
-		}
+        .icon.square {
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            top: -4px;
+        }
 
-		.date, .size {
-			display: none;
-		}
-	}
+        .label {
+            display: block;
+        }
+
+        .date, .size {
+            display: none;
+        }
+    }
+
+    .view-grid-sized(@icon-size);
+
+    &.size-16 {
+        .view-grid-sized(16px)
+    }
+
+    &.size-24 {
+        .view-grid-sized(24px)
+    }
+
+    &.size-32 {
+        .view-grid-sized(32px)
+    }
+
+    &.size-48 {
+        .view-grid-sized(48px)
+    }
+
+    &.size-64 {
+        .view-grid-sized(64px)
+    }
+
+    &.size-96 {
+        .view-grid-sized(96px)
+    }
+
+    &.size-128 {
+        .view-grid-sized(128px)
+    }
+
+    &.size-192 {
+        .view-grid-sized(192px)
+    }
+
+    &.size-256 {
+        .view-grid-sized(256px)
+    }
+
+    &.size-384 {
+        .view-grid-sized(384px)
+    }
 }

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

@@ -1,46 +1,115 @@
 
+.view-icons-sized(@size) {
+
+    li {
+
+        &.item {
+
+            a, a:active, a:visited {
+                width: @size * 2;
+                height: @size + 72px;
+            }
+        }
+
+        .icon.rational {
+            height: @size;
+
+            img {
+                width: @size;
+                height: @size;
+            }
+            img.thumb {
+                width: auto;
+                height: auto;
+                max-width: @size * 2;
+                max-height: @size;
+            }
+        }
+    }
+}
+
+
 #view.view-icons {
 
-	li {
-		text-align: center;
+    li {
+        text-align: center;
 
-		&.item {
-			float: left;
+        &.item {
+            float: left;
+            margin: 8px;
 
-			a, a:active, a:visited {
-				float: left;
-				margin: 8px;
-				padding: 8px;
-				width: 100px;
-				height: 120px;
-				border: 1px solid rgba(0,0,0,0);
+            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;
-				}
-			}
-		}
+                &:hover, &.hover {
+                    border-color: @item-border-col-hover;
+                }
+            }
+        }
 
-		.icon.big {
-			display: block;
-			height: 48px;
-			margin-bottom: 6px;
-		}
+        .icon.rational {
+            display: block;
+            margin-bottom: 6px;
+        }
 
-		.label {
-			text-align: center;
-			word-wrap: break-word;
-			white-space: normal;
-		}
+        .label {
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
+        }
 
-		.date, .size {
-			display: none;
-		}
-	}
+        .date, .size {
+            display: none;
+        }
+    }
 
-	.empty, .no-match {
-		margin: 0 120px;
-		padding: 16px;
-		height: 120px;
-	}
+    .empty, .no-match {
+        margin: 0 120px;
+        padding: 16px;
+        height: 120px;
+    }
+
+    .view-icons-sized(@icon-size);
+
+    &.size-16 {
+        .view-icons-sized(16px);
+    }
+
+    &.size-24 {
+        .view-icons-sized(24px);
+    }
+
+    &.size-32 {
+        .view-icons-sized(32px);
+    }
+
+    &.size-48 {
+        .view-icons-sized(48px);
+    }
+
+    &.size-64 {
+        .view-icons-sized(64px);
+    }
+
+    &.size-96 {
+        .view-icons-sized(96px);
+    }
+
+    &.size-128 {
+        .view-icons-sized(128px);
+    }
+
+    &.size-192 {
+        .view-icons-sized(192px);
+    }
+
+    &.size-256 {
+        .view-icons-sized(256px);
+    }
+
+    &.size-384 {
+        .view-icons-sized(384px);
+    }
 }

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

@@ -1,62 +0,0 @@
-
-#view.view-list {
-
-	li {
-
-		&.header {
-			display: list-item;
-		}
-
-		&.item {
-
-			a, a:active, a:visited {
-				border-top: 1px solid @item-border-col-sep;
-				border-bottom: 1px solid @item-border-col-sep;
-				height: 60px;
-
-				&:hover, &.hover {
-					border-color: @item-border-col-hover;
-				}
-			}
-
-			// needs to be here, to not conflict with header fields
-			.icon {
-				padding: 8px 6px;
-			}
-			.label, .date, .size {
-				padding: 18px 6px;
-			}
-		}
-
-		&.item + .item {
-
-			a, a:active, a:visited {
-				border-top: none;
-			}
-		}
-
-		.icon.big {
-			display: inline-block;
-			position: absolute;
-			left: 0;
-			top: -2px;
-			width: 100px;
-		}
-
-		.label {
-			margin: 0 270px 0 110px;
-		}
-
-		.date {
-			position: absolute;
-			right: 100px;
-			top: 0;
-		}
-
-		.size {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
-}

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

@@ -1,13 +1,4 @@
 
-#selection-rect {
-	display: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 2;
-	border: 1px dashed @col-border-strong;
-	background-color: rgba(0,0,0,0.01);
-}
 
 @item-border-col-sep: @col-border;
 
@@ -17,167 +8,190 @@
 @item-background-col-sel: rgba(0,0,0,0.02);
 @item-border-col-sel: @col-border-strong;
 
+@icon-size: 48px;
+
+
+#selection-rect {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    border: 1px dashed @col-border-strong;
+    background-color: rgba(0,0,0,0.01);
+}
 
 
 #view {
-	display: none;
-	margin: 0 auto;
+    display: none;
+    margin: 0 auto;
 
-	a, a:active, a:visited {
-		color: #333;
-		cursor: pointer;
-		text-decoration: none;
-	}
+    a, a:active, a:visited {
+        color: #333;
+        cursor: pointer;
+        text-decoration: none;
+    }
 
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
 
-	li {
-		position: relative;
-		white-space: nowrap;
+    li {
+        position: relative;
+        white-space: nowrap;
 
-		&.header {
-			display: none;
-			font-size: 13px;
+        &.header {
+            display: none;
+            font-size: 13px;
 
-			a, a:active, a:visited {
-				padding: 6px 6px 18px 6px;
-				opacity: 0.4;
-				.transition(all 0.2s ease-in-out);
+            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;
-				}
-			}
-		}
+                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 {
+        &.item {
+            font-size: 15px;
 
-			a, a:active, a:visited {
-				display: block;
-				overflow: hidden;
+            a, a:active, a:visited {
+                display: block;
+                overflow: hidden;
 
-				&:hover, &.hover {
-					// color: #e80;
-					color: @col-hover;
-					background-color: @item-background-col-hover;
-					border-color: @item-border-col-hover;
-				}
-			}
+                &:hover, &.hover {
+                    color: @col-hover;
+                    background-color: @item-background-col-hover;
+                    border-color: @item-border-col-hover;
+                }
 
-			&.selected:not(.selecting), &.selecting:not(.selected) {
+                &:hover {
+                    .selector {
+                        display: block;
+                    }
+                }
+            }
 
-				a, a:active, a:visited {
-					// color: #000;
-					// color: @col-hover;
-					background-color: @item-background-col-sel;
-					border-color: @item-border-col-sel;
+            &.selected:not(.selecting), &.selecting:not(.selected) {
 
-					&:hover, &.hover {
-						background-color: @item-background-col-sel;
-						border-color: @item-border-col-sel;
-					}
-				}
-			}
-		}
+                a, a:active, a:visited {
+                    background-color: @item-background-col-sel;
+                    border-color: @item-border-col-sel;
 
-		&.error {
+                    &:hover, &.hover {
+                        background-color: @item-background-col-sel;
+                        border-color: @item-border-col-sel;
+                    }
+                }
 
-			a, a:active, a:visited {
-				color: #aaa;
+                .selector {
+                    display: block;
+                    // border-color: @col-border-stronger;
 
-				&:hover, &.hover {
-					// color: #e80;
-					color: @col-hover;
-				}
-			}
+                    img {
+                        display: block;
+                    }
+                }
+            }
+        }
 
-			.label .hint {
-				padding: 0 6px;
-				font-size: 0.9em;
-				color: #c55;
-			}
-		}
+        &.folder-parent {
 
-		&.folder-parent {
+            .date, .size {
+                display: none;
+            }
+        }
 
-			.date, .size {
-				display: none;
-			}
-		}
+        .icon {
+            display: none;
+            text-align: center;
 
-		.icon {
-			display: none;
-			text-align: center;
+            img {
+                vertical-align: top;
+            }
 
-			img {
+            .thumb {
+                box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
+            }
 
-				&.thumb {
-					.box-shadow(0 0 0 1px #ddd);
-				}
-			}
+            &.rational {
+                .thumb {
+                    padding: 2px;
+                    border-radius: 3px;
+                }
+            }
+        }
 
-			&.small {
+        .label {
+            display: block;
+            overflow: hidden;
+            text-align: left;
+            text-overflow: ellipsis;
+        }
 
-				img {
-					max-width: 16px;
-					max-height: 16px;
-				}
-			}
+        .date {
+            text-align: right;
+            width: 130px;
+        }
 
-			&.big {
+        .size {
+            text-align: right;
+            width: 80px;
+        }
 
-				img {
-					max-width: 100px;
-					max-height: 48px;
-				}
-			}
-		}
+        .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);
 
-		.label {
-			display: block;
-			overflow: hidden;
-			text-align: left;
-		}
+            &:hover {
+                border-color: @col-border-stronger;
+            }
 
-		.date {
-			text-align: right;
-			width: 160px;
-		}
+            img {
+                display: none;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
 
-		.size {
-			text-align: right;
-			width: 80px;
-		}
-	}
+    .empty, .no-match {
+        margin: 50px 0;
+        text-align: center;
+        color: #ddd;
+        font-size: 5em;
+        font-weight: bold;
+    }
 
-	.empty, .no-match {
-		margin: 50px 0;
-		text-align: center;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
-	}
-
-	.no-match {
-		display: none;
-	}
+    .no-match {
+        display: none;
+    }
 }

src/_h5ai/client/css/lib/h5bp-main-header.less

@@ -1,6 +1,6 @@
+/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
+
 /*
- * HTML5 Boilerplate
- *
  * What follows is the result of much research on cross-browser styling.
  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  * Kroc Camen, and the H5BP dev community and team.
@@ -53,10 +53,14 @@ hr {
 }
 
 /*
- * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ * Remove the gap between images, videos, audio and canvas and the bottom of
+ * their containers: h5bp.com/i/440
  */
 
-img {
+audio,
+canvas,
+img,
+video {
     vertical-align: middle;
 }
 
@@ -78,17 +82,6 @@ textarea {
     resize: vertical;
 }
 
-/* ==========================================================================
-   Chrome Frame prompt
-   ========================================================================== */
-
-.chromeframe {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
-}
-
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */

src/_h5ai/client/css/lib/h5bp-normalize.less

@@ -1,4 +1,4 @@
-/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
+/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
 
 /* ==========================================================================
    HTML5 display definitions
@@ -59,22 +59,16 @@ audio:not([controls]) {
    ========================================================================== */
 
 /**
- * 1. Prevent system color scheme's background color being used in Firefox, IE,
- *    and Opera.
- * 2. Prevent system color scheme's text color being used in Firefox, IE, and
- *    Opera.
- * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
  *    `em` units.
- * 4. Prevent iOS text size adjust after orientation change, without disabling
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 
 html {
-    background: #fff; /* 1 */
-    color: #000; /* 2 */
-    font-size: 100%; /* 3 */
-    -webkit-text-size-adjust: 100%; /* 4 */
-    -ms-text-size-adjust: 100%; /* 4 */
+    font-size: 100%; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /**

src/_h5ai/client/css/lib/mixins.less

@@ -1,57 +0,0 @@
-
-.border-radius (@radius) {
-    -webkit-border-radius: @radius; /* Saf3-4, iOS 1-3.2, Android <1.6 */
-       -moz-border-radius: @radius; /* FF1-3.6 */
-            border-radius: @radius; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
-}
-
-
-.background-clip () {
-    -webkit-background-clip: padding-box;
-       -moz-background-clip: padding;
-            background-clip: padding-box;
-}
-
-
-.box-shadow (@shadow) {
-    -webkit-box-shadow: @shadow; /* Saf3-4 */
-       -moz-box-shadow: @shadow; /* FF3.5 - 3.6 */
-            box-shadow: @shadow; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
-}
-
-
-.transition (@transition) {
-    -webkit-transition: @transition; /* Saf3.2+, Chrome */
-       -moz-transition: @transition; /* FF4+ */
-        -ms-transition: @transition; /* IE10? */
-         -o-transition: @transition; /* Opera 10.5+ */
-            transition: @transition;
-}
-
-
-.transform (@transform) {
-    -webkit-transform: @transform; /* Saf3.1+, Chrome */
-       -moz-transform: @transform; /* FF3.5+ */
-        -ms-transform: @transform; /* IE9 */
-         -o-transform: @transform; /* Opera 10.5 */
-            transform: @transform;
-                 zoom: 1;
-}
-
-
-.vert-gradient (@top, @bottom) {
-    background-color: @top;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)); /* Saf4+, Chrome */
-    background-image: -webkit-linear-gradient(top, @top, @bottom); /* Chrome 10+, Saf5.1+, iOS 5+ */
-    background-image:    -moz-linear-gradient(top, @top, @bottom); /* FF3.6 */
-    background-image:     -ms-linear-gradient(top, @top, @bottom); /* IE10 */
-    background-image:      -o-linear-gradient(top, @top, @bottom); /* Opera 11.10+ */
-    background-image:         linear-gradient(top, @top, @bottom);
-}
-
-
-.background-size (@size) {
-    -webkit-background-size: @size; /* Saf3-4 */
-       -moz-background-size: @size; /* FF3.6 */
-            background-size: @size; /* Opera, IE9, Saf5, Chrome, FF4 */
-}

src/_h5ai/client/css/styles.less

@@ -2,29 +2,28 @@
 @import "lib/h5bp-normalize";
 @import "lib/h5bp-main-header";
 
-@import "lib/mixins";
-
+@import "inc/fonts";
 @import "inc/general";
 @import "inc/topbar";
 @import "inc/bottombar";
+@import "inc/sidebar";
 @import "inc/download";
-@import "inc/delete";
 @import "inc/filter";
-@import "inc/l10n";
 @import "inc/tree";
 @import "inc/qrcode";
+@import "inc/preview";
+@import "inc/preview-aud";
 @import "inc/preview-img";
 @import "inc/preview-txt";
+@import "inc/preview-vid";
 @import "inc/notify";
 
 @import "inc/content";
 @import "inc/view";
 @import "inc/view-details";
 @import "inc/view-icons";
-@import "inc/view-list";
 @import "inc/view-grid";
 // @import "inc/context-menu";
-@import "inc/dropbox";
 @import "inc/fallback";
 
 @import "inc/responsive";