color control styles

css/styles.css

@@ -1,28 +1,24 @@
 
+.cb-control * {
+	font-family: helvetica, arial, sans-serif;
+	font-size: 12px;
+}
+
 .cb-control {
 	color: #fff;
-	font-size: 12px;
 	background-color: #111;
 	padding: 10px;
 	position: fixed !important;
-	opacity: 0.95;
-}
-
-.cb-control.cb-floating {
-	margin: 5px;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-}
-
-.cb-control.cb-floating,
-#cb-toolbar {
-	border: 2px solid #444;
 	-webkit-box-shadow: 0 0 4px #000;
 	-moz-box-shadow: 0 0 4px #000;
 	box-shadow: 0 0 4px #000;
 }
 
+.cb-control label {
+	display: inline-block;
+	margin: 0 0 4px;
+}
+
 .cb-control.cb-navigate {
 	top: 0;
 	margin: 0;
@@ -46,17 +42,21 @@
 	background-image: url(../img/right.png);
 }
 
+.cb-option {
+	margin-bottom: 16px;
+}
+
+.cb-option:last-child {
+	margin-bottom: 0;
+}
+
 .ui-draggable {
 	cursor: move;
 }
 
 #cb-toolbar {
 	top: 0;
-	line-height: 42px;
-	border-top: none;
-	border-left: none;
-	border-right: none;
-	display: none;
+	border-bottom: 2px solid #444;
 }
 
 #cb-toolbar #cb-status {
@@ -130,6 +130,37 @@
 }
 
 #cb-color {
-	width: 200px;
-	height: 150px;
+	width: 246px;
+	top: 52px;
+	left: 136px;
+	z-index: 1;
+	border: 2px solid #444;
+	border-top: none;
+	-moz-border-radius-bottomleft: 16px;
+	-moz-border-radius-bottomright: 16px;
+	-webkit-border-bottom-left-radius: 16px;
+	-webkit-border-bottom-right-radius: 16px;
+	border-bottom-left-radius: 16px;
+	border-bottom-right-radius: 16px;
+}
+
+label[for="cb-desaturate"] {
+	padding: 4px;
+}
+
+#cb-desaturate {
+	float: left;
+}
+
+#cb-reset {
+	float: right;
+}
+
+#cb-reset {
+	background: transparent url(../img/iconic/white/reload_12x14.png) no-repeat left center;
+	padding-left: 16px;
+	height: 14px;
+	border: none;
+	color: #fff;
+	cursor: pointer;
 }

lib/ComicBook.js

@@ -158,6 +158,7 @@ function ComicBook(id, srcs, opts) {
 	ComicBook.prototype.control = {
 
 		toolbar: $(document.createElement("div"))
+			.hide()
 			.attr("id", "cb-toolbar")
 			.addClass("cb-control")
 			.append(
@@ -212,44 +213,47 @@ function ComicBook(id, srcs, opts) {
 		color: $(document.createElement("div"))
 			.attr("id", "cb-color")
 			.addClass("cb-control cb-floating")
-			.append("<label>brightness</label>")
-			.append($("<div id='cb-brightness'></div>").slider({
-				value: 0,
-				step: 10,
-				min: -1000,
-				max: 1000,
-				slide: function(event, ui) {
-					ComicBook.prototype.enhance.brightness({ brightness: ui.value });
-				}
-			}))
-			.append("<label>contrast</label>")
-			.append($("<div id='cb-contrast'></div>").slider({
-				value: 0,
-				step: 0.1,
-				min: 0,
-				max: 1,
-				slide: function(event, ui) {
-					ComicBook.prototype.enhance.brightness({ contrast: ui.value });
-				}
-			}))
-			.append("<label>sharpen</label>")
-			.append($("<div id='cb-sharpen'></div>").slider({
-				value: 0,
-				step: 0.1,
-				min: 0,
-				max: 1,
-				slide: function(event, ui) {
-					ComicBook.prototype.enhance.sharpen({ amount: ui.value });
-				}
-			}))
-			.append("<input type='checkbox' id='cb-desaturate' /> <label for='cb-desaturate'>Desaturate</label>")
-			.append("<button id='cb-reset' style='display:block'>reset</button>")
-			.css({
-				position: "absolute",
-				top: "40%",
-				left: "40%"
-			})
-			.draggable(),
+			.append("<label for='cb-sharpen'>Brightness</label>")
+			.append(
+				$("<div id='cb-brightness' class='cb-option'></div>").slider({
+					value: 0,
+					step: 10,
+					min: -1000,
+					max: 1000,
+					slide: function(event, ui) {
+						ComicBook.prototype.enhance.brightness({ brightness: ui.value });
+					}
+				})
+			)
+			.append("<label for='cb-sharpen'>Contrast</label>")
+			.append(
+				$("<div id='cb-contrast' class='cb-option'></div>").slider({
+					value: 0,
+					step: 0.1,
+					min: 0,
+					max: 1,
+					slide: function(event, ui) {
+						ComicBook.prototype.enhance.brightness({ contrast: ui.value });
+					}
+				})
+			)
+			.append("<label for='cb-sharpen'>Sharpen</label>")
+			.append(
+				$("<div id='cb-sharpen' class='cb-option'></div>").slider({
+					value: 0,
+					step: 0.1,
+					min: 0,
+					max: 1,
+					slide: function(event, ui) {
+						ComicBook.prototype.enhance.sharpen({ amount: ui.value });
+					}
+				})
+			)
+			.append(
+				$(document.createElement("div")).addClass("cb-option")
+					.append("<input type='checkbox' id='cb-desaturate' /> <label for='cb-desaturate'>Desaturate</label>")
+					.append("<button id='cb-reset'>reset</button>")
+			),
 
 		/**
 		 * Page navigation