From 341b6aaa0770af5fb8c049bc21815743fcb26077 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sat, 30 Nov 2013 02:01:39 +0400
Subject: [PATCH] tuning editor layout...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiments/editor.html | 39 ++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/ui/experiments/editor.html b/ui/experiments/editor.html
index 35314bb0..a1b0ded0 100755
--- a/ui/experiments/editor.html
+++ b/ui/experiments/editor.html
@@ -3,8 +3,9 @@
 
 .panel {
 	display: inline-block;
-	width: 508px;
-	min-width: 500px;
+	min-width: 200px;
+	max-width: 450px;
+
 	border: solid 2px silver;
 	border-radius: 4px;
 
@@ -16,7 +17,6 @@
 }
 .panel summary {
 	padding-left: 3px;
-	/*background: #ddd;*/
 	background: silver
 }
 .panel summary::-webkit-details-marker {
@@ -42,7 +42,6 @@
 	background: white;
 }
 .panel details {
-	width: 500px;
 	margin: 3px;
 	border: solid 1px silver;
 	box-shadow: none;
@@ -64,20 +63,24 @@
 
 
 /* main controls */
+.panel .control {
+	white-space:nowrap;
+}
 .panel .control .title {
 	display: inline-block;
-	width: 100px;
-	/*margin-right: -80px;*/
+	width: 80px;
 	cursor: move;
 }
 .panel .control .slider {
 	-webkit-appearance: none !important;
-	width: 300px;
+	width: 200px;
 	height: 4px;
 	border: solid 1px gray;
 	border-radius: 2px;
 	background: silver;
 }
+.panel .control.at-default .slider {
+}
 .panel .control .slider::-webkit-slider-thumb {
 	-webkit-appearance: none !important;
 	height: 15px;
@@ -87,6 +90,9 @@
 	background: white;
 	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
 }
+.panel .control.at-default .slider::-webkit-slider-thumb {
+	opacity: 0.5;
+}
 .panel .control .value {
 	-webkit-appearance: none !important;
 	display: inline-block;
@@ -104,7 +110,7 @@
 }
 .panel .control .reset {
 	visibility: hidden;
-	border: none;
+	border: solid 1px transparent;
 }
 .panel .control:hover button.reset {
 	visibility: visible;
@@ -124,11 +130,23 @@
 	padding-right: 5px;
 	background: white;
 }
+.panel .state:active {
+	background: silver;
+}
+.panel .state.ui-draggable-dragging {
+	box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
+}
 .panel .states {
 	min-height: 30px;
 }
 
 
+/* misc */
+.panel hr {
+	border: none;
+	border-top: solid 1px silver;
+}
+
 
 </style>
 <script src="jquery.js"></script>
@@ -304,6 +322,11 @@ function makeAbsRange(text, filter, target, min, max, dfl, step, translate, norm
 			var val = this.valueAsNumber
 			value.val(val)
 			updateFilter(target, filter, translate(val))
+			if(parseFloat(val) == dfl){
+				elem.addClass('at-default')
+			} else {
+				elem.removeClass('at-default')
+			}
 		})
 		.appendTo(elem)
 	var value = $('<input type="number" class="value"/>')