Merge branch 'develop'

Fixing Windows Program Detection

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,31 +1,26 @@
 # h5ai
-**a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee**
-
+**h5ai** is a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee.
 The preferred way to report a bug or make a feature request is to
-create [a new issue](http://github.com/lrsjng/h5ai/issues/new) on GitHub!
+create [a new issue](https://github.com/lrsjng/h5ai/issues/new) on GitHub!
 
 
 ## Install
 
-(**note:** please don't use files from the `src` folder for installation,
-they need to be preprocessed to work correctly)
-
+**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 of 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:
+There are repositories for the latest [releases](http://release.larsjung.de/h5ai/) and [dev builds](http://release.larsjung.de/h5ai/dev/).
+But if you want to build **h5ai** yourself you need to install the build tool [fQuery](http://larsjung.de/fquery/) first:
 
     > npm install -g fquery
 
 This will install fQuery and its command line tool `makejs`. Run `makejs --help` to see if everything
-worked fine.
-
-To clone and build the project run the following commands.
+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
@@ -35,28 +30,86 @@ 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).
+**h5ai** is provided under the terms of the [MIT License](https://github.com/lrsjng/h5ai/blob/develop/LICENSE.md).
 
 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),
 [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),
+[markdown-js](https://github.com/evilstreak/markdown-js) (MIT),
 [Modernizr](http://www.modernizr.com) (MIT/BSD),
 [modulejs](http://larsjung.de/modulejs/) (MIT),
 [Moment.js](http://momentjs.com) (MIT),
-[spin.js](http://fgnass.github.com/spin.js/) (MIT),
 [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (MIT/GPL),
 [Underscore.js](http://underscorejs.org) (MIT)
 
 
 ## Changelog
-(**h5ai** uses [semantic versioning](http://semver.org/))
+**h5ai** uses [semantic versioning](http://semver.org/).
+
+
+### v0.24.1 - *2014-04-09*
+
+* security fixes! (issues #268, #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*
 
@@ -95,11 +148,11 @@ It profits from these great projects:
 * 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 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](http://github.com/Rodolffo)
+* 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
@@ -136,13 +189,13 @@ It profits from these great projects:
 * 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
+* 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ă](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)
+* 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*
@@ -162,7 +215,7 @@ It profits from these great projects:
 * improves url hashes
 * updates year in `LICENSE.TXT`
 * updates es translation
-* adds `zh-tw` translation by [Yao Wei](http://github.com/medicalwei)
+* adds `zh-tw` translation by [Yao Wei](https://github.com/medicalwei)
 * updates `zh-cn` translation
 
 
@@ -198,7 +251,7 @@ It profits from these great projects:
 
 ### v0.15.2 - *2011-09-18*
 
-* adds `it` translation by [Salvo Gentile](http://github.com/SalvoGentile) and [Marco Patriarca](http://github.com/Fexys)
+* adds `it` translation by [Salvo Gentile](https://github.com/SalvoGentile) and [Marco Patriarca](https://github.com/Fexys)
 * switches build process from scripp to wepp
 
 
@@ -217,7 +270,7 @@ It profits from these great projects:
 ### 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 `zh-cn` translation by [Dongsheng Cai](https://github.com/dongsheng)
 * adds `pl` translation by Radosław Zając
 * adds `ru` translation by Богдан Илюхин
 
@@ -251,13 +304,13 @@ It profits from these great projects:
 * 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 `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](http://github.com/batuhanicoz)
+* adds `tr` translation by [Batuhan Icoz](https://github.com/batuhanicoz)
 
 
 ### v0.12.2 - *2011-07-30*
@@ -293,9 +346,9 @@ It profits from these great projects:
 ### 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))
+* 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)
 
 
@@ -305,8 +358,8 @@ It profits from these great projects:
 * 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 `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
 
 
@@ -394,7 +447,7 @@ It profits from these great projects:
 ### v0.2.2 - *2011-06-16*
 
 * refactores a lot, adds some comments
-* includes fixes from [NumEricR](http://github.com/NumEricR)
+* includes fixes from [NumEricR](https://github.com/NumEricR)
 * adds top/bottom message support, only basicly styled
 
 

makefile.js

@@ -2,82 +2,49 @@
 '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,
+	var path = require('path'),
+
+		pkg = require('./package.json'),
+
+		root = path.resolve(__dirname),
+		src = path.join(root, 'src'),
+		build = path.join(root, 'build'),
+
 		$ = make.fQuery,
-		moment = make.moment;
+		mapSrc = $.map.p(src, build).s('.less', '.css').s('.jade', ''),
+		mapRoot = $.map.p(root, path.join(build, '_h5ai'));
 
 
-	make.version('>=0.8.1');
+	make.version('>=0.10.0');
 	make.defaults('build');
 
 
 	make.before(function () {
 
-		handlebarsEnv.stamp = moment().format('YYYY-MM-DD HH:mm:ss');
+		var moment = make.moment();
+
+		make.env = {
+			pkg: pkg,
+			stamp: moment.format('YYYY-MM-DD HH:mm:ss')
+		};
+
+		$.info({ method: 'before', message: pkg.version + ' ' + make.env.stamp });
 	});
 
 
 	make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) {
 
-		if (!/-dev$/.test(pkg.version)) {
+		if (!/\+$/.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
-			});
+			pkg.version += result.buildSuffix;
+			$.info({ method: 'check-version', message: 'version set to ' + pkg.version });
 			done();
 		});
 	});
@@ -85,76 +52,98 @@ module.exports = function (make) {
 
 	make.target('clean', [], 'delete build folder').sync(function () {
 
-		$.rmfr($.I_AM_SURE, build);
+		$.DELETE(build);
 	});
 
 
 	make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
 
+		var jshint = {
+				// Enforcing Options
+				bitwise: true,
+				curly: true,
+				eqeqeq: true,
+				forin: true,
+				latedef: true,
+				newcap: true,
+				noempty: true,
+				plusplus: true,
+				trailing: true,
+				undef: true,
+
+				// Environments
+				browser: true
+			},
+			globals = {
+				'modulejs': true
+			};
+
 		$(src + '/_h5ai/client/js: **/*.js, ! lib/**')
-			.jshint(jshint);
+			.jshint(jshint, globals);
 	});
 
 
 	make.target('build', ['check-version'], 'build all updated files').sync(function () {
 
+		var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.url + ' */';
+
 		$(src + ': _h5ai/client/js/*.js')
-			.modified(mapSrc, $(src + ': _h5ai/client/js/**'))
+			.newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
 			.includify()
-			.uglifyjs()
-			.write($.OVERWRITE, mapSrc);
+			.uglifyjs({header: header})
+			.WRITE(mapSrc);
 
 		$(src + ': _h5ai/client/css/*.less')
-			.modified(mapSrc, $(src + ': _h5ai/client/css/**'))
+			.newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
 			.less()
-			.cssmin()
-			.write($.OVERWRITE, mapSrc);
+			.cssmin({header: header})
+			.WRITE(mapSrc);
 
 		$(src + ': **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
+			.newerThan(mapSrc)
+			.handlebars(make.env)
 			.jade()
-			.write($.OVERWRITE, mapSrc);
+			.WRITE(mapSrc);
 
 		$(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
-			.write($.OVERWRITE, mapSrc);
+			.newerThan(mapSrc)
+			.handlebars(make.env)
+			.WRITE(mapSrc);
 
-		$(root + ': README*, LICENSE*')
-			.modified(mapRoot)
-			.write($.OVERWRITE, mapRoot);
+		$(root + ': *.md')
+			.newerThan(mapRoot)
+			.WRITE(mapRoot);
 	});
 
 
 	make.target('build-uncompressed', ['check-version'], 'build all updated files without compression').sync(function () {
 
 		$(src + ': _h5ai/client/js/*.js')
-			.modified(mapSrc, $(src + ': _h5ai/client/js/**'))
+			.newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
 			.includify()
 			// .uglifyjs()
-			.write($.OVERWRITE, mapSrc);
+			.WRITE(mapSrc);
 
 		$(src + ': _h5ai/client/css/*.less')
-			.modified(mapSrc, $(src + ': _h5ai/client/css/**'))
+			.newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
 			.less()
 			// .cssmin()
-			.write($.OVERWRITE, mapSrc);
+			.WRITE(mapSrc);
 
 		$(src + ': **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
+			.newerThan(mapSrc)
+			.handlebars(make.env)
 			.jade()
-			.write($.OVERWRITE, mapSrc);
+			.WRITE(mapSrc);
 
 		$(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
-			.modified(mapSrc)
-			.handlebars(handlebarsEnv)
-			.write($.OVERWRITE, mapSrc);
+			.newerThan(mapSrc)
+			.handlebars(make.env)
+			.WRITE(mapSrc);
 
-		$(root + ': README*, LICENSE*')
-			.modified(mapRoot)
-			.write($.OVERWRITE, mapRoot);
+		$(root + ': *.md')
+			.newerThan(mapRoot)
+			.WRITE(mapRoot);
 	});
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "h5ai",
-  "version": "0.22",
+  "version": "0.24.1",
   "description": "a modern HTTP web server index",
   "url": "http://larsjung.de/h5ai/",
   "author": "Lars Jung",

src/_h5ai/.htaccess

@@ -1,45 +1,115 @@
 
-Options -Indexes
-
 DirectoryIndex index.html
 
-<IfModule mod_expires.c>
-	Header set Cache-Control "public"
-	ExpiresActive on
 
-	# Perhaps better to whitelist expires rules? Perhaps.
-	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"
 
-	# your document html
-	ExpiresByType text/html                 "access plus 0 seconds"
+# ------------------------------------------------------------------------------
+# | File access                                                                |
+# ------------------------------------------------------------------------------
 
-	# data
-	ExpiresByType text/xml                  "access plus 0 seconds"
-	ExpiresByType application/xml           "access plus 0 seconds"
-	ExpiresByType application/json          "access plus 0 seconds"
+# 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>
+
+    ExpiresActive on
+    ExpiresDefault                                      "access plus 1 month"
+
+  # CSS
+    ExpiresByType text/css                              "access plus 1 week"
+
+  # 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!)
+    ExpiresByType image/x-icon                          "access plus 1 week"
+
+  # HTML components (HTCs)
+    ExpiresByType text/x-component                      "access plus 1 month"
+
+  # HTML
+    ExpiresByType text/html                             "access plus 0 seconds"
+
+  # JavaScript
+    ExpiresByType application/javascript                "access plus 1 week"
+
+  # Manifest files
+    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
+    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
+
+  # Media
+    ExpiresByType audio/ogg                             "access plus 1 month"
+    ExpiresByType image/gif                             "access plus 1 month"
+    ExpiresByType image/jpeg                            "access plus 1 month"
+    ExpiresByType image/png                             "access plus 1 month"
+    ExpiresByType video/mp4                             "access plus 1 month"
+    ExpiresByType video/ogg                             "access plus 1 month"
+    ExpiresByType video/webm                            "access plus 1 month"
+
+  # Web feeds
+    ExpiresByType application/atom+xml                  "access plus 1 hour"
+    ExpiresByType application/rss+xml                   "access plus 1 hour"
+
+  # Web fonts
+    ExpiresByType application/font-woff                 "access plus 1 month"
+    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
+    ExpiresByType application/x-font-ttf                "access plus 1 month"
+    ExpiresByType font/opentype                         "access plus 1 month"
+    ExpiresByType image/svg+xml                         "access plus 1 month"
 
-	# 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"
-
-	# 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"
-
-	# 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/client/css/inc/bottombar.less

@@ -7,8 +7,8 @@
 	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);
+	background-color: @col-widget-back;
+	border-top: @border-widget;
 
 	color: #999;
 	text-align: center;
@@ -20,7 +20,7 @@
 		opacity: 0.7;
 
 		&:hover {
-			color: #e80;
+			color: @col-hover;
 			opacity: 1;
 		}
 	}
@@ -40,18 +40,18 @@
 		padding: 0 8px;
 	}
 	.noJsMsg {
-		color: #c33;
+		color: @col-error;
 		margin-left: 16px;
 	}
-	.oldBrowser {
-		display: none;
-		color: #c33;
+	.noBrowserMsg {
+		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;
 			}
 		}
 	}

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

@@ -2,14 +2,14 @@
 #content {
 	max-width: 960px;
 	margin: 50px auto;
-	font-size: 16px;
+	font-size: 15px;
 }
 
 #content-header, #content-footer {
 	color: #333;
 
 	a, a:active, a:visited {
-		color: #2080FF;
+		color: @col-link;
 		text-decoration: none;
 		cursor: pointer;
 

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

@@ -1,12 +1,12 @@
 
-#extended .context-menu {
+#view .context-menu {
 
 	display: block;
 	position: absolute;
 	right: 0;
 	top: 0;
-	background-color: rgb(241,241,241);
-	border: 1px solid rgb(210,210,210);
+	background-color: @col-widget-back;
+	border: @border-widget;
 	color: #999;
 	z-index: 10;
 	font-size: 0.9em;
@@ -20,12 +20,12 @@
 		li {
 			padding: 8px 12px 10px 12px;
 			white-space: nowrap;
-			border-top: 1px solid rgb(231,231,231);
+			border-top: @border-widget-sep;
 			.transition(all 0.2s ease-in-out);
 
 			&:hover {
-				color: #e80;
-				background-color: rgba(255,255,255,0.8);
+				color: @col-hover;
+				background-color: @col-widget-back-hover;
 			}
 		}
 	}

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

@@ -8,23 +8,3 @@
 		background-color: rgba(255,0,0,0.5);
 	}
 }
-
-#delete-auth {
-	display: none;
-	position: fixed;
-	z-index: 5;
-	left: 0;
-	top: 0;
-	.vert-gradient(rgb(241,241,241), rgb(228,228,228));
-	border: 1px solid rgb(210,210,210);
-
-	input {
-		display: block;
-		margin: 4px 6px;
-		border: 1px solid rgb(210,210,210);
-		font-family: Ubuntu, sans-serif;
-		color: #555;
-		background-color: rgba(255,255,255,1);
-		width: 100px;
-	}
-}

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

@@ -8,23 +8,3 @@
 		background-color: rgba(255,0,0,0.5);
 	}
 }
-
-#download-auth {
-	display: none;
-	position: fixed;
-	z-index: 5;
-	left: 0;
-	top: 0;
-	.vert-gradient(rgb(241,241,241), rgb(228,228,228));
-	border: 1px solid rgb(210,210,210);
-
-	input {
-		display: block;
-		margin: 4px 6px;
-		border: 1px solid rgb(210,210,210);
-		font-family: Ubuntu, sans-serif;
-		color: #555;
-		background-color: rgba(255,255,255,1);
-		width: 100px;
-	}
-}

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

@@ -1,7 +1,7 @@
 
 #content {
 	border: 1px dashed #fff;
-	.border-radius(8px);
+	border-radius: 8px;
 	.transition(border-color 0.2s ease-in-out);
 
 	&.hint {

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

@@ -1,46 +0,0 @@
-
-#extended.view-details {
-
-	li {
-
-		&.header {
-			display: list-item;
-		}
-
-		&.entry {
-
-			a, a:active, a:visited {
-				border-bottom: 1px solid #e8e8e8;
-			}
-
-			// needs to be here, to not conflict with header fields
-			.icon, .label, .date, .size {
-				padding: 6px;
-			}
-		}
-
-		.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/extended-grid.less

@@ -1,42 +0,0 @@
-
-#extended.view-grid {
-
-	li {
-
-		&.entry {
-			float: left;
-
-			a, a:active, a:visited {
-				float: left;
-				margin: 2px;
-				padding: 8px;
-				width: 164px;
-				height: 24px;
-				border: 2px solid rgba(0,0,0,0);
-				.border-radius(5px);
-
-				&:hover, &.hover {
-					border-color: #e8e8e8;
-				}
-			}
-		}
-
-		.icon.small {
-			display: inline-block;
-			position: relative;
-			left: 0;
-			top: -2px;
-			width: 16px;
-		}
-
-		.label {
-			display: inline-block;
-			padding-left: 6px;
-			max-width: 140px;
-		}
-
-		.date, .size {
-			display: none;
-		}
-	}
-}

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

@@ -1,47 +0,0 @@
-
-#extended.view-icons {
-
-	li {
-		text-align: center;
-
-		&.entry {
-			float: left;
-
-			a, a:active, a:visited {
-				float: left;
-				margin: 8px;
-				padding: 8px;
-				width: 100px;
-				height: 120px;
-				border: 2px solid rgba(0,0,0,0);
-				.border-radius(5px);
-
-				&:hover, &.hover {
-					border-color: #e8e8e8;
-				}
-			}
-		}
-
-		.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/extended-list.less

@@ -1,39 +0,0 @@
-
-#extended.view-list {
-
-	li {
-
-		&.entry {
-
-			a, a:active, a:visited {
-				height: 56px;
-				border-bottom: 1px solid #e8e8e8;
-			}
-		}
-
-		.icon, .label, .date, .size {
-			padding: 6px;
-		}
-
-		.icon.big {
-			display: inline-block;
-			position: absolute;
-			left: 0;
-			top: -2px;
-			width: 100px;
-		}
-
-		.label {
-			margin: 0 270px 0 106px;
-		}
-
-		.date {
-			margin: 0 0 0 106px;
-		}
-
-		.date, .size {
-			position: relative;
-			top: -6px;
-		}
-	}
-}

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 80px auto;
+	margin: 80px auto;
 
 	table {
 		display: block;
@@ -15,33 +16,15 @@
 		}
 		th {
 			padding-bottom: 18px;
-
-			a, a:visited {
-				color: #555;
-				font-weight: normal;
-				text-decoration: none;
-				cursor: pointer;
-				opacity: 0.4;
-				.transition(all 0.2s ease-in-out);
-
-				&:hover {
-					color: #555;
-					opacity: 0.9;
-				}
-			}
-			span {
-				color: #555;
-				font-weight: normal;
-				opacity: 0.4;
-			}
+			color: #555;
+			font-weight: normal;
+			opacity: 0.4;
 		}
 		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;
+			font-size: 15px;
 
 			a, a:active, a:visited {
 				display: block;
@@ -50,21 +33,16 @@
 				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;
+			width: 24px;
 
 			img {
-				width: 16px;
-				height: 16px;
-				position: relative;
-				top: -2px;
+				width: 24px;
+				height: 24px;
 			}
 		}
 		td:nth-child(2), th:nth-child(2) {
@@ -83,3 +61,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

@@ -1,24 +1,66 @@
 
-html { overflow-y: auto; }
+@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-border-stronger: rgba(0,0,0,0.3);
+
+@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: 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-weight: 300;
+@font-family-mono: "Ubuntu Mono", monospace;
+
+
 ::-moz-selection { background: #68A9FF; color: #fff; text-shadow: none; }
 ::selection { background: #68A9FF; color: #fff; text-shadow: none; }
 
-body {
-	font-family: Ubuntu, sans-serif;
-	font-size: 13px;
-	color: #555;
-	background-color: #fff;
-	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.oldie {
-	.oldBrowser {
-		display: inline !important;
+
+html {
+	min-height: 100%;
+	overflow: auto;
+
+	&.js .noJsMsg {
+		display: none;
 	}
-	#tree {
-		display: none !important;
+	&.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,12 +1,22 @@
 
 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;
 	}
@@ -16,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;
+
+	}
+	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;
@@ -42,31 +68,33 @@ body#h5ai-info {
 		margin: 0;
 		padding: 0;
 
-		.test-label {
-			display: inline-block;
-			width: 300px;
-		}
-		.test-result {
-			display: inline-block;
-			width: 70px;
-			text-align: right;
-			font-weight: bold;
-			color: #aaa;
+		.test {
+			.label {
+				display: inline-block;
+				width: 350px;
+			}
+			.result {
+				display: inline-block;
+				width: 70px;
+				text-align: right;
+				font-weight: bold;
+				color: #aaa;
 
-			&.test-passed {
-				color: #5a5;
+				&.passed {
+					color: #5a5;
+				}
+				&.failed {
+					color: #a55;
+				}
 			}
-			&.test-failed {
-				color: #a55;
+			.info {
+				margin: 4px 0 12px 12px;
+				font-size: 0.7em;
+				color: #aaa;
+				width: 350px;
+				line-height: 1.2em;
 			}
 		}
-		.test-info {
-			margin: 4px 0 12px 12px;
-			font-size: 0.7em;
-			color: #aaa;
-			width: 310px;
-			line-height: 1.2em;
-		}
 	}
 
 	#bottombar {

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

@@ -11,20 +11,20 @@
 		right: 0;
 		top: 0;
 		max-height: 200px;
-		background-color: rgb(241,241,241);
-		border: 1px solid rgb(210,210,210);
+		background-color: @col-widget-back;
+		border: @border-widget;
 
 		.sp-scrollbar {
 			margin: 0;
 			width: 6px;
-			background-color: rgb(210,210,210);
+			background-color: @col-sb-back;
 			cursor: pointer;
 
 			.sp-thumb {
-				background-color: rgb(180,180,180);
+				background-color: @col-sb-thumb;
 			}
 			&.active .sp-thumb {
-				background-color: rgb(150,150,150);
+				background-color: @col-sb-thumb-active;
 			}
 		}
 
@@ -38,16 +38,16 @@
 		li {
 			padding: 8px 24px 10px 24px;
 			white-space: nowrap;
-			border-top: 1px solid rgb(231,231,231);
+			border-top: @border-widget-sep;
 			.transition(all 0.2s ease-in-out);
 
 			&.current {
 				color: #333;
-				background-color: rgba(255,255,255,0.8);
+				background-color: @col-widget-back-sel;
 			}
 			&:hover {
-				color: #e80;
-				background-color: rgba(255,255,255,0.8);
+				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

@@ -1,141 +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 {
-	position: fixed;
-
-}
-
-// @check-white: rgba(255,255,255,0.5);
-// @check-black: rgba(0,0,0,0.2);
 @check-white: #f8f8f8;
 @check-black: #e8e8e8;
 #pv-img-image {
+	position: absolute;
+
 	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 {
-	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.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-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%;
-	left: 0;
-	bottom: 0;
-	.vert-gradient(rgb(27,27,27), rgb(14,14,14));
-	border-top: 1px solid rgb(45,45,45);
+	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,44 +1,104 @@
 
-#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-text {
-	word-break: break-all;
+	max-width: 960px;
+	text-align: left;
+	background-color: #fff;
+	margin: 0 auto;
+	padding: 8px;
+	overflow: auto;
 
-	.syntaxhighlighter {
-		overflow: visible !important;
+	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
 
-		.gutter .line {
-			border-right: none !important;
+	&.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;
+			}
 		}
-		// .code .line, table td.code .container textarea {
-		// 	white-space: normal !important;
-		// }
 	}
 
+
 	&.markdown {
 		font-size: 16px;
 		padding: 8px 24px;
@@ -54,106 +114,10 @@
 		}
 
 		pre, code {
-			font-family: "Ubuntu Mono", monospace;
+			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-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%;
-	left: 0;
-	bottom: 0;
-	.vert-gradient(rgb(27,27,27), rgb(14,14,14));
-	border-top: 1px solid rgb(45,45,45);
-}

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

@@ -0,0 +1,166 @@
+
+#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-close-area {
+	position: absolute;
+	right: 8px;
+	top: 8px;
+	cursor: pointer;
+
+	img {
+		background-color: rgba(0,0,0,0.5);
+		border-radius: 8px;
+		width: 48px;
+		height: 48px;
+		opacity: 0.5;
+	}
+
+	&:hover, &.hover {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+#pv-prev-area, #pv-next-area {
+	position: absolute;
+	top: 50%;
+	cursor: pointer;
+
+	img {
+		background-color: rgba(0,0,0,0.5);
+		border-radius: 8px;
+		width: 48px;
+		height: 48px;
+		margin: -72px 0;
+		padding: 48px 0;
+		opacity: 0.5;
+	}
+
+	&:hover, &.hover {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+#pv-prev-area {
+	left: 8px;
+}
+
+#pv-next-area {
+	right: 8px;
+}
+
+#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

@@ -6,8 +6,8 @@
 	bottom: 50px;
 	z-index: 1;
 
-	background-color: #fff;
-	border: 2px solid #ddd;
+	background-color: @col-widget-back;
+	border: @border-widget;
 	padding: 8px;
 
 	canvas {

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 {
+	.header .label, .item .label {
+		margin-right: 80px !important;
+	}
+	.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

@@ -6,31 +6,29 @@
 	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);
+	background-color: @col-widget-back;
+	border-bottom: @border-widget;
 }
 
 
 .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;
 }
 
 
@@ -41,7 +39,7 @@
 	padding: 0;
 
 	a, a:active, a:visited, span.element {
-		color: #555;
+		color: @col;
 		cursor: pointer;
 		text-decoration: none;
 		opacity: 0.7;
@@ -78,9 +76,9 @@
 			color: #999;
 		}
 		img.hint {
-			width: 14px;
-			height: 14px;
 			opacity: 0.8;
+			width: 12px;
+			height: 12px;
 		}
 	}
 	.view {

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

@@ -8,22 +8,19 @@
 	z-index: 3;
 	overflow: auto;
 	padding: 8px;
-	background-color: rgb(241,241,241);
-	border-right: 2px solid rgb(221,221,221);
+	background-color: @col-widget-back;
+	border-right: @border-widget;
 
 	.sp-scrollbar {
-		margin: 8px 8px 8px 0;
 		width: 6px;
-		background-color: rgb(210,210,210);
-		.border-radius(3px);
+		background-color: @col-sb-back;
 		cursor: pointer;
 
 		.sp-thumb {
-			background-color: rgb(180,180,180);
-			.border-radius(3px);
+			background-color: @col-sb-thumb;
 		}
 		&.active .sp-thumb {
-			background-color: rgb(150,150,150);
+			background-color: @col-sb-thumb-active;
 		}
 	}
 
@@ -63,13 +60,13 @@
 		padding: 4px 6px;
 		color: #555;
 		border: 1px solid rgba(0,0,0,0);
-		.border-radius(5px);
+		border-radius: 3px;
 		text-decoration: none;
 		opacity: 0.7;
 
 		&:hover, &.hover {
-			color: #e80;
-			background-color: rgba(255,255,255,0.5);
+			color: @col-hover;
+			background-color: @col-widget-back-hover;
 			opacity: 1;
 		}
 	}
@@ -100,8 +97,8 @@
 	}
 	.current {
 		> a, > a:active, > a:visited {
-			background-color: rgba(255,255,255,0.5);
-			border-color: rgb(221,221,221);
+			background-color: @col-widget-back-sel;
+			border-color: @col-widget-sep;
 			opacity: 1;
 		}
 	}
@@ -109,7 +106,7 @@
 		> a, > a:active, > a:visited {
 			color: #999;
 			&:hover, &.hover {
-				color: #e80;
+				color: @col-hover;
 			}
 		}
 		.hint {

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

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

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

@@ -0,0 +1,110 @@
+
+#view.view-grid {
+
+	li {
+
+		&.item {
+			float: left;
+			margin: 2px;
+
+			a, a:active, a:visited {
+				width: @icon-size + 182px;
+				height: @icon-size + 6px;
+				border: 1px solid rgba(0,0,0,0);
+
+				&:hover, &.hover {
+					border-color: @item-border-col-hover;
+				}
+			}
+
+			// needs to be here, to not conflict with header fields
+			.icon {
+				padding: 8px;
+			}
+			.label, .date, .size {
+				padding: ((@icon-size - 16px)/2) 8px;
+			}
+		}
+
+		.icon.square {
+			display: inline-block;
+			position: absolute;
+			left: 0;
+			top: -4px;
+			width: @icon-size;
+
+			img {
+				width: @icon-size;
+				height: @icon-size;
+			}
+		}
+
+		.label {
+			display: block;
+			margin: 0 0 0 (@icon-size + 8px);
+		}
+
+		.date, .size {
+			display: none;
+		}
+	}
+}
+
+
+.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 {
+	&.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)
+	}
+}

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

@@ -0,0 +1,102 @@
+
+#view.view-icons {
+
+	li {
+		text-align: center;
+
+		&.item {
+			float: left;
+			margin: 8px;
+
+			a, a:active, a:visited {
+				padding: 8px;
+				min-width: 96px;
+				width: @icon-size * 2;
+				height: @icon-size + 72px;
+				border: 1px solid rgba(0,0,0,0);
+
+				&:hover, &.hover {
+					border-color: @item-border-col-hover;
+				}
+			}
+		}
+
+		.icon.rational {
+			display: block;
+			height: @icon-size;
+			margin-bottom: 6px;
+
+			img {
+				max-width: @icon-size * 2;
+				max-height: @icon-size;
+			}
+		}
+
+		.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;
+	}
+}
+
+
+.view-icons-sized(@size) {
+
+	li {
+
+		&.item {
+
+			a, a:active, a:visited {
+				width: @size * 2;
+				height: @size + 72px;
+			}
+		}
+
+		.icon.rational {
+			height: @size;
+
+			img {
+				max-width: @size * 2;
+				max-height: @size;
+			}
+		}
+	}
+}
+
+
+#view.view-icons {
+	&.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)
+	}
+}

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

@@ -1,16 +1,30 @@
 
+
+@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;
+
+@icon-size: 48px;
+
+
 #selection-rect {
 	display: none;
 	position: absolute;
 	left: 0;
 	top: 0;
 	z-index: 2;
-	border: 1px dashed rgba(240,100,0,0.5);
-	background-color: rgba(240,100,0,0.2);
+	border: 1px dashed @col-border-strong;
+	background-color: rgba(0,0,0,0.01);
 }
 
-#extended {
+
+#view {
 	display: none;
+	margin: 0 auto;
 
 	a, a:active, a:visited {
 		color: #333;
@@ -58,28 +72,44 @@
 			}
 		}
 
-		&.entry {
+		&.item {
+			font-size: 15px;
 
 			a, a:active, a:visited {
 				display: block;
 				overflow: hidden;
 
 				&:hover, &.hover {
-					color: #e80;
-					background-color: #f6f6f6;
-					border-color: #e8e8e8;
+					color: @col-hover;
+					background-color: @item-background-col-hover;
+					border-color: @item-border-col-hover;
+				}
+
+				&:hover {
+					.selector {
+						display: block;
+					}
 				}
 			}
 
 			&.selected:not(.selecting), &.selecting:not(.selected) {
 
 				a, a:active, a:visited {
-					border-color: rgba(240,100,0,0.2);
-					background-color: rgba(240,100,0,0.2);
+					background-color: @item-background-col-sel;
+					border-color: @item-border-col-sel;
 
 					&:hover, &.hover {
-						border-color: rgba(240,100,0,0.2);
-						background-color: rgba(240,100,0,0.2);
+						background-color: @item-background-col-sel;
+						border-color: @item-border-col-sel;
+					}
+				}
+
+				.selector {
+					display: block;
+					// border-color: @col-border-stronger;
+
+					img {
+						display: block;
 					}
 				}
 			}
@@ -91,7 +121,7 @@
 				color: #aaa;
 
 				&:hover, &.hover {
-					color: #e80;
+					color: @col-hover;
 				}
 			}
 
@@ -114,25 +144,10 @@
 			text-align: center;
 
 			img {
+				vertical-align: top;
 
 				&.thumb {
-					.box-shadow(0 0 0 1px #ddd);
-				}
-			}
-
-			&.small {
-
-				img {
-					max-width: 16px;
-					max-height: 16px;
-				}
-			}
-
-			&.big {
-
-				img {
-					max-width: 100px;
-					max-height: 48px;
+					box-shadow: 0 0 0 1px #ddd;
 				}
 			}
 		}
@@ -141,17 +156,41 @@
 			display: block;
 			overflow: hidden;
 			text-align: left;
+			text-overflow: ellipsis;
 		}
 
 		.date {
 			text-align: right;
-			width: 160px;
+			width: 130px;
 		}
 
 		.size {
 			text-align: right;
 			width: 80px;
 		}
+
+		.selector {
+			display: none;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 18px;
+			height: 18px;
+			background-color: #fff;
+			border: 1px solid @col-border-strong;
+			cursor: pointer;
+			.transition(all 0.2s ease-in-out);
+
+			&:hover {
+				border-color: @col-border-stronger;
+			}
+
+			img {
+				display: none;
+				width: 100%;
+				height: 100%;
+			}
+		}
 	}
 
 	.empty, .no-match {

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

@@ -1,4 +1,3 @@
-
 /* ==========================================================================
    Helper classes
    ========================================================================== */
@@ -19,7 +18,7 @@
     content: "";
     display: block;
     width: 0;
-    height: 100%;
+    height: 150%;
 }
 
 /*
@@ -100,21 +99,6 @@
     *zoom: 1;
 }
 
-/* ==========================================================================
-   EXAMPLE Media Queries for Responsive Design.
-   Theses examples override the primary ('mobile first') styles.
-   Modify as content requires.
-   ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-    /* Style adjustments for viewports that meet the condition */
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-       only screen and (min-resolution: 144dpi) {
-    /* Style adjustments for high resolution devices */
-}
-
 /* ==========================================================================
    Print styles.
    Inlined to avoid required HTTP connection: h5bp.com/r
@@ -124,7 +108,7 @@
     * {
         background: transparent !important;
         color: #000 !important; /* Black prints faster: h5bp.com/s */
-        box-shadow:none !important;
+        box-shadow: none !important;
         text-shadow: none !important;
     }
 

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

@@ -25,7 +25,7 @@ body {
 
 /*
  * Remove text-shadow in selection highlight: h5bp.com/i
- * These selection declarations have to be separate.
+ * These selection rule sets have to be separate.
  * Customize the background color to match your design.
  */
 

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

@@ -1,11 +1,11 @@
-/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
+/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
 
 /* ==========================================================================
    HTML5 display definitions
    ========================================================================== */
 
-/*
- * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+/**
+ * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
 
 article,
@@ -16,14 +16,15 @@ figure,
 footer,
 header,
 hgroup,
+main,
 nav,
 section,
 summary {
     display: block;
 }
 
-/*
- * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
 
 audio,
@@ -34,8 +35,8 @@ video {
     *zoom: 1;
 }
 
-/*
- * Prevents modern browsers from displaying `audio` without controls.
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
  * Remove excess height in iOS 5 devices.
  */
 
@@ -44,9 +45,8 @@ audio:not([controls]) {
     height: 0;
 }
 
-/*
- * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
- * and Safari 4.
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
  * Known issue: no IE 6 support.
  */
 
@@ -58,21 +58,27 @@ audio:not([controls]) {
    Base
    ========================================================================== */
 
-/*
- * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+/**
+ * 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.
- * 2. Prevents iOS text size adjust after orientation change, without disabling
+ * 4. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
 
 html {
-    font-size: 100%; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-    -ms-text-size-adjust: 100%; /* 2 */
+    background: #fff; /* 1 */
+    color: #000; /* 2 */
+    font-size: 100%; /* 3 */
+    -webkit-text-size-adjust: 100%; /* 4 */
+    -ms-text-size-adjust: 100%; /* 4 */
 }
 
-/*
- * Addresses `font-family` inconsistency between `textarea` and other form
+/**
+ * Address `font-family` inconsistency between `textarea` and other form
  * elements.
  */
 
@@ -84,8 +90,8 @@ textarea {
     font-family: sans-serif;
 }
 
-/*
- * Addresses margins handled incorrectly in IE 6/7.
+/**
+ * Address margins handled incorrectly in IE 6/7.
  */
 
 body {
@@ -96,16 +102,16 @@ body {
    Links
    ========================================================================== */
 
-/*
- * Addresses `outline` inconsistency between Chrome and other browsers.
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
  */
 
 a:focus {
     outline: thin dotted;
 }
 
-/*
- * Improves readability when focused and also mouse hovered in all browsers.
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
  */
 
 a:active,
@@ -117,9 +123,9 @@ a:hover {
    Typography
    ========================================================================== */
 
-/*
- * Addresses font sizes and margins set differently in IE 6/7.
- * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+/**
+ * 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.
  */
 
@@ -149,20 +155,20 @@ h5 {
 }
 
 h6 {
-    font-size: 0.75em;
+    font-size: 0.67em;
     margin: 2.33em 0;
 }
 
-/*
- * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+/**
+ * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
  */
 
 abbr[title] {
     border-bottom: 1px dotted;
 }
 
-/*
- * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+/**
+ * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
  */
 
 b,
@@ -174,16 +180,27 @@ blockquote {
     margin: 1em 40px;
 }
 
-/*
- * Addresses styling not present in Safari 5 and Chrome.
+/**
+ * Address styling not present in Safari 5 and Chrome.
  */
 
 dfn {
     font-style: italic;
 }
 
-/*
- * Addresses styling not present in IE 6/7/8/9.
+/**
+ * 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 {
@@ -191,8 +208,8 @@ mark {
     color: #000;
 }
 
-/*
- * Addresses margins set differently in IE 6/7.
+/**
+ * Address margins set differently in IE 6/7.
  */
 
 p,
@@ -200,8 +217,8 @@ pre {
     margin: 1em 0;
 }
 
-/*
- * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+/**
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
  */
 
 code,
@@ -213,8 +230,8 @@ samp {
     font-size: 1em;
 }
 
-/*
- * Improves readability of pre-formatted text in all browsers.
+/**
+ * Improve readability of pre-formatted text in all browsers.
  */
 
 pre {
@@ -223,16 +240,16 @@ pre {
     word-wrap: break-word;
 }
 
-/*
- * Addresses CSS quotes not supported in IE 6/7.
+/**
+ * Address CSS quotes not supported in IE 6/7.
  */
 
 q {
     quotes: none;
 }
 
-/*
- * Addresses `quotes` property not supported in Safari 4.
+/**
+ * Address `quotes` property not supported in Safari 4.
  */
 
 q:before,
@@ -241,16 +258,16 @@ q:after {
     content: none;
 }
 
-/*
- * Addresses inconsistent and variable font size in all browsers.
+/**
+ * Address inconsistent and variable font size in all browsers.
  */
 
 small {
     font-size: 80%;
 }
 
-/*
- * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
 
 sub,
@@ -273,8 +290,8 @@ sub {
    Lists
    ========================================================================== */
 
-/*
- * Addresses margins set differently in IE 6/7.
+/**
+ * Address margins set differently in IE 6/7.
  */
 
 dl,
@@ -288,8 +305,8 @@ dd {
     margin: 0 0 0 40px;
 }
 
-/*
- * Addresses paddings set differently in IE 6/7.
+/**
+ * Address paddings set differently in IE 6/7.
  */
 
 menu,
@@ -298,8 +315,8 @@ ul {
     padding: 0 0 0 40px;
 }
 
-/*
- * Corrects list images handled incorrectly in IE 7.
+/**
+ * Correct list images handled incorrectly in IE 7.
  */
 
 nav ul,
@@ -312,9 +329,9 @@ nav ol {
    Embedded content
    ========================================================================== */
 
-/*
- * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
- * 2. Improves image quality when scaled in IE 7.
+/**
+ * 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 {
@@ -322,8 +339,8 @@ img {
     -ms-interpolation-mode: bicubic; /* 2 */
 }
 
-/*
- * Corrects overflow displayed oddly in IE 9.
+/**
+ * Correct overflow displayed oddly in IE 9.
  */
 
 svg:not(:root) {
@@ -334,8 +351,8 @@ svg:not(:root) {
    Figures
    ========================================================================== */
 
-/*
- * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
  */
 
 figure {
@@ -346,15 +363,15 @@ figure {
    Forms
    ========================================================================== */
 
-/*
- * Corrects margin displayed oddly in IE 6/7.
+/**
+ * Correct margin displayed oddly in IE 6/7.
  */
 
 form {
     margin: 0;
 }
 
-/*
+/**
  * Define consistent border, margin, and padding.
  */
 
@@ -364,10 +381,10 @@ fieldset {
     padding: 0.35em 0.625em 0.75em;
 }
 
-/*
- * 1. Corrects color not being inherited in IE 6/7/8/9.
- * 2. Corrects text not wrapping in Firefox 3.
- * 3. Corrects alignment displayed oddly in IE 6/7.
+/**
+ * 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 {
@@ -377,11 +394,11 @@ legend {
     *margin-left: -7px; /* 3 */
 }
 
-/*
- * 1. Corrects font size not being inherited in all browsers.
- * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+/**
+ * 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. Improves appearance and consistency in all browsers.
+ * 3. Improve appearance and consistency in all browsers.
  */
 
 button,
@@ -394,8 +411,8 @@ textarea {
     *vertical-align: middle; /* 3 */
 }
 
-/*
- * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
  * the UA stylesheet.
  */
 
@@ -404,13 +421,25 @@ 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. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
+ * 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. Removes inner spacing in IE 7 without affecting normal text inputs.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
  *    Known issue: inner spacing remains in IE 6.
  */
 
@@ -423,19 +452,19 @@ input[type="submit"] {
     *overflow: visible;  /* 4 */
 }
 
-/*
+/**
  * Re-set default cursor for disabled elements.
  */
 
 button[disabled],
-input[disabled] {
+html input[disabled] {
     cursor: default;
 }
 
-/*
- * 1. Addresses box sizing set to content-box in IE 8/9.
- * 2. Removes excess padding in IE 8/9.
- * 3. Removes excess padding in IE 7.
+/**
+ * 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.
  */
 
@@ -447,9 +476,9 @@ input[type="radio"] {
     *width: 13px; /* 3 */
 }
 
-/*
- * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+/**
+ * 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).
  */
 
@@ -460,8 +489,8 @@ input[type="search"] {
     box-sizing: content-box;
 }
 
-/*
- * Removes inner padding and search cancel button in Safari 5 and Chrome
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
  * on OS X.
  */
 
@@ -470,8 +499,8 @@ input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
-/*
- * Removes inner padding and border in Firefox 3+.
+/**
+ * Remove inner padding and border in Firefox 3+.
  */
 
 button::-moz-focus-inner,
@@ -480,9 +509,9 @@ input::-moz-focus-inner {
     padding: 0;
 }
 
-/*
- * 1. Removes default vertical scrollbar in IE 6/7/8/9.
- * 2. Improves readability and alignment in all browsers.
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
  */
 
 textarea {
@@ -494,7 +523,7 @@ textarea {
    Tables
    ========================================================================== */
 
-/*
+/**
  * Remove most spacing between table cells.
  */
 

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/lib/sh/shCore.less

@@ -1,228 +0,0 @@
-/**
- * SyntaxHighlighter
- * http://alexgorbatchev.com/SyntaxHighlighter
- *
- * SyntaxHighlighter is donationware. If you are using it, please donate.
- * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
- *
- * @version
- * 3.0.83 (July 02 2010)
- * 
- * @copyright
- * Copyright (C) 2004-2010 Alex Gorbatchev.
- *
- * @license
- * Dual licensed under the MIT and GPL licenses.
- */
-.syntaxhighlighter a,
-.syntaxhighlighter div,
-.syntaxhighlighter code,
-.syntaxhighlighter table,
-.syntaxhighlighter table td,
-.syntaxhighlighter table tr,
-.syntaxhighlighter table tbody,
-.syntaxhighlighter table thead,
-.syntaxhighlighter table caption,
-.syntaxhighlighter textarea {
-  -moz-border-radius: 0 0 0 0 !important;
-  -webkit-border-radius: 0 0 0 0 !important;
-  background: none !important;
-  border: 0 !important;
-  bottom: auto !important;
-  float: none !important;
-  height: auto !important;
-  left: auto !important;
-  line-height: 1.1em !important;
-  margin: 0 !important;
-  outline: 0 !important;
-  overflow: visible !important;
-  padding: 0 !important;
-  position: static !important;
-  right: auto !important;
-  text-align: left !important;
-  top: auto !important;
-  vertical-align: baseline !important;
-  width: auto !important;
-  box-sizing: content-box !important;
-  // font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
-  font-family: "Ubuntu Mono", "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
-  font-weight: normal !important;
-  font-style: normal !important;
-  // font-size: 1em !important;
-  font-size: 16px !important;
-  min-height: inherit !important;
-  min-height: auto !important;
-}
-
-.syntaxhighlighter {
-  width: 100% !important;
-  margin: 1em 0 1em 0 !important;
-  position: relative !important;
-  overflow: auto !important;
-  font-size: 1em !important;
-}
-.syntaxhighlighter.source {
-  overflow: hidden !important;
-}
-.syntaxhighlighter .bold {
-  font-weight: bold !important;
-}
-.syntaxhighlighter .italic {
-  font-style: italic !important;
-}
-.syntaxhighlighter .line {
-  white-space: pre !important;
-}
-.syntaxhighlighter table {
-  width: 100% !important;
-}
-.syntaxhighlighter table caption {
-  text-align: left !important;
-  padding: .5em 0 0.5em 1em !important;
-}
-.syntaxhighlighter table td.code {
-  width: 100% !important;
-}
-.syntaxhighlighter table td.code .container {
-  position: relative !important;
-}
-.syntaxhighlighter table td.code .container textarea {
-  box-sizing: border-box !important;
-  position: absolute !important;
-  left: 0 !important;
-  top: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  border: none !important;
-  background: white !important;
-  padding-left: 1em !important;
-  overflow: hidden !important;
-  white-space: pre !important;
-}
-.syntaxhighlighter table td.gutter .line {
-  text-align: right !important;
-  padding: 0 0.5em 0 1em !important;
-}
-.syntaxhighlighter table td.code .line {
-  padding: 0 1em !important;
-}
-.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
-  padding-left: 0em !important;
-}
-.syntaxhighlighter.show {
-  display: block !important;
-}
-.syntaxhighlighter.collapsed table {
-  display: none !important;
-}
-.syntaxhighlighter.collapsed .toolbar {
-  padding: 0.1em 0.8em 0em 0.8em !important;
-  font-size: 1em !important;
-  position: static !important;
-  width: auto !important;
-  height: auto !important;
-}
-.syntaxhighlighter.collapsed .toolbar span {
-  display: inline !important;
-  margin-right: 1em !important;
-}
-.syntaxhighlighter.collapsed .toolbar span a {
-  padding: 0 !important;
-  display: none !important;
-}
-.syntaxhighlighter.collapsed .toolbar span a.expandSource {
-  display: inline !important;
-}
-.syntaxhighlighter .toolbar {
-  position: absolute !important;
-  right: 1px !important;
-  top: 1px !important;
-  width: 11px !important;
-  height: 11px !important;
-  font-size: 10px !important;
-  z-index: 10 !important;
-}
-.syntaxhighlighter .toolbar span.title {
-  display: inline !important;
-}
-.syntaxhighlighter .toolbar a {
-  display: block !important;
-  text-align: center !important;
-  text-decoration: none !important;
-  padding-top: 1px !important;
-}
-.syntaxhighlighter .toolbar a.expandSource {
-  display: none !important;
-}
-.syntaxhighlighter.ie {
-  font-size: .9em !important;
-  padding: 1px 0 1px 0 !important;
-}
-.syntaxhighlighter.ie .toolbar {
-  line-height: 8px !important;
-}
-.syntaxhighlighter.ie .toolbar a {
-  padding-top: 0px !important;
-}
-.syntaxhighlighter.printing .line.alt1 .content,
-.syntaxhighlighter.printing .line.alt2 .content,
-.syntaxhighlighter.printing .line.highlighted .number,
-.syntaxhighlighter.printing .line.highlighted.alt1 .content,
-.syntaxhighlighter.printing .line.highlighted.alt2 .content {
-  background: none !important;
-}
-.syntaxhighlighter.printing .line .number {
-  color: #bbbbbb !important;
-}
-.syntaxhighlighter.printing .line .content {
-  color: black !important;
-}
-.syntaxhighlighter.printing .toolbar {
-  display: none !important;
-}
-.syntaxhighlighter.printing a {
-  text-decoration: none !important;
-}
-.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
-  color: black !important;
-}
-.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
-  color: #008200 !important;
-}
-.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
-  color: blue !important;
-}
-.syntaxhighlighter.printing .keyword {
-  color: #006699 !important;
-  font-weight: bold !important;
-}
-.syntaxhighlighter.printing .preprocessor {
-  color: gray !important;
-}
-.syntaxhighlighter.printing .variable {
-  color: #aa7700 !important;
-}
-.syntaxhighlighter.printing .value {
-  color: #009900 !important;
-}
-.syntaxhighlighter.printing .functions {
-  color: #ff1493 !important;
-}
-.syntaxhighlighter.printing .constants {
-  color: #0066cc !important;
-}
-.syntaxhighlighter.printing .script {
-  font-weight: bold !important;
-}
-.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
-  color: gray !important;
-}
-.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
-  color: #ff1493 !important;
-}
-.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
-  color: red !important;
-}
-.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
-  color: black !important;
-}

src/_h5ai/client/css/lib/sh/shThemeDefault.less

@@ -1,117 +0,0 @@
-/**
- * SyntaxHighlighter
- * http://alexgorbatchev.com/SyntaxHighlighter
- *
- * SyntaxHighlighter is donationware. If you are using it, please donate.
- * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
- *
- * @version
- * 3.0.83 (July 02 2010)
- * 
- * @copyright
- * Copyright (C) 2004-2010 Alex Gorbatchev.
- *
- * @license
- * Dual licensed under the MIT and GPL licenses.
- */
-.syntaxhighlighter {
-  background-color: white !important;
-}
-.syntaxhighlighter .line.alt1 {
-  background-color: white !important;
-}
-.syntaxhighlighter .line.alt2 {
-  background-color: white !important;
-}
-.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
-  background-color: #e0e0e0 !important;
-}
-.syntaxhighlighter .line.highlighted.number {
-  color: black !important;
-}
-.syntaxhighlighter table caption {
-  color: black !important;
-}
-.syntaxhighlighter .gutter {
-  color: #afafaf !important;
-}
-.syntaxhighlighter .gutter .line {
-  border-right: 3px solid #6ce26c !important;
-}
-.syntaxhighlighter .gutter .line.highlighted {
-  background-color: #6ce26c !important;
-  color: white !important;
-}
-.syntaxhighlighter.printing .line .content {
-  border: none !important;
-}
-.syntaxhighlighter.collapsed {
-  overflow: visible !important;
-}
-.syntaxhighlighter.collapsed .toolbar {
-  color: blue !important;
-  background: white !important;
-  border: 1px solid #6ce26c !important;
-}
-.syntaxhighlighter.collapsed .toolbar a {
-  color: blue !important;
-}
-.syntaxhighlighter.collapsed .toolbar a:hover {
-  color: red !important;
-}
-.syntaxhighlighter .toolbar {
-  color: white !important;
-  background: #6ce26c !important;
-  border: none !important;
-}
-.syntaxhighlighter .toolbar a {
-  color: white !important;
-}
-.syntaxhighlighter .toolbar a:hover {
-  color: black !important;
-}
-.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
-  color: black !important;
-}
-.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
-  color: #008200 !important;
-}
-.syntaxhighlighter .string, .syntaxhighlighter .string a {
-  color: blue !important;
-}
-.syntaxhighlighter .keyword {
-  color: #006699 !important;
-}
-.syntaxhighlighter .preprocessor {
-  color: gray !important;
-}
-.syntaxhighlighter .variable {
-  color: #aa7700 !important;
-}
-.syntaxhighlighter .value {
-  color: #009900 !important;
-}
-.syntaxhighlighter .functions {
-  color: #ff1493 !important;
-}
-.syntaxhighlighter .constants {
-  color: #0066cc !important;
-}
-.syntaxhighlighter .script {
-  font-weight: bold !important;
-  color: #006699 !important;
-  background-color: none !important;
-}
-.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
-  color: gray !important;
-}
-.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
-  color: #ff1493 !important;
-}
-.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
-  color: red !important;
-}
-
-.syntaxhighlighter .keyword {
-  font-weight: bold !important;
-}

src/_h5ai/client/css/styles.less

@@ -2,10 +2,6 @@
 @import "lib/h5bp-normalize";
 @import "lib/h5bp-main-header";
 
-@import "lib/mixins";
-@import "lib/sh/shCore";
-@import "lib/sh/shThemeDefault";
-
 @import "inc/general";
 @import "inc/topbar";
 @import "inc/bottombar";
@@ -15,18 +11,19 @@
 @import "inc/l10n";
 @import "inc/tree";
 @import "inc/qrcode";
+@import "inc/preview";
 @import "inc/preview-img";
 @import "inc/preview-txt";
+@import "inc/notify";
 
 @import "inc/content";
-@import "inc/extended";
-@import "inc/extended-details";
-@import "inc/extended-icons";
-@import "inc/extended-list";
-@import "inc/extended-grid";
+@import "inc/view";
+@import "inc/view-details";
+@import "inc/view-icons";
+@import "inc/view-grid";
 // @import "inc/context-menu";
 @import "inc/dropbox";
-@import "inc/fallback-table";
+@import "inc/fallback";
 
 @import "inc/responsive";