Merge branch 'develop'

Implement POSIX.1-1988 UStar directly instead of calling the tar binary

LICENSE.md

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

README.md

@@ -1,19 +1,48 @@
 # h5ai
+**a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee**
 
-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 on the [project page](http://larsjung.de/h5ai/).
+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!
 
-* to report a bug or make a feature request please create [a new issue](http://github.com/lrsjng/h5ai/issues/new) on GitHub
-* website with download, docs and demo: <http://larsjung.de/h5ai>
-* sources: <http://github.com/lrsjng/h5ai>
 
-h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).
+## 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/).
+
+
+## Build
+
+( there are repositories for the latest [releases](http://release.larsjung.de/h5ai/) and [dev builds](http://release.larsjung.de/h5ai/dev/) )
+
+If you want to build **h5ai** yourself you need to install the build tool [fQuery](http://larsjung.de/fquery/) first:
+
+    > npm install -g fquery
+
+This will install fQuery and its command line tool `makejs`. Run `makejs --help` to see if everything
+worked fine.
+
+To clone and build the project run the following commands.
+You'll find a new directory `build` including a fresh zipball.
+
+    > git clone git://github.com/lrsjng/h5ai.git
+    > cd h5ai
+    > makejs release
+
+
+## License
+
+**h5ai** is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/develop/LICENSE.md).
+
 It profits from these great projects:
-[AmplifyJS](http://amplifyjs.com)&nbsp;(MIT/GPL),
 [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228)&nbsp;(GPL),
-[HTML5 ★ Boilerplate](http://html5boilerplate.com),
-[jQuery](http://jquery.com)&nbsp;(MIT/GPL),
+[Gnome Symbolic Icon Theme](https://git.gnome.org/browse/gnome-icon-theme-symbolic/)&nbsp;(CC BY-SA 3.0),
+[HTML5 ★ Boilerplate](http://html5boilerplate.com)&nbsp;(MIT),
+[jQuery](http://jquery.com)&nbsp;(MIT),
+[jQuery.filedrop](http://www.github.com/weixiyen/jquery-filedrop)&nbsp;(MIT),
 [jQuery.fracs](http://larsjung.de/fracs/)&nbsp;(MIT),
 [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel)&nbsp;(MIT),
 [jQuery.qrcode](http://larsjung.de/qrcode/)&nbsp;(MIT),
@@ -26,22 +55,68 @@ It profits from these great projects:
 [Underscore.js](http://underscorejs.org)&nbsp;(MIT)
 
 
-## Build
-
-A prebuilt package can be found on the [project page](http://larsjung.de/h5ai/). If you want to build
-h5ai yourself you need to install [fQuery](http://larsjung.de/fquery/) first:
-
-    > npm install -g fquery
-
-To build the project run the following command inside the project's root directory
-
-    > makejs
-
-Run `makejs -t` to list all possible targets.
-
-
-
 ## 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*
 

makefile.js

@@ -3,10 +3,8 @@
 
 
 var path = require('path'),
-	child_process = require('child_process');
 
-
-var version = '0.21',
+	pkg = require('./package.json'),
 
 	root = path.resolve(__dirname),
 	src = path.join(root, 'src'),
@@ -34,14 +32,18 @@ var version = '0.21',
 		]
 	},
 
-	mapper = function (blob) {
-
-		return blob.source.replace(src, build).replace(/\.less$/, '.css');
+	handlebarsEnv = {
+		pkg: pkg
 	},
 
-	mapperRoot = function (blob) {
+	mapSrc = function (blob) {
 
-		return blob.source.replace(root, build + '/_h5ai');
+		return blob.source.replace(src, build).replace(/\.less$/, '.css').replace(/\.jade$/, '');
+	},
+
+	mapRoot = function (blob) {
+
+		return blob.source.replace(root, path.join(build, '_h5ai'));
 	};
 
 
@@ -49,137 +51,119 @@ module.exports = function (make) {
 
 	var Event = make.Event,
 		$ = make.fQuery,
-		moment = make.moment,
-		stamp, replacements;
+		moment = make.moment;
 
 
+	make.version('>=0.8.1');
 	make.defaults('build');
 
 
 	make.before(function () {
 
-		stamp = moment();
-
-		replacements = {
-			version: version,
-			stamp: stamp.format('YYYY-MM-DD HH:mm:ss')
-		};
-
-		Event.info({ method: 'before', message: version + ' ' + replacements.stamp });
+		handlebarsEnv.stamp = moment().format('YYYY-MM-DD HH:mm:ss');
 	});
 
 
-	make.target('inc', [], 'increase build number, if any')
-		.sync(function () {
+	make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) {
 
-			var re = /-(\d+)$/;
-			var match = version.match(re);
+		if (!/-dev$/.test(pkg.version)) {
+			done();
+			return;
+		}
 
-			if (match) {
-				var number = parseInt(match[1], 10) + 1;
-				var newVersion = version.replace(re, '-' + number);
+		$.git(root, function (err, result) {
 
-				$('makefile.js').replace([[version, newVersion]]).write($.OVERWRITE, 'makefile.js');
-
-				version = newVersion;
-				replacements.version = version;
-				Event.ok({ method: 'inc', message: 'version is now ' + version });
-			}
-		});
-
-
-	make.target('clean', [], 'delete build folder')
-		.sync(function () {
-
-			$.rmfr($.I_AM_SURE, build);
-		});
-
-
-	make.target('lint', [], 'lint all JavaScript files with JSHint')
-		.sync(function () {
-
-			$(src + '/_h5ai/js: **/*.js, ! *.min.js, ! inc/lib/**')
-				.jshint(jshint);
-		});
-
-
-	make.target('build', [], 'build all updated files')
-		.sync(function () {
-
-			$(src + ': _h5ai/js/*.js')
-				.modified(mapper, $(src + ': _h5ai/js/**'))
-				.includify()
-				.uglifyjs()
-				.write($.OVERWRITE, mapper);
-
-			$(src + ': _h5ai/css/*.less')
-				.modified(mapper, $(src + ': _h5ai/css/**'))
-				.less()
-				.cssmin()
-				.write($.OVERWRITE, mapper);
-
-			$(src + ': **, ! _h5ai/js/**, ! _h5ai/css/**')
-				.modified(mapper)
-				.mustache(replacements)
-				.write($.OVERWRITE, mapper);
-
-			$(root + ': README*, LICENSE*')
-				.modified(mapperRoot)
-				.write($.OVERWRITE, mapperRoot);
-		});
-
-
-	make.target('build-uncompressed', [], 'build all updated files without compression')
-		.sync(function () {
-
-			$(src + ': _h5ai/js/*.js')
-				.modified(mapper, $(src + ': _h5ai/js/**'))
-				.includify()
-				// .uglifyjs()
-				.write($.OVERWRITE, mapper);
-
-			$(src + ': _h5ai/css/*.less')
-				.modified(mapper, $(src + ': _h5ai/css/**'))
-				.less()
-				// .cssmin()
-				.write($.OVERWRITE, mapper);
-
-			$(src + ': **, ! _h5ai/js/**, ! _h5ai/css/**')
-				.modified(mapper)
-				.mustache(replacements)
-				.write($.OVERWRITE, mapper);
-
-			$(root + ': README*, LICENSE*')
-				.modified(mapperRoot)
-				.write($.OVERWRITE, mapperRoot);
-		});
-
-
-	make.target('release', ['inc', 'clean', 'build'], 'create a zipball')
-		.async(function (done, fail) {
-
-			var target = path.join(build, 'h5ai-' + version + '.zip'),
-				cmd = 'zip',
-				args = ['-ro', target, '_h5ai'],
-				options = { cwd: build },
-				proc = child_process.spawn(cmd, args, options);
-
-			Event.info({ method: 'exec', message: cmd + ' ' + args.join(' ') });
-
-			// proc.stdout.on('data', function (data) {
-				// process.stdout.write(data);
-			// });
-			proc.stderr.on('data', function (data) {
-				process.stderr.write(data);
-			});
-			proc.on('exit', function (code) {
-				if (code) {
-					Event.error({ method: 'exec', message: cmd + ' exit code ' + code });
-					fail();
-				} else {
-					Event.ok({ method: 'exec', message: 'created zipball ' + target });
-					done();
-				}
+			pkg.version += '-' + result.revListOriginMasterHead.length + '-' + result.revParseHead.slice(0, 7);
+			Event.info({
+				method: 'check-version',
+				message: 'version set to ' + pkg.version
 			});
+			done();
 		});
+	});
+
+
+	make.target('clean', [], 'delete build folder').sync(function () {
+
+		$.rmfr($.I_AM_SURE, build);
+	});
+
+
+	make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
+
+		$(src + '/_h5ai/client/js: **/*.js, ! lib/**')
+			.jshint(jshint);
+	});
+
+
+	make.target('build', ['check-version'], 'build all updated files').sync(function () {
+
+		$(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('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);
+
+		$(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
+		});
+	});
 };

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "h5ai",
+  "version": "0.23.0",
+  "description": "a modern HTTP web server index",
+  "url": "http://larsjung.de/h5ai/",
+  "author": "Lars Jung",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lrsjng/h5ai.git"
+  }
+}

src/_h5ai/.htaccess

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

src/_h5ai/apache/autoindex.htaccess

@@ -1,23 +0,0 @@
-################################
-# h5ai {{version}}
-# customized .htaccess
-################################
-
-Options       +Indexes
-Options       +FollowSymLinks
-
-HeaderName    /_h5ai/apache/h5ai-header.html
-ReadmeName    /_h5ai/apache/h5ai-footer.html
-
-IndexIgnore   _h5ai*
-
-IndexOptions  Charset=UTF-8
-IndexOptions  FancyIndexing
-IndexOptions  FoldersFirst
-IndexOptions  HTMLTable
-IndexOptions  NameWidth=*
-IndexOptions  SuppressDescription
-IndexOptions  SuppressHTMLPreamble
-IndexOptions  SuppressRules
-IndexOptions  Type=text/html;h5ai={{version}}
-IndexOptions  XHTML

src/_h5ai/apache/h5ai-footer.html

@@ -1,6 +0,0 @@
-		<!-- generated code ends here -->
-	</div>
-	<script src="/_h5ai/config.js"></script>
-	<script src="/_h5ai/js/scripts.js"></script>
-</body>
-</html>

src/_h5ai/apache/h5ai-header.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<title>Directory index · styled with h5ai</title>
-	<meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
-	<meta name="viewport" content="width=device-width">
-	<link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.png">
-	<link rel="apple-touch-icon" type="image/png" href="/_h5ai/images/h5ai-48x48.png">
-	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic">
-	<link rel="stylesheet" href="/_h5ai/css/styles.css">
-	<script src="/_h5ai/js/modernizr.js"></script>
-</head>
-<body id="h5ai-main">
-	<div id="topbar" class="clearfix">
-		<ul id="navbar"></ul>
-	</div>
-	<div id="content">
-		<div id="extended" class="clearfix"></div>
-	</div>
-	<div id="bottombar" class="clearfix">
-		<span class="left">
-			<a id="h5ai-reference" href="http://larsjung.de/h5ai" title="h5ai project page">h5ai {{version}}</a>
-			<span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
-			<span class="oldBrowser"> ⚡ Some features disabled! Works best in <a href="http://browsehappy.com">modern browsers</a>. ⚡ </span>
-		</span>
-		<span class="right"></span>
-		<span class="center"></span>
-	</div>
-	<div id="data-apache-autoindex" class="hideOnJs">
-		<!--
-			The following code was generated by Apache's autoindex module. It is not valid HTML5, but gets
-			removed from the DOM tree as soon as possible. The actual page should render as valid HTML5.
-		-->

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

@@ -3,11 +3,14 @@
 	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));
-	border-top: 1px solid rgb(210,210,210);
+	// .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);
 
 	color: #999;
 	text-align: center;
@@ -19,37 +22,39 @@
 		opacity: 0.7;
 
 		&:hover {
-			color: #e80;
+			color: @col-hover;
 			opacity: 1;
 		}
 	}
 	.left {
+		position: absolute;
+		left: 0;
 		display: block;
 		padding: 0 8px;
-		float: left
 	}
 	.center {
 		display: block;
-		margin: 0 100px;
 	}
 	.right {
+		position: absolute;
+		right: 0;
 		display: block;
 		padding: 0 8px;
-		float: right
 	}
 	.noJsMsg {
-		color: #c33;
+		color: @col-error;
 		margin-left: 16px;
 	}
-	.oldBrowser {
+	.noBrowserMsg {
 		display: none;
-		color: #c33;
+		color: @col-error;
 		margin-left: 16px;
 		a, a:active, a:visited {
-			color: #c33;
+			color: @col-error;
 			text-decoration: underline;
+			opacity: 1;
 			&:hover {
-				color: #e80;
+				color: @col-hover;
 			}
 		}
 	}
@@ -57,6 +62,10 @@
 		.sep {
 			display: inline-block;
 			padding: 0 6px;
+
+			&:before {
+				content: '·'
+			}
 		}
 		&.default {
 		}

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

@@ -5,21 +5,20 @@
 	font-size: 16px;
 }
 
-
 #content-header, #content-footer {
+	color: #333;
 
 	a, a:active, a:visited {
-		color: #2080FF;
+		color: @col-link;
 		text-decoration: none;
 		cursor: pointer;
 
 		&:hover {
-			color: #68A9FF;
+			color: #555;
 		}
 	}
 }
 
-
 #content-header {
 	padding-bottom: 12px;
 	margin-bottom: 32px;

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

@@ -0,0 +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;
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		text-align: left;
+
+		li {
+			padding: 8px 12px 10px 12px;
+			white-space: nowrap;
+			border-top: @border-widget-sep;
+			.transition(all 0.2s ease-in-out);
+
+			&:hover {
+				color: @col-hover;
+				background-color: @col-widget-back-hover;
+			}
+		}
+	}
+}

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

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

@@ -0,0 +1,10 @@
+
+#download {
+	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/dropbox.less

@@ -0,0 +1,89 @@
+
+#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,7 +1,8 @@
 
-#data-apache-autoindex, #data-php-no-js-fallback {
+#fallback {
+	display: none;
 	max-width: 960px;
-	margin: 0 auto;
+	margin: 80px auto;
 
 	table {
 		display: block;
@@ -36,9 +37,7 @@
 			}
 		}
 		td {
-			border: 1px solid #ddd;
-			border-left: none;
-			border-right: none;
+			border-bottom: 1px solid @col-border;
 			overflow: hidden;
 			white-space: nowrap;
 			font-size: 16px;
@@ -50,19 +49,19 @@
 				cursor: pointer;
 
 				&:hover {
-					color: #e80;
+					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;
-				position: relative;
-				top: -2px;
 			}
 		}
 		td:nth-child(2), th:nth-child(2) {
@@ -81,3 +80,11 @@
 		}
 	}
 }
+
+
+html.no-js, html.no-browser {
+
+	#fallback {
+		display: block;
+	}
+}

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

@@ -3,17 +3,16 @@
 	.topbar-right;
 
 	input {
-		display: none;
 		border: none;
-		font-family: Ubuntu, sans-serif;
-		color: #555;
+		font-family: @font-family;
+		color: @col;
 		background-color: rgba(0,0,0,0);
-		width: 100px;
+		width: 30px;
 	}
 
 	&.current {
 		input {
-			display: inline;
+			width: 150px;
 		}
 	}
 }

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

@@ -0,0 +1,56 @@
+
+@col: rgb(85,85,85);
+@col-back: rgb(255,255,255);
+@col-hover: rgb(29,119,194);
+@col-border: rgba(0,0,0,0.05);
+@col-border-strong: rgba(0,0,0,0.15);
+
+@col-error: rgb(204,51,51);
+
+@col-link: rgb(29,119,194);
+@col-link-hover: rgb(29,119,194);
+
+@col-widget-back: rgb(245,245,245);
+@col-widget-back-highlight: rgba(255,255,255,0.8);
+@col-widget-back-hover: rgba(255,255,255,0.8);
+@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);
+
+
+@border-widget: 1px solid @col-border;
+@border-widget-sep: 1px solid @col-widget-sep;
+
+
+
+
+
+@font-family: Ubuntu, sans-serif;
+@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;
+}
+
+html.js .hideOnJs, html.no-js .hideOnNoJs {
+	display: none;
+}
+html.no-browser .noBrowserMsg {
+	display: inline !important;
+}

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

@@ -1,16 +1,24 @@
 
 body#h5ai-info {
-	font-family: Ubuntu, Arial, sans;
+	font-family: @font-family;
 	margin: 2em auto 4em auto;
 	font-size: 20px;
-	color: #555;
+	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);
+
+		&:hover {
+			color: @col-hover;
+		}
+	}
+
 	.build-version {
 		display: block;
-		// font-size: 0.9em;
-		// color: #aaa;
 	}
 	.build-stamp {
 		display: block;
@@ -18,6 +26,22 @@ body#h5ai-info {
 		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;
@@ -66,7 +90,7 @@ body#h5ai-info {
 			margin: 4px 0 12px 12px;
 			font-size: 0.7em;
 			color: #aaa;
-			width: 300px;
+			width: 310px;
 			line-height: 1.2em;
 		}
 	}

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

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

@@ -0,0 +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;
+}

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

@@ -9,20 +9,29 @@
 	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-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);
+
+	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 {
@@ -87,7 +96,7 @@
 		opacity: 1.0;
 	}
 
-	@bar-sep-border: 1px solid rgba(255,255,255,0.05);
+	@bar-sep-border: 1px solid rgba(255,255,255,0.08);
 
 	.bar-button {
 		.bar-label;
@@ -108,22 +117,14 @@
 	}
 }
 
-#pv-img-topbar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	left: 0;
-	top: 0;
-	.vert-gradient(rgb(37,37,37), rgb(24,24,24));
-	border-bottom: 1px solid rgb(27,27,27);
-}
-
 #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));
+	// .vert-gradient(rgb(27,27,27), rgb(14,14,14));
+	background-color: rgb(27,27,27);
 	border-top: 1px solid rgb(45,45,45);
 }

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

@@ -25,15 +25,102 @@
 	position: relative;
 }
 
-#pv-txt-text {
-	.syntaxhighlighter {
-		overflow: visible !important;
+#pv-txt-spinner {
+	position: fixed;
+}
 
-		.gutter .line {
-			border-right: none !important;
+#pv-txt-text {
+
+	&.highlighted {
+		word-break: break-all;
+
+		tr:hover {
+			background-color: rgba(0,0,0,0.05);
+
+			.nr {
+				color: #333;
+			}
+		}
+
+		td {
+			vertical-align: top;
+			font-family: @font-family-mono;
+			font-size: 16px;
+			line-height: 1.2em;
+			color: #999;
+			word-break: normal;
+
+			&.nr {
+				text-align: right;
+				padding: 0 8px 0 4px;
+			}
+
+			&.line {
+				width: 100%;
+				padding: 0 4px 0 8px;
+			}
+
+			code {
+				font-family: @font-family-mono;
+				font-size: 16px;
+				line-height: 1.2em;
+			}
+		}
+
+		.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;
+		}
+
+		a, a:active, a:visited {
+			color: #2080FF;
+			text-decoration: none;
+			cursor: pointer;
+
+			&:hover {
+				color: #68A9FF;
+			}
 		}
 	}
 
+
 	&.markdown {
 		font-size: 16px;
 		padding: 8px 24px;
@@ -49,7 +136,7 @@
 		}
 
 		pre, code {
-			font-family: "Ubuntu Mono", monospace;
+			font-family: @font-family-mono;
 		}
 		code {
 			color: #008200;
@@ -133,20 +220,11 @@
 	}
 }
 
-#pv-txt-topbar {
-	position: fixed;
-	z-index: 5;
-	width: 100%;
-	left: 0;
-	top: 0;
-	.vert-gradient(rgb(37,37,37), rgb(24,24,24));
-	border-bottom: 1px solid rgb(27,27,27);
-}
-
 #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));

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

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

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

@@ -1,18 +1,5 @@
 
-@media only screen and (max-width: 500px) {
-#topbar {
-	.view span {
-		display: none;
-	}
-}
-#extended.view-icons {
-	padding: 0;
-	border: none;
-	margin: 0 -14px;
-}
-}
-
-@media only screen and (max-width: 350px) {
+@media only screen and (max-width: 700px) {
 #topbar {
 	.crumb {
 		display: none;
@@ -20,15 +7,22 @@
 	.current {
 		display: block;
 	}
-} 
-#extended.view-details {
-	.header .label, .entry .label {
-		margin-right: 110px;
-	}
-	.header .date, .entry .date {
+	.view span {
 		display: none;
 	}
 }
+#view.view-details, #view.view-list {
+	.header .label, .item .label {
+		margin-right: 110px;
+	}
+	.header .date, .item .date {
+		display: none;
+	}
+}
+#view.view-icons {
+	padding: 0;
+	border: none;
+}
 #bottombar {
 	.center {
 		display: none;
@@ -36,6 +30,15 @@
 }
 }
 
+@media only screen and (max-width: 500px) {
+body {
+	margin: 8px;
+}
+#tree {
+	display: none !important;
+}
+}
+
 @media print {
 a[href]:after {
 	content: "";

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

@@ -3,33 +3,34 @@
 	position: fixed;
 	z-index: 5;
 	width: 100%;
+	min-height: 30px;
 	left: 0;
 	top: 0;
-	.vert-gradient(rgb(241,241,241), rgb(228,228,228));
-	border-bottom: 1px solid rgb(210,210,210);
+	// .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);
 }
 
 
 .topbar-highlight {
-	background-color: rgba(255,255,255,0.5);
+	background-color: @col-widget-back-highlight;
 	opacity: 1.0;
 }
 
 .topbar-hover {
 	.topbar-highlight;
-	color: #e80;
+	color: @col-hover;
 }
 
-@topbar-sep-border: 1px solid rgba(0,0,0,0.05);
-
 .topbar-left {
 	float: left;
-	border-right: @topbar-sep-border;
+	border-right: @border-widget-sep;
 }
 
 .topbar-right {
 	float: right;
-	border-left: @topbar-sep-border;
+	border-left: @border-widget-sep;
 }
 
 
@@ -40,7 +41,7 @@
 	padding: 0;
 
 	a, a:active, a:visited, span.element {
-		color: #555;
+		color: @col;
 		cursor: pointer;
 		text-decoration: none;
 		opacity: 0.7;
@@ -77,9 +78,9 @@
 			color: #999;
 		}
 		img.hint {
-			width: 14px;
-			height: 14px;
 			opacity: 0.8;
+			width: 12px;
+			height: 12px;
 		}
 	}
 	.view {

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

@@ -0,0 +1,120 @@
+
+#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;
+
+	.sp-scrollbar {
+		// margin: 8px 8px 8px 0;
+		width: 6px;
+		background-color: @col-sb-back;
+		// .border-radius(3px);
+		cursor: pointer;
+
+		.sp-thumb {
+			background-color: @col-sb-thumb;
+			// .border-radius(3px);
+		}
+		&.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;
+
+		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;
+
+		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

@@ -0,0 +1,58 @@
+
+#view.view-details {
+
+	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;
+
+				&: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;
+			}
+		}
+
+		&.item + .item {
+
+			a, a:active, a:visited {
+				border-top: none;
+			}
+		}
+
+		.icon.small {
+			display: inline-block;
+			position: absolute;
+			left: 0;
+			top: -2px;
+			width: 16px;
+		}
+
+		.label {
+			margin: 0 270px 0 24px;
+		}
+
+		.date {
+			position: absolute;
+			right: 100px;
+			top: 0;
+		}
+
+		.size {
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+}

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

@@ -0,0 +1,41 @@
+
+#view.view-grid {
+
+	li {
+
+		&.item {
+			float: left;
+
+			a, a:active, a:visited {
+				float: left;
+				margin: 2px;
+				padding: 8px;
+				width: 164px;
+				height: 24px;
+				border: 1px solid rgba(0,0,0,0);
+
+				&:hover, &.hover {
+					border-color: @item-border-col-hover;
+				}
+			}
+		}
+
+		.icon.small {
+			display: inline-block;
+			position: absolute;
+			left: 11px;
+			top: 9px;
+			width: 16px;
+		}
+
+		.label {
+			display: block;
+			max-width: 140px;
+			margin: 0 0 0 24px;
+		}
+
+		.date, .size {
+			display: none;
+		}
+	}
+}

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

@@ -0,0 +1,46 @@
+
+#view.view-icons {
+
+	li {
+		text-align: center;
+
+		&.item {
+			float: left;
+
+			a, a:active, a:visited {
+				float: left;
+				margin: 8px;
+				padding: 8px;
+				width: 100px;
+				height: 120px;
+				border: 1px solid rgba(0,0,0,0);
+
+				&:hover, &.hover {
+					border-color: @item-border-col-hover;
+				}
+			}
+		}
+
+		.icon.big {
+			display: block;
+			height: 48px;
+			margin-bottom: 6px;
+		}
+
+		.label {
+			text-align: center;
+			word-wrap: break-word;
+			white-space: normal;
+		}
+
+		.date, .size {
+			display: none;
+		}
+	}
+
+	.empty, .no-match {
+		margin: 0 120px;
+		padding: 16px;
+		height: 120px;
+	}
+}

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

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

@@ -0,0 +1,183 @@
+
+#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;
+
+@item-background-col-hover: rgba(0,0,0,0.02);
+@item-border-col-hover: @col-border;
+
+@item-background-col-sel: rgba(0,0,0,0.02);
+@item-border-col-sel: @col-border-strong;
+
+
+
+#view {
+	display: none;
+	margin: 0 auto;
+
+	a, a:active, a:visited {
+		color: #333;
+		cursor: pointer;
+		text-decoration: none;
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	li {
+		position: relative;
+		white-space: nowrap;
+
+		&.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);
+
+				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 {
+
+			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;
+				}
+			}
+
+			&.selected:not(.selecting), &.selecting:not(.selected) {
+
+				a, a:active, a:visited {
+					// color: #000;
+					// color: @col-hover;
+					background-color: @item-background-col-sel;
+					border-color: @item-border-col-sel;
+
+					&:hover, &.hover {
+						background-color: @item-background-col-sel;
+						border-color: @item-border-col-sel;
+					}
+				}
+			}
+		}
+
+		&.error {
+
+			a, a:active, a:visited {
+				color: #aaa;
+
+				&:hover, &.hover {
+					// color: #e80;
+					color: @col-hover;
+				}
+			}
+
+			.label .hint {
+				padding: 0 6px;
+				font-size: 0.9em;
+				color: #c55;
+			}
+		}
+
+		&.folder-parent {
+
+			.date, .size {
+				display: none;
+			}
+		}
+
+		.icon {
+			display: none;
+			text-align: center;
+
+			img {
+
+				&.thumb {
+					.box-shadow(0 0 0 1px #ddd);
+				}
+			}
+
+			&.small {
+
+				img {
+					max-width: 16px;
+					max-height: 16px;
+				}
+			}
+
+			&.big {
+
+				img {
+					max-width: 100px;
+					max-height: 48px;
+				}
+			}
+		}
+
+		.label {
+			display: block;
+			overflow: hidden;
+			text-align: left;
+		}
+
+		.date {
+			text-align: right;
+			width: 160px;
+		}
+
+		.size {
+			text-align: right;
+			width: 80px;
+		}
+	}
+
+	.empty, .no-match {
+		margin: 50px 0;
+		text-align: center;
+		color: #ddd;
+		font-size: 5em;
+		font-weight: bold;
+	}
+
+	.no-match {
+		display: none;
+	}
+}

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

@@ -0,0 +1,172 @@
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+/*
+ * Image replacement
+ */
+
+.ir {
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    /* IE 6/7 fallback */
+    *text-indent: -9999px;
+}
+
+.ir:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 150%;
+}
+
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+
+.invisible {
+    visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+
+.clearfix {
+    *zoom: 1;
+}
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+    * {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster: h5bp.com/s */
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    /*
+     * Don't show links for images, or javascript/internal links
+     */
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; /* h5bp.com/t */
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}

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

@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+body {
+    font-size: 1em;
+    line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+
+img {
+    vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+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

@@ -0,0 +1,533 @@
+/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 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
+ *    `em` units.
+ * 4. 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 */
+}
+
+/**
+ * Address `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/**
+ * Address margins handled incorrectly in IE 6/7.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address font sizes and margins set differently in IE 6/7.
+ * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.67em;
+    margin: 2.33em 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ * Known issue: no IE 6/7 normalization.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 6/7/8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/**
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/**
+ * Address CSS quotes not supported in IE 6/7.
+ */
+
+q {
+    quotes: none;
+}
+
+/**
+ * Address `quotes` property not supported in Safari 4.
+ */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/**
+ * Address paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/**
+ * Correct list images handled incorrectly in IE 7.
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

src/_h5ai/client/css/styles.less

@@ -0,0 +1,34 @@
+
+@import "lib/h5bp-normalize";
+@import "lib/h5bp-main-header";
+
+@import "lib/mixins";
+
+@import "inc/general";
+@import "inc/topbar";
+@import "inc/bottombar";
+@import "inc/download";
+@import "inc/delete";
+@import "inc/filter";
+@import "inc/l10n";
+@import "inc/tree";
+@import "inc/qrcode";
+@import "inc/preview-img";
+@import "inc/preview-txt";
+@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";
+
+@import "inc/h5ai-info";
+
+@import "lib/h5bp-main-footer";