From 49276c157c8b88196abc4a5df279e523d77696fc Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Sat, 6 Jul 2013 20:37:08 +0200
Subject: [PATCH] More style changes.

---
 src/_h5ai/client/css/inc/bottombar.less      | 15 ++++-----
 src/_h5ai/client/css/inc/content.less        |  4 +--
 src/_h5ai/client/css/inc/context-menu.less   | 10 +++---
 src/_h5ai/client/css/inc/filter.less         |  2 +-
 src/_h5ai/client/css/inc/general.less        | 35 ++++++++++++++++++--
 src/_h5ai/client/css/inc/h5ai-info.less      |  2 +-
 src/_h5ai/client/css/inc/l10n.less           | 21 +++++-------
 src/_h5ai/client/css/inc/no-js-fallback.less |  6 ++--
 src/_h5ai/client/css/inc/notify.less         |  3 --
 src/_h5ai/client/css/inc/qrcode.less         |  7 ++--
 src/_h5ai/client/css/inc/topbar.less         | 20 ++++-------
 src/_h5ai/client/css/inc/tree.less           | 26 ++++++---------
 src/_h5ai/client/css/inc/view.less           | 28 ++++++++++------
 src/_h5ai/conf/options.json                  |  6 ++--
 src/_h5ai/index.html.jade                    |  2 +-
 src/_h5ai/server/php/inc/page.php.jade       |  2 +-
 16 files changed, 100 insertions(+), 89 deletions(-)

diff --git a/src/_h5ai/client/css/inc/bottombar.less b/src/_h5ai/client/css/inc/bottombar.less
index e9f0a58d..16a3c054 100644
--- a/src/_h5ai/client/css/inc/bottombar.less
+++ b/src/_h5ai/client/css/inc/bottombar.less
@@ -8,9 +8,8 @@
 	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: rgb(245,245,245);
-	border-top: 1px solid rgba(0,0,0,0.05);
+	background-color: @col-widget-back;
+	border-top: @border-widget;
 	// .box-shadow(0 -2px 4px 0 rgba(0, 0, 0, 0.15);
 
 	color: #999;
@@ -23,7 +22,7 @@
 		opacity: 0.7;
 
 		&:hover {
-			color: #e80;
+			color: @col-hover;
 			opacity: 1;
 		}
 	}
@@ -43,18 +42,18 @@
 		padding: 0 8px;
 	}
 	.noJsMsg {
-		color: #c33;
+		color: @col-error;
 		margin-left: 16px;
 	}
 	.oldBrowser {
 		display: none;
-		color: #c33;
+		color: @col-error;
 		margin-left: 16px;
 		a, a:active, a:visited {
-			color: #c33;
+			color: @col-error;
 			text-decoration: underline;
 			&:hover {
-				color: #e80;
+				color: @col-hover;
 			}
 		}
 	}
diff --git a/src/_h5ai/client/css/inc/content.less b/src/_h5ai/client/css/inc/content.less
index 6511f851..188cdae1 100644
--- a/src/_h5ai/client/css/inc/content.less
+++ b/src/_h5ai/client/css/inc/content.less
@@ -9,12 +9,12 @@
 	color: #333;
 
 	a, a:active, a:visited {
-		color: #2080FF;
+		color: @col-link;
 		text-decoration: none;
 		cursor: pointer;
 
 		&:hover {
-			color: #555;
+			color: @col-link-hover;
 		}
 	}
 }
diff --git a/src/_h5ai/client/css/inc/context-menu.less b/src/_h5ai/client/css/inc/context-menu.less
index 2fad1e70..3135941b 100644
--- a/src/_h5ai/client/css/inc/context-menu.less
+++ b/src/_h5ai/client/css/inc/context-menu.less
@@ -5,8 +5,8 @@
 	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;
 			}
 		}
 	}
diff --git a/src/_h5ai/client/css/inc/filter.less b/src/_h5ai/client/css/inc/filter.less
index b93f590d..0a5afc88 100644
--- a/src/_h5ai/client/css/inc/filter.less
+++ b/src/_h5ai/client/css/inc/filter.less
@@ -6,7 +6,7 @@
 		display: none;
 		border: none;
 		font-family: @font-family;
-		color: #555;
+		color: @col;
 		background-color: rgba(0,0,0,0);
 		width: 100px;
 	}
diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less
index 2d6f4ac2..2c6255fc 100644
--- a/src/_h5ai/client/css/inc/general.less
+++ b/src/_h5ai/client/css/inc/general.less
@@ -1,4 +1,33 @@
 
+@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.1);
+
+@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);
+
+
+@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;
 
@@ -9,10 +38,10 @@ html { overflow-y: auto; }
 
 body {
 	font-family: @font-family;
-	font-weight: 300;
+	// font-weight: 400;
 	font-size: 13px;
-	color: #555;
-	background-color: #fff;
+	color: @col;
+	background-color: @col-back;
 	margin: 30px;
 }
 
diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less
index 48f2b8ac..e9f03b32 100644
--- a/src/_h5ai/client/css/inc/h5ai-info.less
+++ b/src/_h5ai/client/css/inc/h5ai-info.less
@@ -3,7 +3,7 @@ body#h5ai-info {
 	font-family: @font-family;
 	margin: 2em auto 4em auto;
 	font-size: 20px;
-	color: #555;
+	color: @col;
 	max-width: 600px;
 	text-align: center;
 
diff --git a/src/_h5ai/client/css/inc/l10n.less b/src/_h5ai/client/css/inc/l10n.less
index e13d5620..04c0c037 100644
--- a/src/_h5ai/client/css/inc/l10n.less
+++ b/src/_h5ai/client/css/inc/l10n.less
@@ -11,22 +11,20 @@
 		right: 0;
 		top: 0;
 		max-height: 200px;
-		// background-color: rgb(241,241,241);
-		// border: 1px solid rgb(210,210,210);
-		background-color: rgb(245,245,245);
-		border: 1px solid rgba(0,0,0,0.05);
+		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;
 			}
 		}
 
@@ -40,17 +38,16 @@
 		li {
 			padding: 8px 24px 10px 24px;
 			white-space: nowrap;
-			// border-top: 1px solid rgb(231,231,231);
-			border-top: 1px solid rgba(0,0,0,0.05);
+			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;
 			}
 		}
 	}
diff --git a/src/_h5ai/client/css/inc/no-js-fallback.less b/src/_h5ai/client/css/inc/no-js-fallback.less
index c1e2bb97..07908152 100644
--- a/src/_h5ai/client/css/inc/no-js-fallback.less
+++ b/src/_h5ai/client/css/inc/no-js-fallback.less
@@ -36,9 +36,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,7 +48,7 @@
 				cursor: pointer;
 
 				&:hover {
-					color: #e80;
+					color: @col-hover;
 				}
 			}
 		}
diff --git a/src/_h5ai/client/css/inc/notify.less b/src/_h5ai/client/css/inc/notify.less
index 19e38cef..4ac6545e 100644
--- a/src/_h5ai/client/css/inc/notify.less
+++ b/src/_h5ai/client/css/inc/notify.less
@@ -8,9 +8,6 @@
 	z-index: 100;
 	padding: 2px 6px 2px 6px;
 	color: #fff;
-	// background-color: rgba(240, 100, 0, 0.5);
-	// border: 2px solid rgba(255, 255, 255, 0.5);
-	// border: 2px solid rgba(240, 100, 0, 0.9);
 	background-color: rgba(0, 0, 0, 0.2);
 	.border-radius(4px);
 	text-align: center;
diff --git a/src/_h5ai/client/css/inc/qrcode.less b/src/_h5ai/client/css/inc/qrcode.less
index 26459295..f12c94b4 100644
--- a/src/_h5ai/client/css/inc/qrcode.less
+++ b/src/_h5ai/client/css/inc/qrcode.less
@@ -6,11 +6,8 @@
 	bottom: 50px;
 	z-index: 1;
 
-	// background-color: #fff;
-	// border: 2px solid #ddd;
-	// background-color: rgb(245,245,245);
-	background-color: rgb(255,255,255);
-	border: 1px solid rgba(0,0,0,0.05);
+	background-color: @col-widget-back;
+	border: @border-widget;
 	padding: 8px;
 
 	canvas {
diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less
index eb4a46ad..90643624 100644
--- a/src/_h5ai/client/css/inc/topbar.less
+++ b/src/_h5ai/client/css/inc/topbar.less
@@ -7,34 +7,30 @@
 	left: 0;
 	top: 0;
 	// .vert-gradient(rgb(241,241,241), rgb(228,228,228));
-	// border-bottom: 1px solid rgb(210,210,210);
-	background-color: rgb(245,245,245);
-	border-bottom: 1px solid rgba(0,0,0,0.05);
+	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: rgba(255,255,255,0.8);
+	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;
 }
 
 
@@ -45,7 +41,7 @@
 	padding: 0;
 
 	a, a:active, a:visited, span.element {
-		color: #555;
+		color: @col;
 		cursor: pointer;
 		text-decoration: none;
 		opacity: 0.7;
@@ -82,8 +78,6 @@
 			color: #999;
 		}
 		img.hint {
-			// width: 14px;
-			// height: 14px;
 			opacity: 0.8;
 		}
 	}
diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less
index 99a104d1..8f4f2db2 100644
--- a/src/_h5ai/client/css/inc/tree.less
+++ b/src/_h5ai/client/css/inc/tree.less
@@ -8,25 +8,22 @@
 	z-index: 3;
 	overflow: auto;
 	padding: 8px;
-	// background-color: rgb(241,241,241);
-	// border-right: 2px solid rgb(221,221,221);
-	// border-right: 1px solid rgb(216,216,216);
-	background-color: rgb(245,245,245);
-	border-right: 1px solid rgba(0,0,0,0.05);
+	background-color: @col-widget-back;
+	border-right: @border-widget;
 
 	.sp-scrollbar {
 		margin: 8px 8px 8px 0;
 		width: 6px;
-		background-color: rgb(210,210,210);
+		background-color: @col-sb-back;
 		.border-radius(3px);
 		cursor: pointer;
 
 		.sp-thumb {
-			background-color: rgb(180,180,180);
+			background-color: @col-sb-thumb;
 			.border-radius(3px);
 		}
 		&.active .sp-thumb {
-			background-color: rgb(150,150,150);
+			background-color: @col-sb-thumb-active;
 		}
 	}
 
@@ -71,9 +68,8 @@
 		opacity: 0.7;
 
 		&:hover, &.hover {
-			color: #e80;
-			// background-color: rgba(255,255,255,0.5);
-			background-color: rgba(255,255,255,0.8);
+			color: @col-hover;
+			background-color: @col-widget-back-hover;
 			// border-color: rgba(0,0,0,0.05);
 			opacity: 1;
 		}
@@ -105,10 +101,8 @@
 	}
 	.current {
 		> a, > a:active, > a:visited {
-			// background-color: rgba(255,255,255,0.5);
-			// border-color: rgb(221,221,221);
-			background-color: rgba(255,255,255,0.8);
-			border-color: rgba(0,0,0,0.05);
+			background-color: @col-widget-back-sel;
+			border-color: @col-widget-sep;
 			opacity: 1;
 		}
 	}
@@ -116,7 +110,7 @@
 		> a, > a:active, > a:visited {
 			color: #999;
 			&:hover, &.hover {
-				color: #e80;
+				color: @col-hover;
 			}
 		}
 		.hint {
diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less
index a7702ad8..dd2ab451 100644
--- a/src/_h5ai/client/css/inc/view.less
+++ b/src/_h5ai/client/css/inc/view.less
@@ -5,16 +5,19 @@
 	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);
 }
 
-@item-border-col-sep: #f2f2f2;
-// @item-border-col-sep: #e8e8e8;
-@item-background-col-hover: #f6f6f6;
-@item-border-col-hover: #f0f0f0;
-@item-background-col-sel: rgba(240,100,0,0.2);
-@item-border-col-sel: rgba(240,100,0,0.2);
+@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.04);
+@item-border-col-sel: @col-border-strong;
+
+
 
 #view {
 	display: none;
@@ -73,7 +76,8 @@
 				overflow: hidden;
 
 				&:hover, &.hover {
-					color: #e80;
+					// color: #e80;
+					color: @col-hover;
 					background-color: @item-background-col-hover;
 					border-color: @item-border-col-hover;
 				}
@@ -82,7 +86,8 @@
 			&.selected:not(.selecting), &.selecting:not(.selected) {
 
 				a, a:active, a:visited {
-					color: #000;
+					// color: #000;
+					// color: @col-hover;
 					background-color: @item-background-col-sel;
 					border-color: @item-border-col-sel;
 
@@ -100,7 +105,8 @@
 				color: #aaa;
 
 				&:hover, &.hover {
-					color: #e80;
+					// color: #e80;
+					color: @col-hover;
 				}
 			}
 
diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json
index bbf9498f..c2dc439a 100644
--- a/src/_h5ai/conf/options.json
+++ b/src/_h5ai/conf/options.json
@@ -104,7 +104,7 @@ Options
 	- packageName: basename of the download package, null for current foldername
 	*/
 	"download": {
-		"enabled": false,
+		"enabled": true,
 		"execution": "shell",
 		"format": "zip",
 		"packageName": null
@@ -178,7 +178,7 @@ Options
 		2: mode, servername and -version
 	*/
 	"mode": {
-		"enabled": false,
+		"enabled": true,
 		"display": 2
 	},
 
@@ -248,7 +248,7 @@ Options
 	- size: width and height in pixel
 	*/
 	"qrcode": {
-		"enabled": false,
+		"enabled": true,
 		"size": 150
 	},
 
diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade
index e408b1a5..8503be40 100644
--- a/src/_h5ai/index.html.jade
+++ b/src/_h5ai/index.html.jade
@@ -13,7 +13,7 @@ html.no-js( lang="en" )
 		meta( name="viewport", content="width=device-width" )
 		link( rel="shortcut icon", href="client/images/app-16x16.ico" )
 		link( rel="apple-touch-icon", type="image/png", href="client/images/app-48x48.png" )
-		link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:300,400,700,300italic,400italic,700italic" )
+		link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic" )
 		link( rel="stylesheet", href="client/css/styles.css" )
 		script( src="client/js/scripts.js", data-mode="info" )
 
diff --git a/src/_h5ai/server/php/inc/page.php.jade b/src/_h5ai/server/php/inc/page.php.jade
index 71d8c00f..f1c94557 100644
--- a/src/_h5ai/server/php/inc/page.php.jade
+++ b/src/_h5ai/server/php/inc/page.php.jade
@@ -17,7 +17,7 @@ html.no-js( lang="en" )
 		meta( name="viewport", content="width=device-width" )
 		link( rel="shortcut icon", href!="#{href}client/images/app-16x16.ico" )
 		link( rel="apple-touch-icon", type="image/png", href!="#{href}client/images/app-48x48.png" )
-		link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:300,400,700,300italic,400italic,700italic" )
+		link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic" )
 		link( rel="stylesheet", href!="#{href}client/css/styles.css" )
 		script( src!="#{href}client/js/scripts.js" )